網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例7手機展示網頁

教案7案例7手機展示網頁計劃學時2學時知識目標掌握盒子模型的概念；掌握CSS盒子模型的相關屬性。能力目標能理解并說出CSS盒子大小計算方式；能夠制作常見的盒子模型效果。素質目標培養(yǎng)學生計算機思維的能力，幫助學生樹立科學嚴謹的負責態(tài)度；培養(yǎng)學生的團隊協(xié)作意識，自主解決問題的能力。教學重點盒子模型的概念；盒子模型的相關屬性。教學難點盒子大小計算方式。教學模式教學做一體化；線上+線下混合式教學。教學活動及主要環(huán)節(jié)素質培養(yǎng)第1學時（案例分析與實現）=1\*ROMANI.問題討論：（5分鐘）對同學們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現：（40分鐘）一、案例描述創(chuàng)建手機展示網頁，將手機圖片和文字放入一個盒子中，并使用CSS設置盒子的樣式，瀏覽效果如圖7-1所示。圖7-1百度搜索結果網頁二、案例分析與實現1.案例分析圖7-1所示的網頁內容是放在一個盒子中的，首先要用<div>標記定義一個盒子，在盒子中再使用<img>標記定義圖像，使用標題標記<h3>和<p>定義文字，最后設置盒子和盒子中內容的樣式。2.案例實現學生同步操作，做學教一體略。第2學時（相關知識點）一、盒子模型的概念學生已觀看微課，略講盒子模型就是把HTML頁面中的元素看作矩形的盒子，也就是盛裝內容的容器。每個盒子都由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。例7-1example01.html學生同步操作，做學教一體二、盒子模型的相關屬性1.border屬性border-top：上邊框寬度、樣式、顏色border-right：右邊框寬度、樣式、顏色border-bottom：下邊框寬度、樣式、顏色border-left：左邊框寬度、樣式、顏色語法格式：border：邊框寬度、樣式、顏色邊框樣式常用的屬性值：soliddasheddotteddoublenone2.border-radius屬性學生同步操作，做學教一體語法格式：border-radius:圓角半徑;設置圓角半徑時，也可以分別為4個角的圓角半徑設置不同的值。若對盒子設置了背景顏色或背景圖像，則不設置邊框時，也可以使用border-radius屬性顯示圓角效果。3.padding屬性padding-top：上內邊距大小padding-right：右內邊距大小padding-bottom：下內邊距大小padding-left：左內邊距大小語法格式：padding:內邊距大小;例：#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：左外邊距大小語法格式：margin:外邊距大小;例：#box{margin:0auto;}

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

陰影垂直偏移量

陰影模糊半徑

陰影擴展半徑

陰影顏色

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

/*

添加陰影

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