《Html5網(wǎng)頁設(shè)計》教學(xué)實施報告

劉青玲

摘要：《Html5網(wǎng)頁設(shè)計》課程是高校計算機類專業(yè)開設(shè)的一門專業(yè)課程，本文從該課程內(nèi)容中選取其中兩個模塊的教學(xué)內(nèi)容，從教學(xué)分析、教學(xué)策略、教學(xué)實施、成效與特色、反思與改進等方面進行剖析。

關(guān)鍵詞：教學(xué)實施;課程思政;雙項目并行

《HTML5網(wǎng)頁設(shè)計》是我院移動互聯(lián)應(yīng)用技術(shù)專業(yè)的一門專業(yè)核心課程，本次教學(xué)面向的是移動互聯(lián)應(yīng)用技術(shù)專業(yè)大二年級的學(xué)生，本專業(yè)主要面向軟件和信息技術(shù)服務(wù)業(yè)的嵌入式系統(tǒng)設(shè)計工程技術(shù)人員、計算機程序設(shè)計員等職業(yè)群，培養(yǎng)能夠從事移動互聯(lián)應(yīng)用程序開發(fā)、移動互聯(lián)應(yīng)用硬件開發(fā)、web前端開發(fā)、移動互聯(lián)應(yīng)用技術(shù)支持等工作的高素質(zhì)技術(shù)技能型人才。

一、教學(xué)分析

（一）課程定位

《HTML5網(wǎng)頁設(shè)計》課程是移動互聯(lián)應(yīng)用技術(shù)專業(yè)必修的一門專業(yè)核心課程，其前導(dǎo)課程為《移動應(yīng)用UI設(shè)計》課程，學(xué)生基本具備用戶界面相關(guān)元素的設(shè)計、整體風(fēng)格設(shè)計及用戶體驗設(shè)計能力。本課程對接專業(yè)人才培養(yǎng)目標(biāo)，面向Web前端開發(fā)工作崗位，通過對 HTML5、CSS3 等內(nèi)容的學(xué)習(xí)，培養(yǎng)學(xué)生網(wǎng)頁設(shè)計與制作能力，為后續(xù)《JavaScript語言程序設(shè)計》、《Web前端開發(fā)》等課程學(xué)習(xí)奠定基礎(chǔ)（見圖1）。

（二）教學(xué)內(nèi)容

依據(jù)移動互聯(lián)應(yīng)用技術(shù)專業(yè)人才培養(yǎng)方案、《Html5網(wǎng)頁設(shè)計》課程標(biāo)準(zhǔn)，根據(jù)Web前端開發(fā)工程師崗位需求，按照國家1+X證書政策要求，校企共同探討，堅持“理論知識夠用為度、注重學(xué)生技能培養(yǎng)”的教學(xué)原則，遵循學(xué)生認(rèn)知規(guī)律，由易到難，層層遞進，將課程教學(xué)內(nèi)容整合為“HTML基礎(chǔ)”、“CSS基礎(chǔ)”、“網(wǎng)頁布局”、“CSS3高級”、“JavaScript特效”等5大模塊，共計 64 學(xué)時（見圖2）。

本次教學(xué)實施主要選取了選自課程五大模塊中的模塊三網(wǎng)頁布局和模塊四CSS3高級的教學(xué)內(nèi)容，共計16學(xué)時，采取課內(nèi)、課外項目并行的雙項目驅(qū)動教學(xué)模式。課內(nèi)項目選擇在線真實網(wǎng)站——“貓先生”社區(qū)環(huán)境管家官網(wǎng)，課外項目則由學(xué)生自主選題，分組實施完成項目開發(fā)（見圖3）。

（三）教學(xué)目標(biāo)

通過模塊三和模塊四的學(xué)習(xí)，突破教學(xué)重、難點，實現(xiàn)相應(yīng)的知識目標(biāo)、能力目標(biāo)和素質(zhì)目標(biāo)（見表1）。

（四）教學(xué)背景

1.響應(yīng)教育部關(guān)于疫情期間“停課不停教、不停學(xué)”號召，充分利用在線教育平臺和資源開展線上課程教學(xué)。

2.《中國移動互聯(lián)網(wǎng)發(fā)展報告（2019）》指出我國寬帶移動通信網(wǎng)絡(luò)、用戶、業(yè)務(wù)繼續(xù)保持高速增長態(tài)勢，移動端網(wǎng)頁訪問流量超過PC端，并逐年上升。

3. 2020年是生活垃圾分類工作推進的關(guān)鍵一年，全面滲透綠色環(huán)保的生活理念，健康生活。

