課堂教學(xué)設(shè)計課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計與制作授課時數(shù)3授課班級授課時間授課地點授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識目標(biāo)掌握CSSSprite技術(shù)的原理技能目標(biāo)掌握CSSSprite技術(shù)的使用方法，能在實際項目中根據(jù)需求選擇合適的優(yōu)化方案素質(zhì)目標(biāo)進一步提升學(xué)生規(guī)范編寫代碼和獨立分析問題的能力培養(yǎng)學(xué)生自主學(xué)習(xí)，探究問題的思維認(rèn)知教學(xué)重點CSSSprite技術(shù)教學(xué)難點CSSSprite技術(shù)學(xué)情分析對Web前端有一定學(xué)習(xí)基礎(chǔ)，但遇到問題，自身解決問題的能力不足。教學(xué)總體設(shè)計依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實踐操作、課堂小結(jié)的路徑組織實施教學(xué)過程。課外拓展有針對性的安排訓(xùn)練，同時培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識和習(xí)慣，進而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時間安排)教學(xué)內(nèi)容教學(xué)活動技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))預(yù)習(xí)微課視頻任務(wù)下達、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[10分鐘]1.回顧上節(jié)課基本知識，以體驗訪問圖片類網(wǎng)站的形式，引入站點是如何優(yōu)化網(wǎng)頁HTTP請求數(shù)量的。2.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對學(xué)習(xí)路徑有一個清晰的認(rèn)識。理論講授明確任務(wù)知識獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識學(xué)習(xí)[45分鐘]1.通過展示一個網(wǎng)頁，讓學(xué)生觀察網(wǎng)頁中圖片的加載過程，引導(dǎo)學(xué)生思考如何優(yōu)化網(wǎng)頁中的圖片加載速度。2.講解CSSSprites技術(shù)介紹CSSSprites技術(shù)的概念、作用和實現(xiàn)原理，讓學(xué)生了解CSSSprites技術(shù)的優(yōu)勢和應(yīng)用場景3.制作和使用CSSSprites圖片講解如何使用Photoshop等工具制作CSSSprites圖片，并使用CSS的背景定位屬性顯示所需部分。案例教學(xué)知識獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[55分鐘]1.分組進行練習(xí)，嘗試使用CSSSprites技術(shù)優(yōu)化一個網(wǎng)頁中的圖片。在此過程中，教師巡回指導(dǎo)，解答學(xué)生遇到的問題2.鼓勵學(xué)生在上機演練時相互討論，分享學(xué)習(xí)心得和遇到的問題，通過集體的智慧解決問題。3.教師即時的反饋和指導(dǎo)，幫助學(xué)生及時糾正錯誤，加深理解。實踐指導(dǎo)實踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評價[25分鐘]1.觀察學(xué)生在課堂上的表現(xiàn)，了解他們對CSSSprites技術(shù)的興趣和掌握程度。2.課堂小結(jié)，強調(diào)CSSSprites技術(shù)在網(wǎng)頁優(yōu)化中的重要性，針對課堂教學(xué)內(nèi)容，互動交流討論，布置后續(xù)課預(yù)習(xí)知識。作業(yè)點評課程小結(jié)查漏補缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課后拓展使用本節(jié)所掌握知識，仿照