網(wǎng)頁設(shè)計與制作教案授課教師授課班級授課日期課題為“中國民俗”網(wǎng)站頁面設(shè)置外觀計劃學(xué)時8教學(xué)目標(biāo)知識目標(biāo)了解CSS的概念，能說出其功能特點。知道CSS的三種引入方式。理解CSS多種樣式的用途。能力目標(biāo)掌握CSS的三種引入方式。掌握CSS多種樣式的使用方法。素質(zhì)目標(biāo)通過“中國民俗”網(wǎng)頁內(nèi)容的制作，增強學(xué)生的文化自信和民族認(rèn)同感，加深學(xué)生對國家發(fā)展和文化進(jìn)步的認(rèn)識，培養(yǎng)學(xué)生愛國情懷。通過規(guī)范編碼習(xí)慣，培養(yǎng)學(xué)生精益求精的工匠精神，提升職業(yè)素養(yǎng)。教學(xué)重點CSS多種樣式的編碼規(guī)則及設(shè)置方法教學(xué)難點根據(jù)實際需求，合理應(yīng)用CSS不同樣式效果教學(xué)模式及教學(xué)方法理實一體化、線上+線下混合教學(xué)模式項目教學(xué)法、任務(wù)驅(qū)動法、講授法。教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)課前導(dǎo)學(xué)1.觀看學(xué)習(xí)平臺相關(guān)微課視頻。2.讓學(xué)生搜集不同網(wǎng)站的圖片，至少3個。3.完成課前測試題。課中踐學(xué)【情景導(dǎo)入】通過微課視頻進(jìn)行情景導(dǎo)入，引出“中國民俗”網(wǎng)站添加CSS樣式后的效果，讓學(xué)生明確學(xué)習(xí)任務(wù)。【項目實施】任務(wù)2.4：為“中國民俗”網(wǎng)站頁面設(shè)置外觀一、任務(wù)分析小丁使用HTML制作了“中國民俗”網(wǎng)站頁面的內(nèi)容后，發(fā)現(xiàn)最終效果跟網(wǎng)站設(shè)計需求的效果不一樣，老師告訴小丁，他只完成了網(wǎng)站頁面的html內(nèi)容的設(shè)置，還需要為網(wǎng)站頁面設(shè)置CSS外觀樣式。二、知識儲備根據(jù)任務(wù)分析，在之前掌握知識的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識點有CSS基本概念、功能特點、引入方式、文本樣式、字體樣式、寬高樣式和背景樣式。新知學(xué)習(xí)1：CSS基本概念、功能特點和引入方式提出問題：CSS在網(wǎng)頁中的作用？（學(xué)生分組討論回答，然后教師進(jìn)行講解。）1.CSS基本概念、功能特點和引入方式（1）講解CSS的基本概念；（2）講解CSS的功能特點；（2）講解CSS引入方式：內(nèi)聯(lián)樣式表，內(nèi)部樣式表，外部樣式表。新知學(xué)習(xí)2:CSS文本樣式在css中，可以對文本的顯示效果進(jìn)行設(shè)置，常用設(shè)置文本樣式的屬性如下表所示。屬性描述color定義文本顏色text-align定義文本的水平對齊方式vertical-align定義元素的垂直對齊方式text-decoration定義文本裝飾text-transform定義文本轉(zhuǎn)換text-indent定義文本縮進(jìn)letter-spacing定義文本中字符之間的間距l(xiāng)ine-height定義行之間的間距1.文本顏色顏色屬性Color用于設(shè)置文本顏色，顏色取值有以下三種方法：（1）顏色名。如”red”(紅色)、”blue”(藍(lán)色)、”yellow”(黃色)。（2）十六進(jìn)制值。如”#FF0000”(紅色)、”#000FFF”(藍(lán)色)、”#FFFF00”(黃色)。（3）RGB值。如”RGB(255,0,0)”(紅色)、”RGB(0,0,255)”(藍(lán)色)、”RGB(255,255,0)”(黃色)。2.文本水平對齊方式文本水平對齊text-align屬性取值如下表所示。text-align屬性值功能left文本左對齊center文本居中right文本右對齊3.文本垂直對齊方式文本垂直對齊方式vertical-align屬性取值如下表所示。vertical-align屬性值功能top把元素頂端與行中最高元素頂端對齊middle把此元素放置在父元素的中部bottom底端對齊4.文本裝飾文本裝飾text-decoration屬性取值如下表所示。text-decoration屬性值功能none用于超鏈接去掉下劃線overline上劃線line-through刪除線underline下劃線5.文本轉(zhuǎn)換文本轉(zhuǎn)換text-transform屬性取值如下表所示。text-transform屬性值功能uppercase將所有內(nèi)容轉(zhuǎn)換為大寫lowercase將所有內(nèi)容轉(zhuǎn)換為小寫capitalize將每個單詞的首字母大寫6.文本縮進(jìn)text-indent屬性用于指定文本第一行的縮進(jìn)。text-transform屬性值功能uppercase將所有內(nèi)容轉(zhuǎn)換為大寫lowercase將所有內(nèi)容轉(zhuǎn)換為小寫capitalize將每個單詞的首字母大寫7.字符間距l(xiāng)etter-spacing