4. 2020年是脫貧攻堅年，疫情期間，嚴(yán)重影響各地農(nóng)產(chǎn)品銷售，利用專業(yè)知識愛心助農(nóng)，幫助農(nóng)民走出困境，擺脫貧困。

（五）學(xué)情分析

本課程授課對象為移動互聯(lián)應(yīng)用技術(shù)專業(yè)二年級學(xué)生，學(xué)生具有以下特點：

（1）通過本課程前期的學(xué)習(xí)，掌握了HTML和CSS基礎(chǔ)知識。

（2）對Web前端開發(fā)具有較強的職業(yè)認(rèn)同感，動手能力強、善于接受信息化教學(xué)手段、思維活躍。

（3）英語水平偏低，部分學(xué)生沒有電腦，編碼難度偏大。

（4）頁面美觀性及代碼規(guī)范性方面仍有所欠缺。

二、教學(xué)策略

（一）教學(xué)設(shè)計思路

以Web前端開發(fā)綜合應(yīng)用能力培養(yǎng)為主線，針對高職教育特點，在課程體系上以“應(yīng)用”為主旨，在課程內(nèi)容上以“必須、夠用”為度，采用“理實一體化”、“課內(nèi)、課外雙項目并行”的教學(xué)模式，將思政教育融入到專業(yè)課程教學(xué)過程中，注重學(xué)生職業(yè)素養(yǎng)、專業(yè)技能及學(xué)生德育能力的提升。

在課內(nèi)教學(xué)實施過程中，引入真實的項目案例，以仿“貓先生”社區(qū)環(huán)境管家官網(wǎng)首頁為典型工作任務(wù)，有機融合信息化手段、教學(xué)資源、教學(xué)方法，將整個項目進行任務(wù)分解，由易到難，層層遞進最終實現(xiàn)整個項目的制作。通過高保真還原“貓先生”社區(qū)環(huán)境管家官網(wǎng)首頁真實項目，培養(yǎng)學(xué)生精益求精的工匠精神，同時向?qū)W生宣傳垃圾分類、綠色環(huán)保的生活理念。

為了幫助學(xué)生更好地鞏固和運用所學(xué)知識，熟悉項目開發(fā)流程，要求學(xué)生分組完成課外真實項目開發(fā)，培養(yǎng)學(xué)生團隊協(xié)作意識，提高學(xué)生知識運用能力和社會服務(wù)能力。

（二）教學(xué)方法與手段

結(jié)合學(xué)情分析，主要采用項目導(dǎo)向、任務(wù)驅(qū)動、實驗探究、分組教學(xué)等等教學(xué)方法實施課程教學(xué)，在教學(xué)過程中融入企業(yè)項目開發(fā)流程，以循序漸進為前提，充分發(fā)揮教師的引領(lǐng)作用，強化課堂合作學(xué)習(xí)，突出以學(xué)生為主體。

教學(xué)實施過程中，引入ARCS動機模型，提升學(xué)習(xí)的積極性，通過選取真實項目，引起學(xué)生注意，讓學(xué)生感受到學(xué)有所用，提升學(xué)習(xí)自信心，從而獲得滿足感，同時將思政教育融入課程教學(xué)，真正實現(xiàn)教書育人。

（三）教學(xué)環(huán)境與資源

選用高職高專名校名師精品“十三五”規(guī)劃教材，充分利用網(wǎng)易云課堂、學(xué)銀在線的相關(guān)課程資源，通過超星學(xué)習(xí)通、騰訊會議等豐富的信息化教學(xué)平臺，精心錄制教學(xué)視頻，認(rèn)真準(zhǔn)備教學(xué)資料，將知識點的學(xué)習(xí)融入到真實項目案例效果實現(xiàn)中，通過超星學(xué)習(xí)通平臺進行教學(xué)資料的發(fā)放、了解學(xué)生學(xué)習(xí)進度及效果，借助騰訊會議進行課堂直播，同時自建學(xué)銀慕課吸引更多的學(xué)習(xí)者，擴大課程影響力。

（四）教學(xué)評價

為了更好地、全面地進行課程教學(xué)效果評價，教師團隊與校企的Web前端工程師共同制定評價標(biāo)準(zhǔn)，基于超星平臺，構(gòu)建多元評價體系，從知識、技能、素養(yǎng)多維度考核評價。

考核方式主要采取過程形成性考核、項目考核、終結(jié)性考核相結(jié)合的方式，采用教師評、學(xué)生互評、組間評、企業(yè)評等多維度評價相結(jié)合，按照權(quán)值綜合各項考核結(jié)果，形成最終的課程成績（見表2）。

