基于提升教師教學能力的高職課程改革探索
——以《HTML+CSS網頁設計》課程為例

朱婷婷, 魯 澴

(湖北生態工程職業技術學院，湖北 武漢 430200)

1 引言

湖北省高職院校信息化教學能力大賽在2019年比賽名稱更改為湖北省高職院校教師教學能力大賽，比賽規則也做出了重大調整，將原來的教學設計、課程教學、實訓教學3個賽項合并成2個賽項即課堂教學和實訓教學。要求參賽教師具備更強的教學綜合能力。同時2019年把該賽項獲獎納入“雙高”計劃學校申報條件中，各高職院校對該賽項省賽沖國賽的重視程度日漸增加。

以2019年湖北省職業院校教學能力大賽獲獎作品《HTML+CSS網頁設計》教學設計為例，本文從教學分析、教學策略、教學實施、反思與改進4個方面探究當今時代高職院校課程信息化教學改革實施策略。

教學內容選自計算機應用技術專業核心課程《HTML+CSS網頁設計》，開設于第1學期。該課程總共有64學時，依據網頁前端設計重構課程內容，把課程內容劃分為5個項目。其中“網頁導航列表項及Z-index網頁層級的運用”選自本課程的項目五，任務1，共4學時。

2 教學分析

2.1 課程背景

HTML+CSS網頁設計是計算機應用技術專業大一上學期課程，學生通過前期的學習已經具備了計算機應用基礎及photoshop圖像處理知識；通過本課程的學習能夠完成靜態網頁的制作；為后期JSP動態網頁設計打下堅實的基礎。

本次課程任務：網頁導航列表項及Z-index網頁層級的運用，是網頁布局定位的核心技能。學生已經掌握了基本的網頁框架、文字圖像、鏈接、背景的添加，通過本次定位樣式的學習能夠進一步提升網頁布局的優化。

2.2 學情分析

2.2.1 優勢

高職一年級學生好奇心強，有一定的自主學習和動手能力。已經掌握了HTML網頁基本框架搭建，能夠運用CSS文本、圖片及超鏈接來美化網頁。

2.2.2 不足

通過云課堂的練習及測試結果分析，發現學生在代碼學習過程中易錯點多且易混淆，代碼學習效率低，需要多次練習和補充講解才能掌握。缺乏科學的網頁布局思維，重機械記憶輕融會貫通，代碼的靈活運用舉一反三的能力較弱。

2.3 教材處理

選用《HTML+CSS前端技術》校企合作教材作為輔助教材，結合課程性質和前端工程師崗位要求，教師分析總結把課程劃分為5個項目12個子任務，采用任務驅動法進行教學。教師配套提供豐富、高質的慕課網、微課、項目實戰資源庫。

2.4 教學目標

參考教育部的專業教學標準，對接該校人才培養計劃及課程標準，接軌前端工程師職業標準和商業網站開發流程；根據崗位需求和學情分析制定三維教學目標。

2.5 教學內容

根據項目任務式教學法，把本次項目“HTML定位樣式的運用”，劃分為2個子任務，本次教學任務為，任務1：網頁導航列表項及Z-index網頁層級的運用。依據前端工程師崗位標準結合商業網站開發流程，把本次任務1劃分為7個環節，貫徹課前課中課后。按照“課前自學，課中鞏固，課后拓展”三部分實施教學。

3 教學策略

3.1 教學方法

3.1.1 教法

(1)任務驅動法。采用真實的網站任務“京東首頁側導航欄及廣告模塊的制作”來進行教學，通過完成任務來學習鞏固內化知識點和技能點。

(2)情景教學法。結合前端工程師崗位工作標準和要求，小組分工協作，按照商業網站開發流程完成任務。

3.1.2 學法

以色列學者斯塔維（Stavy）教授提出，直覺規律有強大的預測功能，可以預測學生在學習中的錯誤。[6]因此，教師可以通過直覺規律，在認識了學生做題時的思考過程的基礎上，預測學生在做相類似的題目時可能會出現的錯誤，如根據小數比較中“越長越大”的錯誤，教師可以大膽地預測學生在學習與比較小數大小相類似的知識，如分數、代數式、負數等的大小比較時可能也會出現類似的錯誤，并根據預測有針對性地設計相關的學習活動，在活動中培養學生的批判性思維和自主探究能力等，同時減少錯誤的發生。

(1)自主探究。通過云課堂課前自學交流、課中討論總結、課后溝通交流的形式自主學習探究。

(2)小組協作。根據企業網頁設計開發項目小組的形式，學生分組分角色成立項目小組，共同協作完成任務。

(3)實戰訓練。學生通過完成真實的網站開發案例“京東首頁側導航欄及廣告模塊的制作”任務案例進行實戰訓練。

3.2 教學資源

