教學(xué)設(shè)計(jì)一、基本信息課程名稱Web前端開發(fā)技術(shù)課題名稱智慧黨建網(wǎng)站新聞列表頁(yè)制作授課班級(jí)授課時(shí)間授課類型理實(shí)一體化、項(xiàng)目實(shí)訓(xùn)課授課地點(diǎn)機(jī)房（有網(wǎng)絡(luò)，配備超星教學(xué)平臺(tái)）授課學(xué)時(shí)40分鐘*2學(xué)時(shí)教材分析本節(jié)選自《Web前端開發(fā)技術(shù)（AIGC版）》第十單元10.5內(nèi)容，是網(wǎng)站前臺(tái)核心頁(yè)面開發(fā)模塊。以黨建新聞列表頁(yè)為載體，融合HTML語義化結(jié)構(gòu)、CSSFlex圖文排版、JavaScript動(dòng)態(tài)渲染及AIGC輔助優(yōu)化，銜接上節(jié)課圖片列表頁(yè)布局知識(shí)，兼顧新聞?wù)故镜囊?guī)范性與可讀性，是培養(yǎng)前端圖文頁(yè)面開發(fā)能力、銜接首頁(yè)整合的關(guān)鍵實(shí)訓(xùn)內(nèi)容。學(xué)情分析1.前置基礎(chǔ)：已掌握HTML5語義化標(biāo)簽、CSS3Flex布局、圖片美化、JavaScript動(dòng)態(tài)渲染及AIGC輔助編程，能完成圖片列表頁(yè)等前臺(tái)頁(yè)面搭建，熟悉VSCode及超星平臺(tái)操作。

2.學(xué)情特點(diǎn)：動(dòng)手能力強(qiáng)、對(duì)新聞?lì)悓?shí)用頁(yè)面興趣濃厚，具象思維突出，但對(duì)圖文排版的疏密協(xié)調(diào)、新聞條目樣式統(tǒng)一性把控不足，動(dòng)態(tài)渲染與頁(yè)面交互的協(xié)同邏輯理解薄弱，需分步實(shí)操引導(dǎo)。

3.潛在基礎(chǔ)：能熟練運(yùn)用AIGC生成排版代碼，具備基礎(chǔ)問題排查能力，可借助工具突破圖文適配與動(dòng)態(tài)邏輯難點(diǎn)，適配職校生技能習(xí)得節(jié)奏。教學(xué)目標(biāo)【知識(shí)目標(biāo)】：

1.理解新聞列表頁(yè)的核心功能與排版規(guī)范，掌握Flex圖文混排的核心技巧及應(yīng)用方法。

2.掌握新聞條目樣式美化、時(shí)間戳展示及AIGC輔助排版優(yōu)化的方法。

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

1.能獨(dú)立完成新聞列表頁(yè)HTML結(jié)構(gòu)搭建與Flex圖文排版，借助AIGC生成并優(yōu)化樣式及渲染代碼。

2.能實(shí)現(xiàn)新聞數(shù)據(jù)動(dòng)態(tài)渲染、條目hover交互效果，排查圖文錯(cuò)位、渲染異常等問題。

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

1.培養(yǎng)規(guī)范性與可讀性兼顧的頁(yè)面開發(fā)思維，養(yǎng)成細(xì)節(jié)把控與規(guī)范編碼習(xí)慣。

2.提升自主探究與小組協(xié)作能力，樹立“內(nèi)容優(yōu)先、體驗(yàn)為輔”的開發(fā)理念。教學(xué)重點(diǎn)1.智慧黨建新聞列表頁(yè)Flex圖文混排的實(shí)現(xiàn)與優(yōu)化。

2.新聞數(shù)據(jù)動(dòng)態(tài)渲染與條目樣式統(tǒng)一性實(shí)現(xiàn)。教學(xué)難點(diǎn)1.圖文排版的疏密協(xié)調(diào)與響應(yīng)式適配，確保不同屏幕下可讀性不受影響。

2.動(dòng)態(tài)渲染時(shí)新聞條目與時(shí)間戳、圖片的精準(zhǔn)關(guān)聯(lián)及樣式統(tǒng)一。教學(xué)準(zhǔn)備1.硬件：機(jī)房計(jì)算機(jī)、網(wǎng)絡(luò)環(huán)境、投影儀、教學(xué)控制臺(tái)。

2.軟件：VSCode（LiveServer、通義靈碼插件）、超星教學(xué)平臺(tái)（上傳素材、演示視頻）。

