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