《（中职）Web前端设计基础 项目八-1电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目八-1电子教案.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）Web前端设计基础 项目八-1电子教案教学课题项目8 CSS 3创建网页菜单8.1项目描述、8.2知识准备授课班级授课时间教学目标知识目标1.掌握CSS 3美化超链接。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法、CSS 3的各类选择器的应用和CSS 3美化文本、段落和图片的方法。通过网页菜单可以在不
2、同的网页分类中自由切换，网页菜单也是网站内容条理化、交互人性化不可或缺的元素之一。利用项目列表、超链接和CSS 3属性，能够制作出美观大方的网页菜单。教学重点1.改变超链接的基本样式；2.设置带有提示信息的超链接；3.设置超链接的背景图；4.设置超链接的按钮效果；5.设置超链接的鼠标样式。教学难点1.改变超链接的基本样式；2.设置超链接的鼠标样式。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页中超链接的效果，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、改变超链接的基
3、本样式伪类是CSS本身定义的一种类，使用伪类可以定义超链接在不同状态下的样式效果。超链接的伪类有四种状态，详细信息如表所示。属性说明a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过显示的样式a:active定义鼠标单击激活时的样式想要定义未被访问的超链接样式，可以通过a:link来实现，要设置被访问过的超链接样式，可以通过a:visited来实现，要设置鼠标经过和激活时的样式用a:hover和a:active来实现。格式为：a:linkCSS样式a:visitedCSS样式a:hoverCSS样式a:activedCSS样式二、设置带有提示
4、信息的超链接超链接的文字比较简洁，有时候不能表达这个超链接的含义，通常是为超链接添加上一些介绍性信息，即提示信息。要设置这样的信息，可以通过超链接信息的描述标记title来实现，title属性的值为提示的内容。格式为：【例8-1】超链接基本样式和提示信息实例，代码如下所示。1 2 3 4 5 超链接基本样式和提示信息6 7 #nav1padding:20px; 8 acolor:#545454;text-decoration: none;margin:3px;padding: 3px;9 a:linkcolor:#545454;10 a:visitedcolor:#545454;11 a:ho
5、vercolor:#f60;text-decoration: underline;12 a:activecolor:#f63;13 14 15 16 17 首页|18 产品展示|19 售后服务|20 联系我们|21 关于我们22 23 24 在浏览器中预览效果如图所示。三、设置超链接的背景图超链接添加背景图片，使用background-image来实现，超链接添加背景颜色，使用background-color来实现。【例8-2】设置超链接的背景颜色实例，代码如下所示。1 2 3 4 5 设置超链接背景颜色6 7 .navmargin:20px;font-size:14px;font-famil
6、y: 微软雅黑;8 a 9 color:#333;10 text-decoration:none;11 display: block;12 float: left;13 text-align: center; 14 height:30px; 15 line-height:30px; 16 width:100px; 17 background-color:#efefef; 18 margin-left:6px;19 20 a:hover background-color:#F60; color:#fff21 22 23 24 25 首页26 关于我们27 产品展示28 售后服务29 联系我们30
7、 31 32 在浏览器中预览效果如图所示。四、设置超链接的按钮效果利用CSS中的a:hover，当鼠标经过连接时，链接向下、向右各移一个像素，这样显示效果就想按钮按下了一样。【例8-3】超链接按钮效果实例，代码如下所示。1 2 3 4 5 超链接按钮效果6 7 #navmargin-top:10px; padding:20px;border:1px red solid;8 afont-family: 微软雅黑;text-align: center;margin:3px;9 a:link,a:visited10 color:#ac2300;11 padding:4px 10px 4px 10px
8、;12 background-color: #ccd8db;13 text-decoration: none;14 border-top:1px solid #eeeeee;15 border-left:1px solid #eeeeee;16 border-bottom:1px solid #717171;17 border-right:1px solid #717171;18 19 a:hover20 color:#821821;21 padding:5px 8px 3px 12px;22 background-color: #e2c4c9;23 text-decoration: none
9、;24 border-top:1px solid #717171;25 border-left:1px solid #717171;26 border-bottom:1px solid #eeeeee;27 border-right:1px solid #eeeeee;28 29 30 31 32 33 首页34 关于我们35 品牌特卖36 产品展示37 联系我们38 39 40 在浏览器中预览效果如图所示。五、设置超链接的鼠标样式想要在网页中实现鼠标样式改变的效果，可以通过CSS属性设置来实现。CSS3中鼠标箭头样式可以通过cursor属性来实现，一般情况常用的有“default”和“poi
10、nter”这两个属性值。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了使用CSS3对超链接的美化方法。1去除超链接的自带的下划线，使用text-decoration: none;来实现 。2定义四个伪类的CSS样式：a:link、a:visited、a:hover、a:active 。3注意定义
11、四个伪类的顺序：link、visited、hover、active 。4超链接添加背景图片，使用background-image来实现。5超链接添加背景颜色使用background-color来实现。6超链接的按钮效果，使用CSS中的a:hover，当鼠标经过连接时，链接向下、向右各移一个像素，这样显示效果就想按钮按下了一样。7超链接的鼠标样式，使用cursor来实现，常用的有curdor:pointer 。教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列超链接状态中，_是错误的。A a是声明超链接样式 B a:link设置已链接的样式C a:active设置激活时超链接的样式 D a:hover设置当鼠标悬停链接时的超链接样式2.如果希望进入网页时鼠标光标就能显示crosshair光标图标，那么“cursor:crosshair;”语句应该写在HTML文件的_位置。A B C D 二、上机实训上机完成例8-1和例8-3的实例操作。学生上机完成任务并提交，进行分组互评。教学反思感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用