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

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

將序號(hào)改為小寫(xiě)羅馬數(shù)字，觀察效果變化活動(dòng)2：無(wú)序列表變形記小組競(jìng)賽：

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

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

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