網(wǎng)頁布局——CSS浮動(dòng)單元教學(xué)設(shè)計(jì)

周怡燕

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

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

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

1? ? 教學(xué)分析

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

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

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

2? ? 教學(xué)策略與教學(xué)實(shí)施

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

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

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

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

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

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

3? ? 反思與診改

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

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

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

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

4? ? 結(jié)語

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