任务5制作学院网站导航条电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版
2023-03-14
|
7页
|
156人阅读
|
2人下载
普通
内容正文：
教案名称
任务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;
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
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;
list-style: none;
}
body {
background: url("images/bodybg.jpg");
font-family: "微软雅黑";
font-size: 14px;
}
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:
资源预览图
1
2
3
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。