教案名称任务5 制作学院网站导航条计划学时4学时
学习目标掌握无序列表样式设置
掌握超链接样式设置
掌握网站导航条的制作方法
素质目标在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造
教学重点导航条的样式设置方法教学难点元素类型的转换
教学模式任务驱动教学法
线上+线下混合教学模式
教学活动及主要环节
思政元素
切入点第1、2学时
(制作水平导航条)
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（10分钟）
无序列表的项目符号如何设置？超链接的样式如何设置？II.重难点内容讲授：
一、无序列表样式设置（10分钟）
例5-1
样式代码如下：通过学习通平台学习相关内容，养成自主学习的习惯。
二、超链接样式设置：（10分钟）
❖a:link{CSS样式规则;}
❖a:visited{CSS样式规则;}
❖a:hover{CSS样式规则;}
❖a:active{CSS样式规则;}
例5-2
<body>
<a href="#">学院简介</a>
<a href="#">学院新闻</a>
<a href="#">专业介绍</a>
<a href="#">招生就业</a>
</body>
样式代码如下：
a {
color: #4c4c4c; /*超链接文字的颜*/
text-decoration: none; /*设置超链接文字无下画线*/
}
a:hover {
color: #FF8400;
学生个人网页制作html代码css
text-decoration: underline; /*设置鼠标指针悬停时超链接文字有下画线*/  }
三、元素的类型与转换（15分钟）
1.块元素utc时间转换 在线
常见的块元素有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
1、
四、制作水平导航条。（40分钟）教学做一体
1．搭建导航条结构
<nav>
<ul class="navCon">
<li><a href="#">网站首页</a></li>
<li><a href="#">学院概况</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">教学科研</a></li>
<li><a href="#">团学在线</a></li>
<li><a href="#">招生就业</a></li>
<li><a href="#">公共服务</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">统一信息门户</a></li>
</ul>
</nav>
2. 定义导航条CSS样式
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
手机网页视频下载bt
list-style: none;
}
body {
background: url("images/bodybg.jpg");
font-family: "微软雅黑";
font-size: 14px;
period1译成中文}
a {
text-decoration: none;
}
nav{ /*导航块的样式*/
background: rgb(28,75,169);
margin: 50px auto;
height: 42px;
width: 100%; /*宽度与浏览器相同*/
}
.navCon{ /*导航块中无序列表的样式*/ margin: 0px auto; /*内容在导航块中居中*/
width: 1200px;
height: 42px;
}
.navCon li { /*导航块中每个列表项的样式*/ width: 120px;
float: left; /*每个列表项左浮动，使列表项水平排列*/ } 引导学生书写代码时养成细致认真的好习惯。
.navCon li    a { /*超链接文字的样式*/
display: block; /*使超链接元素为块元素，可以设置宽度和高度*/
width:120px;
height: 42px;
line-height: 42px;
text-align: center;
color:#FFF;
}
.navCon li a:hover { /*鼠标指针悬停到超链接文字时的样式*/ color: rgb(28,75,169);
background:#FFF;
}
</style>
III.课堂小结：（5分钟）
无序列表的样式设置方法；
超链接的样式设置方法；
水平导航条的制作。
课后作业：
1.课后实训5
2.超星学习通平台作业
第3、4学时
（制作学院网站导航条）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（10分钟）
问题：带有下拉菜单的导航条如何制作？
II.讲授重难点内容：
一、制作学院网站导航条
1.搭建导航条的结构（15分钟）
<nav>
<ul class="navCon">
<li><a href="#">网站首页</a></li>
<li><a href="#">学院概况</a>
<ul>
<li><a href="#">学院简介</a></li>
<li><a href="#">学院荣誉</a></li>
<li><a href="#">国家级示范性软件学院</a></li>
数据库系统概论教学设计<li> <a href="#">高技能人才培训基地</a> </li>
<li><a href="#">办公电话</a></li>
<li><a href="#"></a></li>
<li><a href="#">视频宣传</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a>
<ul>正确的字符常量是
<li><a href="#">学校要闻</a></li>
<li><a href="#">系部动态</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</li>
<li><a href="#">机构设置</a></li>
<li><a href="#">教学科研</a>
<ul>
<li><a href="#">教务管理系统</a></li>
<li><a href="#">精品课程</a></li>
<li><a href="#">教学辅助平台</a></li>
<li><a href="#">网络教学平台</a></li>
</ul>
</li>
<li><a href="#">团学在线</a></li>
<li><a href="#">招生就业</a>
<ul>
<li><a href="#">招生信息网</a></li>
<li><a href="#">就业信息网</a></li>
<li><a href="#">空中乘务</a></li>
</ul>
</li>
<li><a href="#">公共服务</a>
<ul>
<li><a href="#">图书馆</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">建行缴费</a>
</li>
</ul>
</li>
<li><a href="#">信息公开</a></li>
<li><a href="#">统一信息门户</a></li>
</ul>
</nav>
2.定义学院导航条CSS样式（60分钟）
<style type="text/css">
body,ul,li{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。