網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例7手機(jī)展示網(wǎng)頁(yè)

教案7案例7手機(jī)展示網(wǎng)頁(yè)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握盒子模型的概念；掌握CSS盒子模型的相關(guān)屬性。能力目標(biāo)能理解并說出CSS盒子大小計(jì)算方式；能夠制作常見的盒子模型效果。素質(zhì)目標(biāo)培養(yǎng)學(xué)生計(jì)算機(jī)思維的能力，幫助學(xué)生樹立科學(xué)嚴(yán)謹(jǐn)?shù)呢?fù)責(zé)態(tài)度；培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作意識(shí)，自主解決問題的能力。教學(xué)重點(diǎn)盒子模型的概念；盒子模型的相關(guān)屬性。教學(xué)難點(diǎn)盒子大小計(jì)算方式。教學(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)建手機(jī)展示網(wǎng)頁(yè)，將手機(jī)圖片和文字放入一個(gè)盒子中，并使用CSS設(shè)置盒子的樣式，瀏覽效果如圖7-1所示。圖7-1百度搜索結(jié)果網(wǎng)頁(yè)二、案例分析與實(shí)現(xiàn)1.案例分析圖7-1所示的網(wǎng)頁(yè)內(nèi)容是放在一個(gè)盒子中的，首先要用<div>標(biāo)記定義一個(gè)盒子，在盒子中再使用<img>標(biāo)記定義圖像，使用標(biāo)題標(biāo)記<h3>和<p>定義文字，最后設(shè)置盒子和盒子中內(nèi)容的樣式。2.案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、盒子模型的概念學(xué)生已觀看微課，略講盒子模型就是把HTML頁(yè)面中的元素看作矩形的盒子，也就是盛裝內(nèi)容的容器。每個(gè)盒子都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。例7-1example01.html學(xué)生同步操作，做學(xué)教一體二、盒子模型的相關(guān)屬性1.border屬性border-top：上邊框?qū)挾取邮?、顏色border-right：右邊框?qū)挾?、樣式、顏色border-bottom：下邊框?qū)挾?、樣式、顏色border-left：左邊框?qū)挾?、樣式、顏色語(yǔ)法格式：border：邊框?qū)挾取邮?、顏色邊框樣式常用的屬性值：soliddasheddotteddoublenone2.border-radius屬性學(xué)生同步操作，做學(xué)教一體語(yǔ)法格式：border-radius:圓角半徑;設(shè)置圓角半徑時(shí)，也可以分別為4個(gè)角的圓角半徑設(shè)置不同的值。若對(duì)盒子設(shè)置了背景顏色或背景圖像，則不設(shè)置邊框時(shí)，也可以使用border-radius屬性顯示圓角效果。3.padding屬性padding-top：上內(nèi)邊距大小padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大小padding-left：左內(nèi)邊距大小語(yǔ)法格式：padding:內(nèi)邊距大小;例：#box{padding:10px

20px

30px

40px;}#box{padding:10px

20px

30px;}#box{padding:10px

20px;}#box{padding:10px;}4.margin屬性margin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小margin-left：左外邊距大小語(yǔ)法格式：margin:外邊距大小;例：#box{margin:0auto;}

5.box-shadow屬性語(yǔ)法格式：box-shadow:陰影水平偏移量

陰影垂直偏移量

陰影模糊半徑

陰影擴(kuò)展半徑

陰影顏色

陰影類型;例：box-shadow:10px10px10px#808080;

/*

添加陰影

*/6.box-sizing屬性語(yǔ)法格式：box-sizing:content-box|border-box;例7-2example02.html學(xué)生同步操作，做學(xué)教一體三=2\*ROMAN、小結(jié)重點(diǎn)掌握盒子模型的概念及盒子模型的相關(guān)屬性。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例8中的微課，學(xué)習(xí)盒子的背景顏色和背景圖像屬性，設(shè)置不透