教案8案例8山東介紹網頁計劃學時2學時知識目標掌握設置背景顏色、背景圖像的屬性；掌握設置不透明度的方法；掌握設置漸變效果的方法。能力目標能夠設置頁面元素背景顏色和圖像；能夠設置頁面元素不透明度；能夠設置頁面元素漸變背景。素質目標在案例實現中培養綜合分析問題的能力；在代碼編輯中培養耐心細致、精益求精的工匠精神。教學重點設置背景顏色及背景圖像；設置不透明度。教學難點設置漸變效果。教學模式教學做一體化；線上+線下混合式教學。教學活動及主要環節素質培養第1學時（案例分析與實現）=1\*ROMANI.問題討論：（5分鐘）對同學們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現：（40分鐘）一、案例描述創建山東介紹網頁，將所有內容放入一個盒子中，并使用CSS設置盒子的樣式，瀏覽效果如圖8-1所示。圖8-1山東介紹網頁二、案例分析與實現1.案例分析圖8-1所示的網頁內容是放在一個盒子中的，首先要用<div>標記定義一個盒子，在盒子中添加<h2>標記定義標題，添加<p>標記定義段落。<h2>標題中的背景顏色、左側的Logo圖像，以及盒子中的背景圖像都使用background綜合屬性設置。2.案例實現學生同步操作，做學教一體略。第2學時（相關知識點）一、設置背景顏色及背景圖像學生已觀看微課，略講1.background-color屬性語法格式：background-color:#RRGGBB或rgb(r,g,b)或預定義的顏色值;例8-1example01.html學生同步操作，做學教一體2.background-image屬性語法格式：background-image:url(圖像來源);例8-2example02.html學生同步操作，做學教一體3.background-repeat屬性語法格式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;分別操作演示各個屬性值的效果。4.background-position屬性語法格式：background-position:關鍵字|百分比|長度;分別操作演示各個屬性值的設置。5.background-attachment屬性語法格式：background-attachment:scroll|fixed|local;分別操作演示各個屬性值的效果。6.background-size屬性語法格式：background-size:長度|百分比|auto|

cover|

contain;例8-3example03.html學生同步操作，做學教一體7.綜合設置背景語法格式：background:背景顏色url("圖像")重復位置固定大小;操作演示綜合設置案例8網頁中標題的背景顏色和網頁的背景圖像。8.設置多重背景圖像例8-4example04.html學生同步操作，做學教一體二、設置不透明度1.opacity屬性語法格式：opacity:不透明度值;例8-5example05.html學生同步操作，做學教一體2.rgba(r,g,b,alpha)函數三、設置漸變效果語法格式：background:linear-gradient(漸變角度,顏色值1,顏色值2,…,顏色值n);漸變角度：顏色值：例8-6example06.html學生同步操作，做學教一體四=2\*ROMAN、小結重點掌握對盒子和盒子中的元素設置背景顏色和背景圖像。作業1：課本課后習題與實訓作業2：掃碼觀看案例9中的微課，學習元素的浮動屬性、塊元素與行內元素、元素之間的外邊距等內容。課前小組討論過程中，培養學生團隊合作，綜合分析問題的能力。在編寫代碼中培養學生耐心細致、