網(wǎng)頁設(shè)計與制作教案授課教師授課班級授課日期課題制作“古詩推薦”模塊計劃學時教學目標知識目標掌握有序列表<ol>、無序列表<ul>、定義列表<dl>的HTML語法理解list-style-type屬性對列表符號的控制方法掌握列表項間距與樣式的CSS設(shè)置技巧能力目標能根據(jù)需求選擇合適的列表類型實現(xiàn)內(nèi)容排版能通過CSS靈活控制列表樣式（符號、縮進、顏色等）能完成“古詩推薦”模塊的結(jié)構(gòu)搭建與樣式美化素質(zhì)目標通過古詩推薦模塊開發(fā)，增強對傳統(tǒng)文化的興趣培養(yǎng)頁面布局的邏輯性與審美能力教學重點三種列表的HTML結(jié)構(gòu)與屬性設(shè)置list-style-type屬性的取值與效果列表項的間距控制（margin/padding）教學難點定義列表<dl>的嵌套使用列表與其他布局方式的結(jié)合應(yīng)用教學模式及教學方法理實一體化、線上+線下混合教學模式項目教學法、任務(wù)驅(qū)動法、講授法。教學活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)課前導學1.觀看學習平臺相關(guān)微課視頻。2.讓學生搜集經(jīng)典古詩文作品3.完成課前測試題。課中踐學【情景導入】互動游戲：展示網(wǎng)頁截圖（如古詩列表、商品目錄、術(shù)語解釋）學生分組搶答：“這些內(nèi)容適合用哪種列表？為什么？”情境創(chuàng)設(shè)：展示“古詩推薦”模塊效果圖，提出核心問題：

“如何用列表結(jié)構(gòu)清晰展示古詩信息？”【新知探究】活動1：有序列表大發(fā)現(xiàn)教師演示：HTML:<ol><li>《將進酒》-李白</li><li>《沁園春·雪》-毛澤東</li></ol>CSS:ol{list-style-type:upper-alpha;}學生實踐：

將序號改為小寫羅馬數(shù)字，觀察效果變化活動2：無序列表變形記小組競賽：

用無序列表展示詩人朝代，要求：唐代詩人用實心方塊宋代詩人用空心圓元代詩人用自定義符號（如◆）活動3：定義列表挑戰(zhàn)案例分析：

展示古詩注釋需求，引導學生設(shè)計定義列表：HTML:<dl><dt>詞牌名</dt><dd>沁園春</dd><dt>創(chuàng)作背景</dt><dd>1936年毛澤東...</dd></dl>互動問答：

“定義列表的<dt>和<dd>可以嵌套其他列表嗎？”（引導學生嘗試）【項目實戰(zhàn)】任務(wù)：完成“古詩推薦”模塊1.結(jié)構(gòu)搭建學生獨立完成HTML結(jié)構(gòu)2.樣式美化教師引導：如何去除默認列表符號？如何調(diào)整列表項間距？如何實現(xiàn)“更多>>”右對齊？四、任務(wù)拓展布置拓展任務(wù)：思考如何用CSS定位實現(xiàn)“古詩推薦”模塊的更多布局效果。（學生可在完成基本任務(wù)的前提下，完成拓展任務(wù)。）課后拓學1.完成任務(wù)3.3的課后練習。2.掃碼觀看任務(wù)3.4中的微課視頻，預(yù)習新課。3.完成項目延伸任務(wù)，將結(jié)果文件上傳至教學平臺。通過學習平臺學習相關(guān)內(nèi)容，讓學生養(yǎng)成自主學習的習慣。通過搜集并制作古詩推薦模塊，讓學生重溫經(jīng)典詩詞作品，感受傳統(tǒng)文化的魅力，增強民族自信。通過任務(wù)分析，鍛煉學生分析問題的能力，以及用數(shù)字化、圖形化的方式來呈現(xiàn)，培養(yǎng)其數(shù)