HTML5 CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程（吳豐 第3版） 教案 教學(xué)設(shè)計(jì) 任務(wù)1-11 Web前端工程師職業(yè)前景與開發(fā)流程- 列表

課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解Web前端工程師的行業(yè)前景；認(rèn)識(shí)網(wǎng)頁構(gòu)成的基本元素，掌握相關(guān)專業(yè)術(shù)語；掌握“表現(xiàn)與結(jié)構(gòu)相分離”的重要理念；熟悉Web前端開發(fā)的工作流程；了解常用的開發(fā)軟件，能夠簡(jiǎn)單創(chuàng)建一個(gè)HTML5頁面。能力目標(biāo)初步掌握創(chuàng)建簡(jiǎn)單HTML5頁面的方法；具有“表現(xiàn)與結(jié)構(gòu)相分離”的理念認(rèn)知；素質(zhì)目標(biāo)引導(dǎo)學(xué)生既要學(xué)習(xí)專業(yè)技能知識(shí)，也要逐步樹立職業(yè)理想；堅(jiān)持德育為先，培養(yǎng)良好的職業(yè)道德（責(zé)任感）和個(gè)人品德；教學(xué)重點(diǎn)Web前端開發(fā)的相關(guān)專業(yè)術(shù)語與工作流程教學(xué)難點(diǎn)表現(xiàn)與結(jié)構(gòu)相分離學(xué)情分析初學(xué)者對(duì)Web前端課程的重要性認(rèn)識(shí)不夠，對(duì)初次接觸代碼類課程容易產(chǎn)生倦怠。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))Web前端行企業(yè)調(diào)研（查找網(wǎng)絡(luò)資料）、預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]通過讓同學(xué)分享Web前端企業(yè)調(diào)研結(jié)果，引入Web前端工程師的行業(yè)前景，激發(fā)學(xué)生學(xué)習(xí)興趣。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[40分鐘]1.Web前端開發(fā)的必要認(rèn)知與發(fā)展前景2.認(rèn)識(shí)網(wǎng)頁的構(gòu)成元素3.了解專業(yè)術(shù)語4.認(rèn)識(shí)Web標(biāo)準(zhǔn)5.Web前端開發(fā)基本流程6.常用開發(fā)軟件介紹理論講授知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[35分鐘]1.圍繞“表現(xiàn)和結(jié)構(gòu)相分離”等內(nèi)容，通過互聯(lián)網(wǎng)查找資料，進(jìn)一步強(qiáng)化學(xué)生對(duì)課堂知識(shí)的理解。2.使用記事本創(chuàng)建HTML5頁面。3.查找有關(guān)“網(wǎng)頁設(shè)計(jì)”“網(wǎng)頁UI”的資料，欣賞優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展為鞏固課堂學(xué)習(xí)效果，有計(jì)劃、有重點(diǎn)的安排拓展知識(shí)學(xué)習(xí)與訓(xùn)練，培養(yǎng)學(xué)生學(xué)習(xí)習(xí)慣，進(jìn)一步提升專業(yè)技能和綜合素養(yǎng)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解Web前端工程師的行業(yè)前景；認(rèn)識(shí)網(wǎng)頁構(gòu)成的基本元素，掌握相關(guān)專業(yè)術(shù)語；掌握“表現(xiàn)與結(jié)構(gòu)相分離”的重要理念；熟悉Web前端開發(fā)的工作流程；了解常用的開發(fā)軟件，能夠簡(jiǎn)單創(chuàng)建一個(gè)HTML5頁面。能力目標(biāo)初步掌握創(chuàng)建簡(jiǎn)單HTML5頁面的方法；具有“表現(xiàn)與結(jié)構(gòu)相分離”的理念認(rèn)知；素質(zhì)目標(biāo)引導(dǎo)學(xué)生既要學(xué)習(xí)專業(yè)技能知識(shí)，也要逐步樹立職業(yè)理想；堅(jiān)持德育為先，培養(yǎng)良好的職業(yè)道德（責(zé)任感）和個(gè)人品德；教學(xué)重點(diǎn)Web前端開發(fā)的相關(guān)專業(yè)術(shù)語與工作流程教學(xué)難點(diǎn)表現(xiàn)與結(jié)構(gòu)相分離學(xué)情分析初學(xué)者對(duì)Web前端課程的重要性認(rèn)識(shí)不夠，對(duì)初次接觸代碼類課程容易產(chǎn)生倦怠。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))Web前端行企業(yè)調(diào)研（查找網(wǎng)絡(luò)資料）、預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]通過讓同學(xué)分享Web前端企業(yè)調(diào)研結(jié)果，引入Web前端工程師的行業(yè)前景，激發(fā)學(xué)生學(xué)習(xí)興趣。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[40分鐘]1.Web前端開發(fā)的必要認(rèn)知與發(fā)展前景2.認(rèn)識(shí)網(wǎng)頁的構(gòu)成元素3.了解專業(yè)術(shù)語4.認(rèn)識(shí)Web標(biāo)準(zhǔn)5.Web前端開發(fā)基本流程6.常用開發(fā)軟件介紹理論講授知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[35分鐘]1.圍繞“表現(xiàn)和結(jié)構(gòu)相分離”等內(nèi)容，通過互聯(lián)網(wǎng)查找資料，進(jìn)一步強(qiáng)化學(xué)生對(duì)課堂知識(shí)的理解。2.使用記事本創(chuàng)建HTML5頁面。3.查找有關(guān)“網(wǎng)頁設(shè)計(jì)”“網(wǎng)頁UI”的資料，欣賞優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展為鞏固課堂學(xué)習(xí)效果，有計(jì)劃、有重點(diǎn)的安排拓展知識(shí)學(xué)習(xí)與訓(xùn)練，培養(yǎng)學(xué)生學(xué)習(xí)習(xí)慣，進(jìn)一步提升專業(yè)技能和綜合素養(yǎng)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握Dreamweaver的基本使用方法；掌握站點(diǎn)的相關(guān)概念及其基本操作；掌握HBuilderX的基本使用方法；能力目標(biāo)掌握Dreamweaver和HBuilderX的基本使用方法；能夠創(chuàng)建簡(jiǎn)單的HTML5網(wǎng)頁，并實(shí)現(xiàn)簡(jiǎn)單的控制；素質(zhì)目標(biāo)培養(yǎng)學(xué)生的實(shí)踐思維，提升勇于探索實(shí)踐的能力；培養(yǎng)學(xué)生積極研究探索的科學(xué)習(xí)慣；教學(xué)重點(diǎn)工具欄、CSS面板、屬性檢查器教學(xué)難點(diǎn)創(chuàng)建與管理站點(diǎn)學(xué)情分析初學(xué)者對(duì)Web前端課程的重要性認(rèn)識(shí)不夠，對(duì)初次接觸代碼類課程容易產(chǎn)生倦怠。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]回顧上節(jié)課基本知識(shí)，引出“工欲善其事，必先利其器”，引導(dǎo)學(xué)生樹立任何代碼編輯器僅是解決問題的工具，Web前端的學(xué)習(xí)重點(diǎn)應(yīng)放在代碼編寫邏輯的學(xué)習(xí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[40分鐘]1.Dreamweaver界面介紹2.DW常用工具欄和面板3.創(chuàng)建和管理站點(diǎn)4.各類面板的使用方法5.HbuilderX基本操作6.標(biāo)簽、元素、屬性和值案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[35分鐘]1.學(xué)生熟悉Dreamweaver環(huán)境，上機(jī)演練創(chuàng)建與管理站點(diǎn)。2.安裝與啟動(dòng)HBuilderX，創(chuàng)建并保存一個(gè)項(xiàng)目，熟悉環(huán)境。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展為鞏固課堂學(xué)習(xí)效果，有計(jì)劃、有重點(diǎn)的安排拓展知識(shí)學(xué)習(xí)與訓(xùn)練，培養(yǎng)學(xué)生學(xué)習(xí)習(xí)慣，進(jìn)一步提升專業(yè)技能和綜合素養(yǎng)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握HTML5文檔結(jié)構(gòu)，認(rèn)識(shí)HTML5中常見的標(biāo)簽含義；能力目標(biāo)掌握Dreamweaver和HBuilderX的基本使用方法；能夠創(chuàng)建簡(jiǎn)單的HTML5網(wǎng)頁，并實(shí)現(xiàn)簡(jiǎn)單的控制；素質(zhì)目標(biāo)培養(yǎng)學(xué)生的實(shí)踐思維，提升勇于探索實(shí)踐的能力；培養(yǎng)學(xué)生積極研究探索的科學(xué)習(xí)慣；教學(xué)重點(diǎn)HTML5的文檔結(jié)構(gòu)和編寫規(guī)范教學(xué)難點(diǎn)HTML5常見元素學(xué)情分析初學(xué)者對(duì)Web前端課程的重要性認(rèn)識(shí)不夠，對(duì)初次接觸代碼類課程容易產(chǎn)生倦怠。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，通過展示一些有趣的HTML5應(yīng)用實(shí)例，如互動(dòng)游戲、動(dòng)畫效果等，激發(fā)學(xué)生的學(xué)習(xí)興趣。2.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[40分鐘]1.DOCTYPE文檔類型與基本結(jié)構(gòu)元素2.HTML5常見元素（標(biāo)題、段落、img、a、列表、div、span、table、視頻音頻）案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[35分鐘]1.使用Dreamweaver或HbuilderX，上機(jī)演練各個(gè)示例。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程和文章，以拓寬知識(shí)面和了解最新的HTML5應(yīng)用趨勢(shì)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解CSS的基本概念；掌握CSS的基本語法格式及其引入方法；掌握CSS盒模型的相關(guān)概念；能力目標(biāo)能夠使用CSS的基本知識(shí)完成簡(jiǎn)單頁面的排版；能夠使用屬性選擇器根據(jù)元素的屬性及其值來選擇元素，并應(yīng)用樣式；素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠(chéng)信精神；引導(dǎo)學(xué)生從“細(xì)”“小”做起，重點(diǎn)培養(yǎng)學(xué)生新時(shí)代工匠精神和愛崗敬業(yè)的操守精神。教學(xué)重點(diǎn)CSS的引入方式教學(xué)難點(diǎn)盒模型學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.展示淘寶首頁和小紅書首頁。介紹CSS的作用，給網(wǎng)頁“化妝”，重申“表現(xiàn)與結(jié)構(gòu)相分離”的理念，引出CSS基本知識(shí)。2.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.通過案例引入CSS的基本語法與注釋。2.CSS引入方式（1）內(nèi)聯(lián)樣式（2）內(nèi)部樣式（3）外部樣式3.分析盒模型的組成并通過案例讓學(xué)生熟悉盒模型。案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.使用Dreamweaver上機(jī)演練各個(gè)示例。體會(huì)CSS的作用，了解它是如何與HTML協(xié)同工作的。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展分享CSS的技術(shù)平臺(tái)，讓同學(xué)們關(guān)注并觀看CSS優(yōu)秀的作品。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS初級(jí)選擇器的使用方法能力目標(biāo)能夠使用CSS的基本知識(shí)完成簡(jiǎn)單頁面的排版；能夠使用屬性選擇器根據(jù)元素的屬性及其值來選擇元素，并應(yīng)用樣式；素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠(chéng)信精神；引導(dǎo)學(xué)生從“細(xì)”“小”做起，重點(diǎn)培養(yǎng)學(xué)生新時(shí)代工匠精神和愛崗敬業(yè)的操守精神。教學(xué)重點(diǎn)選擇器的使用方法教學(xué)難點(diǎn)ID選擇器、類選擇器學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.通過案例中字體樣式不生效的結(jié)果，引入CSS的選擇器優(yōu)先級(jí)知識(shí)。2.引導(dǎo)學(xué)生學(xué)習(xí)CSS選擇器的最佳方式，不單要理解CSS選擇器的含義，還要不斷的實(shí)踐測(cè)試代碼。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]以多個(gè)案例形式，講解各類選擇器對(duì)頁面元素的影響。1.通配符選擇器需要特別提醒：在大型復(fù)雜網(wǎng)頁應(yīng)用中，通配符選擇器會(huì)導(dǎo)致性能問題，應(yīng)謹(jǐn)慎使用，盡量限制其使用范圍。2.類型選擇器3.類選擇器4.ID選擇器5.群組選擇器案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例，理解不同類型的選擇器的功能用法。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展加入CSS和前端開發(fā)的社區(qū)，與其他開發(fā)者交流問題和學(xué)習(xí)經(jīng)驗(yàn)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS高級(jí)選擇器的使用方法能力目標(biāo)能夠使用CSS的基本知識(shí)完成簡(jiǎn)單頁面的排版；能夠使用屬性選擇器根據(jù)元素的屬性及其值來選擇元素，并應(yīng)用樣式；素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠(chéng)信精神；引導(dǎo)學(xué)生從“細(xì)”“小”做起，重點(diǎn)培養(yǎng)學(xué)生新時(shí)代工匠精神和愛崗敬業(yè)的操守精神。教學(xué)重點(diǎn)選擇器的使用方法教學(xué)難點(diǎn)子元素選擇器、相鄰兄弟選擇器學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，通過復(fù)雜案例引出CSS中有高級(jí)內(nèi)容。CSS中有些高級(jí)選擇器使用起來會(huì)讓頁面的實(shí)現(xiàn)更方便。2.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]通過案例的方式展示下面的內(nèi)容，總結(jié)多個(gè)選擇器使用的場(chǎng)景和語法。1.子元素選擇器2.相鄰兄弟選擇器3.屬性選擇器4.頁面簡(jiǎn)易美化案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例。發(fā)布課堂任務(wù)：創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁，使用這些選擇器為元素設(shè)置樣式。2.開展課堂討論，如何有效地使用這些選擇器來提高CSS代碼的可維護(hù)性和性能。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展加入CSS和前端開發(fā)的社區(qū)，與其他開發(fā)者交流問題和學(xué)習(xí)經(jīng)驗(yàn)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握有關(guān)字體和文本的CSS知識(shí)能力目標(biāo)能夠?qū)崿F(xiàn)文字版面的基本排版素質(zhì)目標(biāo)進(jìn)一步培養(yǎng)學(xué)生精雕細(xì)琢、精益求精的職業(yè)素養(yǎng)；引導(dǎo)學(xué)生體會(huì)理論知識(shí)轉(zhuǎn)變?yōu)橹苯由a(chǎn)力的成就感，使學(xué)生領(lǐng)略專業(yè)魅力。教學(xué)重點(diǎn)字體屬性與文本屬性教學(xué)難點(diǎn)使用@font-face實(shí)現(xiàn)在線字體學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.預(yù)習(xí)微課視頻2.觀察校園網(wǎng)網(wǎng)頁，觀察頁面字體種類和特征。任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，引導(dǎo)學(xué)生樹立實(shí)踐是學(xué)習(xí)CSS選擇器的最佳方式，不單要理解CSS選擇器的含義，還要不斷的實(shí)踐測(cè)試代碼。2.展示同學(xué)們課前預(yù)習(xí)成果，引導(dǎo)學(xué)生總結(jié)網(wǎng)頁字體除了顏色和大小屬性外，還有樣式、粗細(xì)、外形等屬性，文本還有首行縮進(jìn)、行高、陰影等屬性。3.明確本次課程的學(xué)習(xí)目標(biāo)為掌握字體和文本屬性設(shè)置，預(yù)期結(jié)果為會(huì)靈活使用這些屬性完成網(wǎng)頁字體和文本設(shè)置，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.簡(jiǎn)要總結(jié)上次課內(nèi)容和常見問題；2.組織學(xué)生展示預(yù)習(xí)成果，幫助學(xué)生總結(jié)字體和文本常見屬性。1.在教師的引導(dǎo)下展示預(yù)習(xí)成果；2.總結(jié)字體和文本常見屬性，明確本次課任務(wù)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.DW中插入、替換和查找介紹網(wǎng)頁文本輸入過程中常用的插入、替換和查找操作，幫助學(xué)生提升網(wǎng)頁文本編輯熟練度。2.CSS字體屬性將學(xué)生總結(jié)的字體屬性歸納后，引入對(duì)應(yīng)的具體屬性名稱，并舉例講解具體屬性值。3.CSS文本屬性將學(xué)生總結(jié)的文本屬性歸納后，引入對(duì)應(yīng)的具體屬性名稱，并舉例講解具體屬性值。4.WebFont與@font-face根據(jù)實(shí)際工作，介紹特殊字體美化用到的屬性。1.案例教學(xué)展示基本知識(shí)；2.對(duì)于難點(diǎn)WebFont與@font-face，先展示使用效果，引起學(xué)生興趣，然后介紹具體設(shè)置方式，并及時(shí)總結(jié)流程。觀看教師演示，簡(jiǎn)單實(shí)踐操作。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練文字和文本相關(guān)案例。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。1.組織分組；2.鼓勵(lì)學(xué)生積極討論并提供實(shí)踐指導(dǎo)；3.組織學(xué)生換組點(diǎn)評(píng)，總結(jié)實(shí)現(xiàn)流程。1.分組討論后實(shí)踐操作；2.相互點(diǎn)評(píng)并及時(shí)總結(jié)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)：超級(jí)鏈接。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程和文章，以拓寬知識(shí)面和了解最新的HTML5應(yīng)用趨勢(shì)。2.加入CSS和前端開發(fā)的社區(qū)，與其他開發(fā)者交流問題和學(xué)習(xí)經(jīng)驗(yàn)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS樣式中有關(guān)偽類的知識(shí)能力目標(biāo)能夠使用偽類實(shí)現(xiàn)簡(jiǎn)易動(dòng)態(tài)效果素質(zhì)目標(biāo)進(jìn)一步培養(yǎng)學(xué)生精雕細(xì)琢、精益求精的職業(yè)素養(yǎng)；引導(dǎo)學(xué)生體會(huì)理論知識(shí)轉(zhuǎn)變?yōu)橹苯由a(chǎn)力的成就感，使學(xué)生領(lǐng)略專業(yè)魅力。教學(xué)重點(diǎn)文本鏈接、郵件鏈接、錨鏈接教學(xué)難點(diǎn)CSS偽類學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.預(yù)習(xí)微課視頻2.觀察淘寶網(wǎng)，分析超級(jí)鏈接在點(diǎn)擊前，鼠標(biāo)經(jīng)過，點(diǎn)擊后有什么變化。任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，演示常見問題解決方法。2.頭腦風(fēng)暴提問學(xué)生預(yù)習(xí)成果。3.明確課程的學(xué)習(xí)目標(biāo)使用CSS控制超鏈接和預(yù)期成果制作《頁面常用網(wǎng)址導(dǎo)航》，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.簡(jiǎn)要總結(jié)上次課內(nèi)容和常見問題；2.頭腦風(fēng)暴提問學(xué)生，幫助學(xué)生觀察超鏈接在不同的狀態(tài)下的變化。1.反饋預(yù)習(xí)結(jié)果；2.明確本次課學(xué)習(xí)任務(wù)；3.知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.文本鏈接演示使用DW可視化快速創(chuàng)建文本鏈接；2.郵件鏈接演示使用DW可視化快速創(chuàng)建郵件鏈接；3.錨鏈接演示使用DW可視化快速創(chuàng)建錨鏈接；3.CSS偽類講解常見偽類名稱和使用方法，以及注意事項(xiàng)。1.通過DW演示文本鏈接、郵件鏈接、錨鏈接的可視化創(chuàng)建；2.展示網(wǎng)頁中，鼠標(biāo)動(dòng)作不同時(shí)，文本鏈接的不同效果對(duì)應(yīng)的偽類名。稱；3.總結(jié)偽類使用注意事項(xiàng)1.觀察教師操作，熟悉DW可視化操作超鏈接，實(shí)現(xiàn)簡(jiǎn)單模仿；2.理解動(dòng)作和偽類之間的對(duì)應(yīng)關(guān)系；3.掌握偽類使用場(chǎng)景和注意事項(xiàng)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練《頁面常用網(wǎng)址導(dǎo)航》示例，理解偽類的使用場(chǎng)景和具體用法。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)學(xué)思結(jié)合，相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。1.觀察學(xué)生整體進(jìn)度，總結(jié)學(xué)生遇到的具體問題；2.實(shí)踐指導(dǎo)結(jié)合課本代碼實(shí)踐訓(xùn)練；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)：偽類的使用方法，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)：使用CSS控制圖像。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程和文章，以拓寬知識(shí)面和了解最新的HTML5應(yīng)用趨勢(shì)。2.加入CSS和前端開發(fā)的社區(qū)，與其他開發(fā)者交流問題和學(xué)習(xí)經(jīng)驗(yàn)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)2授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握有關(guān)圖像的CSS知識(shí)能力目標(biāo)能夠制作圖文混排效果素質(zhì)目標(biāo)進(jìn)一步培養(yǎng)學(xué)生精雕細(xì)琢、精益求精的職業(yè)素養(yǎng)；引導(dǎo)學(xué)生體會(huì)理論知識(shí)轉(zhuǎn)變?yōu)橹苯由a(chǎn)力的成就感，使學(xué)生領(lǐng)略專業(yè)魅力。教學(xué)重點(diǎn)Background基本屬性教學(xué)難點(diǎn)圖文混排學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡(jiǎn)單的網(wǎng)頁結(jié)構(gòu)，已經(jīng)逐步適應(yīng)代碼類課程的學(xué)習(xí)模式，但不同學(xué)生的學(xué)習(xí)進(jìn)度和興趣逐步表現(xiàn)出差異。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.預(yù)習(xí)微課視頻2.結(jié)合平時(shí)上網(wǎng)經(jīng)歷，思考網(wǎng)頁中的圖片和文字布局關(guān)系任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，通過教學(xué)平臺(tái)的課前測(cè)試，檢查學(xué)生上節(jié)課知識(shí)掌握情況并及時(shí)進(jìn)行測(cè)試點(diǎn)評(píng)。2.通過提問抽查學(xué)生課前預(yù)習(xí)情況，通過引導(dǎo)學(xué)生關(guān)注圖像和文字的位置關(guān)系，借助圖片元素和背景圖片的區(qū)別，引出背景圖片的概念及常用屬性。3.明確課程的學(xué)習(xí)目標(biāo)：使用CSS控制圖像文本，制作具體案例；讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.發(fā)起課前測(cè)試；2.點(diǎn)評(píng)測(cè)試結(jié)果；3.抽查學(xué)生課前預(yù)習(xí)情況。1.參與課前測(cè)試；2.總結(jié)測(cè)試過程中出現(xiàn)的問題；3.反饋課前預(yù)習(xí)情況；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.background屬性結(jié)合背景圖片的特性，通過具體案例展示背景圖片的顏色、內(nèi)容、大小、平鋪、位置等屬性的具體使用場(chǎng)景和方法，在此基礎(chǔ)上，引出復(fù)合屬性的使用規(guī)則。2.圖文混排展示圖文混排案例，講解混排原則及具體方法，指出核心知識(shí)點(diǎn)：浮動(dòng)1.案例展示具體屬性使用方法；2.關(guān)注學(xué)生接受情況；3.及時(shí)溝通，解決學(xué)生理解誤區(qū)；1.觀察教師演示，實(shí)踐幫助理解；2.及時(shí)回應(yīng)教師，主動(dòng)反饋疑惑點(diǎn)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練背景圖片和圖文混排案例。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)多觀察，多思考，相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。1.鼓勵(lì)學(xué)生積極討論并提供實(shí)踐指導(dǎo)；2.通過教學(xué)平臺(tái)隨機(jī)抽查學(xué)生成果，總結(jié)常見問題。1.分組討論后實(shí)踐操作;2.相互點(diǎn)評(píng)并及時(shí)總結(jié)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[10分鐘]課堂小結(jié)，重申課堂重點(diǎn)難點(diǎn)，明確課題學(xué)習(xí)任務(wù)，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)：元素浮動(dòng)與清除。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.使用HTML和CSS創(chuàng)建一個(gè)簡(jiǎn)單的個(gè)人博客頁面。幫助自己鞏固基本的網(wǎng)頁布局和樣式設(shè)計(jì)。2.加入CSS和前端開發(fā)的社區(qū)，與其他開發(fā)者交流問題和學(xué)習(xí)經(jīng)驗(yàn)。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)4授課班級(jí)授課時(shí)間授課地點(diǎn)授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補(bǔ)充材料中國(guó)大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)理解浮動(dòng)的基本概念，掌握創(chuàng)建浮動(dòng)和清除浮動(dòng)的方法；重點(diǎn)掌握相對(duì)定位和絕對(duì)定位的使用方法；能力目標(biāo)掌握縱向?qū)Ш胶蜋M向?qū)Ш降膶?shí)現(xiàn)方法掌握?qǐng)D文混合列表的實(shí)現(xiàn)方法素質(zhì)目標(biāo)培養(yǎng)學(xué)生的相互溝通能力和團(tuán)隊(duì)協(xié)作精神；培養(yǎng)學(xué)生沉穩(wěn)的學(xué)習(xí)習(xí)慣，進(jìn)一步培養(yǎng)在工作中執(zhí)著鉆研、精益求精的職業(yè)精神；教學(xué)重點(diǎn)CSS定位教學(xué)難點(diǎn)浮動(dòng)學(xué)情分析學(xué)生能夠熟練搭建HTML網(wǎng)頁結(jié)構(gòu)，能夠完成基本CSS樣式設(shè)計(jì)和布局，但遇到需要實(shí)際問題，仍然缺乏調(diào)試技巧和經(jīng)驗(yàn)。教學(xué)總體設(shè)計(jì)依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動(dòng)態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實(shí)踐操作、課堂小結(jié)的路徑組織實(shí)施教學(xué)過程。課外拓展有針對(duì)性的安排訓(xùn)練，同時(shí)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識(shí)和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時(shí)間安排)教學(xué)內(nèi)容教學(xué)活動(dòng)技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[10分鐘]1.回顧上節(jié)課基本知識(shí)。訪問學(xué)校首頁，引導(dǎo)學(xué)生觀察動(dòng)態(tài)飄窗效果，引入浮動(dòng)和定位的知識(shí)。2.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[60分鐘]1.浮動(dòng)通過案例講解浮動(dòng)的工作原理和現(xiàn)象。2.清除浮動(dòng)的3種方法介紹Clear屬性和偽元素清除浮動(dòng)的概念，以及如何使用它們來避免浮動(dòng)元素對(duì)后續(xù)元素的影響。3.CSS定位（1）靜態(tài)定位和固定定位相對(duì)定位和絕對(duì)定位（3）相對(duì)于某一容器的絕對(duì)定位案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[90分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例。2.課堂提出一個(gè)具體的