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

教学课题 项目8 CSS 3创建网页菜单—8.1项目描述、8.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3美化超链接。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法、CSS 3的各类选择器的应用和CSS 3美化文本、段落和图片的方法。 通过网页菜单可以在不同的网页分类中自由切换，网页菜单也是网站内容条理化、交互人性化不可或缺的元素之一。利用项目列表、超链接和CSS 3属性，能够制作出美观大方的网页菜单。 教学重点 1.改变超链接的基本样式； 2.设置带有提示信息的超链接； 3.设置超链接的背景图； 4.设置超链接的按钮效果； 5.设置超链接的鼠标样式。 教学难点 1.改变超链接的基本样式； 2.设置超链接的鼠标样式。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页中超链接的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、改变超链接的基本样式 单元格 列 行 单元格 列 行 单元格 列 行 伪类是CSS本身定义的一种类，使用伪类可以定义超链接在不同状态下的样式效果。超链接的伪类有四种状态，详细信息如表所示。 属性 说明 a:link 定义a元素未访问时的样式 a:visited 定义a元素访问后的样式 a:hover 定义鼠标经过显示的样式 a:active 定义鼠标单击激活时的样式 想要定义未被访问的超链接样式，可以通过a:link来实现，要设置被访问过的超链接样式，可以通过a:visited来实现，要设置鼠标经过和激活时的样式用a:hover和a:active来实现。 格式为： a:link{CSS样式} a:visited{CSS样式} a:hover{CSS样式} a:actived{CSS样式} 二、设置带有提示信息的超链接 超链接的文字比较简洁，有时候不能表达这个超链接的含义，通常是为超链接添加上一些介绍性信息，即提示信息。要设置这样的信息，可以通过超链接信息的描述标记title来实现，title属性的值为提示的内容。 格式为：a href= title=提示信息的文本内容/a 【例8-1】超链接基本样式和提示信息实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title超链接基本样式和提示信息/title 6 style 7 #nav1{padding:20px;} 8 a{color:#545454;text-decoration: none;margin:3px;padding: 3px;} 9 a:link{color:#545454;} 10 a:visited{color:#545454;} 11 a:hover{color:#f60;text-decoration: underline;} 12 a:active{color:#f63;} 13 /style 14 /head 15 body 16 div id=nav1 17 a href=#首页/a| 18 a href=#产品展示/a| 19 a href=#售后服务/a| 20 a href=#联系我们/a| 21 a href=# title=我们是一个团结的集体关于我们/a 22 /div 23 /body 24 /html 在浏览器中预览效果如图所示。 三、设置超链接的背景图 超链接添加背景图片，使用background-image来实现，超链接添加背景颜色，使用background-color来实现。 【例8-2】设置超链接的背景颜色实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title设置超链接背景颜色/title 6 style type=text/css 7 .nav{margin:20px;font-size:14px;font-family: 微软雅黑;} 8 a{ 9 color:#333; 10 text-