（中職）Web前端設計基礎 項目八-2電子教案

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

2、不可或缺的元素之一。利用工程列表、超鏈 接和CSS3屬性，能夠制作出美觀大方的網(wǎng)頁菜單。教學重點.美化無序列表和有序列表；.制作圖片列表；.列表的復合屬性。教學難點.美化無序列表和有序列表；.列表的復合屬性。教學方法工程教學法、多媒體輔助教學法、講練結(jié)合法教學過程教學環(huán)節(jié)教學內(nèi)容師生活動新課導入給學生展示一個網(wǎng)頁頁面，通過網(wǎng)頁中工程列表的效果, 導入本節(jié)課的內(nèi)容。教師提出問題，學 生可分組討論，協(xié)作探 究。技能學習一、美化無序列表和有序列表在以前的工程學習中，有序列表和無序列表的列表項符 號都是使用type屬性來定義的，type屬性值可以為“disc（默 認值是實心圓）”、“circle （空

3、心圓）”和“square （實心正方 形）”，這是在標簽屬性中定義的。在CSS3中，不管是有序 列表還是無序列表，都使用list-style-type屬性來定義列表符 號，格式如下：list-style-type:屬性值;【例8-4】美化無序列表和有序列表實例，代碼如下所示。教師操作演示，學 生觀看、實訓。必要時 要求一個具有典型特 質(zhì)的學生與老師互動， 共同完成操作任務，借 此查看教學效果。美化無序列表和有序列表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;教師操作演示，學17生觀看、實訓。必要時18要求一個具有典型特19質(zhì)的學生與老師互動，20共同完成操作任務，借21vp無序列表v/p此查看教學效果。2223lixa href+鏟政府工作報告再提人工智能“四問 ” 24lixa

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

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

7、CE。炭。:今三會為會友會發(fā)款智能三表二、制作圖片列表在CSS 3中l(wèi)ist-style-image屬性用來定義有序或無序列 表項標志的圖像，可以將工程符號替換成任意的圖像，格式 如下：list-style-image: none | url;使用圖像作為工程符號時，圖像通常顯示在列表的外部， 在CSS 3中，圖像相對于列表項內(nèi)容的放置位置可以使用 list-style-position屬性進行控制，格式如下:list-style-position:outside|inside;【例8-5】制作圖片列表實例，代碼如下所示。制作圖片列表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、報告再提人工智能解答“四問” 27谷歌發(fā)布全球首個72量子比特通用量子計算機282018家博會開展在即 格力將重磅發(fā)布節(jié)能 v/1 i29va href=#全球首款 “4D吃糖”設備30a href=#今年華為會發(fā)布新款智能手表v/li3132 33 34 在瀏覽器中預覽效果如下圖。 TOC o 1-5 h z J Q制作圖片列表x 分 C file：/D：/Demo/8/8-5.12?三婚片列表:.政府工作報告再理人工智能。答“四巨”:令2018家曹會開會在即格力將重法發(fā)布三靛.全首款“4D吃糖” i殳備今-4為會發(fā)布為款智能手表三、列表的復合屬性在對工程列表進行操作時，可以直接使用一個復合

10、屬性 list-style來定義，格式如下：list-style:style;【例8-6】列表的復合屬性實例，代碼如下所示。列表的復合屬性* 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);列表的復合屬性政府工作報告再提人工智能解答“四問” 24252018家博會開展在即格力將重磅發(fā)布26全球首款“4D吃糖”設備v/a今年華為會發(fā)布新款智能手表v/av/li在瀏覽器中預覽效果如下圖。rrri- | o I x TOC o 1-5 h z f 0列表的復合屬性x * 分 Cfi 1 e: /D: /Demo/8/8-6. htinli7 三；列表的復合屬性;：政府工作投告再瑁人工智能解答“四問”：2018家營會開展在即格力將重徒發(fā)布 令全球首款“4D吃糖”i殳備 ，今E生為會發(fā)布發(fā)

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