三、教學(xué)實施

本課程主要通過線上、線下相結(jié)合的授課方式，整個教學(xué)實施過程分為課前準(zhǔn)備、課中實施和課后鞏固三個階段（見圖4）。

現(xiàn)以模塊四中的一個子任務(wù)8——“綠色環(huán)保”響應(yīng)式布局效果實現(xiàn)為例，闡述一次課（90分鐘）的教學(xué)實施過程，學(xué)生通過學(xué)習(xí)，掌握響應(yīng)式布局這一教學(xué)內(nèi)容。

（一）課前階段

教師利用超星平臺，推送學(xué)習(xí)資源，發(fā)布課前任務(wù)，學(xué)生完成課前預(yù)習(xí)及課前測，帶著問題進入課堂。

（二）課中階段

1.環(huán)節(jié)一：復(fù)習(xí)回顧

學(xué)生代表上臺進行課外綜合項目實施進展匯報，分享實施過程中遇到的困難及收獲，老師對課外項目實施及課內(nèi)項目完成情況進行點評，復(fù)習(xí)、回顧上次課所學(xué)內(nèi)容，并進行難點講解。教師依據(jù)問卷調(diào)查及課前作品抽樣檢查，了解學(xué)情，對課前任務(wù)完成情況進行整體分析。

2.環(huán)節(jié)二：問題引入

通過“搖一搖”選人，引導(dǎo)學(xué)生分析“貓先生”社區(qū)環(huán)境管家首頁及“綠色環(huán)保”頁面在PC端和移動端顯示效果的不同，明確學(xué)習(xí)目標(biāo)。

3.環(huán)節(jié)三：確定任務(wù)

教師對任務(wù)的優(yōu)化完善提出明確要求，確定本次課學(xué)習(xí)內(nèi)容——響應(yīng)式布局，明確本次課任務(wù)要求——修改元素尺寸單位，完成頁面大、中、小屏效果。

4.環(huán)節(jié)四：新知探索

教師通過講解相關(guān)知識、示范相關(guān)操作，學(xué)生通過學(xué)一學(xué)、試一試、想一想、練一練等方式，掌握響應(yīng)式布局的相關(guān)知識及實現(xiàn)方法。

5.環(huán)節(jié)五：任務(wù)實施

教師引導(dǎo)學(xué)生利用響應(yīng)式布局相關(guān)知識完善課內(nèi)項目，實施過程中，鼓勵學(xué)生小組分析討論、小老師教、教師個別輔導(dǎo)等方式完成課內(nèi)項目效果。對于課內(nèi)共性問題及教學(xué)重、難點，利用超星平臺發(fā)起討論，引導(dǎo)學(xué)生進行分析解決，并將問題及解決方案添加至課程問題庫，方便學(xué)生后續(xù)學(xué)習(xí)。

6.環(huán)節(jié)六：評價總結(jié)

引導(dǎo)學(xué)生依據(jù)功能實現(xiàn)、代碼規(guī)范等評價指標(biāo)，組織學(xué)生完成組間評價，老師分析組間評價結(jié)果，對評價高的作品進行表揚，并引導(dǎo)學(xué)生完成得分較低作品的分析，鼓勵學(xué)生分析問題并解決問題，攻克教學(xué)難點，并安排學(xué)生完善課程問題庫。

教師通過平臺發(fā)布課堂測試，了解學(xué)習(xí)效果，對測試結(jié)果及測試難點進行分析，總結(jié)教學(xué)重、難點。

（三）課后階段

學(xué)生完善課內(nèi)項目，嚴(yán)格按照企業(yè)項目開發(fā)流程同步分組實施，企業(yè)講師、教師、學(xué)生、輔導(dǎo)員各司其職共同完成課外項目開發(fā)，通過課外項目的開發(fā)提高學(xué)生團隊協(xié)作意識，培養(yǎng)學(xué)生精益求精的工匠精神以及學(xué)以致用的能力（見圖5）。

四、教學(xué)成效與特色

（一）教學(xué)成效

通過課程學(xué)習(xí)，學(xué)生的專業(yè)知識、專業(yè)技能、職業(yè)素養(yǎng)都有明顯提高，有效達成課程教學(xué)目標(biāo)。

1.專業(yè)知識日漸豐富

（1）知識結(jié)構(gòu)逐步完善

學(xué)生在原有HTML基礎(chǔ)、CSS基礎(chǔ)上，掌握了網(wǎng)頁布局及CSS3高級等相關(guān)知識，網(wǎng)頁設(shè)計相關(guān)知識漸漸豐富。

（2）學(xué)習(xí)前、后測成績差異大

