任务5制作学院网站导航条_第1页
任务5制作学院网站导航条_第2页
任务5制作学院网站导航条_第3页
任务5制作学院网站导航条_第4页
任务5制作学院网站导航条_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

教案名称任务5制作学院网站导航条计划学时4学时知识目标掌握无序列表样式设置掌握超链接样式设置掌握网站导航条的制作方法能力目标掌握导航条的构建及导航条样式设置方法素质目标在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造教学重点导航条的样式设置方法教学难点元素类型的转换教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素切入点第1、2学时(制作水平导航条)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）无序列表的项目符号如何设置？超链接的样式如何设置？=2\*ROMANII.重难点内容讲授：一、无序列表样式设置（10分钟）例5-1样式代码如下：二、超链接样式设置：（10分钟）a:link{CSS样式规则;}a:visited{CSS样式规则;}a:hover{CSS样式规则;}a:active{CSS样式规则;}例5-2 <body> <ahref="#">学院简介</a> <ahref="#">学院新闻</a> <ahref="#">专业介绍</a> <ahref="#">招生就业</a> </body>样式代码如下：a{ color:#4c4c4c; /*超链接文字的颜色*/ text-decoration:none; /*设置超链接文字无下画线*/ } a:hover{ color:#FF8400; text-decoration:underline; /*设置鼠标指针悬停时超链接文字有下画线*/ }三、元素的类型与转换（15分钟）1.块元素常见的块元素有h1~h6、p、ul、ol、li、div、header、nav、article、aside、section、footer等。2.行内元素常见的行内元素有a、span、strong、ins、em、del等，其中a和span元素是最典型的行内元素。注意：行内元素一般不可以设置宽度、高度和对齐等属性。3．元素的转换格式：display:inline|

block|inline-block|

none四、制作垂直导航条。（40分钟）教学做一体1．搭建导航条结构 <nav> <ul> <li><ahref="#">首页</a></li> <li><ahref="#">美食</a></li> <li><ahref="#">养生</a></li> <li><ahref="#">保健</a></li> <li><ahref="#">健身</a></li> <li><ahref="#">饮料</a></li> <li><ahref="#">心理</a></li> <li><ahref="#">论坛</a></li> </ul> </nav> 2.定义导航条CSS样式<styletype="text/css"> ul,li{ list-style:none; /*去掉列表项的项目符号*/ margin:0; /*设置外边距为0*/ padding:0; /*设置内边距为0*/ } nav{ width:120px; height:240px; margin:0auto; } navulli{ width:120px; height:29px; line-height:29px; /*设置行高为29像素*/ border-bottom:1pxsolid#FFF;/*下边框1像素、实线、颜色为白色*/ background-color:#09F; text-align:center; /*设置文字水平居中*/ } navullia{ display:block; /*转换为块元素*/ width:112px; height:29px; border-left:8pxsolid#03C;/*设置左侧8像素、实线、蓝色边框*/ font-size:14px; font-weight:bold; /*设置文字为粗体效果*/ color:#FFF; text-decoration:none; } navullia:hover{ background-color:#03C; /*背景颜色和左侧边框颜色相同*/ } </style>=3\*ROMANIII.课堂小结：（5分钟）无序列表的样式设置方法；超链接的样式设置方法；垂直导航条的制作。课后作业：1.课后实训52.超星学习通平台作业第3、4学时（制作学院网站导航条）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）问题：水平导航条如何制作？=2\*ROMANII.讲授重难点内容：制作学院网站导航条1.搭建导航条的结构（15分钟）<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>水平导航条</title></head><body> <nav> <ulclass="navCon"> <li><ahref="#">网站首页</a></li> <li><ahref="#">学院概况</a></li> <li><ahref="#">新闻中心</a></li> <li><ahref="#">机构设置</a></li> <li><ahref="#">教学科研</a></li> <li><ahref="#">团学在线</a></li> <li><ahref="#">招生就业</a></li> <li><ahref="#">公共服务</a></li> <li><ahref="#">信息公开</a></li> <li><ahref="#">统一信息门户</a></li> </ul> </nav> </body></html>2.定义学院导航条CSS样式（60分钟）<styletype="text/css"> body,ul,li{ margin:0; padding:0; list-style:none; /*去掉列表项的项目符号*/ } body{ background:url("images/bodybg.jpg");/*设置背景图像*/ font-family:"微软雅黑"; font-size:14px; /*文字大小设置为14像素*/ } a{ text-decoration:none; } nav{ /*导航条的样式*/ background:rgb(28,75,169); margin:50pxauto; height:42px; width:100%; /*设置宽度与浏览器相同*/ } .navCon{ /*导航条中无序列表的样式*/ margin:0pxauto; /*内容在导航块中居中*/ width:1200px; height:42px; } .navConli{ /*导航条中每个列表项的样式*/ width:120px; float:left;/*每个列表项左浮动，使列表项水平排列*/ } .navConlia{ /*超链接文字的样式*/ display:block; /*变为块元素，可以设置宽度和高度*/ width:120px; height:42px; line-height:42px; text-align:center; color:#FFF; } .navConlia:hover{ /*鼠标悬停到超链接文字时的样式*/ col

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论