朱婷婷, 魯 澴

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

1 引言

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

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

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

2 教學(xué)分析

2.1 課程背景

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

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

2.2 學(xué)情分析

2.2.1 優(yōu)勢

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

2.2.2 不足

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

2.3 教材處理

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

2.4 教學(xué)目標(biāo)

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

2.5 教學(xué)內(nèi)容

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

3 教學(xué)策略

3.1 教學(xué)方法

3.1.1 教法

(1)任務(wù)驅(qū)動法。采用真實的網(wǎng)站任務(wù)“京東首頁側(cè)導(dǎo)航欄及廣告模塊的制作”來進行教學(xué)，通過完成任務(wù)來學(xué)習(xí)鞏固內(nèi)化知識點和技能點。

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

3.1.2 學(xué)法

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

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

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

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

3.2 教學(xué)資源

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

3.3 教學(xué)評價

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

3.4 課程思政

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

4 教學(xué)實施

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 教學(xué)特色與反思

5.1 教學(xué)特色

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

5.2 教學(xué)反思

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