屬性用于指定文本中字符之間的間距。8.行高line-height

屬性用于指定行之間的間距。新知學(xué)習(xí)3:CSS字體樣式在CSS樣式中，使用font屬性可以設(shè)置豐富多彩的字體樣式。該屬性是一個復(fù)合屬性，常用于設(shè)置字體樣式的屬性如下表所示。屬性描述font-style定義字體斜體樣式font-weight定義字體粗細(xì)font-size定義字體大小font-variant定義字體變體1.字體斜體樣式font-style

屬性主要用于指定斜體文本。font-style屬性值如下表所示。font-style屬性值功能normal字體正常顯示italic字體以斜體顯示oblique字體為傾斜，和斜體非常相似，但瀏覽器支持較少2.字體粗細(xì)font-weight屬性指定字體的粗細(xì)。font-weight屬性值如下表所示。font-weight屬性值功能normal標(biāo)準(zhǔn)字符bold粗體字符bolder更粗的字符lighter更細(xì)的字符具體值值的區(qū)間在100-900，表示由細(xì)到粗的字符。400

等同于normal，700等同于

bold。3.字體大小font-size

屬性設(shè)置文本的大小。在網(wǎng)頁設(shè)計中，字體大小很重要。但是，不應(yīng)使用調(diào)整字體大小來使段落看起來像標(biāo)題，或是使標(biāo)題看起來像段落，應(yīng)使用正確的HTML元素，例如<h1>-<h6>用于標(biāo)題，<p>用于段落。font-size屬性值如下表所示。font-size屬性的值功能xx-smallx-smallsmallmediumlargex-largexx-large把字體的大小設(shè)置為不同的尺寸，從xx-small到xx-large默認(rèn)值為mediumsmaller把字體設(shè)置為比父輩文本字體更小的尺寸larger把字體設(shè)置為比父輩文本字體更大的尺寸length把字體大小設(shè)置為一個固定值%把字體大小設(shè)置為基于父元素文本字體大小的一個百分比值4.字體變體font-variant

屬性指定是否以small-caps字體（小型大寫字母）顯示文本。在small-caps字體中，所有小寫字母都將轉(zhuǎn)換為大寫字母。但是，轉(zhuǎn)換后的大寫字母的字體大小小于文本中原始大寫字母的字體大小。新知學(xué)習(xí)4:CSS寬高樣式CSS尺寸屬性允許控制元素的高度和寬度。height屬性設(shè)置元素的高度，width屬性設(shè)置元素的寬度，要注意的是

