《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第10课 使用CSS3美化超链接_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第10课 使用CSS3美化超链接_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第10课 使用CSS3美化超链接_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第10课 使用CSS3美化超链接_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第10课 使用CSS3美化超链接_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

101第101第课使用CSS3美化超链接的基基本本PAGE1010使用CSS3美化超链接10使用CSS3美化超链接第课PAGE1110000212使用CSS3美化超链接10000212使用CSS3美化超链接第课PAGE1

课题使用CSS3美化超链接课时2课时（90min）教学目标知识技能目标：（1）学习CSS3设置超链接样式的方法（2）掌握使用CSS3和超链接制作新闻列表和图形化按钮的方法思政育人目标：通过学习CSS3美化超链接，提高学生的代码能力，在实践中不断的提高自己，勤于实践，敢于动手，不断的磨练自己教学重难点教学重点：了解CSS3设置超链接样式的方法教学难点：操作CSS3和超链接制作新闻列表和图形化按钮教学方法启发法、问答法、演示法、讨论法、练习法教学用具讲授法、电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（2min）→知识讲解（22min）→课堂练习（15min）→交流讨论（4min）第2节课：类比分析（2min）→知识讲解（15min）→案例分析（21min）→课堂小结（5min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（2min）【教师】复习上一节课内容，引出新知识点前面两节课，已经学习了如何在HTML5中添加超链接，使得内容更加的完整和丰富这一节课，将在前面课程的基础上，完成对超链接的美化，使得网页的整体效果更加的美观、整洁【学生】聆听、思考通过对上一节课的复习，让学生主动学习美化超链接的方法，引出本节课的内容知识讲解

