基于創(chuàng)新能力培養(yǎng)的高職Web前端課程教學改革探索

徐好芹 韓慧杰

摘要：隨著互聯(lián)網技術的不斷更新，Web前端課程越來越受歡迎。結合高職院校學生特點，探索了基于創(chuàng)新能力培養(yǎng)的Web前端課堂教學改革思路，主要分析了創(chuàng)新教學內容，教學模式、教學方法，創(chuàng)新教學環(huán)節(jié)，創(chuàng)新能力教師和教學反饋幾個關鍵因素，結合教學實踐，進行對比分析，這種教學改革思路有利于激發(fā)學生學習興趣，培養(yǎng)學生創(chuàng)新能力。

關鍵詞：創(chuàng)新能力; Web前端 ;教學改革

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

文章編號：1009-3044（2021）02-0086-03

受互聯(lián)網快速發(fā)展的沖擊，近幾年Web前端技術發(fā)展迅速，前端工程師崗位火熱并相對緊缺，受教育部地方高校轉型發(fā)展的號召，高校課程建設緊跟社會需求，并在不斷進行積極調整，Web前端課程也逐漸納入專業(yè)課程體系，但是許多高校教學內容仍然相對落后，學生在校只是掌握了一些基礎的知識，核心知識比較薄弱，不重視代碼規(guī)范，基礎性的原理理解不深刻，導致學生畢業(yè)后不能靈活應用，無法設計出好的前端作品。

高職院校開設Web前端課程相對較晚，課程體系設置不夠合理，對口的專業(yè)教師不足，授課教師前端經驗較弱，再加上人才培養(yǎng)方案里面課時受限、教師對教學要求較低等各種因素的影響，高職學生在校學習到的前端知識，主要是學會了一些基本的HTML標簽，基礎的CSS樣式，再加上些許的JavaScript知識，只能做出相對比較容易的前端頁面，而且做出的頁面效果比較粗糙簡單，存在代碼不規(guī)范、頁面不完整、細節(jié)問題較多等問題。

另外，高職學生雖然基礎相對薄弱，惰性較大，自主學習能力相對不高，但是高職學生性格相對比較活躍，心智也已經相對成熟，而且高職學生也已經具備一定的探索能力，只要方法得當，也會比較容易受到引導。Web前端課程，學習初期見效比較快，而且難度較低，所以入門相對容易，比較容易激發(fā)學生的學習興趣。只要課程內容安排合理，教師引導到位，高職學生完全可以熟練掌握Web前端相關技術技能。

1 基于創(chuàng)新能力培養(yǎng)的課堂教學改革思路

1.1創(chuàng)新教學內容

Web前端所涉及的課程既重視技術又兼具設計，是可以通過代碼設計出優(yōu)美界面，并且可以增強用戶體驗的一項技能，比如學生在初步學習了HTML就可以設計出相當美觀的圖文混排頁面，再學一些CSS樣式，就可以設計出各種網頁排版，甚至多少了解一些CSS3動畫就能夠設計出一些網頁動態(tài)特效，僅僅一學期下來學生就可以獨立設計出一個完整的網站，獲得很大的成就感，因此，教師首先在授課內容上一定要層層遞進，創(chuàng)新教學案例和內容。

（1）精心篩選授課內容，避免泛而不精，切忌教學目標不明確，重點內容不突出。就HTML標簽來說，HTML5新增了許多，并不一定都要講，課堂講主要的內容，遵從“必須，夠用”原則，許多不常用的標簽可以作為課后學生自我學習的一個擴展。

（2）案例新穎。前端課程即便是在剛開始僅僅學習了幾個HTML標簽，也是可以設計出美觀的案例的，因此教師在授課過程中要精選素材，精心設置案例，多上網查看，搜尋實用且真實的網頁素材[1]，每次案例的呈現(xiàn)都要讓學生有耳目一新的感受，每次做完一個案例都要讓學生有一定的成就感。

1.2靈活的教學模式，可行的教學方法

Web前端課程實踐性強，對學生動手能力要求較高，學生只有通過多敲代碼、多動手制作案例，才能真正掌握其相關技能，學生在不斷的嘗試和探索過程中也可以逐步獲取成就感，因此教師在授課過程中要以學生為中心，應根據(jù)授課內容靈活地選擇合適的授課模式和授課方法。

（1）靈活的教學模式

以“教-學-做”教學模式為主。授課過程主要采用邊講邊練方式，每節(jié)課連續(xù)講授時間控制在25分鐘左右，每講一個知識點一定要讓學生動手練習，通過練習，從直觀上理解知識的使用，從而達到“學中做，做中學”。如果是案例，教師可以先分析演示，然后由學生進行動手練習，在規(guī)定時間內由學生獨立完成案例并將作品上傳至教師機或網絡空間，之后教師可以在全班進行學生作品展示，展示的目的一個是鼓勵學生，激發(fā)學生學習動力，另一個要對學生出現(xiàn)的問題及時進行反饋，對于共性問題，可以再進行集中講解，加強學生印象，展示之后要督促學生針對自己作品的不足進行及時的更新。

