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

1、教學(xué)課題工程8 CSS 3創(chuàng)立網(wǎng)頁(yè)菜單一8.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)L掌握CSS 3美化工程列表。能力目標(biāo).培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo).鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專(zhuān)業(yè)素質(zhì)；.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過(guò)前面知識(shí)的學(xué)習(xí)，已經(jīng)掌握了 HTML的基本結(jié)構(gòu)、圖文混排的方 法、網(wǎng)頁(yè)中表格的制作方法、如何創(chuàng)立超鏈接和制作音視頻播放器、網(wǎng) 頁(yè)中的表單創(chuàng)立方法、CSS3的各類(lèi)選擇器的應(yīng)用和CSS3美化文本、段 落和圖片的方法。通過(guò)網(wǎng)頁(yè)菜單可以在不同的網(wǎng)頁(yè)分類(lèi)中自由切換，網(wǎng)頁(yè)菜單也是網(wǎng) 站內(nèi)容條理化、交互人性化

2、不可或缺的元素之一。利用工程列表、超鏈 接和CSS3屬性，能夠制作出美觀大方的網(wǎng)頁(yè)菜單。教學(xué)重點(diǎn).美化無(wú)序列表和有序列表；.制作圖片列表；.列表的復(fù)合屬性。教學(xué)難點(diǎn).美化無(wú)序列表和有序列表；.列表的復(fù)合屬性。教學(xué)方法工程教學(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è)中工程列表的效果, 導(dǎo)入本節(jié)課的內(nèi)容。教師提出問(wèn)題，學(xué) 生可分組討論，協(xié)作探 究。技能學(xué)習(xí)一、美化無(wú)序列表和有序列表在以前的工程學(xué)習(xí)中，有序列表和無(wú)序列表的列表項(xiàng)符 號(hào)都是使用type屬性來(lái)定義的，type屬性值可以為“disc（默 認(rèn)值是實(shí)心圓）”、“circle （空

3、心圓）”和“square （實(shí)心正方 形）”，這是在標(biāo)簽屬性中定義的。在CSS3中，不管是有序 列表還是無(wú)序列表，都使用list-style-type屬性來(lái)定義列表符 號(hào)，格式如下：list-style-type:屬性值;【例8-4】美化無(wú)序列表和有序列表實(shí)例，代碼如下所示。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。美化無(wú)序列表和有序列表v/title6* margin:Opx;padding:Opx;font-family:微軟雅黑;font-size: 12px;.big01,.big02width:400px;

4、border: 1 px red dashed;margin: lOpx 0 0 lOpx;pmargin:3px 0 0 5px;color:3ef;font-size:14px;.bigOl ul margin-left:40px;list-style-type:disc;li line-height: 20px;上ig02 ol margin-left:40px;教師操作演示，學(xué)17生觀看、實(shí)訓(xùn)。必要時(shí)18要求一個(gè)具有典型特19質(zhì)的學(xué)生與老師互動(dòng)，20共同完成操作任務(wù)，借21vp無(wú)序列表v/p此查看教學(xué)效果。2223lixa href+鏟政府工作報(bào)告再提人工智能“四問(wèn) ” 24lixa

5、href=#”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)252018家博會(huì)開(kāi)展在即格力將重磅發(fā)布節(jié)能26全球首款“4D吃糖”設(shè)備:橋本環(huán)奈喂你吃糖27lixa hrefT鏟,華為CEO透露:今年華為會(huì)發(fā)布新款智能手表v/li28293031有序列表v/p3233政府工作報(bào)告再提人工智能 業(yè)界委員解答“四問(wèn)” 34谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)352018家博會(huì)開(kāi)展在即格力將重磅發(fā)布節(jié)能“黑科技.36全球首款“4D吃糖”設(shè)備:橋本環(huán)奈喂你吃糖v/a工一口 X教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。在瀏覽器

6、中預(yù)覽效果如下圖工一口 X教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。 G D file：/D：/Demo/8/8-4. h, 三；無(wú)序列表改行工作投告再理人丁智能解答“四巨”谷索發(fā)布全法首人72量子比存通用層子亡算機(jī)2018京酉會(huì)格力將事發(fā)布節(jié)能呈科技,.全首款“4D吃糖i殳備：橋環(huán)奈港你吃糖華為CE。丁:今三冬為會(huì)宣布丁款智能手表有序列表1,改行二%投告再瑁人工智能窿答“四二”2.3取度布全區(qū)首人72盤(pán)子比與通月星子廿算機(jī). 2018冢禽會(huì)格力將重滂發(fā)布發(fā)能“逑科技.全運(yùn)首款“4D吃塘“諛?。簶蚱攮h(huán)奈照你吃糖.名為

