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

教学课题 项目8 CSS 3创建网页菜单—8.3项目实施8.4项目拓展 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3美化超链接； 2.掌握CSS 3美化项目列表。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法、CSS 3的各类选择器的应用和CSS 3美化文本、段落和图片的方法。 通过网页菜单可以在不同的网页分类中自由切换，网页菜单也是网站内容条理化、交互人性化不可或缺的元素之一。利用项目列表、超链接和CSS 3属性，能够制作出美观大方的网页菜单。 教学重点 1.美化超链接、无序列表和有序列表； 2.制作图片列表； 3.列表的复合属性。 教学难点 1.美化超链接； 2.美化无序列表和有序列表； 3.列表的复合属性。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页菜单的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、制作垂直导航菜单 单元格 列 行 单元格 列 行 单元格 列 行 Step01 启动Sublime程序，新建并保存文件名称为8-7.html。 Step02 输入代码如下： 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title垂直导航菜单的制作/title 6 style type=text/css 7 *{margin:0; padding:0; font-size:14px;} 8 a{color:#333;text-decoration:none} 9 .nav{margin-left: 50px;} 10 .nav li{list-style-type: none;} 11 .nav li a{ 12 display:block; 13 text-align: center; 14 height:30px; 15 line-height:30px; 16 width:120px; 17 background-color:#efefef; 18 margin-bottom:1px; 19 } 20 .nav li a:hover{ background-color:#F60; color:#fff} 21 /style 22 /head 23 body 24 ul class=nav 25 lia href=#首　　页/a/li 26 lia href=#关于我们/a/li 27 lia href=#产品展示/a/li 28 lia href=#售后服务/a/li 29 lia href=#联系我们/a/li 30 /ul 31 /body 32 /html 在浏览器中预览效果如图所示。 二、制作水平导航菜单 Step01 启动Sublime程序，新建并保存文件名称为8-8.html。 Step02 输入代码如下： 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title水平导航菜单的制作/title 6 style type=text/css 7 *{margin:0; padding:0; font-size:14px;} 8 a{color:#333;text-decoration:none;} 9 .nav{ 10 list-style:none; 11 height:30px; 12 border-bottom:10px solid #F60; 13 margin-top:20px; 14 padding-left:50px; 15 } 16 .nav li{float:left;list-style:none;} 17 .nav li a{ 18 display:block; 19 height:30px; 20 text-align:center;