《HTML5 CSS3 网页设计与制作》教案-11 第5章 第 1-2节 超链接伪类的应用、应用CSS美化表单元素_第1页
《HTML5 CSS3 网页设计与制作》教案-11 第5章 第 1-2节 超链接伪类的应用、应用CSS美化表单元素_第2页
《HTML5 CSS3 网页设计与制作》教案-11 第5章 第 1-2节 超链接伪类的应用、应用CSS美化表单元素_第3页
《HTML5 CSS3 网页设计与制作》教案-11 第5章 第 1-2节 超链接伪类的应用、应用CSS美化表单元素_第4页
全文预览已结束

下载本文档

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

文档简介

课程教案-11课题名称第5章应用CSS设置链接和导航菜单第1-2节超链接伪类的应用、应用CSS美化表单元素授课班级软件技术等大一上学期授课班级授课学时2授课地点多媒体教室授课形式讲授、演示参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料教学目标知识目标:了解超链接伪类的应用;掌握如何使用CSS美化表单元素;技能目标:超链接伪类;CSS美化表单元素素质目标:培养学生认真、一丝不苟的学习态度教学重点与难点教学重点理解超链接伪类、熟悉CSS美化表单元素教学难点理解超链接伪类、熟悉CSS美化表单元素学情分析本次所讲内容选自教材第5章第1-2节。学生必须了解超链接伪类的使用,掌握CSS美化表单元素。教学过程课前:预习+课程导入本章主要介绍超链接和导航菜单的美化。包括超链接的4种样式、按钮的美化、表单元素的美化等。本章会对以上内容进行全面分析,包括制作的方法、样式的美化实现等。课中:1、超链接的4种样式。伪类名作用:link设置超链接未被访问时的样式:active设置鼠标单击时的样式(鼠标单击下去而未松开时):visited设置超链接访问后的样式:hover设置鼠标指针悬停在超链接上时的样式2、将链接转换为块级元素(1)块级元素和行内元素块级元素在页面中是区域块的形式,它会生成一个矩形框。通常块级元素会独占一行显示,相邻的块级元素从上到下依次垂直排列。例如,p、ul、ol、h1~h6、form、div等都是块级元素。块级元素可以设置高度、宽度等属性块级元素与行内元素的转换锚点(1)创建锚点(2)链接到本页锚点链接到其他网页的锚点4、用CSS制作按钮(1)CSS制作按钮(2)button元素按钮(3)按钮的美化5、首字下沉6、改变文本框和文本域样式(1)文本框(2)CSS美化文本框(3)文本域及其美化图片美化按钮课后:完成习题,制作案例完成表单元素的美化教学反思采用启发式

温馨提示

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

评论

0/150

提交评论