（22min）【教师】讲述与超链接相关的基本样式超链接中的文本具有默认的下划线效果，且访问前文本颜色为蓝色；访问时文本颜色为红色；访问后文本颜色为紫色。一般在制作网页时都需要重新设置超链接的样式，以适合当前页面的风格。使用前面课程介绍的“:link”“:visited”“:hover”“:active”4种伪类选择器可以设置超链接访问前、访问后、鼠标指针经过和访问时的样式。【学生】聆听、理解、思考【教师】编写参考代码在<head>标签中添加<style>标签，在其中输入以下代码，设置两个超链接不同状态下的样式。.a1:link{color:#000000;text-decoration:none;}/*设置超链接访问前的文本颜色，去除下划线效果*/.a1:visited{color:#717799;}/*设置超链接访问后的文本颜色*/.a1:hover{font-size:1.1em;text-decoration:underline;}/*设置鼠标指针移动至超链接上时的字号，添加下划线效果*/.a1:active{font-size:1em;color:#9ca8c8;}/*设置超链接访问时的字号、文本颜色*/.a2:hover{opacity:0.6;}/*设置鼠标指针移动至超链接上时的透明度*/【学生】模仿老师代码，运行程序【教师】讲解制作新闻列表制作新闻列表使用列表、锚点链接和CSS3可以实现新闻列表。单击右侧的超链接标题，左侧将显示与其对应的内容。这类新闻列表的实现原理是，先将标题与其对应的内容嵌套到列表中，设置显示区域（容器元素）为一个列表项的大小，隐藏溢出部分。然后使用锚点链接将标题与内容一一对应，通过单击锚点链接使对应列表项移动到显示区域，即可实现“切换”效果，如图5-22所示图5-22新闻列表的实现原理【教师】演示【例5-10】的操作流程，实现图5-21的效果（1）创建“study.html”文档，在<body>标签中输入以下代码（省略的列表项内容见图5-23），创建嵌套列表并为列表标题和列表项设置锚点链接与普通链接。<dl> <dt><ahref="#a">小学古诗</a><ahref="#b">初中古诗</a><ahref="#c">高中古诗</a></dt> <dd> <ulid="a"> <li><ahref="#">静夜思——李白（床前明月光，疑是地上霜。…）</a></li> <li><ahref="#">春晓——孟浩然（春眠不觉晓，处处闻啼鸟。…）</a></li>…… </ul> <ulid="b"> <li><ahref="#">观沧海——曹操（东临碣石，以观沧海。…）</a></li> <li><ahref="#">夜雨寄北——李商隐（君问归期未有期，巴山夜雨涨秋池。…）</a></li>…… </ul> <ulid="c"> <li><ahref="#">赤壁赋——苏轼（壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。…）</a></li> <li><ahref="#">阿房宫赋——杜牧（六王毕，四海一，蜀山兀，阿房出。…）</a></li>…… </ul> </dd></dl>图5-23嵌套列表的默认效果（2）在头部标签中添加<style>标签，并在其中输入以下代码，设置外层列表的样式，此时页面效果如图5-24所示。dl{width:500px;height:170px;border:10pxsolid#eeeeee;border-radius:40px0040px;background-color:#5e8d8b;}/*设置外层自定义列表的宽度、高度、边框、圆角与背景颜色*/dt{float:right;}/*设置列表标题向右浮动*/dd{margin:0;width:415px;height:170px;overflow:hidden;}/*设置列表内容的外边距、宽度与高度，并隐藏溢出部分*/图5-24设置外层列表的页面效果（3）继续在<style>标签中添加以下代码，设置内层列表与超链接的样式。ul{list-style:none;padding:0;margin:0;width:500px;height:170px;}/*去除内层无序列表的列表样式，并设置其内外边距、宽度与高度*/li{margin-top:5px;padding-left:20px;width:405px;height:27px;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*设置列表项的上外边距、左内边距、宽度、高度与文本颜色，文本不换行，隐藏溢出部分并显示省略标记*/dta{display:block;margin:1px;width:80px;height:55px;text-align:center;color:#ffffff;background:#666666;text-decoration:none;}/*将列表标题中的超链接转换为块级元素，设置外边距、宽度、高度、居中对齐、文本颜色与背景颜色，去除下划线效果*/dda{margin-top:5px;line-height:36px;color:#ffffff;text-decoration:none;}/*设置列表内容中超链接的上外边距、行高与文本颜色，去除下划线效果*/dta:hover{color:#334d4c;background:#99e6e3;}/*设置鼠标指针经过列表标题中超链接时的文本颜色与背景颜色*/【学生】思考、理解、记录通过讲解知识点，让学生了解CSS3美化超链接的使用课堂练习

（15min）【教师】布置课堂练习完成图5-21所示的“古诗”新闻列表。图5-21“古诗”新闻列表【学生】完成课堂练习【教师】巡视课堂，督促学生完成课堂练习【学生】对不理解的知识向老师提问【教师】回答学生提问，多媒体公布参考答案【学生】对比参考答案，修改内容通过练习法，让学生熟练掌握CSS3美化超链接的操作，加深对CSS3语言的印象第二节课类比分析

（2min）【教师】将CSS3美化超链接的操作与之前美化列表、文本等内容进行类比，引出本节课内容CSS3不仅可以美化超链接中的基本样式，跟CSS3美化列表的操作一样，CSS3还可以对图像化按钮进行操作，对其进行美化，本节课将重点讲解制作图像化按钮【学生】聆听、思考、理解通过类比分析答的方法，激发学生进一步对CSS3美化超链接的探索欲，引起学生的思考知识讲解

（15min）【教师】讲解制作图像化按钮超链接的功能基本等同于按钮，有时为了呈现按钮的显示效果，需要编写许多样式代码。实际上，为超链接设置背景图像即可简单地实现各种风格的按钮效果。1．隐藏超链接文本当超链接的按钮效果无法使用CSS3样式实现时，可以先在图像处理软件中制作好按钮的图像文件，然后将其设置为超链接的背景图像。需要注意的是，为体现HTML5语义化的特点，<a>标签中一般会添加文本内容，当不需要显示文本内容时可以将它们的缩进设置为绝对值较大的负数，如“text-indent:-2000px;”，以达到隐藏文本内容的效果。【教师】演示【例5-11】操作流程，实现图5-25的效果使用一个图像文件为两个超链接设置背景图像，并隐藏链接文本，原始图像及页面效果如图5-25所示。图5-25原始图像及隐藏超链接文本后的按钮效果（1）创建HTML5文档，在<body>标签中输入以下代码，标记两个超链接标签。<aclass="a1"href="#">播放</a><aclass="a2"href="#">暂停</a>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置两个超链接的背景图像并隐藏链接文本。a{display:inline-block;width:65px;height:70px;background:URL('images/p11.png')no-repeat;text-indent:-999px;}/*将超链接转换为行内块元素，并设置其背景图像，在此基础上设置缩进为负数隐藏其中的文本*/.a1{background-position:left;} /*设置背景图像靠左显示*/.a2{background-position:right;} /*设置背景图像靠右显示*/2．自动伸缩按钮网页中的导航条一般都是由超链接组成的，各超链接往往需要显示长度不同的文本，如果直接添加背景图像，不仅比较麻烦，效果也不理想。此时，可以使用滑动门技术制作出可以自动伸缩的按钮效果。滑动门技术利用背景图像的层叠性，将第一层背景图像设置得尽可能窄并靠一侧固定显示，第二层背景图像设置得尽可能宽并靠另一侧显示，调整链接文本块的内外边距后，输入不同长度的文本（不超过第二层背景图像的宽度），第二层背景图像会根据文本长度自动伸缩。【教师】演示【例5-12】操作流程，实现图5-27的效果制作自动伸缩按钮，页面效果如图5-27所示。图5-27自动伸缩按钮的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，标记超链接标签。<ahref="#"><span>HTML5</span></a><ahref="#"><span>CSS3</span></a><ahref="#"><span>JavaScript</span></a><ahref="#"><span>更多其他扩展学习</span></a><ahref="#"><span>相关链接网站</span></a>（2）在<head>标签中添加<style>标签，在其中输入以下代码，将如图5-26所示的两个图像文件设置为超链接的背景图像，并分别靠左与靠右显示，实现自动伸缩按钮效果color:white;margin-left:10px;text-decoration:none;background:url('images/p12.png')no-repeatleft;}/*设置第一层背景图像靠左显示*/aspan{display:block;margin-left:12px;padding-right:10px;background:url('images/p13.png')no-repeatright;}/*设置第二层背景图像靠右显示*/【学生】聆听、思考、理解【教师】安排熟悉的学生对不熟悉操作的学生进行指导【学生】互相学习指导通过讲解知识点，让学生进一步了解CSS3美化超链接的功能，加强对CSS3语言的使用案例分析

（21min）【教师】多媒体展示典型案例美化“网上书店”页面中的超链接【学生】分析、思考、讨论【教师】分析案例【学生】编写代码流程图【教师】展示操作流程在DW中打开本书配套素材“项目5”→“任务5.2”→“bsonline”中的“main.html”和“main.css”文档。在网页文档中为导航条列表的每一个列表项中的文本添加href属性值为“#”的超链接，此时页面效果如图5-30所示。图5-30添加超链接后的导航列表在样式文档中添加以下代码，重新设置导航条的样式#nav_topulli{float:left;margin:15px25px00;list-style:none;}/*重新设置列表项的外边距*/#nav_topa{font-size:1.2em;text-shadow:2px03px#66687f;font-weight:bold;color:#ffffff;text-decoration:none;}/*设置超链接的样式，在保留原样式的基础上去除下划线效果*/#nav_topula:hover{color:#f5f5f5;text-shadow:1px0px2px#f7f7f7;text-decoration:underline;}/*设置鼠标指针移动至超链接上时在列表项样式的基础上增加下划线效果*/#nav_top#nav_n{font-size:1.8em;margin-right:30px;margin-to

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论