教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱5.1美麗鄉(xiāng)村首頁(yè)制作授課班級(jí)授課時(shí)間授課類型理實(shí)一體化、項(xiàng)目實(shí)訓(xùn)課授課地點(diǎn)機(jī)房（聯(lián)網(wǎng)，支持超星教學(xué)平臺(tái)）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教材分析本節(jié)選自《Web前端開發(fā)技術(shù)》第五單元實(shí)訓(xùn)內(nèi)容，以美麗鄉(xiāng)村首頁(yè)制作為核心項(xiàng)目，整合CSS盒子模型、浮動(dòng)布局等知識(shí)。通過“任務(wù)規(guī)劃-實(shí)施-驗(yàn)證”流程，將抽象的布局知識(shí)轉(zhuǎn)化為具象項(xiàng)目，是前文HTML、CSS基礎(chǔ)的綜合應(yīng)用，為后續(xù)復(fù)雜網(wǎng)頁(yè)開發(fā)奠定實(shí)操基礎(chǔ)，兼具實(shí)用性與綜合性。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML基礎(chǔ)標(biāo)簽、CSS盒子模型核心概念及屬性設(shè)置，熟悉VSCode操作，能編寫簡(jiǎn)單靜態(tài)頁(yè)面，了解超星平臺(tái)使用方法。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、具象思維突出，對(duì)項(xiàng)目化實(shí)訓(xùn)興趣濃厚，但邏輯規(guī)劃能力較弱，對(duì)多模塊布局的拆分與整合存在困難，依賴分步指引。

3.潛在問題：對(duì)AIGC工具輔助編碼不熟悉，易出現(xiàn)浮動(dòng)布局錯(cuò)亂、文件路徑錯(cuò)誤等問題，需針對(duì)性指導(dǎo)。教學(xué)目標(biāo)【知識(shí)目標(biāo)】：

1.掌握美麗鄉(xiāng)村首頁(yè)的模塊拆分方法，理解浮動(dòng)布局在頁(yè)面整體布局中的應(yīng)用。

2.學(xué)會(huì)運(yùn)用AIGC工具生成基礎(chǔ)代碼，掌握代碼整理與優(yōu)化的核心要點(diǎn)。

【能力目標(biāo)】：

1.能獨(dú)立完成項(xiàng)目創(chuàng)建、文件結(jié)構(gòu)搭建及首頁(yè)總體布局框架編寫。

2.能精準(zhǔn)實(shí)現(xiàn)頁(yè)頭導(dǎo)航區(qū)的布局與樣式優(yōu)化，排查常見布局錯(cuò)誤。

【素質(zhì)目標(biāo)】：

1.培養(yǎng)項(xiàng)目規(guī)劃意識(shí)與嚴(yán)謹(jǐn)?shù)木幋a習(xí)慣，提升問題排查能力。

2.掌握AI協(xié)作開發(fā)技巧，樹立高效實(shí)訓(xùn)的理念。教學(xué)重點(diǎn)1.美麗鄉(xiāng)村首頁(yè)的模塊拆分與總體布局框架搭建。

2.頁(yè)頭導(dǎo)航區(qū)（LOGO、導(dǎo)航菜單、搜索表單）的布局與樣式實(shí)現(xiàn)。教學(xué)難點(diǎn)1.浮動(dòng)布局的合理運(yùn)用及浮動(dòng)清除，避免布局錯(cuò)亂。

2.AIGC提示詞的精準(zhǔn)撰寫的，及生成代碼的整理與優(yōu)化。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、投影儀、黑板。

2.軟件：VSCode、Chrome瀏覽器、超星教學(xué)平臺(tái)（提前上傳實(shí)訓(xùn)手冊(cè)、案例代碼、AIGC提示詞模板）。

