Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 教案 第12講次 任務(wù)13 陰影與漸變屬性

教案序號：12授課日期課時(shí)數(shù)4章節(jié)名稱任務(wù)13陰影與漸變屬性教學(xué)內(nèi)容重點(diǎn)box-shadow屬性、線性漸變、徑向漸變、Web字體圖標(biāo)。難點(diǎn)Web字體圖標(biāo)的使用。教學(xué)目的與要求掌握使用DIV+CSS布局的方法。學(xué)會使用陰影——box-shadow屬性、box-sizing屬性。學(xué)會使用漸變屬性——線性漸變、徑向漸變。了解重復(fù)漸變。教學(xué)方法與手段教師采用任務(wù)驅(qū)動法，使用教學(xué)PPT輔助授課。教師操作演示，學(xué)生實(shí)訓(xùn)練習(xí)。學(xué)生課前課后均可通過“浙江省高等學(xué)校在線開放課程共享平臺”的配套微課學(xué)習(xí)。作業(yè)及思考題完成課堂上未完成的習(xí)題，通過網(wǎng)絡(luò)平臺上交作業(yè)。通過回帖的方式回答課上留下的思考題。預(yù)習(xí)下一節(jié)內(nèi)容。

講授內(nèi)容課堂組織第一學(xué)時(shí)（任務(wù)13陰影與漸變屬性13.1box-shadow屬性、13.2box-sizing屬性、13.3線性漸變）實(shí)操任務(wù)目標(biāo)發(fā)布實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄圖12-SEQ圖\*ARABIC\r11“網(wǎng)站廣告欄”網(wǎng)頁強(qiáng)化訓(xùn)練——制作旅游攻略網(wǎng)圖SEQ圖\*ARABIC2“旅游攻略網(wǎng)”網(wǎng)頁實(shí)操任務(wù)目標(biāo)發(fā)布box-shadow屬性box-shadow屬性：為盒子模型添加陰影效果語法規(guī)則：box-shadow：像素值1像素值2像素值3像素值4顏色值陰影類型；子任務(wù)：圖SEQ圖\*ARABIC3box-shadow屬性圖SEQ圖\*ARABIC4多重陰影效果box-sizing屬性box-sizing屬性：定義盒子的寬度值（width）或高度值（height）是否包含元素的邊框和內(nèi)邊距。content-box：定義盒子的寬度值（width）或高度值（height）時(shí)，不包含元素的邊框和內(nèi)邊距。border-box：定義盒子的寬度值（width）或高度值（height）時(shí)，包含元素的邊框和內(nèi)邊距。圖SEQ圖\*ARABIC5box-sizing屬性線性漸變線性漸變：起始顏色會沿著一條直線按順序過渡到結(jié)束顏色語法規(guī)則：background-image:linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變角度：取值范圍是0~360deg，totop（從下到上，0deg），toleft（從右到左，270deg）,toright（從左到右，90deg）,tobottom（從上到下，180deg）。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。圖12-SEQ圖\*ARABIC6線性漸變圖12-SEQ圖\*ARABIC7線性漸變效果第二學(xué)時(shí)（任務(wù)13陰影與漸變屬性13.4徑向漸變、13.5重復(fù)漸變、13.6Web字體圖標(biāo)）知識準(zhǔn)備徑向漸變徑向漸變：起始顏色會從一個(gè)中心點(diǎn)開始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。語法規(guī)則：background-image:radial-gradient(漸變形狀圓心位置,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變形狀：水平和垂直半徑的像素值或百分比，circle或ellipse。圓心位置：定義元素漸變的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。圖12-SEQ圖\*ARABIC8徑向漸變重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)行。注意：只有當(dāng)首尾兩顏色位置不在0%或100%時(shí)，重復(fù)漸變才生效。（1）重復(fù)線性漸變background-image:repeating-linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);圖12-SEQ圖\*ARABIC9重復(fù)線性漸變（2）重復(fù)徑向漸變background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);圖12-SEQ圖\*ARABIC10重復(fù)徑向漸變Web文字圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢量。字體圖標(biāo)小，下載速度快。圖標(biāo)工具：font-awesome，開源免費(fèi)使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下載，解壓。只需用到“css”文件夾（樣式文件）和“fonts”文件夾（字體文件）。第二步：將字體文件夾“fonts”和css文件“font-awesome.min.css”拷貝到站點(diǎn)目錄下。注意：“font-awesome.min.css”文件必須要放在css文件夾中。第三步：使用web字體圖標(biāo)。在網(wǎng)頁中鏈接引入font-awesome.min.css文件，使用<i>標(biāo)簽定義字體圖標(biāo)，并通過class屬性定義不同的字體，例如“<iclass=’fafa-apple’></i>”。（每個(gè)圖標(biāo)都有相應(yīng)的class，可以在http://fontawesome.io/icons/網(wǎng)頁上查看。）圖12-SEQ圖\*ARABIC11文件夾目錄圖12-SEQ圖\*ARABIC12復(fù)制并粘貼文件圖12-SEQ圖\*ARABIC13Web字體圖標(biāo)第三學(xué)時(shí)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄案例描述：設(shè)計(jì)并制作旅游景點(diǎn)推薦網(wǎng)banner。圖12-SEQ圖\*ARABIC14“網(wǎng)頁廣告欄”網(wǎng)頁圖12-SEQ圖\*ARABIC15“網(wǎng)頁廣告欄”的網(wǎng)頁布局第四學(xué)時(shí)強(qiáng)化訓(xùn)練——制作旅游攻略網(wǎng)案例描述：設(shè)計(jì)并制作旅游攻略網(wǎng)，網(wǎng)頁效果和布局圖如下。圖12-SEQ圖\*ARABIC16“旅游攻略網(wǎng)”網(wǎng)頁圖12-SEQ圖\*ARABIC17“旅游攻略網(wǎng)”的網(wǎng)頁布局當(dāng)光標(biāo)移到導(dǎo)航上時(shí)，效果如圖上所示。當(dāng)光標(biāo)移到內(nèi)容塊上時(shí)出現(xiàn)陰影效果，如圖下所示圖12-SEQ圖\*ARABIC18鼠標(biāo)指針移至導(dǎo)航欄時(shí)的超鏈接樣式圖12-SEQ圖\*ARABIC19鼠標(biāo)移至內(nèi)容塊時(shí)的效果課后實(shí)訓(xùn)設(shè)計(jì)商城首頁通道，如圖1所示。當(dāng)鼠標(biāo)移動到列表項(xiàng)時(shí)，圖標(biāo)和文字變成白色，出現(xiàn)如圖2所示的效果。（提示：用Web字體圖標(biāo)完成。）圖12-SEQ圖\*A