網(wǎng)頁(yè)設(shè)計(jì)與制作教案授課教師授課班級(jí)授課日期課題制作“著名詩(shī)人”模塊計(jì)劃學(xué)時(shí)教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS選擇器（標(biāo)簽、類、ID、群組）的使用方法。理解盒子模型（內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距）的組成及屬性設(shè)置。掌握浮動(dòng)布局的原理及清除浮動(dòng)的方法。能力目標(biāo)能根據(jù)設(shè)計(jì)需求搭建網(wǎng)頁(yè)結(jié)構(gòu)，合理運(yùn)用CSS樣式美化頁(yè)面。能綜合運(yùn)用浮動(dòng)布局實(shí)現(xiàn)多元素排列效果素質(zhì)目標(biāo)通過(guò)傳統(tǒng)文化主題網(wǎng)頁(yè)的制作，增強(qiáng)文化傳承意識(shí)。通過(guò)規(guī)范編碼習(xí)慣，培養(yǎng)精益求精的工匠精神。教學(xué)重點(diǎn)CSS選擇器的應(yīng)用規(guī)則。盒子模型屬性的設(shè)置方法。浮動(dòng)布局的實(shí)現(xiàn)與清除浮動(dòng)技巧。教學(xué)難點(diǎn)浮動(dòng)布局導(dǎo)致的高度塌陷問(wèn)題解決。復(fù)雜頁(yè)面結(jié)構(gòu)的拆分與樣式控制。教學(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é)生搜集詩(shī)人的圖片及介紹3.完成課前測(cè)試題。課中踐學(xué)【情景導(dǎo)入】情境描述：

國(guó)風(fēng)社團(tuán)負(fù)責(zé)人阿文邀請(qǐng)學(xué)生制作“古詩(shī)詞”網(wǎng)站，需完成“著名詩(shī)人”模塊。任務(wù)明確：

分析模塊功能需求，展示設(shè)計(jì)效果圖，明確學(xué)習(xí)目標(biāo)?！卷?xiàng)目實(shí)施】任務(wù)3.1：創(chuàng)建網(wǎng)站項(xiàng)目任務(wù)分析：項(xiàng)目名稱：古詩(shī)詞網(wǎng)站模塊文件：poet.html、commend.html等資源目錄：css（樣式表）、img（圖片）二、操作實(shí)施1.新建網(wǎng)站項(xiàng)目打開(kāi)開(kāi)發(fā)軟件HBuilderX，選擇“文件”菜單中的“新建”→“項(xiàng)目”命令。在“選擇模板”區(qū)域中選擇“基本HTML項(xiàng)目”，填寫項(xiàng)目名稱“古詩(shī)詞”，設(shè)置存儲(chǔ)位置。2.網(wǎng)站資源管理根據(jù)網(wǎng)站資源需求新建目錄和文件，基于模板基礎(chǔ)，在“古詩(shī)詞”根目錄上右擊，選擇“新建”→“目錄”和“新建”→“html文件”命令，建立commend.html、introduce.html、poet.html、translate.html文件。任務(wù)4.2制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站注冊(cè)頁(yè)面一、任務(wù)分析“古詩(shī)詞”網(wǎng)站中“著名詩(shī)人”模塊會(huì)列出歷史上著名詩(shī)人的信息，包括圖像、姓名、朝代。了解詩(shī)人的信息可以幫助我們更好地理解古代詩(shī)詞文化。根據(jù)頁(yè)面的設(shè)計(jì)需求和最終效果圖，分析頁(yè)面的框架結(jié)構(gòu)二、知識(shí)儲(chǔ)備根據(jù)任務(wù)分析，在之前掌握知識(shí)的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識(shí)點(diǎn)有CSS選擇器基礎(chǔ)、盒子模型基礎(chǔ)和浮動(dòng)布局。新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)知識(shí)講解1.標(biāo)簽選擇器：h2{color:#333;}2.類選擇器：.poet-item{float:left;}3.ID選擇器：#poet-container{width:700px;}4.群組選擇器：h2,p{font-family:宋體;}實(shí)踐操作：為標(biāo)題設(shè)置藍(lán)色背景（標(biāo)簽選擇器）為詩(shī)人卡片添加公共樣式（類選擇器）新知學(xué)習(xí)2:盒子模型知識(shí)講解：1.內(nèi)容區(qū)：width:150px;height:200px;2.內(nèi)邊距：padding:10px;3.邊框：border:1pxsolid#ccc;4.外邊距：margin:15px;通過(guò)例題讓學(xué)生鞏固練習(xí)其編碼規(guī)則。.poet-card{width:150px;padding:10px;border:2pxsolid#e0e0e0;margin:20px;}新知學(xué)習(xí)3:浮動(dòng)布局原理分析：float:left實(shí)現(xiàn)多列排列清除浮動(dòng)方案：.clearfix::after{content:"";display:block;clear:both;}操作實(shí)施：設(shè)置詩(shī)人卡片左浮動(dòng)添加清除浮動(dòng)代碼防止父容器塌陷三、操作實(shí)施任務(wù)實(shí)踐3.2.：制作“著名詩(shī)人”模塊學(xué)生在知識(shí)學(xué)習(xí)的基礎(chǔ)上，對(duì)照任務(wù)分析，進(jìn)行操作實(shí)踐，完成“著名詩(shī)人”模塊的制作。（學(xué)生動(dòng)手操作，教師巡回指導(dǎo)，對(duì)共性問(wèn)題進(jìn)行講解，對(duì)個(gè)性問(wèn)題進(jìn)行答疑。）四、任務(wù)拓展布置拓展任務(wù)：為詩(shī)人卡片添加陰影效果（box-shadow）。（學(xué)生可在完成基本任務(wù)的前提下，完成拓展任務(wù)。）課后拓學(xué)1.完成任務(wù)3.2的課后練習(xí)。2.掃碼觀看任務(wù)3.3中的微課視頻，預(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ī)人”網(wǎng)頁(yè)內(nèi)容的制作，激發(fā)學(xué)生對(duì)古詩(shī)詞文化的興趣。通過(guò)任務(wù)分析，鍛煉學(xué)