3.素材：美麗鄉(xiāng)村首頁(yè)效果圖、LOGO圖片素材、AIGC工具使用指南、分步實(shí)操任務(wù)單。教學(xué)方法1.主導(dǎo)方法：項(xiàng)目引領(lǐng)“任務(wù)驅(qū)動(dòng)”教學(xué)法（以首頁(yè)制作為項(xiàng)目，拆解為階梯式任務(wù)）。

2.輔助方法：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、AI協(xié)作指導(dǎo)法。板書設(shè)計(jì)5.1美麗鄉(xiāng)村首頁(yè)制作

一、模塊拆分：頁(yè)頭-新聞-特色-熱門-頁(yè)腳

二、核心技術(shù)：浮動(dòng)布局、AI輔助編碼

三、難點(diǎn)：清除浮動(dòng)、代碼優(yōu)化二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：項(xiàng)目導(dǎo)入，任務(wù)拆解1.項(xiàng)目展示：展示美麗鄉(xiāng)村首頁(yè)效果圖，介紹項(xiàng)目背景（鄉(xiāng)村振興主題）及實(shí)訓(xùn)價(jià)值，明確本節(jié)課核心目標(biāo)——完成首頁(yè)總體布局框架及頁(yè)頭導(dǎo)航區(qū)制作。

2.任務(wù)拆解：結(jié)合實(shí)訓(xùn)手冊(cè)，將項(xiàng)目拆分為3個(gè)階梯任務(wù)：

（1）任務(wù)1：項(xiàng)目創(chuàng)建與文件結(jié)構(gòu)搭建（15分鐘）；

（2）任務(wù)2：總體布局框架編寫（AI輔助+代碼整理，25分鐘）；

（3）任務(wù)3：頁(yè)頭導(dǎo)航區(qū)布局與樣式優(yōu)化（30分鐘）。

3.亮點(diǎn)預(yù)告：講解AIGC工具輔助編碼技巧，明確代碼整理規(guī)范，突破傳統(tǒng)編碼效率瓶頸。教師：展示效果圖，拆解任務(wù)，強(qiáng)調(diào)重點(diǎn)難點(diǎn)，演示AIGC工具基礎(chǔ)用法。

學(xué)生：觀察效果圖，理解任務(wù)邏輯，記錄AIGC使用要點(diǎn)，明確各階段目標(biāo)。設(shè)計(jì)意圖：以項(xiàng)目激發(fā)興趣，階梯式任務(wù)降低實(shí)操難度，貼合職校生學(xué)情；融入AI協(xié)作亮點(diǎn)，提升實(shí)訓(xùn)效率。

時(shí)間：10分鐘環(huán)節(jié)二：任務(wù)部署，示范引領(lǐng)1.任務(wù)1部署：講解項(xiàng)目創(chuàng)建規(guī)范，要求在D:\design\路徑下創(chuàng)建“BeautifulRuralVillagesWebsite”項(xiàng)目，新建css、js、img子文件夾及index.html文件，引用css/styles.css樣式文件。

2.示范操作：在VSCode中演示項(xiàng)目創(chuàng)建、文件新建及路徑設(shè)置流程，強(qiáng)調(diào)素材存放規(guī)范（圖片放入img文件夾）。

3.AIGC提示詞示范：展示總體布局框架的AIGC提示詞模板，講解核心要素（布局要求、技術(shù)限制、模塊劃分），演示生成代碼的復(fù)制與粘貼。教師：分步示范操作，強(qiáng)調(diào)文件路徑、命名規(guī)范，解析AIGC提示詞邏輯。

學(xué)生：跟隨示范創(chuàng)建項(xiàng)目及文件，記錄提示詞要點(diǎn)，準(zhǔn)備獨(dú)立實(shí)操。設(shè)計(jì)意圖：通過示范降低入門難度，規(guī)范項(xiàng)目結(jié)構(gòu)，為后續(xù)實(shí)操奠定基礎(chǔ)，突破AIGC提示詞撰寫難點(diǎn)。

