周怡燕

摘? ?要：廣東省職業(yè)院校教學能力大賽為廣東省職業(yè)院校提供了一個高質(zhì)量、高水準、高要求的實踐和交流平臺。以賽促教、以賽促改，提高教師教育技術(shù)應用能力和綜合教育教學水平，為培養(yǎng)新時代的高技能型人才作出貢獻。文章以2019年廣東省職業(yè)院校教學能力大賽一等獎作品為例，對此進行了分析。

關鍵詞：網(wǎng)頁設計;教學能力大賽;Web前端開發(fā)工程師;計算機信息技術(shù)專業(yè)群

互聯(lián)網(wǎng)迅猛發(fā)展，Web前端開發(fā)工程師是目前互聯(lián)網(wǎng)最緊缺的高技能人才，網(wǎng)頁設計與制作能力是該職業(yè)的核心能力要求，本文以計算機信息技術(shù)專業(yè)群平臺核心課程“網(wǎng)頁設計”中網(wǎng)頁布局—CSS浮動教學單元的教學設計為例。

1? ? 教學分析

依據(jù)高等職業(yè)學校專業(yè)教學標準，校企協(xié)同制定人才培養(yǎng)方案及課程標準。選用國規(guī)教材，教師與企業(yè)專家共同開發(fā)課程，引入企業(yè)真實項目，將教材內(nèi)容編排整合，進行項目化教學，共10個項目模塊，本講內(nèi)容選自項目3，占2課時（見圖1）。

授課對象是高職計算機信息管理專業(yè)一年級學生，熟悉信息化教學平臺，具備一定的線上自主學習能力，但積極協(xié)助團隊成員完成開發(fā)任務的意識較弱。經(jīng)過前期系統(tǒng)的學習，學生已經(jīng)掌握DIV布局理念、CSS盒子模型等知識，但習慣形象思維，對浮動特性的理解略感抽象;能獨立制作課程教學項目中新聞頁面右側(cè)部分，但代碼書寫的規(guī)范性、準確性有待提高。

依據(jù)課程標準與Web前端開發(fā)工程師崗位標準，結(jié)合學生實際，確定知識目標、技能目標、素質(zhì)目標。結(jié)合教學目標與教學內(nèi)容確定教學重點，結(jié)合教學內(nèi)容與學情分析確定教學難點。

2? ? 教學策略與教學實施

依托國家級教學資源庫、職教云、云課堂、雨課堂構(gòu)建的教學平臺，利用微課視頻、教學動畫、開發(fā)者工具開展線上、線下混合式教學。采用項目化教學法，以企業(yè)真實項目，作為課程教學項目以及項目任務，實現(xiàn)新聞頁布局。

課堂教學在理實一體化教室，教學過程以實現(xiàn)“新聞頁布局”為任務，共設計8個環(huán)節(jié)，以學生為中心，教師為主導，課前完成兩任務，課中以團隊合作、個人強化“兩形式”，實現(xiàn)“職業(yè)素養(yǎng)、知識技能”“兩提升”，課后以“兩評價”的方式開展組織教學。下面是具體的教學組織實施過程。

（1）課前一周，教師在職教云發(fā)布兩項學習任務，任務一：觀看“CSS中的浮動”微課視頻，自主學習CSS浮動相關屬性;任務二：完成課前知識測驗，檢驗自主學習效果。平臺自動生成的測驗分析數(shù)據(jù)，可發(fā)現(xiàn)部分學生對浮動特性沒有完全理解，教師應及時調(diào)整課堂教學策略。

