《Web前端开发》教学讲义 Web前端设计基础 项目八-2.docxVIP

教学课题 项目8 CSS 3创建网页菜单—8.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3美化项目列表。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法、CSS 3的各类选择器的应用和CSS 3美化文本、段落和图片的方法。 通过网页菜单可以在不同的网页分类中自由切换，网页菜单也是网站内容条理化、交互人性化不可或缺的元素之一。利用项目列表、超链接和CSS 3属性，能够制作出美观大方的网页菜单。 教学重点 1.美化无序列表和有序列表； 2.制作图片列表； 3.列表的复合属性。 教学难点 1.美化无序列表和有序列表； 2.列表的复合属性。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页中项目列表的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、美化无序列表和有序列表 单元格 列 行 单元格 列 行 单元格 列 行 在以前的项目学习中，有序列表和无序列表的列表项符号都是使用type属性来定义的，type属性值可以为“disc（默认值是实心圆）”、“circle（空心圆）”和“square（实心正方形）”，这是在标签属性中定义的。在CSS 3中，不管是有序列表还是无序列表，都使用list-style-type属性来定义列表符号，格式如下： {list-style-type:属性值;} 【例8-4】美化无序列表和有序列表实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title美化无序列表和有序列表/title 6 style 7 *{margin:0px;padding:0px;font-family: 微软雅黑;font-size:12px;} 8 .big01,.big02{ 9 width:400px; 10 border:1px red dashed; 11 margin:10px 0 0 10px; 12 } 13 p{margin:3px 0 0 5px;color:3ef;font-size: 14px;} 14 .big01 ul{margin-left:40px; list-style-type: disc;} 15 li{line-height: 20px;} 16 .big02 ol{margin-left:40px;} 17 /style 18 /head 19 body 20 div class=big01 21 p无序列表/p 22 ul 23 lia href=#政府工作报告再提人工智能 “四问”/a/li 24 lia href=#谷歌发布全球首个72量子比特通用量子计算机/a/li 25 lia href=#2018家博会开展在即格力将重磅发布节能/a/li 26 lia href=#全球首款“4D吃糖”设备：桥本环奈喂你吃糖/a/li 27 lia href=#华为CEO透露:今年华为会发布新款智能手表/a/li 28 /ul 29 /div 30 div class=big02 31 p有序列表/p 32 ol 33 lia href=#政府工作报告再提人工智能 业界委员解答“四问”/a/li 34 lia href=#谷歌发布全球首个72量子比特通用量子计算机/a/li 35 lia href=#2018家博会开展在即 格力将重磅发布节能“黑科技../a/li 36 lia href=#全球首款“4D吃糖”设备：桥本环奈喂你吃糖/a/li 37 lia href=#华为CEO余承东透露:今年华为会发布新款智能手表/a/li 38 /ol 39 /div 40 /body 41 /html 在浏览器中预览效果如图所示。 二、制作图片列表 在CSS 3中list-style-image属性用来定义有序或无序列表项标志的图像，可以将项目符号替换成任意的图像，格式如下： {list-style-image: non