任務(wù)4制作學(xué)院介紹頁面

教案名稱任務(wù)4制作學(xué)院介紹頁面計劃學(xué)時6學(xué)時知識目標(biāo)理解盒子模型概念掌握盒子大小計算方式掌握盒子模型的相關(guān)屬性掌握背景顏色設(shè)置方法掌握背景圖像設(shè)置方法能力目標(biāo)理解盒子模型能夠制作常見的盒子模型效果能夠設(shè)置背景顏色和圖像素質(zhì)目標(biāo)培養(yǎng)學(xué)生作風(fēng)嚴(yán)謹(jǐn)、精益求精的工匠精神引導(dǎo)學(xué)生認(rèn)識美、發(fā)現(xiàn)美、創(chuàng)造美教學(xué)重點盒子模型的相關(guān)屬性設(shè)置背景顏色設(shè)置背景圖像綜合設(shè)置背景教學(xué)難點盒子大小計算方式教學(xué)模式教學(xué)做一體化線上+線下混合教學(xué)教學(xué)活動及主要環(huán)節(jié)思政元素切入點第1、2學(xué)時（盒子模型）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）盒子模型中的盒子有哪些屬性？網(wǎng)頁中哪些元素是盒子？=2\*ROMANII.重難點內(nèi)容講授：一、盒子模型（20分鐘）所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框(border)和外邊距(margin)組成。二、盒子大小計算方式（15分鐘）一個盒子實際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。練習(xí)：定義一個盒子，設(shè)置相關(guān)屬性。（5分鐘）三、盒子模型的相關(guān)屬性（40分鐘） 1．邊框?qū)傩詁order 邊框（border）屬性設(shè)置方式如下：border-top：上邊框?qū)挾葮邮筋伾玝order-right：右邊框?qū)挾葮邮筋伾玝order-bottom：下邊框?qū)挾葮邮筋伾玝order-left：左邊框?qū)挾葮邮筋伾羲膫€邊框具有相同的寬度、樣式和顏色，則可以一個次設(shè)置如下：border：邊框?qū)挾葮邮筋伾⒁猓哼吙驅(qū)挾?、樣式和顏色屬性的順序可以隨意。邊框樣式的常用屬性值有以下5個。solid：邊框樣式為單實線。dashed：邊框樣式為虛線。dotted：邊框樣式為點線。double：邊框樣式為雙實線。none：沒有邊框。2．圓角邊框?qū)傩詁order-radius格式:border-radius:圓角半徑;例：設(shè)置圓角半徑值為15pxborder-radius:15px; 注意：（1）設(shè)置圓角半徑時，也可以分別為4個角的圓角半徑設(shè)置不同的值。四個參數(shù)分別表示左上角、右上角、右下角、左下角的圓角半徑。（2）若盒子設(shè)置了背景顏色或背景圖像，那么在不設(shè)置邊框時，也可以使用border-radius屬性顯示出圓角的效果。例：設(shè)置圓角半徑為15px 3．內(nèi)邊距屬性padding內(nèi)邊距用于設(shè)置盒子中內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。其設(shè)置方法類似于padding屬性的設(shè)置，其設(shè)置方式如下：padding-top：上內(nèi)邊距大小padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大小padding-left：左內(nèi)邊距大小若四個內(nèi)邊距具有相同的大小，則可以一個次設(shè)置如下：padding：內(nèi)邊距大小例如，將盒子box的上、右、下、左4個內(nèi)邊距分別設(shè)置為10px、20px、30px、40px，則可以使用如下代碼。也可以簡寫成：若只有3個參數(shù)：表示上內(nèi)邊距為10px，左、右內(nèi)邊距均為20px，下內(nèi)邊距為30px若只有2個參數(shù)：表示上、下內(nèi)邊距均為10px，左、右內(nèi)邊距均為20px若只有一個參數(shù)：表示上、右、下、左4個內(nèi)邊距均為10px4．外邊距（margin）屬性網(wǎng)頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設(shè)置外邊距。外邊距用于設(shè)置盒子與其它盒子之間的距離。其設(shè)置方法類似于內(nèi)邊距（paddding）屬性的設(shè)置，其設(shè)置方式如下：margin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小margin-left：左外邊距大小若四個外邊距具有相同的大小，則可以一次設(shè)置如下：margin：外邊距大小如果要讓盒子在其所在容器中水平居中，則可以用如下代碼：5.盒子陰影（box-shadow）屬性格式：box-shadow:陰影水平偏移量陰影垂直偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色陰影類型；例4-2定義一個盒子，設(shè)置它們的相關(guān)屬性，為盒子和圖像設(shè)置陰影。=3\*ROMANIII.課堂小結(jié)：（5分鐘）盒子模型的相關(guān)屬性盒子大小計算方式盒子的陰影屬性作業(yè)：超星學(xué)習(xí)通平臺作業(yè)第3、4學(xué)時（CSS背景屬性）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）網(wǎng)頁中的顏色越多越好嗎？你覺得哪些顏色搭配在一起會比較好看？=2\*ROMANII.重難點內(nèi)容講授：（75分鐘）一、設(shè)置背景顏色格式：background-color：#RRGGBB或#rgb(r,g,b)或預(yù)定義的顏色值。例4-3設(shè)置網(wǎng)頁的背景顏色和標(biāo)題行的背景顏色。二、設(shè)置背景圖像格式：background-image：url（圖像來源）例4-4修改4-3的代碼，設(shè)置網(wǎng)頁的背景圖像。三、設(shè)置背景圖像平鋪格式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;該屬性用于設(shè)置元素的背景圖像如何鋪排填充。說明：（1）repeat：背景圖像在橫向和縱向平鋪，為默認(rèn)值。（2）no-repeat：背景圖像只顯示一次，不平鋪。（3）repeat-x：背景圖像在橫向上平鋪。（4）repeat-y：背景圖像在縱向上平鋪。（5）space：背景圖像以相同的間距平鋪，且填充滿整個容器或某個方向（CSS3新增關(guān)鍵字）。（6）round：背景圖像自動縮放至合適大小，且填充滿整個容器（CSS3新增關(guān)鍵字）。四、設(shè)置背景圖像位置格式：background-position:關(guān)鍵字|百分比|長度;關(guān)鍵字有：center、left、right、top、bottom。例4-5利用背景圖像的各種屬性設(shè)置元素的背景顏色和背景圖像。五、綜合設(shè)置背景顏色和圖像格式：background:背景顏色url("圖像")是否重復(fù)位置;例4-6使用background綜合設(shè)置網(wǎng)頁中標(biāo)題的背景顏色和網(wǎng)頁的背景圖像。HTML結(jié)構(gòu)：CSS代碼：六、不透明度屬性不透明度可以使用rgba(r,g,b,alpha)模式設(shè)置。另外，也可以使用元素的opacity屬性為任何元素設(shè)置不透明效果。格式如下。格式：opacity:不透明度值;例4-7使用opacity屬性設(shè)置圖像的不透明度。先給圖像設(shè)置了不透明度是0.3，圖像是模糊的；當(dāng)鼠標(biāo)指針移動到圖像上時，圖像的不透明度變?yōu)?，即圖像變清晰。:hover選擇器是指鼠標(biāo)指針懸停到該元素時的狀態(tài)。=3\*ROMANIII.課堂小結(jié)：（5分鐘）設(shè)置背景顏色設(shè)置背景圖像設(shè)置背景圖像平鋪設(shè)置背景圖像位置綜合設(shè)置背景顏色和圖像不透明度屬性作業(yè)：學(xué)習(xí)通平臺作業(yè)第5、6學(xué)時（搭建學(xué)院介紹頁面結(jié)構(gòu)）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）背景屬性用background屬性綜合設(shè)置還是分開設(shè)置更好呢？=2\*ROMANII.重難點內(nèi)容講授：（75分鐘）一、搭建學(xué)院介紹頁面

1.搭建頁面結(jié)構(gòu)2.添加CSS樣式。=3\*ROMANIII.課堂小結(jié)：（5分鐘）盒子模型相關(guān)