時(shí)間：15分鐘環(huán)節(jié)三：自主實(shí)操，分層指導(dǎo)1.任務(wù)1實(shí)操（10分鐘）：學(xué)生獨(dú)立完成項(xiàng)目創(chuàng)建與文件結(jié)構(gòu)搭建，驗(yàn)證樣式文件引用正確性，教師巡視指導(dǎo)，排查路徑錯(cuò)誤、文件命名錯(cuò)誤等問題。

2.任務(wù)2實(shí)操（25分鐘）：

（1）學(xué)生參照提示詞模板，使用AIGC工具生成首頁(yè)總體布局框架代碼（含頁(yè)頭、新聞列表區(qū)、鄉(xiāng)村特色區(qū)等5大模塊）。

（2）整理生成代碼，刪除冗余內(nèi)容，補(bǔ)充注釋，優(yōu)化標(biāo)簽結(jié)構(gòu)，確保浮動(dòng)布局合理，添加clear:both清除浮動(dòng)。

（3）分層要求：基礎(chǔ)層完成代碼整理與預(yù)覽；提高層嘗試調(diào)整模塊寬度、邊距等屬性優(yōu)化布局。

3.教師指導(dǎo)：重點(diǎn)幫扶基礎(chǔ)薄弱學(xué)生，針對(duì)浮動(dòng)錯(cuò)亂問題，演示清除浮動(dòng)的方法；指導(dǎo)提高層學(xué)生優(yōu)化代碼規(guī)范性。教師：巡視實(shí)操情況，一對(duì)一解決路徑錯(cuò)誤、浮動(dòng)錯(cuò)亂等問題，點(diǎn)評(píng)共性問題，提供代碼優(yōu)化建議。

學(xué)生：獨(dú)立完成實(shí)操任務(wù)，運(yùn)用AIGC工具生成代碼并整理，主動(dòng)提問解決疑問，驗(yàn)證布局效果。設(shè)計(jì)意圖：落實(shí)任務(wù)驅(qū)動(dòng)，給予學(xué)生自主實(shí)操空間，分層要求兼顧不同水平學(xué)生，針對(duì)性突破浮動(dòng)布局難點(diǎn)。

時(shí)間：35分鐘（第一學(xué)時(shí)結(jié)束）環(huán)節(jié)四：案例精講，難點(diǎn)突破1.共性問題點(diǎn)評(píng)：展示學(xué)生任務(wù)2完成作品，點(diǎn)評(píng)代碼規(guī)范、布局合理性等，重點(diǎn)講解浮動(dòng)清除、模塊居中的常見錯(cuò)誤及解決方案。

2.頁(yè)頭導(dǎo)航區(qū)案例精講：

（1）講解頁(yè)頭1行3列布局邏輯（LOGO占20%、導(dǎo)航占50%、搜索占30%），演示浮動(dòng)布局實(shí)現(xiàn)方法。

（2）解析AIGC生成的頁(yè)頭代碼，講解導(dǎo)航菜單橫向排列、搜索表單樣式優(yōu)化的核心要點(diǎn)，強(qiáng)調(diào)hover效果的實(shí)現(xiàn)邏輯。

3.任務(wù)3部署：明確頁(yè)頭導(dǎo)航區(qū)制作要求，包括LOGO尺寸、導(dǎo)航菜單樣式、搜索表單驗(yàn)證功能。教師：點(diǎn)評(píng)作品，精講布局邏輯與樣式優(yōu)化技巧，演示核心代碼效果。

學(xué)生：對(duì)照自身作品修正錯(cuò)誤，記錄頁(yè)頭制作要點(diǎn)，明確任務(wù)3目標(biāo)。設(shè)計(jì)意圖：通過點(diǎn)評(píng)強(qiáng)化知識(shí)掌握，案例精講聚焦重點(diǎn)，為任務(wù)3實(shí)操提供清晰指引，突破頁(yè)頭布局難點(diǎn)。