3.素材：新聞列表頁(yè)實(shí)訓(xùn)包（HTML模板、CSS文件、黨建新聞素材、JSON新聞數(shù)據(jù)、AIGC提示詞模板、成品效果樣例）、任務(wù)單。教學(xué)方法1.核心方法：項(xiàng)目引領(lǐng)任務(wù)驅(qū)動(dòng)教學(xué)法。

2.輔助方法：理實(shí)一體化教學(xué)法、案例演示法、講練結(jié)合法、小組協(xié)作法。板書設(shè)計(jì)1.新聞頁(yè)核心：圖文排版→樣式美化→動(dòng)態(tài)渲染。

2.圖文混排：Flex主軸/交叉軸對(duì)齊、間距控制。

3.動(dòng)態(tài)渲染：JSON數(shù)據(jù)→循環(huán)遍歷→條目生成。二、教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)設(shè)計(jì)意圖/時(shí)間環(huán)節(jié)一：復(fù)習(xí)導(dǎo)入，任務(wù)發(fā)布1.復(fù)習(xí)回顧：提問上節(jié)課圖片列表頁(yè)Flex布局、響應(yīng)式適配核心知識(shí)點(diǎn)，展示學(xué)生優(yōu)秀成果，銜接新聞列表頁(yè)圖文排版需求，說明新聞頁(yè)在黨建網(wǎng)站中的核心作用。

2.任務(wù)發(fā)布：本節(jié)課核心項(xiàng)目——制作智慧黨建網(wǎng)站新聞列表頁(yè)（展示黨建政策、活動(dòng)資訊等內(nèi)容），拆解為3個(gè)子任務(wù)（結(jié)構(gòu)搭建與排版、樣式美化、動(dòng)態(tài)渲染與適配）。

3.亮點(diǎn)說明：運(yùn)用AIGC輔助生成圖文排版代碼，突破響應(yīng)式圖文適配難點(diǎn)，實(shí)現(xiàn)“規(guī)范排版+動(dòng)態(tài)展示”融合。教師：1.互動(dòng)提問梳理前置知識(shí)，點(diǎn)評(píng)上節(jié)課作業(yè)情況。2.演示新聞列表頁(yè)成品效果，明確功能需求（圖文排版、動(dòng)態(tài)渲染、hover交互、響應(yīng)式適配）。3.強(qiáng)調(diào)本節(jié)課重難點(diǎn)及AIGC輔助核心要點(diǎn)。

學(xué)生：1.參與互動(dòng)復(fù)習(xí)，鞏固前置知識(shí)。2.觀察成品效果，明確任務(wù)目標(biāo)，關(guān)聯(lián)Flex圖文排版、動(dòng)態(tài)渲染等知識(shí)點(diǎn)。設(shè)計(jì)意圖：復(fù)習(xí)銜接知識(shí)，以實(shí)用頁(yè)面激發(fā)興趣，任務(wù)拆解降低學(xué)習(xí)難度，契合職校生具象思維。時(shí)間（第1學(xué)時(shí)）：8分鐘環(huán)節(jié)二：原理精講，案例演示1.圖文排版精講：講解新聞列表頁(yè)語義化結(jié)構(gòu)（標(biāo)題、新聞容器、條目、圖片、正文、時(shí)間戳），演示Flex圖文混排核心技巧（主軸對(duì)齊、交叉軸居中、間距控制），搭建基礎(chǔ)布局框架。

2.樣式美化演示：分步演示新聞條目樣式優(yōu)化（邊框、內(nèi)邊距、時(shí)間戳樣式、紅色系主色調(diào)統(tǒng)一），講解圖文比例協(xié)調(diào)技巧（避免圖片過大遮擋文字）。

3.動(dòng)態(tài)渲染與AIGC輔助：演示JSON新聞數(shù)據(jù)解析方法，講解動(dòng)態(tài)渲染核心邏輯；演示規(guī)范提示詞編寫（如“用CSSFlex制作紅色系黨建新聞列表，左圖右文排版，含時(shí)間戳樣式”），講解代碼適配要點(diǎn)。教師：1.用VSCode分步編寫結(jié)構(gòu)與基礎(chǔ)樣式，標(biāo)注關(guān)鍵屬性（align-items、gap、margin）。2.用瀏覽器演示排版效果對(duì)比，具象化圖文協(xié)調(diào)邏輯。3.演示AIGC生成代碼后，如何調(diào)整排版參數(shù)、統(tǒng)一色調(diào)與前序頁(yè)面一致。

