（中职）Web前端设计基础 项目八-2电子教案

1、教学课题工程8 CSS 3创立网页菜单一8.2知识准备授课班级授课时间教学目标知识目标L掌握CSS 3美化工程列表。能力目标.培养学生自主学习、分析问题和解决问题的能力；.培养学生熟练运用所学知识的能力。德育目标.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了 HTML的基本结构、图文混排的方 法、网页中表格的制作方法、如何创立超链接和制作音视频播放器、网 页中的表单创立方法、CSS3的各类选择器的应用和CSS3美化文本、段 落和图片的方法。通过网页菜单可以在不同的网页分类中自由切换，网页菜单也是网 站内容条理化、交互人性化

2、不可或缺的元素之一。利用工程列表、超链 接和CSS3属性，能够制作出美观大方的网页菜单。教学重点.美化无序列表和有序列表；.制作图片列表；.列表的复合属性。教学难点.美化无序列表和有序列表；.列表的复合属性。教学方法工程教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页中工程列表的效果, 导入本节课的内容。教师提出问题，学 生可分组讨论，协作探 究。技能学习一、美化无序列表和有序列表在以前的工程学习中，有序列表和无序列表的列表项符 号都是使用type属性来定义的，type属性值可以为“disc（默 认值是实心圆）”、“circle （空

3、心圆）”和“square （实心正方 形）”，这是在标签属性中定义的。在CSS3中，不管是有序 列表还是无序列表，都使用list-style-type属性来定义列表符 号，格式如下：list-style-type:属性值;【例8-4】美化无序列表和有序列表实例，代码如下所示。教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。美化无序列表和有序列表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质的学生与老师互动，20共同完成操作任务，借21vp无序列表v/p此查看教学效果。2223lixa href+铲政府工作报告再提人工智能“四问 ” 24lixa

5、href=#”谷歌发布全球首个72量子比特通用量子计算机252018家博会开展在即格力将重磅发布节能26全球首款“4D吃糖”设备:桥本环奈喂你吃糖27lixa hrefT铲,华为CEO透露:今年华为会发布新款智能手表v/li28293031有序列表v/p3233政府工作报告再提人工智能 业界委员解答“四问” 34谷歌发布全球首个72量子比特通用量子计算机352018家博会开展在即格力将重磅发布节能“黑科技.36全球首款“4D吃糖”设备:桥本环奈喂你吃糖v/a工一口 X教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。在浏览器

6、中预览效果如下图工一口 X教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。 G D file：/D：/Demo/8/8-4. h, 三；无序列表改行工作投告再理人丁智能解答“四巨”谷索发布全法首人72量子比存通用层子亡算机2018京酉会格力将事发布节能呈科技,.全首款“4D吃糖i殳备：桥环奈港你吃糖华为CE。丁:今三冬为会宣布丁款智能手表有序列表1,改行二%投告再瑁人工智能窿答“四二”2.3取度布全区首人72盘子比与通月星子廿算机. 2018冢禽会格力将重滂发布发能“逑科技.全运首款“4D吃塘“谀丁：桥七环奈照你吃糖.名为

7、CE。炭。:今三会为会友会发款智能三表二、制作图片列表在CSS 3中list-style-image属性用来定义有序或无序列 表项标志的图像，可以将工程符号替换成任意的图像，格式 如下：list-style-image: none | url;使用图像作为工程符号时，图像通常显示在列表的外部， 在CSS 3中，图像相对于列表项内容的放置位置可以使用 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谷歌发布全球首个72量子比特通用量子计算机282018家博会开展在即 格力将重磅发布节能 v/1 i29va href=#全球首款 “4D吃糖”设备30a href=#今年华为会发布新款智能手表v/li3132 33 34 在浏览器中预览效果如下图。 TOC o 1-5 h z J Q制作图片列表x 分 C file：/D：/Demo/8/8-5.12?三婚片列表:.政府工作报告再理人工智能。答“四巨”:令2018家曹会开会在即格力将重法发布三靛.全首款“4D吃糖” i殳备今-4为会发布为款智能手表三、列表的复合属性在对工程列表进行操作时，可以直接使用一个复合

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家博会开展在即格力将重磅发布26全球首款“4D吃糖”设备v/a今年华为会发布新款智能手表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家营会开展在即格力将重徒发布 令全球首款“4D吃糖”i殳备 ，今E生为会发布发

12、款智能手表知识归纳本节课学习了使用CSS3对工程列表的美化方法。.改变列表项符号，使用list-style-type来实现,不要列 表不J t 使用 list-style-type:none;实现。.使用图片作为工程列表项下J勺，用list-style-image： url （相对路径后者绝对路径）实现。.工程列表项缩进，使用list-style-position: inside;实现。.列表项的复合属性，使用list-style:属性值1属性值2 属性值3;属性值最多三个。教师讲授，学生归 纳总结，并作适当的笔 记。课后作业一、选择题.有序列表和无序列表的列表项符号都是使用 属性来定义的。A list B styleC typeD size.属性用来定义有序或无序列表项标志的图像。Alist-styleBlist-style-ima