以“線上線下混合式”教學模式為輔[3]。線上課程由于其不受地點、時間的限制等特點，可以成為日常教學的有益補充。日常教學中可以讓學生通過線上教學視頻進行預習，而對于課堂上講解到比較重要或者比較難的知識點時，教師可以錄制補充視頻，發(fā)布網上，學生可以利用課下時間，進行復習鞏固。在授課過程中，對于有些有代表性的知識點或案例，在學生具有一定相關學習經驗的前提下，可以挑選部分學生進行講解，講解過程，鼓勵學生大膽說出自己的想法，通過組織學生講授，進一步提高學生對知識點在深度和應用的理解，同時提升學生學習自信心。

（2）可行的教學方法

日常教學以任務驅動教學法為主，前端效果在網上隨處可見，教師授課過程可以直接打開瀏覽器找一些有代表性的網站，讓學生理解學習要達到的目標，并且在網上找現(xiàn)成的案例，通過分析真實是網站效果，并利用所學的知識將其實現(xiàn)，可以讓學生很直觀的明白知識點的具體應用。教師通過美觀且實用的任務案例激發(fā)學生學習興趣，教師在講解案例過程中注意引導學生同樣的效果實現(xiàn)方法可以有多種，不要限制學生的思維，學生通過案例練習加強對知識點的理解和應用，鼓勵學生在制作案例的過程中多進行各種嘗試。

階段復習以項目驅動教學法為主，教學進度應該張弛有度，比如學生學習完HTML標簽，學習完CSS樣式，都要分別進行一個階段復習，復習不僅是對知識點的歸納，更應該有一個更加綜合的真實項目來支撐，通過項目驅動的方式進行階段復習，提高學生綜合應用能力。

1.3 創(chuàng)新教學環(huán)節(jié)

為了檢驗學生的階段學習效果，加強學生實際應用能力，因此在一門課程每個模塊內容結束之后，可以布置一項由學生自我設計完成的網頁作品，教師可以限定主題也可以不限定主題，根據(jù)學生已學習內容情況給出一定的要求，向學生說明網頁制作從選題、找素材到制作的方法步驟，重點讓學生自我發(fā)揮，將學生創(chuàng)新能力培養(yǎng)貫穿在日常教學過程中。

在一個完整的學習階段結束后有必要組織一場與前端設計有關的大賽，讓學生將所學知識轉化成作品，再通過比賽的方式進行展示，在此過程不僅提高學生知識的綜合運用能力，也提高學生交流溝通，以及自主學習和探究能力，最終達到提升學生創(chuàng)新能力和綜合素養(yǎng)的教學目的。

下面表1是學生學習各階段涉及前端教學的主干課程和階段結束可以開展的比賽項目。

1.4具備創(chuàng)新精神和領導能力的教師

要想提高學生的創(chuàng)新能力，作為教學主導地位的教師首先必須具備一定的創(chuàng)新精神，只有教師具有創(chuàng)新精神，才能使得創(chuàng)新教學內容成為可能，才能靈活地實施教學模式。教師對教學內容的講授應該有解構和重構的能力，另外教師不僅需要具備創(chuàng)新精神，也需要具備一定的領導能力[4]，比如教師需要具備較好的教學管理能力、教學改革能力，具備一定的專業(yè)建設能力，教師通過優(yōu)秀的個人魅力感染學生，通過深厚的專業(yè)知識引領學生，以期達到最終的教學效果。

1.5 合理有效的教學反饋和考核機制

高職學生自制能力相對不高，為了保證學生整體學習效果，必須有合理有效的教學反饋和考核機制作保障，日常教學可根據(jù)教學情況每周或者每階段進行小測，根據(jù)學生測試情況，及時了解學生情況，并做教學反饋。教學考核要從之前的重期末考核轉變?yōu)槿粘５倪^程性考核為主[2]，重視學生日常學習表現(xiàn)和階段學習效果，比如課程最終考核成績可以考勤5%，日常作業(yè)占15%，線上學習10%，階段自主項目20%，期末網站設計30%，期末考試20%。通過全方位的過程性考核，更加合理全面地對學生學習效果進行評價，以達到激發(fā)學生學習興趣，激勵學生不斷進步的教學目的。

2 Web前端課程教學探索

