（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-3電子教案

1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-3電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-3電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目六-3電子教案教學(xué)課題項(xiàng)目6 CSS 3中的選擇器6.3項(xiàng)目實(shí)施6.4項(xiàng)目拓展授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握CSS 3的基本語(yǔ)法和引用方法；2.掌握CSS 3常用選擇器；3.掌握CSS 3新增選擇器。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過(guò)上節(jié)課的學(xué)習(xí)，已經(jīng)掌握了CSS 3的基本語(yǔ)法和引用方法，學(xué)習(xí)了CSS

2、3的常用選擇器、新增選擇器和偽類選擇器。本節(jié)課結(jié)合以上所學(xué)知識(shí)制作一個(gè)包含標(biāo)簽選擇器、class選擇器和ID選擇器的實(shí)例和一個(gè)元素狀態(tài)偽類選擇器的實(shí)例。教學(xué)重點(diǎn)1.CSS 3的基本語(yǔ)法和引用方法；2.CSS 3常用選擇器；3.CSS 3新增選擇器。教學(xué)難點(diǎn)1.全局選擇器、組合選擇器的用法；2.屬性選擇器、結(jié)構(gòu)偽類選擇器和UI元素狀態(tài)偽類選擇器的用法。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁(yè)頁(yè)面，通過(guò)查看網(wǎng)頁(yè)源代碼中CSS各類選擇器的用法，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問(wèn)題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)單元格列行單元格列行單元格

3、列行一、項(xiàng)目實(shí)施單元格列行單元格列行單元格列行Step01 啟動(dòng)Sublime程序，新建并保存文件名稱為6-11.html。Step02 輸入代碼如下：1 2 3 4 5 選擇器實(shí)例6 7 *margin:0px;padding:0px;color:white;font-family: 微軟雅黑;font-size: 14px;8 divwidth: 100px;height: 50px;background: red;9 .boxwidth: 100px;height: 50px;background: green;10 #boxwidth: 100px;height: 50px;backg

4、round: blue;11 .wenbenwidth: 400px;height: 150px;position:absolute;left:100px;top:0px;background: white;12 pcolor:#000;line-height: 50px;13 14 15 16 17 標(biāo)簽選擇器18 19 20 Class選擇器21 22 23 ID選擇器24 25 26 divwidth: 100px;height: 50px;background: red;27 .boxwidth: 100px;height: 50px;background: green;28 #box

5、width: 100px;height: 50px;background: blue;29 30 31 在瀏覽器中預(yù)覽效果如圖所示。二、項(xiàng)目拓展Step01 啟動(dòng)Sublime程序，新建并保存文件名稱為6-12.html。Step02 輸入代碼如下：1 2 3 4 5 元素狀態(tài)偽類選擇器6 7 divborder:1px solid green;width:400px;margin-top: 10PX;padding:5px;8 inputtype=text1:hover /*鼠標(biāo)經(jīng)過(guò)（懸停）*/9 background-color: pink;10 11 inputtype=text1:fo

6、cus /*鼠標(biāo)獲得焦點(diǎn)（點(diǎn)擊）并進(jìn)行文字輸入時(shí)*/12 background-color: #ccc;13 14 inputtype=text1:active /*鼠標(biāo)按下（按下還未松開(kāi)）*/15 background-color: yellow;16 17 inputtype=text2:enabled /*選中時(shí)文本框?yàn)榭捎?/18 background-color: pink;19 20 inputtype=text2:disabled /*選中時(shí)文本框?yàn)椴豢捎?/21 background-color: #ccc;22 23 inputtype=checkbox:checked /*

7、選中多選框時(shí)*/24 outline: 2px solid red;25 26 27 28 function radio_onchange()29 var radio = document.getElementById(radio1);/獲得可用單選按鈕的id30 var text = document.getElementById(text2);/獲得文本框id31 if(radio.checked)32 text.disabled = ;/選中時(shí)文本框?yàn)榭捎?3 else34 text.disabled = disabled;/否則文本框?yàn)椴豢捎?5 36 37 38 39 40 41 鼠

8、標(biāo)經(jīng)過(guò)、鼠標(biāo)點(diǎn)擊（但未松開(kāi)）、鼠標(biāo)獲得焦點(diǎn)（點(diǎn)擊松開(kāi)）狀態(tài)時(shí)元素的樣式42 姓名：43 44 地址：45 46 47 48 49 點(diǎn)擊可用按鈕時(shí)，文本框背景色為pink；點(diǎn)擊不可用按鈕時(shí)，文本框背景色為灰色；50 可用51 52 不可用53 54 55 56 57 E:checked是用來(lái)指定當(dāng)表單中的radio單選框、checkbox復(fù)選框處于選取狀態(tài)時(shí)的樣式58 蘋(píng)果59 60 香蕉61 62 橙子63 64 菠蘿65 66 67 68 在瀏覽器中預(yù)覽效果如圖所示。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識(shí)歸納本項(xiàng)目通過(guò)項(xiàng)目實(shí)施和項(xiàng)目拓展制作了CSS3的基礎(chǔ)選擇器和CSS3的組合選擇去兩個(gè)案例，學(xué)習(xí)了HTML5引入CSS的方法、CSS3的基本語(yǔ)法和CSS3的基本選擇器、屬性選擇器、結(jié)構(gòu)偽類選擇器、UI元素狀態(tài)偽類選擇器等，掌握了行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式以及樣式的優(yōu)先級(jí)及各類選擇器的應(yīng)用方法。教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、上機(jī)實(shí)訓(xùn)1.上機(jī)完成項(xiàng)目實(shí)施中選擇器