網頁設計與制作項目式教程（HTML+CSS）電子教案 07.制作“古詩”“詩文釋義”模塊

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

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

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

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

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

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