传智播客
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称：HTML+CSS+JavaScript网页制作案例教程
授课年级：2015年级
故宫博物院门票预约系统授课学期：2015学年第二学期
教师姓名：某某老师
201 年月日
计划
课时
6课时
内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； ●掌握超链接标记的使用，能够使用超链接定义网页元素；
●掌握CSS伪类，会使用CSS伪类实现超链接特效；
重点及措施
教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
东极岛自由行旅游攻略
难点及措施
教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程
第一课时
（制作“精美电商悬浮框”，讲解无序列表、有序列表）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，
同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）
A、333px
B、366px
C、336px
D、363px
答案：C
●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右
外边距之和；
●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右
边框宽度之和（3px*2） =336px；
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。其实，在HTML中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
●无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为
其各个列表项之间为并列关系，没有顺序级别之分。例如传智播客官
网的导航栏结构清晰，各列表项之间（如“网页平面”与“java培训”）
排序不分先后，这个导航栏就可以看做一个无序列表。
●有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排
列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列
表来定义。
●无序列表使用<ul></ul>标记定义，<li></li>为具体的列表项。有序列
表使用<ol></ol>标记定义，<li></li>为具体的列表项。
✧案例描述
在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”。
✧知识点讲解
➢总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“无序列表、有序列表”等。
➢讲解“无序列表”
（1）、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师指出定义“无序列表”时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“有序列表”
（1）、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧案例讲解
➢案例分析
分析“精美电商悬浮框”构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
➢案例实现
教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结
➢小结
厦门鼓浪屿唯美图片重点：无序列表、有序列表。
易错点：注意区分无序列表和有序列表的不同。
➢答疑去黄山旅游
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
✧巩固练习
➢巩固“精美电商悬浮框”的制作
学完知识点后，让学生再制作一次“精美电商悬浮框”案例。以此使学生更熟练地掌握如何定义无序列表、有序列表等知识点。
➢通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
布达拉宫的历史背景简介
第二课时
（制作“二维码名片”，讲解定义列表、定义列表实现图文混排、列表嵌套）复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、下列选项中，属于定义有序列表相关属性的是（）
A、background
B、type
C、start
完整的旅游线路设计
D、value
答案：BCD
答案解析：在有序列表中，除了type属性之外，还可以为<ol>定义
start属性、为<li>定义value属性，它们决定有序列表的项目符号。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在上节课中，我们已经学习了如何定义无序列表和有序列表。本节课将学
