網(wǎng)頁設(shè)計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例10筆記本電腦展示網(wǎng)頁

教案10案例10筆記本電腦展示網(wǎng)頁計劃學(xué)時2學(xué)時知識目標(biāo)掌握元素的四種定位方式；掌握如何利用position定位屬性進(jìn)行網(wǎng)頁元素的定位；掌握z-index屬性的使用。能力目標(biāo)能夠理解CSS不同定位方式的原理；能夠利用position定位屬性進(jìn)行網(wǎng)頁元素的定位；能夠利用z-index屬性調(diào)整定位元素的堆疊順序。素質(zhì)目標(biāo)培養(yǎng)學(xué)生清晰有序的邏輯思維；在編輯代碼中培養(yǎng)學(xué)生分析問題與解決問題的能力。教學(xué)重點position定位屬性的不同屬性值含義與運(yùn)用；坐標(biāo)屬性的使用；z-index屬性。教學(xué)難點position定位屬性的靈活使用。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（案例分析與實現(xiàn)）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述創(chuàng)建筆記本電腦展示網(wǎng)頁，將所有內(nèi)容放入一個大盒子中，并使用CSS設(shè)置盒子及盒子中內(nèi)容的樣式，瀏覽效果如圖10-1所示。圖10-1筆記本電腦展示網(wǎng)頁二、案例分析與實現(xiàn)1.案例分析圖10-1所示的網(wǎng)頁內(nèi)容是放在一個大盒子中的，大盒子中的內(nèi)容又分為左右兩部分，因此其整體結(jié)構(gòu)首先要用<div>標(biāo)記定義一個大盒子，再在大盒子中定義左右兩個子盒子，在左側(cè)的盒子中使用<img>標(biāo)記定義圖片；在右側(cè)的盒子中分別使用<h2>標(biāo)記、<h3>標(biāo)記和<p>標(biāo)記定義標(biāo)題和段落文字，使用<p>標(biāo)記定義“點擊購買”按鈕。通過設(shè)置一系列樣式達(dá)到圖10-1所示的效果。2.案例實現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時（相關(guān)知識點）一、元素的定位學(xué)生已觀看微課，略講1.定位方式語法格式：選擇器{position:static|relative|absolute|fixed;}分別講解各個屬性值的含義2.確定元素位置left：定義元素相對于其父元素左邊線的距離。right：定義元素相對于其父元素右邊線的距離。top：定義元素相對于其父元素上邊線的距離。bottom：定義元素相對于其父元素下邊線的距離。二、定位類型1.靜態(tài)定位例10-1example01.html學(xué)生同步操作，做學(xué)教一體2.相對定位例10-2example02.html學(xué)生同步操作，做學(xué)教一體3.絕對定位例10-3example03.html學(xué)生同步操作，做學(xué)教一體4.固定定位總是以瀏覽器窗口作為參照物來定位網(wǎng)頁元素。例如，將二維碼圖片固定定位在瀏覽器窗口的右側(cè)。<imgstyle="position:fixed;right:0;top:200px;z-index:999;width:100px;"src="images/ewm.png"/>三、z-index屬性值越大，定位元素在層疊元素中越居上。注意：該屬性僅對定位元素有效。屬性取值：正整數(shù)、負(fù)整數(shù)、0。四=2\*ROMAN、小結(jié)重點掌握元素的定位、4種定位類型和z-index屬性。作業(yè)1：課本課后習(xí)題與實訓(xùn)作業(yè)2：掃碼觀看案例11中的微課，學(xué)習(xí)超鏈接和