资源简介

教案名称 任务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 学院简介 学院新闻 专业介绍 招生就业 样式代码如下：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．搭建导航条结构

2. 定义导航条CSS样式III.课堂小结： （5分钟）无序列表的样式设置方法；超链接的样式设置方法；水平导航条的制作。 课后作业： 1.课后实训52.超星学台作业第3、4学时（制作学院网站导航条）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）问题：带有下拉菜单的导航条如何制作？ II.讲授重难点内容：制作学院网站导航条1.搭建导航条的结构（15分钟）2. 定义学院导航条CSS样式（60分钟）（学生同步操作，教师巡视，答疑）III．小结：（5分钟）掌握导航条的制作方法，理解元素类型为什么要转换及转换方法。课后作业：1.课后实训5 2.学台作业 通过学台学习相关内容，养成自主学习的习惯。引导学生书写代码时养成细致认真的好习惯。

展开更多......

收起↑