文档介绍：3
1
« HTML+CSS+JavaScript
网页制作案例教程》
教学设计
课程名称：HTML+CSS+JavaScript网页制作案例教
授课年级： 2015年级
授课学期：2015学年第二学期
教师姓名：奥莫老师
2
1
201年月日
3
1
课题名称
第5章列表与超链接
计划
课时
6课时
内容分析
通过第4章盒子模型的学****已经很容易对网页做一个简单的结构划分。但是
一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息
排列有序，条理清晰，并且网页与网页之间L定的联系，就需要使用列表和
超链接。本章将对列表标记、超链接标记以及 CSS控制列表和超链接的样式
进行详细讲解。
教学目标
掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；
掌握超链接标记的使用，能够使用超链接定义网页元素；
掌握CSS伪类，会使用CSS伪类实现超链接特效；
重点及措施
教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学****和补充案例进行巩固。
难点及措施
教学难点：后序列表、定义列表、链接伪类。
措施：通过上机操作加强学****和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主，使用教学 PPT讲解。
教学过程
A课时
（制作“精美电商悬浮框”，讲解无序列表、后序列表）
复****上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复****第四章“CSS
盒子模型”的相关知识。
1、一个盒子的范W width ）和图（height ）均为300px,左内边距为
30px,同时盒子有3Px的边框，请问这个盒子的总宽度是多少？
（）
A、 333px B 、 366px C 、 336px D 、 363px
答案：C
盒子的总宽度=width+左右内辿距之和+左右辿框宽度之和 +左右
4
外边距之和；
所以，盒子的总宽度 =width （300px） +左内边距（30px） +左右边框宽度之和（3Px*2 ） =336px ;
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学****br/>本课时内容学****br/>分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城
首页的商品服务分类、排列有序，呈现为列表的形式。其实，在 HTML中，提
供了 3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例
说明什么是“无序列表”和“有序列表”？它们之间有什么区别？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。例如传智播客官网的导航栏结构清晰，各列表项之间（如“网页平面”与“ java培训”）排序不分先后，这个导航栏就可以看做一个无序列表。
苜G J••蜀训晤，relg训同直平面培训；口工坛调匚加**螭M 同络营甫晤调曲式开发哈训
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列
表来定义。
201幅新歌曲
再看至印
歌曲Top500首
再看至印
MP3音乐搜索榜
生看全都
（
+

+
01,轲期批年
*
骐，纳本措恋人

+
值小量果
+
值心乱妇席

+
01帮情的目光
*
想推马鞭
4
回七在苴原飞
+
B4,样［YOUNG)
+
无序列表使用<ul></ul>标记定义，<li></li>为具体的列表项。有序列表使用<ol></ol>标记定义，<li></li>为具体的列表项。
案例描述
在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”。
1
5
知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“无序列
表、有序列表”等。
讲解“无序列表”
(1)、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
女件中锢居项查看叩防史的掬-LP
*■—力虹：疗即 W|;户| - -
口而制囊 I +
■A |
衣服
0 T