HTML5CSS3Web前端設(shè)計基礎(chǔ)教程（吳豐 第3版）教案全套-教學設(shè)計 任務(wù)1 Web前端工程師職業(yè)前景與開發(fā)流程-任務(wù)22 Web App頁面的設(shè)計與實現(xiàn)

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