（2）課中教學。首先，教師對課前任務進行小結(jié)，針對學生課前在線測試中的易錯題，利用教學動畫，以評講課前測驗題的形式著重講解CSS浮動屬性，動畫形象地展示浮動元素與非浮動元素的特性，幫助學生理解，為項目實踐奠定了扎實的理論基礎。然后，教師導入本次課項目任務，運用CSS浮動實現(xiàn)新聞頁布局，并播放一段企業(yè)導師介紹網(wǎng)站項目開發(fā)流程的視頻，引導學生思考該項目具體實施步驟。進入項目實施階段，教師依據(jù)學生課前知識測驗分數(shù)，以“高帶低”原則，將學生分成5組，以團隊合作的形式組織學生進行小組PK賽，教師巡回指導。各小組以團隊合作的形式討論該網(wǎng)頁布局結(jié)構(gòu)，并利用繪圖軟件繪制該網(wǎng)頁布局圖，完成方案制定，依據(jù)繪制出的網(wǎng)頁布局圖，利用Dreamweaver網(wǎng)頁開發(fā)軟件完成HTML編碼，運用已掌握的CSS浮動屬性完成CSS編碼。教師巡回指導，發(fā)現(xiàn)各小組能運用已掌握的CSS浮動屬性實現(xiàn)網(wǎng)頁布局，教學重點得以解決。編碼結(jié)束后，各小組分別展示并匯報項目完成情況，教師利用雨課堂發(fā)起課堂投票，結(jié)合教師評價評選出PK賽中的優(yōu)勝隊。隨后進行點評，提出巡回指導過程中發(fā)現(xiàn)的問題，如代碼編寫過程中存在代碼書寫風格不規(guī)范、不嚴謹?shù)那闆r，并進行職業(yè)素質(zhì)培養(yǎng)。編碼測試環(huán)節(jié)，教師提出測試要求，將網(wǎng)頁中兩個浮動元素的父元素高度設為自適應，學生進行編碼測試，發(fā)現(xiàn)當網(wǎng)頁中父元素高度設為自適應，子元素設置浮動，將對父元素產(chǎn)生影響，這是本課的教學難點。由于Dreamweaver在代碼調(diào)試過程中難以實現(xiàn)網(wǎng)頁元素定位、實時監(jiān)控網(wǎng)頁元素屬性變化等功能，學生在進行代碼調(diào)試的過程中遇到問題時，很難查找問題源頭。基于此，教師可利用瀏覽器自帶開發(fā)者工具示范操作兩種清除浮動的解決方法，并分析對比兩種方法的優(yōu)劣。學生利用“開發(fā)者”工具可以適時調(diào)整網(wǎng)頁代碼，實時監(jiān)控與定位網(wǎng)頁元素屬性等功能，是培養(yǎng)學生在代碼調(diào)試過程中分析與解決問題的有力輔助。進入編碼優(yōu)化環(huán)節(jié)，學生結(jié)合教師講解，嘗試利用清除浮動的方法，進行代碼優(yōu)化，教師巡回指導時發(fā)現(xiàn)學生能成功解決“當父元素高度自適應，子元素設置浮動，對父元素產(chǎn)生影響”教學難點，使學生個人知識技能得到提升。

（3）課后拓展，教師發(fā)布課后拓展作業(yè)，在課堂項目成果的基礎上實現(xiàn)三列布局。學生在教學平臺提交作業(yè)，教師驗收與考核。

本次課考核分別由課前、課中、課后3部分組成，形成過程性評價。課前知識測驗占成績的20%，小組PK賽組間互評占40%，組內(nèi)互評占30%，教師評價占30%，形成多元化評價。課后作業(yè)占單元成績的30%。綜合教師、學生、平臺系統(tǒng)的主客觀考核，學生單元成績總評平均分達到89分，有效達成教學目標，并且，學生多次在全國職業(yè)技能大賽中屢獲佳績，畢業(yè)生深受企業(yè)好評。

3? ? 反思與診改

（1）校企協(xié)同，無縫對接。校企協(xié)同育人，共同制定人才培養(yǎng)方案，以小視頻的方式讓企業(yè)導師走進課堂，以企業(yè)真實項目，開展項目化教學，實現(xiàn)教學目標與職業(yè)能力、教學內(nèi)容與工作內(nèi)容、教學過程與工作過程的無縫對接。

（2）“教、學、做、評”一體化模式。教學設計基于崗位工作流程，以學生為中心，利用信息化教學手段，學生課前完成“兩任務”、課中以團隊合作、個人強化“兩形式”，實現(xiàn)職業(yè)素養(yǎng)、知識技能“兩提升”，形成過程性、多元化 “兩評價”，體現(xiàn)了做中學、做中教?！敖虒W做評”一體化模式，可在與本專業(yè)相關的教學做一體化課堂上推廣應用。

（3）以賽促教，培養(yǎng)新時代的工匠。以高職院校技能大賽為推手，檢驗人才培養(yǎng)質(zhì)量，以嚴謹、規(guī)范的工作作風、精益求精的專業(yè)精神打造新時代的工匠。

實踐教學發(fā)現(xiàn)，本課程由于學生課前自主學習中對CSS浮動知識掌握不牢，增加了課堂理論知識的講解，縮短了課堂項目實踐的時間。因此，在后續(xù)的教學中，要針對性地制作更多的教學資源用于課前，幫助學生自主學習。

4? ? 結(jié)語

在“互聯(lián)網(wǎng)+”、《中國制造2025》、“大數(shù)據(jù)”的時代背景下，教育教學技術(shù)與新媒體信息化技術(shù)的深度融合成為順應時代發(fā)展的必然趨勢。當代教師在教學過程中應與互聯(lián)網(wǎng)時代接軌，確保教學合理、科學，不斷改革教學設計，實現(xiàn)以學生為中心、教師為主導的教學模式。積極參與教學能力大賽，以賽促教、以賽促改，提高教師教育技術(shù)應用能力和綜合教育教學水平，為培養(yǎng)新時代的高技能型人才作出貢獻。