學(xué)生：1.跟隨記錄代碼邏輯與樣式參數(shù)，標(biāo)注易錯(cuò)點(diǎn)（如圖文間距控制）。2.理解Flex圖文排版與動(dòng)態(tài)渲染流程，掌握AIGC提示詞編寫技巧。設(shè)計(jì)意圖：理論結(jié)合實(shí)操演示，突破圖文排版抽象難點(diǎn)，為實(shí)操鋪墊。時(shí)間（第1學(xué)時(shí)）：12分鐘環(huán)節(jié)三：分組實(shí)操，基礎(chǔ)攻堅(jiān)子任務(wù)1：結(jié)構(gòu)搭建與排版（10分鐘）。

1.新建項(xiàng)目文件夾及文件（news-list.html、news-list.css），導(dǎo)入實(shí)訓(xùn)包中新聞素材、JSON數(shù)據(jù)文件。

2.編寫語義化HTML結(jié)構(gòu)，借助AIGC生成Flex圖文混排代碼，實(shí)現(xiàn)左圖右文基礎(chǔ)排版，添加新聞標(biāo)題、時(shí)間戳占位。

子任務(wù)2：樣式美化（10分鐘）。

1.優(yōu)化新聞條目樣式，添加邊框、內(nèi)邊距、hover高亮效果，統(tǒng)一紅色系主色調(diào)與前序頁(yè)面適配。

2.調(diào)整圖片尺寸、圖文間距及時(shí)間戳樣式（灰色小字體、右對(duì)齊），調(diào)試頁(yè)面整體美觀度與可讀性。教師：1.分組（4人/組），明確分工（結(jié)構(gòu)編寫、排版調(diào)試、樣式優(yōu)化）。2.巡視指導(dǎo)，重點(diǎn)解決圖文錯(cuò)位、樣式混亂、AIGC提示詞不規(guī)范問題。3.收集典型錯(cuò)誤案例，為后續(xù)點(diǎn)評(píng)做準(zhǔn)備。

學(xué)生：1.小組協(xié)作完成結(jié)構(gòu)與美化，借助AIGC生成并優(yōu)化代碼。2.自主排查排版與樣式問題，小組內(nèi)互助調(diào)試，記錄遇到的圖文協(xié)調(diào)難題。設(shè)計(jì)意圖：強(qiáng)化動(dòng)手能力，小組協(xié)作突破基礎(chǔ)難點(diǎn)，AIGC輔助降低排版編寫門檻。時(shí)間（第1學(xué)時(shí)）：20分鐘環(huán)節(jié)四：成果點(diǎn)評(píng)，難點(diǎn)突破1.成果點(diǎn)評(píng)：展示2-3組排版與美化成果，表?yè)P(yáng)規(guī)范案例，針對(duì)共性問題（圖文錯(cuò)位、間距不均、色調(diào)不統(tǒng)一、時(shí)間戳樣式混亂）集中講解。

2.難點(diǎn)突破：講解響應(yīng)式圖文適配核心代碼（媒體查詢?cè)谑謾C(jī)端改為上圖下文排版）、動(dòng)態(tài)渲染數(shù)據(jù)關(guān)聯(lián)技巧（確保圖片、標(biāo)題、時(shí)間戳一一對(duì)應(yīng)）。

3.過渡任務(wù)：布置子任務(wù)3，實(shí)現(xiàn)新聞數(shù)據(jù)動(dòng)態(tài)渲染與響應(yīng)式適配，完成功能閉環(huán)。教師：1.借助超星平臺(tái)展示學(xué)生成果，針對(duì)性給出優(yōu)化建議。2.用VSCode演示難點(diǎn)解決方案，同步在超星平臺(tái)上傳參考代碼。3.提供AIGC動(dòng)態(tài)渲染優(yōu)化提示詞模板。

學(xué)生：1.傾聽點(diǎn)評(píng)，修改本組代碼錯(cuò)誤，統(tǒng)一頁(yè)面色調(diào)與樣式。2.記錄響應(yīng)式適配與數(shù)據(jù)關(guān)聯(lián)方法，明確子任務(wù)3目標(biāo)。設(shè)計(jì)意圖：點(diǎn)評(píng)強(qiáng)化知識(shí)掌握，針對(duì)性突破難點(diǎn)，為深化實(shí)操鋪墊。時(shí)間（第2學(xué)時(shí)）：10分鐘環(huán)節(jié)五：深化實(shí)操，功能閉環(huán)子任務(wù)3：動(dòng)態(tài)渲染實(shí)現(xiàn)（15分鐘）。

