HTML5CSS3Web前端設(shè)計(jì)基礎(chǔ)教程（吳豐 第3版）教案全套-教學(xué)設(shè)計(jì) 任務(wù)1 Web前端工程師職業(yè)前景與開發(fā)流程-任務(wù)22 Web App頁面的設(shè)計(jì)與實(shí)現(xià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ǔ)充材料中國大學(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ā)軟件，能夠簡單創(chuàng)建一個(gè)HTML5頁面。技能目標(biāo)通過課堂教學(xué)，初步掌握創(chuàng)建簡單HTML5頁面的方法。素質(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握Dreamweaver的基本使用方法；掌握站點(diǎn)的相關(guān)概念及其基本操作；掌握HBuilderX的基本使用方法；技能目標(biāo)掌握Dreamweaver和HBuilderX的基本使用方法。素質(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握HTML5文檔結(jié)構(gòu)，認(rèn)識(shí)HTML5中常見的標(biāo)簽含義；技能目標(biāo)能夠創(chuàng)建簡單的HTML5網(wǎng)頁，并實(shí)現(xià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)用趨勢。課外指導(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解CSS的基本概念；掌握CSS的基本語法格式及其引入方法；掌握CSS盒模型的相關(guān)概念；技能目標(biāo)能夠使用CSS的基本知識(shí)完成簡單頁面的排版素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠信精神；引導(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)建簡單的網(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS初級(jí)選擇器的使用方法技能目標(biāo)能夠使用CSS的基本知識(shí)完成簡單頁面的排版素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠信精神；引導(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)建簡單的網(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í)踐測試代碼。理論講授明確任務(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS高級(jí)選擇器的使用方法技能目標(biāo)能夠使用CSS的基本知識(shí)完成簡單頁面的排版素質(zhì)目標(biāo)提升學(xué)生規(guī)矩意識(shí)，強(qiáng)化學(xué)生誠信精神；引導(dǎo)學(xué)生從“細(xì)”“小”做起，重點(diǎn)培養(yǎng)學(xué)生新時(shí)代工匠精神和愛崗敬業(yè)的操守精神。教學(xué)重點(diǎn)選擇器的使用方法教學(xué)難點(diǎn)子元素選擇器、相鄰兄弟選擇器學(xué)情分析學(xué)生能夠使用HTML標(biāo)簽創(chuàng)建簡單的網(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è)選擇器使用的場景和語法。1.子元素選擇器2.相鄰兄弟選擇器3.屬性選擇器4.頁面簡易美化案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例。發(fā)布課堂任務(wù)：創(chuàng)建一個(gè)簡單的網(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ǔ)充材料中國大學(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)建簡單的網(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í)踐測試代碼。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è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é)流程。觀看教師演示，簡單實(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)用趨勢。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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS樣式中有關(guān)偽類的知識(shí)技能目標(biāo)能夠使用偽類實(shí)現(xià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)建簡單的網(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è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)簡單模仿；2.理解動(dòng)作和偽類之間的對(duì)應(yīng)關(guān)系；3.掌握偽類使用場景和注意事項(xiàng)。智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練《頁面常用網(wǎng)址導(dǎo)航》示例，理解偽類的使用場景和具體用法。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)用趨勢。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ǔ)充材料中國大學(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)建簡單的網(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)的課前測試，檢查學(xué)生上節(jié)課知識(shí)掌握情況并及時(shí)進(jìn)行測試點(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ā)起課前測試；2.點(diǎn)評(píng)測試結(jié)果；3.抽查學(xué)生課前預(yù)習(xí)情況。1.參與課前測試；2.總結(jié)測試過程中出現(xiàn)的問題；3.反饋課前預(yù)習(xí)情況；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.background屬性結(jié)合背景圖片的特性，通過具體案例展示背景圖片的顏色、內(nèi)容、大小、平鋪、位置等屬性的具體使用場景和方法，在此基礎(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è)簡單的個(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ǔ)充材料中國大學(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è)具體的布局問題，引導(dǎo)學(xué)生思考如何使用浮動(dòng)來解決問題，并分享他們的解決方案。3.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。4.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[20分鐘]課堂小結(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)資料等。課后拓展1.創(chuàng)建一個(gè)在線簡歷頁面，包含個(gè)人資料、教育背景等，并使用CSS進(jìn)行美化。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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)認(rèn)知列表元素；技能目標(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)圖文信息列表教學(xué)難點(diǎn)縱向、橫向?qū)Ш綄W(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ù))1.預(yù)習(xí)微課視頻2.在互聯(lián)網(wǎng)上查找5種布局樣式具有明顯差異的導(dǎo)航。任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)。組織分組討論導(dǎo)航在網(wǎng)頁設(shè)計(jì)中的作用，以及它對(duì)用戶體驗(yà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分鐘]1.以案例形式講解有關(guān)列表的CSS樣式內(nèi)容2.提出一個(gè)具體的導(dǎo)航設(shè)計(jì)問題，讓學(xué)生思考如何使用CSS來解決（縱向?qū)Ш剑?.簡易橫向?qū)Ш?.復(fù)雜橫向?qū)Ш剑ê琇ogo與二級(jí)菜單）5.圖文信息列表案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例。讓學(xué)生跟隨老師的步驟一起創(chuàng)建導(dǎo)航菜單，并及時(shí)提問和解答。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)資料等。課后拓展1.讓學(xué)生嘗試在不同設(shè)備和屏幕尺寸下調(diào)整導(dǎo)航樣式，以實(shí)現(xiàn)響應(yī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ù)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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解表單的基本概念；掌握常用表單的使用方法；技能目標(biāo)掌握CSS控制表單外觀的處理思路素質(zhì)目標(biāo)培養(yǎng)學(xué)生堅(jiān)持問題導(dǎo)向，科學(xué)分析問題、深入研究問題的能力；增強(qiáng)問題意識(shí)，既要見思想，更要見行動(dòng)，從而指導(dǎo)自己的學(xué)習(xí)和工作。教學(xué)重點(diǎn)常見表單對(duì)象（文本字段、復(fù)選框、復(fù)選按鈕、下拉列表、自動(dòng)驗(yàn)證等）教學(xué)難點(diǎn)CSS3按鈕、開源樣式庫按鈕學(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ù))1.預(yù)習(xí)微課視頻2.在智慧校園頁面找出登錄頁和個(gè)人信息頁中的表單個(gè)數(shù)及表單對(duì)象有哪些？任務(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布局與優(yōu)化的關(guān)鍵。2.利用教學(xué)平臺(tái)隨機(jī)抽查學(xué)生預(yù)習(xí)情況，鼓勵(lì)學(xué)生提出感興趣的知識(shí)點(diǎn)。3.結(jié)合學(xué)生反饋，明確課程的學(xué)習(xí)目標(biāo)：掌握常用表單的使用方法。讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.整體回顧上節(jié)課知識(shí)點(diǎn)；2.抽查學(xué)生預(yù)習(xí)情況，引導(dǎo)學(xué)生提出表單對(duì)象是具體使用和設(shè)置；1.反饋預(yù)習(xí)情況；2.明確學(xué)習(xí)任務(wù)；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]1.表單的基本知識(shí)2.常見的表單對(duì)象（1）文本字段（2）復(fù)選框與復(fù)選框組（3）單選按鈕與單選按鈕組（4）“提交”按鈕（5）日期、顏色、滑塊等（6）下拉菜單（7）跳轉(zhuǎn)菜單（8）自動(dòng)驗(yàn)證3.CSS控制表單（1）搜索欄（2）登錄頁（3）傳統(tǒng)按鈕、CSS3按鈕與開源樣式庫按鈕1.教師演示文本字段、復(fù)選框（組）、單選按鈕（組）、的具體使用和注意事項(xiàng)；2.鼓勵(lì)學(xué)生自己探索其他表單對(duì)象的使用場景和方法；3.引導(dǎo)學(xué)生掌握CSS設(shè)置表單的思路和方法；1.觀察教師演示案例；2.主動(dòng)探索教師預(yù)留表單對(duì)象的使用場景和方法；3.學(xué)習(xí)CSS設(shè)置表單的思路和方法；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例，掌握CSS美化表單對(duì)象的思路，了解實(shí)際開發(fā)過程中開源樣式庫按鈕。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。1.鼓勵(lì)學(xué)生積極討論并提供實(shí)踐指導(dǎo)；2.組織學(xué)生開展小組內(nèi)點(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í)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程和文章，以拓寬知識(shí)面和了解最新的HTML5應(yīng)用趨勢。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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解表格的基本知識(shí)技能目標(biāo)掌握細(xì)線表格、隔行換色表格的實(shí)現(xiàn)方法素質(zhì)目標(biāo)培養(yǎng)學(xué)生堅(jiān)持問題導(dǎo)向，科學(xué)分析問題、深入研究問題的能力；增強(qiáng)問題意識(shí)，既要見思想，更要見行動(dòng)，從而指導(dǎo)自己的學(xué)習(xí)和工作。教學(xué)重點(diǎn)細(xì)線表格教學(xué)難點(diǎn)隔行換色表格學(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ù))1.預(yù)習(xí)微課視頻2.收集網(wǎng)頁中不同樣式的表格任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[5分鐘]1.回顧上節(jié)課基本知識(shí)，強(qiáng)調(diào)表單整體性，集中講解作業(yè)批改中的共性問題。2.結(jié)合Office表格的創(chuàng)建，綜合學(xué)生收集的表格樣式，引導(dǎo)學(xué)生思考在網(wǎng)頁上如何創(chuàng)建表格，美化表格。3.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果會(huì)在網(wǎng)頁中創(chuàng)建表格，美化表格，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。1.知識(shí)回顧，強(qiáng)調(diào)共性問題；2.結(jié)合office中的表格，引入網(wǎng)頁中表格的創(chuàng)建和美化后的最終效果。1.關(guān)注表單中的共性問題；2.反饋預(yù)習(xí)時(shí)收集的網(wǎng)頁表格；智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[35分鐘]表格的基本概念及其簡易操作介紹網(wǎng)頁中表格的組成部分，引入表格中的常用標(biāo)簽，演示基本表格的創(chuàng)建及單元格拆分、合并。2.細(xì)線表格 將創(chuàng)建的基本表格和學(xué)生收集到的表格進(jìn)行對(duì)比，引導(dǎo)學(xué)生發(fā)現(xiàn)表格邊框雙線問題，進(jìn)而提出表格細(xì)線化，并具體演示如何實(shí)現(xiàn)。3.隔行換色表格教師演示兩種方法進(jìn)行隔行換色：標(biāo)簽選擇器和偽類選擇器1.演示表格的創(chuàng)建和拆分、合并2.引導(dǎo)學(xué)生思考、實(shí)現(xiàn)細(xì)線表格和隔行換色1.觀看教師演示；2.思考、總結(jié)表格美化流程智能課堂、微課、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é)生開展隨機(jī)點(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í)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.推薦學(xué)生閱讀一些HTML5相關(guān)的書籍、教程和文章，以拓寬知識(shí)面和了解最新的HTML5應(yīng)用趨勢。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ù)3授課班級(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSSSprite技術(shù)的原理技能目標(biāo)掌握CSSSprite技術(shù)的使用方法，能在實(shí)際項(xiàng)目中根據(jù)需求選擇合適的優(yōu)化方案素質(zhì)目標(biāo)進(jìn)一步提升學(xué)生規(guī)范編寫代碼和獨(dú)立分析問題的能力培養(yǎng)學(xué)生自主學(xué)習(xí)，探究問題的思維認(rèn)知教學(xué)重點(diǎn)CSSSprite技術(shù)教學(xué)難點(diǎn)CSSSprite技術(shù)學(xué)情分析對(duì)Web前端有一定學(xué)習(xí)基礎(chǔ)，但遇到問題，自身解決問題的能力不足。教學(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í)，以體驗(yàn)訪問圖片類網(wǎng)站的形式，引入站點(diǎn)是如何優(yōu)化網(wǎng)頁HTTP請(qǐ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í)[45分鐘]1.通過展示一個(gè)網(wǎng)頁，讓學(xué)生觀察網(wǎng)頁中圖片的加載過程，引導(dǎo)學(xué)生思考如何優(yōu)化網(wǎng)頁中的圖片加載速度。2.講解CSSSprites技術(shù)介紹CSSSprites技術(shù)的概念、作用和實(shí)現(xiàn)原理，讓學(xué)生了解CSSSprites技術(shù)的優(yōu)勢和應(yīng)用場景3.制作和使用CSSSprites圖片講解如何使用Photoshop等工具制作CSSSprites圖片，并使用CSS的背景定位屬性顯示所需部分。案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[55分鐘]1.分組進(jìn)行練習(xí)，嘗試使用CSSSprites技術(shù)優(yōu)化一個(gè)網(wǎng)頁中的圖片。在此過程中，教師巡回指導(dǎo)，解答學(xué)生遇到的問題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à)[25分鐘]1.觀察學(xué)生在課堂上的表現(xiàn)，了解他們對(duì)CSSSprites技術(shù)的興趣和掌握程度。2.課堂小結(jié)，強(qiáng)調(diào)CSSSprites技術(shù)在網(wǎng)頁優(yōu)化中的重要性，針對(duì)課堂教學(xué)內(nèi)容，互動(dòng)交流討論，布置后續(xù)課預(yù)習(xí)知識(shí)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展使用本節(jié)所掌握知識(shí)，仿照“太平洋電腦網(wǎng)”部分板塊內(nèi)容，使用CSSSprites技術(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS3有關(guān)漸變和動(dòng)畫的知識(shí)技能目標(biāo)掌握CSS3有關(guān)漸變的實(shí)現(xiàn)方法；掌握CSS3動(dòng)畫設(shè)計(jì)的方法；素質(zhì)目標(biāo)進(jìn)一步提升學(xué)生規(guī)范編寫代碼和獨(dú)立分析問題的能力培養(yǎng)學(xué)生自主學(xué)習(xí)，探究問題的思維認(rèn)知教學(xué)重點(diǎn)CSS3（transform屬性和transition屬性）教學(xué)難點(diǎn)CSS3選項(xià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è)[5分鐘]1.回顧上節(jié)課基本知識(shí)，通過展示一些網(wǎng)頁中運(yùn)用了transform屬性和transition屬性的實(shí)例，讓學(xué)生觀察并思考這些效果是如何實(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分鐘]1.講解CSS3漸變和CSS3動(dòng)畫（transform屬性、transition屬性），通過示例演示如何使用這些函數(shù)對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜和移動(dòng)。2.CSS3動(dòng)畫的應(yīng)用——“幽靈按鈕”3.CSS3選項(xiàng)卡案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.學(xué)生分組進(jìn)行練習(xí)，嘗試使用transform屬性、transition屬性等內(nèi)容，對(duì)一個(gè)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動(dòng)和平滑過渡效果。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)資料等。課后拓展1.深入閱讀你所學(xué)習(xí)的編程語言或框架的官方文檔，以獲得最準(zhǔn)確和權(quán)威的信息。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ù)1授課班級(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解HTML5繪圖技能目標(biāo)能夠使用Canvas繪制簡單圖形；素質(zhì)目標(biāo)進(jìn)一步提升學(xué)生規(guī)范編寫代碼和獨(dú)立分析問題的能力培養(yǎng)學(xué)生自主學(xué)習(xí)，探究問題的思維認(rèn)知教學(xué)重點(diǎn)HTML5Canvas基本概念教學(xué)難點(diǎn)Canvas繪制圓形學(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è)[5分鐘]1.回顧上節(jié)課基本知識(shí)，展示一些使用Canvas制作的網(wǎng)頁實(shí)例，讓學(xué)生觀察并思考這些效果是如何實(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分鐘]1.講解HTML5Canvas的概念和作用介紹HTML5Canvas的概念、作用和發(fā)展歷程，讓學(xué)生了解Canvas在網(wǎng)頁設(shè)計(jì)和制作中的重要性。2.創(chuàng)建畫布并繪制簡單圖形3.講解CanvasAPI的基本用法：Canvas坐標(biāo)、線條與圓案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[40分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例，嘗試使用CanvasAPI繪制一個(gè)簡單的圖形或圖像。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師巡回指導(dǎo)，解答學(xué)生遇到的問題。實(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)資料等。課后拓展1.深入閱讀你所學(xué)習(xí)的編程語言或框架的官方文檔，以獲得最準(zhǔn)確和權(quán)威的信息。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ù)8授課班級(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)掌握Photoshop切片并輸出的操作方法鞏固導(dǎo)航和圖文列表的實(shí)現(xiàn)方法技能目標(biāo)掌握從效果圖到Web頁面的整個(gè)工作過程素質(zhì)目標(biāo)引導(dǎo)學(xué)生樹立崇高的理想信念，促使學(xué)生不斷提升思維能力引導(dǎo)學(xué)生打開思路，踐行創(chuàng)新精神和創(chuàng)新思維方式教學(xué)重點(diǎn)頁面布局規(guī)劃分析教學(xué)難點(diǎn)頁面的實(shí)現(xiàn)學(xué)情分析學(xué)生已經(jīng)能夠使用HTML+CSS搭建基本頁面，但缺乏對(duì)崗位工作流程的認(rè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.在互聯(lián)網(wǎng)上，查找界面設(shè)計(jì)類網(wǎng)站，閱讀1篇網(wǎng)頁設(shè)計(jì)類文章，并下載10張網(wǎng)頁設(shè)計(jì)優(yōu)秀作品。（推薦網(wǎng)站：優(yōu)設(shè)、花瓣、UI中國等）2.預(yù)習(xí)微課視頻3.發(fā)布討論話題任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[20分鐘]1.回顧上節(jié)課基本知識(shí)。2.挑選1-2位同學(xué)，上臺(tái)分享課前優(yōu)秀網(wǎng)頁設(shè)計(jì)作品。3.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對(duì)學(xué)習(xí)路徑有一個(gè)清晰的認(rèn)識(shí)。理論講授明確任務(wù)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識(shí)學(xué)習(xí)[150分鐘]1.引入企業(yè)案例，對(duì)照即將完成制作的效果圖，闡述背景和意義。按照網(wǎng)頁開發(fā)流程，以邊講邊練的形式，講解Photoshop在Web前端的常見操作（1）創(chuàng)建空白文檔（2）標(biāo)尺與參考線（3）吸管工具及其簡單操作（4）切片輸出2.課堂提問：Web前端開發(fā)中，圖片常用的格式有哪些？3.以UI設(shè)計(jì)師角色，對(duì)擬進(jìn)行實(shí)現(xiàn)的效果圖進(jìn)行頁面布局規(guī)劃分析，重點(diǎn)引導(dǎo)學(xué)生對(duì)項(xiàng)目實(shí)踐進(jìn)行整體構(gòu)思。（1）分析效果圖版面布局（2）首頁的實(shí)現(xiàn)（3）列表頁的實(shí)現(xiàn)（4）內(nèi)容頁的實(shí)現(xiàn)案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[170分鐘]1.認(rèn)真聆聽教師的演示操作講解，上機(jī)操作Photoshop和DW，進(jìn)行實(shí)踐演練。對(duì)于出現(xiàn)的問題，首先復(fù)看微課視頻，自行動(dòng)腦思考，再進(jìn)行同學(xué)間幫助，解決不了的，由教師進(jìn)行指導(dǎo)答疑。2.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[20分鐘]1.回顧本節(jié)知識(shí)點(diǎn)，對(duì)本章節(jié)的重點(diǎn)難點(diǎn)進(jìn)行歸納和總結(jié)。2.點(diǎn)評(píng)同學(xué)在自主演練過程中大家的表現(xiàn)情況，對(duì)于出現(xiàn)較多的共性問題，再次統(tǒng)一講解和演示。3.強(qiáng)調(diào)“講誠信，強(qiáng)規(guī)范，保質(zhì)量”的核心職業(yè)素養(yǎng)。作業(yè)點(diǎn)評(píng)課程小結(jié)查漏補(bǔ)缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展1.布置拓展任務(wù)，完成某站點(diǎn)首頁設(shè)計(jì)與制作。2.線上線下完成學(xué)生重難點(diǎn)鞏固與答疑。課外指導(dǎo)知識(shí)技能補(bǔ)充網(wǎng)絡(luò)資源、即時(shí)通信等。診斷改進(jìn)課堂教學(xué)設(shè)計(jì)課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計(jì)與制作授課時(shí)數(shù)8授課班級(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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解響應(yīng)式布局的相關(guān)知識(shí)掌握viewport的使用方法了解響應(yīng)式頁面開發(fā)框架的基本知識(shí)技能目標(biāo)掌握mediaquery的基本語法和使用方法素質(zhì)目標(biāo)面對(duì)日益更新的Web前端技術(shù)知識(shí)，培養(yǎng)學(xué)生以與時(shí)俱進(jìn)的眼光看待問題；培養(yǎng)學(xué)生溫故知新和勇于探索實(shí)踐的學(xué)習(xí)方法。教學(xué)重點(diǎn)viewport教學(xué)難點(diǎn)mediaquery學(xué)情分析學(xué)生已經(jīng)能夠使用HTML+CSS搭建基本頁面，對(duì)于復(fù)雜頁面布局和不同設(shè)備間的響應(yīng)式設(shè)計(jì)缺乏知識(shí)儲(chǔ)備。教學(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í)，現(xiàn)場展示多設(shè)備（臺(tái)式機(jī)、智能手機(jī)）訪問同一響應(yīng)式網(wǎng)站，引出CSS的媒體查詢（MediaQueries），是實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的關(guān)鍵技術(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í)[150分鐘]1.了解“響應(yīng)式Web設(shè)計(jì)”2.viewport網(wǎng)頁可視區(qū)域3.媒體查詢?cè)斀?.“響應(yīng)式”頁面的設(shè)計(jì)與實(shí)現(xiàn)（1）頁面分析（2）確定基本頁面5.詳細(xì)實(shí)施過程6.“響應(yīng)式”框架介紹案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[180分鐘]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à)[20分鐘]課堂小結(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)資料等。課后拓展1.分析其他優(yōu)秀的響應(yīng)式網(wǎng)站，了解它們是如何設(shè)計(jì)和實(shí)現(xiàn)的，使用瀏覽器的開發(fā)者工具來檢查這些網(wǎng)站的代碼。2.關(guān)注行業(yè)新聞和技術(shù)博客，了解響應(yīng)式設(shè)計(jì)的最新趨勢和最佳實(shí)踐。3.閱讀W3C對(duì)HTML5和CSS3的官方文檔，以了解最新的標(biāo)準(zhǔ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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)了解Bootstrap框架的基礎(chǔ)概念；掌握Bootstrap框架中柵格系統(tǒng)的基礎(chǔ)知識(shí)及其使用方法；掌握Bootstrap框架中表單、圖片、導(dǎo)航欄等組件的使用方法；技能目標(biāo)能夠使用Bootstrap框架搭建簡單頁面。素質(zhì)目標(biāo)啟發(fā)和培養(yǎng)學(xué)生合作共贏的職業(yè)精神；增強(qiáng)開源文化下的人文社會(huì)科學(xué)素養(yǎng)和社會(huì)責(zé)任感。教學(xué)重點(diǎn)Bootstrap框架基本知識(shí)教學(xué)難點(diǎn)Bootstrap導(dǎo)航欄學(xué)情分析學(xué)生已經(jīng)能夠使用HTML+CSS搭建基本頁面，對(duì)于復(fù)雜頁面布局和不同設(shè)備間的響應(yīng)式設(shè)計(jì)缺乏知識(shí)儲(chǔ)備。教學(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.訪問Bootstrap中文網(wǎng)站，查閱相關(guān)資料，了解Bootstrap基本知識(shí)。任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[10分鐘]1.回顧上節(jié)課基本知識(shí)，由演示Bootstrap官方網(wǎng)站實(shí)例，引出使用Bootstrap框架的發(fā)展歷程和特點(diǎn)，讓學(xué)生對(duì)Bootstrap框架有一個(gè)整體認(rèn)識(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.講解Bootstrap框架的基本概念、布局原理、響應(yīng)式設(shè)計(jì)等理論知識(shí)，操作演示Bootstrap的環(huán)境配置。2.理論講解與案例教學(xué)并行，講解Bootstrap框架的柵格系統(tǒng)、表格、表單、圖片和導(dǎo)航欄等原理，讓學(xué)生掌握Bootstrap框架的布局方法。案例教學(xué)知識(shí)獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[90分鐘]1.根據(jù)教材內(nèi)容上機(jī)演練各個(gè)示例，提示學(xué)生遵循代碼編寫規(guī)范。2.鼓勵(lì)學(xué)生在上機(jī)演練時(shí)相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時(shí)的反饋和指導(dǎo)，幫助學(xué)生及時(shí)糾正錯(cuò)誤，加深理解。4.教師指派優(yōu)秀學(xué)生作為課堂教學(xué)小助手，幫助同學(xué)解答疑難。實(shí)踐指導(dǎo)實(shí)踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評(píng)價(jià)[20分鐘]課堂小結(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)資料等。課后拓展1.訪問Bootstrap中文網(wǎng)站，欣賞優(yōu)秀的網(wǎng)頁案例，并通過在瀏覽器中按下F12鍵進(jìn)入開發(fā)者模式，觀察頁面結(jié)構(gòu)與應(yīng)用。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ǔ)充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識(shí)目標(biāo)能夠使用Bootstrap框架搭建簡單頁面技能目標(biāo)能夠使用Bootstrap框架搭建簡單頁面素質(zhì)目標(biāo)啟發(fā)和培養(yǎng)學(xué)生合作共贏的職業(yè)精神；增強(qiáng)開源文化下的人文社會(huì)科學(xué)素養(yǎng)和社會(huì)責(zé)任感。教學(xué)重點(diǎn)Bootstrap框架教學(xué)難點(diǎn)Bootstrap框架學(xué)情分析學(xué)生已經(jīng)能夠使用HTML+CSS搭建基本頁面，對(duì)于復(fù)雜頁面布局和不同設(shè)備間的響應(yīng)式設(shè)計(jì)缺乏知識(shí)儲(chǔ)備。教學(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