任务5制作学院网站导航条.doc

教案名称

任务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

liahref=#首页/a/li

liahref=#美食/a/li

liahref=#养生/a/li

liahref=#保健/a/li

liahref=#健身/a/li

liahref=#饮料/a/li

liahref=#心理/a/li

liahref=#论坛/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