1.借助AIGC生成JSON數(shù)據(jù)讀取與渲染代碼，修改適配本地?cái)?shù)據(jù)文件路徑，編寫循環(huán)邏輯。

2.將JSON數(shù)據(jù)（標(biāo)題、圖片、正文摘要、時(shí)間戳）逐一渲染到新聞條目，調(diào)試數(shù)據(jù)關(guān)聯(lián)準(zhǔn)確性，確保無錯(cuò)位。

3.排查渲染失敗、條目重復(fù)等問題，優(yōu)化渲染效率。

子任務(wù)4：響應(yīng)式適配與優(yōu)化（15分鐘）。

1.編寫媒體查詢代碼，適配平板端（保持左圖右文、縮小尺寸）、手機(jī)端（改為上圖下文排版），調(diào)試間距與對(duì)齊效果。

2.優(yōu)化頁(yè)面細(xì)節(jié)（正文摘要溢出處理、時(shí)間戳位置調(diào)整、響應(yīng)式切換流暢度），通過LiveServer預(yù)覽不同屏幕效果。

3.規(guī)范代碼注釋，整理文件目錄結(jié)構(gòu)，與前序頁(yè)面文件整合。教師：1.巡視指導(dǎo)，重點(diǎn)關(guān)注數(shù)據(jù)關(guān)聯(lián)、響應(yīng)式排版邏輯、渲染異常問題。2.對(duì)能力較弱小組針對(duì)性輔導(dǎo)，對(duì)能力較強(qiáng)小組布置拓展任務(wù)（如添加新聞置頂樣式）。3.檢查代碼規(guī)范與文件整合情況。

學(xué)生：1.小組協(xié)作完成動(dòng)態(tài)渲染與響應(yīng)式適配，借助AIGC調(diào)試邏輯問題。2.自主測(cè)試不同屏幕效果，小組內(nèi)互助排查問題，確保功能完整。3.規(guī)范注釋與文件整理，提交最終成果至超星平臺(tái)。設(shè)計(jì)意圖：深化實(shí)操能力，實(shí)現(xiàn)“排版-美化-渲染”功能閉環(huán)，兼顧不同層次學(xué)生需求。時(shí)間（第2學(xué)時(shí)）：30分鐘環(huán)節(jié)六：總結(jié)回顧，作業(yè)布置1.總結(jié)回顧：梳理新聞列表頁(yè)制作全流程、Flex圖文排版技巧、動(dòng)態(tài)渲染邏輯及AIGC輔助要點(diǎn)，銜接前后課程知識(shí)。

2.拓展延伸：介紹新聞列表頁(yè)后續(xù)功能（新聞詳情頁(yè)跳轉(zhuǎn)、分類篩選），預(yù)告下節(jié)課首頁(yè)制作及整體整合內(nèi)容。

3.布置課后作業(yè)，明確提交要求與評(píng)價(jià)標(biāo)準(zhǔn)。教師：1.引導(dǎo)學(xué)生共同構(gòu)建知識(shí)框架，強(qiáng)化記憶。2.展示首頁(yè)成品雛形，激發(fā)學(xué)習(xí)興趣。3.明確作業(yè)內(nèi)容與評(píng)價(jià)要點(diǎn)，強(qiáng)調(diào)文件整合規(guī)范。

學(xué)生：1.跟隨總結(jié)梳理知識(shí)，形成技能體系。2.了解拓展知識(shí)，明確后續(xù)學(xué)習(xí)方向。3.記錄作業(yè)內(nèi)容，疑問及時(shí)提問。設(shè)計(jì)意圖：梳理知識(shí)脈絡(luò)，形成技能閉環(huán)，為課后鞏固與首頁(yè)整合學(xué)習(xí)鋪墊。時(shí)間（第2學(xué)時(shí)）：0分鐘（靈活融入環(huán)節(jié)五末尾，確保學(xué)時(shí)完整）三、課后作業(yè)和教學(xué)反思課后作業(yè)1.優(yōu)化新聞列表頁(yè)，添加新聞分類標(biāo)簽（如“政策資訊”“黨建活動(dòng)”）及對(duì)應(yīng)樣