教師課前發布自學資源到云課堂APP，學生通過教師提供的慕課網資源、導學PPT、微課解析視頻以及優秀網站案例資源包來完成課前自學任務。課中教師解疑惑，學生進入自主開發的智慧平臺進行知識點專項練習，平臺PK賽來鞏固知識點。提供昵圖網圖片素材庫供學生進行網頁設計。

3.3 教學評價

通過云課堂和智慧平臺經驗值的方式，對學生的學習過程、測驗、練習、作業進行全過程的記錄并評分；教師通過云課堂對學生學習的效果及參與度進行評分；企業也可以在線點評打分；學生通過自評互評完成自我反思及學習。多終端、多角度、全過程的記錄了學生整個學習過程的評價。

3.4 課程思政

項目小組分角色的方式共同完成課程項目網站的編碼設計，有助于學生養成團隊合作精神。測試優化環節要求學生對待工作養成精益求精的大國工匠精神，培養學生敬業愛國的情懷。

4 教學實施

采用真實的任務案例：京東首頁側導航欄及廣告模塊的制作，結合網頁前端工程師工作要求和商業網站開發流程，把本次任務劃分為以下7個環節。

4.1 環節1：需求分析

4.2 環節2：方案制定

教師對各小組匯報的方案進行點評，補充講解優秀網頁案例，輔導各小組完成方案優化和網頁設計稿的繪制。本環節項目匯報可以鍛煉學生在未來工作中跟客戶匯報方案的表達能力，小組分工協作鍛煉學生的團隊協作能力。

4.3 環節3：結構編碼

教師通過對云課堂數據、學生提出疑問的分析得出教學重點：網頁列表項的運用。本環節教師結合課前學習情況及測試結果進行任務答疑講解；引導學生進入智慧平臺加強練習；教師再根據智慧平臺練習結果進行問題點的補充講解。發起隨堂小組PK賽進一步鞏固難點；輔導各小組完成網頁設計稿的解構編碼。

學生根據教師的答疑講解，理解內化知識點。智慧平臺的練習、PK賽鞏固難點。小組合作完成京東首頁模塊設計稿的編碼。自主開發的智慧平臺，模塊齊全，交互功能完善；可視化的效果解決了代碼學習過程中代碼繁多易混淆，學生編碼困難的問題。解決了傳統編碼教學過程中教師隨堂編碼速度慢，效率低的問題，更豐富的案例練習，提升教學效果。

4.4 環節4：布局美化

通過對學生學習情況的智慧平臺數據分析，發現學生在網頁圖層關系容易犯錯，由此調整本次任務的教學難點為：網頁圖層的優先級。在以下環節中通過頭腦風暴討論總結、思維導圖強化知識點、微課錯誤解析補充講解，從而解決教學難點：引導學生進行智慧平臺學習布局新標簽Z-index的使用。云課堂發布頭腦風暴:如何解決網頁布局圖層的優先級問題。引導學生繪制思維導圖，完成本次課程知識點的梳理和鞏固，教師總結講解。教師輔導各小組運用學習的新標簽語法完成布局的美化。頭腦風暴激發學生思考，使學生會思考、能討論、會總結。思維導圖對本次任務學習的知識點進行系統梳理和鞏固理解。

4.5 環節5：測試優化

教師查看學生作品并進行評分點評；云課堂發布解析微課視頻，補充講解典型問題，教師進行任務隨堂總結。學生上傳作品到智慧平臺生產鏈接互相查看測試，完成自評互評；觀看微課解析視頻自主糾錯優化代碼；學生上傳作品生成鏈接互相查看提升職業認同感。微課解析視頻有針對性，提高教學效率。

4.6 環節6：需求調整

教師根據網站實際開發中需求調整的工作要求，發布3個由易到難的需求調整任務；學生根據學習情況選擇一個合適的任務完成調整。邀請專家針對學生上傳的作品進行點評評分，并輔導各小組完善優化需求方案的調整。學生上傳作品到云課堂平臺，查看專家點評并優化方案；專家點評代表具有客觀性，代表了行業的標準，給出的意見貼切客戶的需求。

4.7 環節7：驗收交付

教師針對學生上傳的最終的網頁編碼作品進行點評評分。學生再次優化上傳優化后的作品完成最終的驗收交付。驗收交付是網站設計中最后一個環節。

5 教學特色與反思

5.1 教學特色

自主開發的智慧平臺，模塊齊全，交互功能完善；可視化的效果解決了學生代碼學習過程中代碼繁多易混淆、編碼困難的問題。解決了傳統編碼教學過程中教師隨堂編碼速度慢、效率低的問題，更豐富的案例練習提升教學效果。云課堂APP對學生學習全過程的記錄為教學設計提供科學的依據。思維導圖對知識點的梳理和分類使學生明語法、懂運用，能記憶。

5.2 教學反思

云課堂和自主開發的智慧平臺均采用經驗值的方式來記錄學生全過程的評價分數，如何進行兩個平臺的數據對接，使評價過程體系更加智能化；全面貫徹對接“1+X”證書試點知識點是接下來需要思考的地方。