為了檢驗創(chuàng)新能力教學改革的效果，本學期通過對18級計算機應用技術專業(yè)4個教學班進行了對比試驗，這4個班級是平行班級，學生整體上基礎相當，人數(shù)相當，在本次教學探索中，1-2班為參照班級，4-5班為試點班級，該學期學生同時開設《Web前端設計》課程，我校《Web前端設計》課程在中國大學MOOC上線開放，為學生線上學習提供了有效的平臺支持，兩組教學班各項對比項目如表2。

通過一學期的教學對比，試點班級學生對前端課程學習勁頭較大，通過線上課程也學到了一些擴展內容，表示很想繼續(xù)學習后續(xù)課程，而對比班級學生表示課程太難，學不會，對后續(xù)課程沒有太多期望。由教學對比結果可以得出以下幾點結論。

1）教師創(chuàng)新能力和領導力對學生創(chuàng)新能力培養(yǎng)起關鍵作用

作為一個教師不僅是在課堂上傳授知識，更重要的是要對學生起到一個引領作用，一個有創(chuàng)新意識的老師，在課堂上應該通過自己的豐富的專業(yè)知識和有效的教學方法，讓學生學到扎實的專業(yè)知識，也要通過自己有意識的創(chuàng)新能力引導，感染學生，讓學生獲取創(chuàng)新的勇氣和探索的動力。

2）線上線下混合式教學模式有利于擴展學生知識面，激發(fā)學生學習興趣

對于學習狀態(tài)較好的學生通過自主學習線上視頻，可以彌補面授課程時間有限、知識點講解有限等問題，甚至可以通過線上課程實現(xiàn)超前學習，擴展學習內容。而對于課堂教學過程中學習效果不好的學生，可以通過課后觀看線上視頻鞏固學習內容。在采用線上教學方式時，切忌盲目，高職學生整體上自制能力有待提高[5]，所以教師要提前做好組織工作，重點內容仍然要通過面授方式對學生進行系統(tǒng)講解，及時檢查學生學習效果，讓線上教學成為日常教學的有益補充。

3）課內自主項目及階段綜合項目是提升學生創(chuàng)新能力的重要手段

貫穿在課程教學中的課內自主項目，可以將學生創(chuàng)新能力培養(yǎng)滲透在日常教學中，通過不斷的創(chuàng)新意識激勵，使學生逐漸養(yǎng)成善于思考，敢于創(chuàng)新的自主學習能力。課內逐步遞增的自主項目環(huán)節(jié)是課程結束進行階段綜合項目做基礎，可以為綜合項目的完成提供有力的階段性支持。階段綜合項目對學生知識綜合應用能力和創(chuàng)新能力的有更高的要求，學生在綜合項目制作初期，會有非常多的問題的，所以在這個階段，需要老師做好引導工作，給學生講解一定的方法，先讓學生進行適度的練習，再開始進行，鼓勵學生有問題多和同學老師溝通交流，教師也多詢問學生項目進展情況，對于他們遇到的困難及時給予回應。另一方面階段項目最后一定要有一個學生自我展示環(huán)節(jié)。

通過教學探索，發(fā)現(xiàn)在階段綜合項目進行過程中，學生雖然問題和困難很多，但是每當參與一次項目制作，對學生的整體學習能力和自信心都有很大的提高，也是培養(yǎng)和提高學生創(chuàng)新能力的一次實戰(zhàn)演練。

3 結論及展望

本文通過分析當前高職院校Web前端課程開設情況，提出了基于學生創(chuàng)新能力培養(yǎng)的前端課程改革探索思路，并在本校進行了初步試驗，試驗結果證明了這種改革思路的有效性。由于這種改革思路對教師要求較高，在教學的同時也要做好學生思想工作，今后會將這種教學改革方法進行擴展，擴展到其他班級和其他專業(yè)，更加全面的培養(yǎng)學生的創(chuàng)新能力，鞏固學生的專業(yè)技能和職業(yè)素養(yǎng)。

參考文獻：

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

[2] 顏慧佳.基于“前端工程師”崗位班的創(chuàng)新教學改革與實踐[J].計算機教育，2018（9）：160-163.

[3] 陳永平. “互聯(lián)網+”環(huán)境下高職傳統(tǒng)教學、MOOC與SPOC融合教學質量評價指標體系構建[J].職教論壇，2019（07）：64-72.

[4] 邵建東. 高職教師領導力：內涵、價值及發(fā)展路徑[J].江蘇高教，2018（10）：72-76.

[5] 譚永平，鐘暢武，韋柳絲，等. 高職院校實施混合式教學改革的策略研究[J].中國職業(yè)技術教育，2019（2）：30-33.

[6] 王文軒. 混合教學模式下 高職學生自主學習能力培養(yǎng)的實證研究[J].中國職業(yè)技術教育，2018（35）：10-15.

【通聯(lián)編輯：光文玲】