7、CE。炭。:今三會(huì)為會(huì)友會(huì)發(fā)款智能三表二、制作圖片列表在CSS 3中l(wèi)ist-style-image屬性用來(lái)定義有序或無(wú)序列 表項(xiàng)標(biāo)志的圖像，可以將工程符號(hào)替換成任意的圖像，格式 如下：list-style-image: none | url;使用圖像作為工程符號(hào)時(shí)，圖像通常顯示在列表的外部， 在CSS 3中，圖像相對(duì)于列表項(xiàng)內(nèi)容的放置位置可以使用 list-style-position屬性進(jìn)行控制，格式如下:list-style-position:outside|inside;【例8-5】制作圖片列表實(shí)例，代碼如下所示。制作圖片列表v/title* margin:Opx;padding:Op

8、x;font-family:微軟雅黑;font-size: 12px;.big01width:320px;border: 1 px red dashed;margin: lOpx 0 0 lOpx;)pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.bigOlul margin-left:40px;liline-height: 20px;list-style-image:url(images/arrow_right.png);19.poslist-style-position: inside;20 21 22 23 24圖片列表v/p2526政府工作

9、報(bào)告再提人工智能解答“四問(wèn)” 27谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)282018家博會(huì)開(kāi)展在即 格力將重磅發(fā)布節(jié)能 v/1 i29va href=#全球首款 “4D吃糖”設(shè)備30a href=#今年華為會(huì)發(fā)布新款智能手表v/li3132 33 34 在瀏覽器中預(yù)覽效果如下圖。 TOC o 1-5 h z J Q制作圖片列表x 分 C file：/D：/Demo/8/8-5.12?三婚片列表:.政府工作報(bào)告再理人工智能。答“四巨”:令2018家曹會(huì)開(kāi)會(huì)在即格力將重法發(fā)布三靛.全首款“4D吃糖” i殳備今-4為會(huì)發(fā)布為款智能手表三、列表的復(fù)合屬性在對(duì)工程列表進(jìn)行操作時(shí)，可以直接使用一個(gè)復(fù)合

10、屬性 list-style來(lái)定義，格式如下：list-style:style;【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示。列表的復(fù)合屬性* margin:Opx;padding:Opx;font-family:微軟雅黑;font-size: 12px;.big01width:320px;border: 1 px red dashed;margin: lOpx 0 0 lOpx;)pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.bigOl ulmargin-left:40px;li line-height: 20px;list-style:none

11、;.pos list-style:insideurl(images/arrow_right.png);列表的復(fù)合屬性政府工作報(bào)告再提人工智能解答“四問(wèn)” 24252018家博會(huì)開(kāi)展在即格力將重磅發(fā)布26全球首款“4D吃糖”設(shè)備v/a今年華為會(huì)發(fā)布新款智能手表v/av/li在瀏覽器中預(yù)覽效果如下圖。rrri- | o I x TOC o 1-5 h z f 0列表的復(fù)合屬性x * 分 Cfi 1 e: /D: /Demo/8/8-6. htinli7 三；列表的復(fù)合屬性;：政府工作投告再瑁人工智能解答“四問(wèn)”：2018家營(yíng)會(huì)開(kāi)展在即格力將重徒發(fā)布 令全球首款“4D吃糖”i殳備 ，今E生為會(huì)發(fā)布發(fā)

12、款智能手表知識(shí)歸納本節(jié)課學(xué)習(xí)了使用CSS3對(duì)工程列表的美化方法。.改變列表項(xiàng)符號(hào)，使用list-style-type來(lái)實(shí)現(xiàn),不要列 表不J t 使用 list-style-type:none;實(shí)現(xiàn)。.使用圖片作為工程列表項(xiàng)下J勺，用list-style-image： url （相對(duì)路徑后者絕對(duì)路徑）實(shí)現(xiàn)。.工程列表項(xiàng)縮進(jìn)，使用list-style-position: inside;實(shí)現(xiàn)。.列表項(xiàng)的復(fù)合屬性，使用list-style:屬性值1屬性值2 屬性值3;屬性值最多三個(gè)。教師講授，學(xué)生歸 納總結(jié)，并作適當(dāng)?shù)墓P 記。課后作業(yè)一、選擇題.有序列表和無(wú)序列表的列表項(xiàng)符號(hào)都是使用 屬性來(lái)定義的。A list B styleC typeD size.屬性用來(lái)定義有序或無(wú)序列表項(xiàng)標(biāo)志的圖像。Alist-styleBlist-style-ima