基于Web前端設計課程教學在高職院校中的探索研究

鄧慈云 胡柳 吳瑤

摘要：大數據時代，高等職業院校對大數據技術與應用專業的相關課程正在不斷嘗試改革創新，試圖找到適合高職學生的教學方法和手段。本文分析了《Web前端設計》課程中存在的不足，提出了結合多種創新型教學模式的解決方案。通過實踐證明，該方法能夠有效提高教學水平。

關鍵詞：前端技術;高職院校;教學改革;課程教學

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）13-0102-02

Abstract： Big data， higher vocational colleges are constantly trying to reform and innovate courses related to Big data technology and application， trying to find teaching methods and means suitable for the college students. This article analyzes the deficiencies in the "Web Front-end Design" course， and proposes a solution combining a variety of innovative teaching modes. Practice has proved that this method can effectively improve the teaching level.

Key words：front-end technology;high vocational colleges; teaching reform; course; teaching

1引言

Web前端是創建Web頁面或App等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大?！禬eb前端設計》是我院大數據技術與應用專業中專業基礎課程之一，通過該門課程的教學，讓學生具備網頁設計與制作的能力，為后續數據采集和數據可視化的學習打下基礎。

2 教學現狀分析

我院在Web前端技術的教學過程中，主要存在三個方面的問題：1）教學模式單一;2）課堂教學時間固定;3）學生自制能力不足。

1） 教學模式單一

目前，我院大多數教師仍主要采用課堂教學，教學模式單一。出現這種現狀的原因是：首先，教師習慣于傳統的教學模式，思想固定。其次，Web前端設計課程是一門實踐性較強的課程。傳統教學模式下，在課堂上花費了大量的時間講授理論知識和實例演示。導致學生實踐的時間不足，編程能力提高速度慢。最后，教師的線上教學經驗不足，還處于積累階段。

2） 線上和線下教學結合度不夠

信息時代，線上和線下教學各有優劣。將兩者相結合的混合式教學模式，能夠很好地解決彼此帶來的不足。但是，在實際的教學過程中，存在線上和線下混合教學結合程度不夠。如何將線上教學和線下課堂有效的結合，而非簡單地將線上線下教學簡單的組合起來，直接影響到Web前端技術課程的教學質量。

3） 學生自制能力不足

學生在線上教學的過程中，教師缺乏對學生的有效管控，無法及時掌握學生的學習狀態。部分學生出現思想開小差或受到網絡等外界的影響，導致學習效率低下。造成這些現象的主要原因是：學生自制力不足，部分學生自身的專業基礎差，學習能力不強。

3 創新教學模式在教學中的應用

針對Web前端課程在教學過程中存在的問題，本文提出了采用“線上任務驅動教學+線下案例教學”的混合模式。首先，以市場需求為導向，通過對地方產業鏈和崗位技能需求進行分析。然后，針對高職學生的認知特點，重構課程內容。以企業的典型案例為載體，形成從簡單實例到復雜案例的系統化學習。最后，讓學生在遞進式案例教學過程中培養網頁設計與制作的綜合職業技能和職業素養。

1）構建思路

基于“線上任務驅動，線下案例教學”的混合模式中，整個課程教學分成三個階段：課前、課中和課后。（1）課前，線上讓學生提前了解項目模塊的劃分情況，模塊任務和所需技能，同時完成理論知識的自主學習。（2）課中，線下教師重點講解項目模塊中技術的重點難點，以及提升學生靈活運用知識的能力。（3）課后，下達模塊任務，讓學生自行完成實踐任務，鞏固所學的知識和技能。

2）課程設計思路

在Web前端技術課程中，采用線上任務驅動教學+線下案例教學的教學模式。首先，根據課程標準中知識點選取合適的案例來進行任務分解并組織線下教學。如專業學習網站，該網站的設計與實現囊括了本課程所學的所有知識：網頁基礎，圖文混排，表格和表單的應用，CSS美化頁面，多媒體頁面的制作，使用JavaScript實現頁面動態效果和交互性和使用 bootstrap框架開發快速建站的等內容。其次，教師對案例進行解剖，以知識點為基礎，進行模塊設計。同時，根據劃分的模塊，完成線上學生的實踐任務清單。案例模塊分解如表1所示。

3） 課程實施過程

整個教學實施過程中，首先，教師利用學習通等線上平臺提前建設課程資源，并向學生推送。然后，以小組為單位，每個小組設置一名組長。教師課堂上重點講解項目模塊中技術的重點難點。組長負責匯報小組學習和任務完成情況以及碰到的問題。針對這些問題開展討論、探討如何處理解決，以培養他們解決問題的能力。接下來，以小組為單位，線上下達模塊任務，任務下達后，組長完成任務分配、組織討論交流，讓學生自行完成實踐任務，鞏固所學的知識和技能。通過組員之間的相互督促，相互協助，培養他們的自主學習能力和團隊合作能力等技能。

4） 課程評價體系

在設計Web前端技術課程的考核標準中，減少了期末考試的比重，從原來的40%減少到30%;增加了平時成績的考核比重，從原來的60%增加到70%。平時成績包括線上完成學習、模塊任務和線下課堂成績兩個部分，各占一半。其中，線上成績包括線上課程學習10%，線上測評10%，模塊任務完成情況15%。線下成績包括課堂參與討論15%，隨堂測試10%，學生互評成績10%。成績比例的分布注重學生在模塊中任務的完成情況和自主學習的程度，同時還注重學生的自評和互評。

4 結束語

目前Web前端技術課程存在教學模式單一，線上和線下教學結合度不夠以及學生自制能力不足等問題。針對上述問題，提出了一種“線上任務驅動教學+線下案例教學”的混合模式教學模式。在該模式下，學生通過完成模塊任務，將理論知識用于實踐，專業技能得到了鞏固和強化，也給他們帶來了學習的成就感和滿足感。從而學生的學習自主性和積極性也有了明顯提高。

參考文獻：

[1] 馬睿.“互聯網+”背景下的Web前端開發課程教學模式的探討[J].計算機產品與流通，2020（10）：202.

[2] 李永鋒.應用型本科院校軟件技術類課程的教學實踐研究[J].計算機教育，2019（12）：117-121.

[3] 吳鴻韜，李智，袁玉倩.基于OBE理念的Web前端開發技術課程教學改革[J].計算機教育，2019（11）：91-93，98.

[4]孟瑤，葛玉潔，王康，馬雨琪.“Web前端開發技術”課程微課設計研究[J].計算機時代，2019（3）：82-84.

【通聯編輯：王力】