學(xué)生模塊學(xué)習(xí)前、后測試結(jié)果顯示學(xué)生網(wǎng)頁設(shè)計知識有較大突破，后測相比前測有很大進步。

2.專業(yè)技能顯著提高

（1）學(xué)生作品日趨完善

通過課程學(xué)習(xí)，學(xué)生的技能水平提升，課內(nèi)項目和“貓先生”社區(qū)環(huán)境管家官網(wǎng)首頁效果重合度提高，課外項目效果與客戶需求逐漸契合。

（2）各類競賽成績逐步提升

教師教學(xué)能力穩(wěn)步提高，學(xué)生競賽成績喜人，教師在省級教師教學(xué)能力比賽中榮獲二等獎，學(xué)生在省級技能競賽“移動融媒體應(yīng)用技術(shù)”賽項中榮獲二等獎一項，三等獎一項。

3.職業(yè)素養(yǎng)得到提升

（1）溝通表達力改善

通過課前課外項目分享、討論、項目匯報等方式，學(xué)生溝通表達能力日益改善，自信心提升。

（2）團隊協(xié)作能力增強

通過分組學(xué)習(xí)及課外項目實施，增強了學(xué)生團結(jié)協(xié)作意識，團隊協(xié)作能力提升。

（3）編碼逐漸規(guī)范

通過教學(xué)熏陶、作品評價等方式，讓學(xué)生命名、編碼逐步規(guī)范，養(yǎng)成精益求精的工匠精神。

（二）特色

特色一：引入真實項目，實施雙項目并行

選用真實項目“貓先生”社區(qū)環(huán)境管家官網(wǎng)作為課內(nèi)項目載體，貼近生活，教學(xué)活動更有溫度和力度。突破傳統(tǒng)的教育范式，實施課內(nèi)、課外雙項目并行，結(jié)合互聯(lián)網(wǎng)+創(chuàng)新創(chuàng)業(yè)大賽、威客接單平臺等等進行自主選題，分組實施，提升學(xué)生的團隊協(xié)作意識和知識運用能力。

特色二：融入思政教育，踐行愛心助農(nóng)

科學(xué)選用項目載體，滲透正確的生活理念，幫助學(xué)生樹立正確的人生觀、價值觀和世界觀;課程教學(xué)過程中，通過“高保真”還原和不斷完善作品，培養(yǎng)學(xué)生精益求精的工匠精神。同時將思政教育融入教學(xué)實施全過程，將湖南省貧困村——邵陽市新寧馬頭橋鎮(zhèn)六合村網(wǎng)站開發(fā)作為課外項目之一，進行農(nóng)產(chǎn)品宣傳及銷售，幫助農(nóng)民走出困境，真正實現(xiàn)教書、育人并行。

特色三：強化校企共建，共育專業(yè)人才

遵循“校企合作、優(yōu)勢互補”原則組建課程教學(xué)團隊，按照崗位需求，校企共同制定人才培養(yǎng)方案、課程標(biāo)準(zhǔn)，將企業(yè)項目開發(fā)流程及評價標(biāo)準(zhǔn)融入課程教學(xué)實施過程。

五、教學(xué)反思與改進

（一）教學(xué)反思

受疫情影響，前期線上教學(xué)實施過程中，部分學(xué)生所在地區(qū)網(wǎng)絡(luò)信號差，同時該班10%的同學(xué)無電腦，課程教學(xué)操作性強，教學(xué)實施難度大，教學(xué)進展緩慢，教師對學(xué)生實時督學(xué)難以實現(xiàn)，教學(xué)效果不夠理想。

（二）改進方向

學(xué)生復(fù)學(xué)返校后，針對沒有電腦、課程學(xué)習(xí)有困難的學(xué)生，及時了解學(xué)生狀態(tài)，加大督學(xué)力度，給予鼓勵、幫扶，采取開放實訓(xùn)室、義務(wù)補課等方式，幫助學(xué)生提高學(xué)習(xí)積極性，迎頭趕上，確保學(xué)生不掉隊。

參考文獻：

[1]白潔.高職《化工儀表及自動化》課程信息化教學(xué)實施報告.廣東化工.2020（14）：236-237.

[2]秦穎.賞景、悅情、悟人——《綿遠的詩韻》教學(xué)實施報告.中國多媒體與網(wǎng)絡(luò)教學(xué)學(xué)報.2020：178-179.

注：本文系湖南安全技術(shù)職業(yè)學(xué)院2019年院級“課程思政”教育教學(xué)改革精品項目——《網(wǎng)頁設(shè)計與制作》課程思政教學(xué)探討的項目成果。