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

朱婷婷, 魯 澴

(湖北生態(tài)工程職業(yè)技術學院，湖北 武漢 430200)

1 引言

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

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

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

2 教學分析

2.1 課程背景

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

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

2.2 學情分析

2.2.1 優(yōu)勢

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

2.2.2 不足

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

2.3 教材處理

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

2.4 教學目標

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

2.5 教學內容

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

3 教學策略

3.1 教學方法

3.1.1 教法

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

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

3.1.2 學法

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

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

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

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

3.2 教學資源

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

3.3 教學評價

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

3.4 課程思政

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

4 教學實施

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

4.1 環(huán)節(jié)1：需求分析

4.2 環(huán)節(jié)2：方案制定

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

4.3 環(huán)節(jié)3：結構編碼

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

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

4.4 環(huán)節(jié)4：布局美化

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

4.5 環(huán)節(jié)5：測試優(yōu)化

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

4.6 環(huán)節(jié)6：需求調整

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

4.7 環(huán)節(jié)7：驗收交付

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

5 教學特色與反思

5.1 教學特色

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

5.2 教學反思

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