時(shí)間：15分鐘環(huán)節(jié)五：強(qiáng)化實(shí)操，成果檢驗(yàn)1.任務(wù)3實(shí)操（20分鐘）：

（1）學(xué)生在現(xiàn)有框架基礎(chǔ)上，完善頁(yè)頭導(dǎo)航區(qū)HTML代碼，添加LOGO圖片、7個(gè)導(dǎo)航鏈接及搜索表單。

（2）編寫CSS樣式，實(shí)現(xiàn)導(dǎo)航菜單橫向排列、hover效果（顏色變化+字體加粗），設(shè)置搜索表單樣式及HTML5自帶驗(yàn)證。

（3）在瀏覽器中預(yù)覽效果，排查樣式錯(cuò)亂、圖片不顯示、表單驗(yàn)證失效等問題。

2.成果提交：學(xué)生完成后，將項(xiàng)目文件壓縮上傳至超星教學(xué)平臺(tái)，標(biāo)注姓名及班級(jí)。

3.隨機(jī)抽檢：抽取3-5份作品，在投影儀上展示，師生共同點(diǎn)評(píng)。教師：巡視指導(dǎo)，重點(diǎn)解決圖片路徑、表單驗(yàn)證、hover效果等問題，抽檢作品并組織點(diǎn)評(píng)。

學(xué)生：獨(dú)立完成頁(yè)頭制作，預(yù)覽驗(yàn)證效果，提交作品，參與點(diǎn)評(píng)并修正問題。設(shè)計(jì)意圖：強(qiáng)化實(shí)操應(yīng)用，檢驗(yàn)教學(xué)效果，通過師生點(diǎn)評(píng)提升學(xué)生審美與代碼優(yōu)化能力。

時(shí)間：20分鐘環(huán)節(jié)六：項(xiàng)目總結(jié)，拓展延伸1.項(xiàng)目總結(jié)：回顧本節(jié)課任務(wù)流程（項(xiàng)目創(chuàng)建-框架搭建-頁(yè)頭制作），梳理核心知識(shí)點(diǎn)（模塊拆分、浮動(dòng)布局、AI輔助編碼），強(qiáng)調(diào)代碼規(guī)范與問題排查技巧。

2.知識(shí)拓展：預(yù)告下節(jié)課內(nèi)容（新聞列表區(qū)、鄉(xiāng)村特色區(qū)制作），布置預(yù)習(xí)任務(wù)，要求熟悉實(shí)訓(xùn)手冊(cè)中對(duì)應(yīng)環(huán)節(jié)的提示詞模板。

3.技能提升：鼓勵(lì)學(xué)生課后嘗試優(yōu)化頁(yè)頭樣式，添加個(gè)性化設(shè)計(jì)元素。教師：梳理知識(shí)點(diǎn)，拓展后續(xù)任務(wù)，解答學(xué)生遺留疑問。

學(xué)生：回顧實(shí)訓(xùn)流程，記錄重點(diǎn)難點(diǎn)，明確預(yù)習(xí)方向，優(yōu)化自身作品。設(shè)計(jì)意圖：系統(tǒng)梳理實(shí)訓(xùn)內(nèi)容，形成知識(shí)體系，為后續(xù)實(shí)訓(xùn)鋪墊，激發(fā)學(xué)生個(gè)性化創(chuàng)作熱情。

時(shí)間：5分鐘三、課后作業(yè)和教學(xué)反思課后作業(yè)1.完善本節(jié)課實(shí)訓(xùn)作品，優(yōu)化頁(yè)頭導(dǎo)航區(qū)樣式，確保在不同瀏覽器中預(yù)覽效果一致，重新上傳至超星平臺(tái)。

2.預(yù)習(xí)實(shí)訓(xùn)手冊(cè)中新聞列表區(qū)、鄉(xiāng)村特色區(qū)制作內(nèi)容，撰寫對(duì)應(yīng)的AIGC提