教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱6.4瀑布流相冊(cè)的制作授課班級(jí)授課時(shí)間授課類型理實(shí)一體化課、新授課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教學(xué)方法主導(dǎo)：項(xiàng)目引領(lǐng)“任務(wù)驅(qū)動(dòng)”教學(xué)法；輔助：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、小組協(xié)作法教學(xué)重點(diǎn)1.運(yùn)用Flex布局實(shí)現(xiàn)瀑布流相冊(cè)的多列自適應(yīng)布局2.相冊(cè)圖片容器樣式設(shè)計(jì)及圖片自適應(yīng)顯示控制教學(xué)難點(diǎn)1.Flex布局實(shí)現(xiàn)瀑布流的列間距、對(duì)齊方式精準(zhǔn)控制2.結(jié)合媒體查詢實(shí)現(xiàn)不同設(shè)備下瀑布流布局的響應(yīng)式適配學(xué)情分析1.前置基礎(chǔ)：已掌握HTML5標(biāo)簽應(yīng)用、CSS3基礎(chǔ)樣式、Flex核心屬性及新聞網(wǎng)頁制作經(jīng)驗(yàn)，能運(yùn)用AIGC輔助編碼，熟悉VSCode與超星平臺(tái)操作。2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、對(duì)視覺化項(xiàng)目興趣濃厚，具象思維突出，但對(duì)瀑布流布局的自適應(yīng)邏輯理解薄弱，精準(zhǔn)控制間距與響應(yīng)式適配能力不足，需分步引導(dǎo)實(shí)操。板書設(shè)計(jì)瀑布流相冊(cè)制作1.核心布局：Flex多列自適應(yīng)（flex-wrap:wrap）2.關(guān)鍵樣式：圖片自適應(yīng)、列間距控制3.響應(yīng)適配：@media調(diào)整列數(shù)與間距二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間項(xiàng)目導(dǎo)入，任務(wù)拆解1.案例展示：呈現(xiàn)美麗鄉(xiāng)村主題瀑布流相冊(cè)成品（圖6-10），對(duì)比普通網(wǎng)格相冊(cè)，說明瀑布流在圖片展示中的美觀性與適配優(yōu)勢。2.任務(wù)拆解：明確項(xiàng)目目標(biāo)為制作瀑布流相冊(cè)，拆分為3個(gè)子任務(wù)——搭建相冊(cè)基礎(chǔ)結(jié)構(gòu)、實(shí)現(xiàn)Flex瀑布流布局、添加響應(yīng)式適配與交互效果。3.亮點(diǎn)預(yù)告：引入“樣式模板復(fù)用+參數(shù)微調(diào)”模式，結(jié)合AIGC生成適配代碼，提升布局精準(zhǔn)度與效率。教師：通過超星平臺(tái)展示案例，講解瀑布流布局核心邏輯，拆解任務(wù)優(yōu)先級(jí)，演示相冊(cè)圖片素材的獲取與導(dǎo)入方法。學(xué)生：觀察案例效果，明確任務(wù)目標(biāo)，記錄瀑布流布局關(guān)鍵特征，結(jié)合前置知識(shí)思考Flex屬性的應(yīng)用場景。設(shè)計(jì)意圖：以視覺化案例激發(fā)興趣，拆解任務(wù)降低難度，凸顯樣式復(fù)用亮點(diǎn)，為實(shí)操鋪墊。時(shí)間：10分鐘知識(shí)回顧，案例精講1.知識(shí)回顧：聚焦Flex布局瀑布流核心屬性，重點(diǎn)回顧flex-wrap、gap、align-items等屬性的取值與適配效果，補(bǔ)充object-fit圖片自適應(yīng)屬性用法。2.案例精講：結(jié)合教材圖6-11布局示意圖，講解相冊(cè)HTML結(jié)構(gòu)（容器+圖片卡片），演示CSS樣式編寫（容器寬高、列數(shù)控制、間距設(shè)置、圖片自適應(yīng)）。3.響應(yīng)式基礎(chǔ)：講解媒體查詢（@media）語法，示范不同屏幕寬度下調(diào)整列數(shù)與間距的代碼邏輯。教師：通過超星平臺(tái)展示屬性應(yīng)用對(duì)照表，結(jié)合代碼演示拆解布局邏輯，強(qiáng)調(diào)圖片自適應(yīng)與間距控制要點(diǎn)，示范媒體查詢編寫。學(xué)生：跟隨回顧屬性用法，記錄代碼編寫要點(diǎn)，嘗試仿寫基礎(chǔ)樣式代碼，提出疑問并交流。設(shè)計(jì)意圖：銜接前置知識(shí)，通過案例精講突破瀑布流布局重點(diǎn)，鋪墊響應(yīng)式適配知識(shí)，契合職校生學(xué)習(xí)特點(diǎn)。時(shí)間：15分鐘小組協(xié)作，實(shí)操攻堅(jiān)一任務(wù)：搭建瀑布流相冊(cè)基礎(chǔ)結(jié)構(gòu)并實(shí)現(xiàn)核心布局，細(xì)化步驟如下：1.新建文件：打開VSCode，復(fù)用站點(diǎn)文件夾，新建album.html及css/albumstyles.css文件，完成樣式文件鏈接與基礎(chǔ)樣式重置。2.結(jié)構(gòu)搭建：編寫HTML代碼，創(chuàng)建相冊(cè)容器（.album-container），嵌套12個(gè)圖片卡片（.album-item），插入美麗鄉(xiāng)村圖片素材。3.核心布局：編寫CSS代碼，設(shè)置容器為Flex布局，開啟換行（flex-wrap:wrap），設(shè)置列間距（gap），控制卡片寬度實(shí)現(xiàn)3列布局。4.圖片適配：為圖片添加object-fit:cover屬性，設(shè)置卡片圓角與陰影，優(yōu)化視覺效果。教師：將學(xué)生分為4人小組，明確分工（結(jié)構(gòu)搭建、樣式編寫、AIGC輔助、調(diào)試）；巡視指導(dǎo)，重點(diǎn)解決列數(shù)控制、圖片變形、間距不均等問題。學(xué)生：小組協(xié)作完成任務(wù)，運(yùn)用AIGC優(yōu)化樣式代碼，調(diào)試布局效果，記錄問題并小組內(nèi)討論解決。設(shè)計(jì)意圖：通過小組協(xié)作提升效率，細(xì)化步驟確保實(shí)操落地，聚焦核心布局制作，突破教學(xué)重點(diǎn)。時(shí)間：25分鐘（第一學(xué)時(shí)結(jié)束）成果點(diǎn)評(píng)，問題梳理1.成果展示：選取2-3組作品投影展示，由小組代表講解制作過程及遇到的布局問題。2.點(diǎn)評(píng)糾錯(cuò)：教師針對(duì)共性問題（圖片變形、列間距不一致、布局溢出）集中講解，演示修正方法，強(qiáng)調(diào)object-fit與gap屬性的正確應(yīng)用。3.問題梳理：總結(jié)核心布局制作的關(guān)鍵要點(diǎn)與誤區(qū)，為響應(yīng)式適配及交互效果制作鋪墊。教師：組織成果展示，客觀點(diǎn)評(píng)優(yōu)劣，聚焦共性問題講解，引導(dǎo)學(xué)生總結(jié)經(jīng)驗(yàn)，修正作品。學(xué)生：傾聽點(diǎn)評(píng)，對(duì)照自身作品修正問題，記錄要點(diǎn)與誤區(qū)，補(bǔ)充完善核心布局。設(shè)計(jì)意圖：通過點(diǎn)評(píng)強(qiáng)化知識(shí)應(yīng)用，集中解決共性問題，鞏固第一學(xué)時(shí)內(nèi)容，銜接后續(xù)任務(wù)。時(shí)間：10分鐘案例示范，實(shí)操攻堅(jiān)二任務(wù)：添加響應(yīng)式適配與交互效果，細(xì)化步驟如下：1.響應(yīng)式適配：編寫媒體查詢代碼，屏幕寬度≤768px時(shí)改為2列布局，≤480px時(shí)改為1列布局，同步調(diào)整間距與卡片尺寸。2.交互效果：為圖片卡片添加hover效果（縮放、陰影加深），設(shè)置過渡動(dòng)畫（transition）實(shí)現(xiàn)平滑效果。3.標(biāo)題添加：在相冊(cè)頂部添加“美麗鄉(xiāng)村風(fēng)光”標(biāo)題，設(shè)置居中、字體樣式及間距，優(yōu)化頁面完整性。4.整體調(diào)試：在不同瀏覽器窗口尺寸下預(yù)覽，調(diào)整響應(yīng)式斷點(diǎn)與交互效果參數(shù)，確保適配正常。教師：示范媒體查詢與交互效果核心代碼編寫，強(qiáng)調(diào)響應(yīng)式斷點(diǎn)設(shè)置邏輯，指導(dǎo)學(xué)生調(diào)試參數(shù)；針對(duì)難點(diǎn)問題單獨(dú)輔導(dǎo)。學(xué)生：獨(dú)立完成響應(yīng)式適配與交互效果制作，結(jié)合AIGC優(yōu)化代碼，多場景調(diào)試效果，主動(dòng)求助解決問題。設(shè)計(jì)意圖：通過示范降低難點(diǎn)難度，細(xì)化步驟確保實(shí)操可落地，強(qiáng)化響應(yīng)式適配能力，突破教學(xué)難點(diǎn)。時(shí)間：20分鐘總結(jié)拓展，任務(wù)布置1.知識(shí)總結(jié)：梳理項(xiàng)目核心流程（結(jié)構(gòu)搭建-核心布局-響應(yīng)適配-交互優(yōu)化）及關(guān)鍵技術(shù)（Flex布局、媒體查詢、過渡動(dòng)畫）。2.拓展延伸：簡要介紹圖片懶加載思路，引導(dǎo)學(xué)生課后自主探索，提升相冊(cè)加載效率。3.任務(wù)布置：明確課后作業(yè)及提交規(guī)范，強(qiáng)調(diào)作品完整性與適配效果。教師：用思維導(dǎo)圖梳理知識(shí)點(diǎn)，強(qiáng)調(diào)重點(diǎn)難點(diǎn)，布置課后作業(yè)，提醒通過超星平臺(tái)提交作品與提問。學(xué)生：跟隨梳理知識(shí)，記錄拓展內(nèi)容及作業(yè)要求，規(guī)劃課后完善計(jì)劃。設(shè)計(jì)意圖：系統(tǒng)梳理知識(shí)，拓展學(xué)習(xí)空間，通過作業(yè)鞏固所學(xué)，形成項(xiàng)目閉環(huán)，提升綜合應(yīng)用能力。時(shí)間：10分鐘（第二學(xué)時(shí)結(jié)束）三、課后作業(yè)和教學(xué)反思課后作業(yè)1.完善瀑布流相冊(cè)，優(yōu)化響應(yīng)式斷點(diǎn)與交互效果，添加圖片懶加載功能（參考教材提示），上傳超星平臺(tái)。2.替換相冊(cè)圖片為自主收集的美麗鄉(xiāng)村素材，調(diào)整樣式細(xì)節(jié)，撰寫50字