width屬性不包括填充，邊框和頁邊距！width屬性值或height屬性值功能auto默認(rèn)值。瀏覽器可計算出實際的寬高。length使用

px、cm等單位定義寬高。單位%使用百分比設(shè)置百分比寬高。新知學(xué)習(xí)5:CSS背景樣式在CSS中，對背景的設(shè)置比較豐富，背景用background屬性來設(shè)置，它是一個復(fù)合屬性，常用于設(shè)置背景的屬性如下表所示。屬性描述background-color定義背景顏色background-image定義背景圖像background-repeat定義背景圖像重復(fù)background-position定義背景圖像的位置1.背景顏色background-color

屬性指定元素的背景顏色，顏色的指定方式同文字顏色，可搭配opacity屬性使用。2.背景圖像background-image屬性指定用作元素背景的圖像。默認(rèn)情況下，圖像會重復(fù)，以覆蓋整個元素。3.背景重復(fù)background-repeat屬性指定背景圖像的平鋪方式，默認(rèn)情況下，background-image屬性在水平和垂直方向上都重復(fù)圖像。某些圖像應(yīng)只適合水平或垂直方向上重復(fù)，否則它們看起來會很奇怪，如果圖像僅在水平方向重復(fù)則使用background-repeat:repeat-x，則背景看起來會更好，如需垂直重復(fù)圖像，則設(shè)置

background-repeat:repeat-y，background-repeat

屬性還可指定只顯示一次背景圖像。具體屬性值如下表所示。background-repeat屬性值功能repeat-x僅在水平方向平鋪repeat-y僅在垂直方向平鋪no-repeat只顯示一次背景圖像4.背景定位background-position

屬性用于指定背景圖像的位置。通過例題讓學(xué)生鞏固練習(xí)其編碼規(guī)則。三、操作實施任務(wù)實踐2.4.1：設(shè)置首頁外觀任務(wù)實踐2.4.2：設(shè)置詳情頁外觀學(xué)生在知識學(xué)習(xí)的基礎(chǔ)上，對照任務(wù)分析，進(jìn)行操作實踐，完成“中國民俗”網(wǎng)站主頁和詳情頁頁面的制作。（學(xué)生動手操作，教師巡回指導(dǎo)，對共性問題進(jìn)行講解，對個性問題進(jìn)行答疑。）四、任務(wù)拓展布置拓展任務(wù)：利用所學(xué)，根據(jù)以上頁面的效果，設(shè)計制作“飲食文化”主頁和詳情頁。（學(xué)生可在完成基本任務(wù)的前提下，完成拓展任務(wù)。）五、小結(jié)延伸本任務(wù)圍繞“中國民俗”網(wǎng)站頁面設(shè)置外觀，介紹了CSS基本概念、功能特點和引入方式，文本樣式，字體樣式，寬高樣式，背景樣式，綜合應(yīng)用完成了頁面的外觀設(shè)置。【項目小結(jié)】通過本項目的學(xué)習(xí)，小丁掌握了HTML中文本與段落、圖片、超鏈接、塊級元素與行內(nèi)元素的相關(guān)知識以及注釋的作用與使用方法，同時還學(xué)習(xí)了CSS樣式中的引入方式、文本樣式、字體樣式、寬高樣式和背景樣式。通過學(xué)習(xí)這些內(nèi)容，小丁完成了“中國民俗”網(wǎng)站專題主頁、詳情頁的制作。課后拓學(xué)1.完成任務(wù)2.4的課后練習(xí)。2.掃碼觀看項目三中的微課視頻，預(yù)習(xí)新課。3.完成項目延伸任務(wù)，將結(jié)果文件上傳至教學(xué)平臺。通過學(xué)習(xí)平臺學(xué)習(xí)相關(guān)內(nèi)容，讓學(xué)生養(yǎng)成自主學(xué)習(xí)的習(xí)慣。通過“中