網(wǎng)頁設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例9美麗風(fēng)光網(wǎng)頁

教案9案例9美麗風(fēng)光網(wǎng)頁計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握塊元素和行內(nèi)元素各自的特點(diǎn)；掌握<span>標(biāo)記的應(yīng)用；掌握塊元素間垂直和水平外邊距的計(jì)算方式；掌握float屬性的使用。能力目標(biāo)能夠理解并列舉常見的塊元素和行內(nèi)元素；能夠利用<span>標(biāo)記設(shè)置一行內(nèi)容中某部分內(nèi)容的單獨(dú)樣式；能夠熟練計(jì)算網(wǎng)頁中塊元素間的外邊距；能夠利用浮動(dòng)屬性實(shí)現(xiàn)網(wǎng)頁中塊元素水平排列。素質(zhì)目標(biāo)通過美麗風(fēng)光網(wǎng)頁感受祖國河山增強(qiáng)學(xué)生民族自豪感；在編輯代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神。教學(xué)重點(diǎn)元素的類型；塊元素的外邊距；元素的浮動(dòng)。教學(xué)難點(diǎn)利用浮動(dòng)屬性布局網(wǎng)頁元素。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建美麗風(fēng)光網(wǎng)頁，將所有內(nèi)容放入一個(gè)大盒子中，將圖片放入小盒子，用CSS定義樣式，瀏覽效果如圖9-1所示。圖9-1美麗風(fēng)光網(wǎng)頁二、案例分析與實(shí)現(xiàn)1.案例分析圖9-1所示的所有網(wǎng)頁內(nèi)容是放在一個(gè)盒子中的，用<div>標(biāo)記定義一個(gè)盒子，在盒子中添加<h2>標(biāo)記定義標(biāo)題，標(biāo)題中含有的英文內(nèi)容需要添加<span>標(biāo)記，每張圖片再使用<div>標(biāo)記定義。2.案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、元素的類型學(xué)生已觀看微課，略講1.塊元素<h1>～<h6><ul><ol><li><div><header><nav><article><aside><section><footer>2.行內(nèi)元素<strong><b><em><i><a><span>分析兩種元素類型的不同特點(diǎn)及應(yīng)用范疇。3.<span>標(biāo)記講解<span>標(biāo)記在HTML中的應(yīng)用，與<div>標(biāo)記的區(qū)別。操作演示案例9實(shí)現(xiàn)中標(biāo)題行中英文部分的樣式設(shè)置。二、塊元素間的外邊距1.塊元素間的垂直外邊距例9-1example01.html學(xué)生同步操作，做學(xué)教一體兩元素的垂直間距是30px兩元素的垂直間距是30px2.塊元素間的水平外邊距例9-2example02.html學(xué)生同步操作，做學(xué)教一體兩元素的水平間距是40px兩元素的水平間距是40px三、元素的浮動(dòng)1.浮動(dòng)屬性語法格式：選擇器{float:left|right|none;}left：right：none:例9-3example03.html學(xué)生同步操作，做學(xué)教一體浮動(dòng)元素不再占用原文檔流的位置，那它會(huì)對(duì)頁面中其他元素的排版產(chǎn)生影響。例9-4example04.html學(xué)生同步操作，做學(xué)教一體2.清除浮動(dòng)語法格式：選擇器{clear:left|right|both;}操作演示繼續(xù)在例9-4中添加樣式代碼。注意：清除子元素浮動(dòng)對(duì)父元素影響，使用overflow屬性清除浮動(dòng)。例9-5example05.html學(xué)生同步操作，做學(xué)教一體四=2\*ROMAN、小結(jié)重點(diǎn)掌握塊元素與行內(nèi)元素的特點(diǎn)及應(yīng)用、塊元素的外邊距、元素的浮動(dòng)屬性與清除浮動(dòng)。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例10中的微課，學(xué)習(xí)元素的幾種定位方式及具體定位方法。課前小組討論培養(yǎng)學(xué)生團(tuán)隊(duì)合作，共同探討的協(xié)作意識(shí)。提升民族自