《html+css+javascript网页制作案例教程》课程教学design.doc

博学谷——让 IT 教学更简单，让 IT 学习更有效1传智播客《HTML+CSS+JavaScript 网页制作案例教程》教学设计课程名称： HTML+CSS+JavaScript 网页制作案例教程授课年级： 2015 年级 授课学期： 2015 学年第二学期教师姓名： 某某老师 博学谷——让 IT 教学更简单，让 IT 学习更有效2201 年 月 日课题名称 第 5 章 列表与超链接 计划课时 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；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习博学谷——让 IT 教学更简单，让 IT 学习更有效3本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。

其实，在 HTML 中，提供了 3 种常用的列表，分别为无序列表、有序列表和定义列表那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？请小组代表对以上问题发表见解教师对上述问题进行解释： 无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分例如传智播客官网的导航栏结构清晰，各列表项之间（如“网页平面”与“java 培训”）排序不分先后，这个导航栏就可以看做一个无序列表 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义 无序列表使用标记定义，为具体的列表项有序列表使用标记定义，为具体的列表项 案例描述在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观本节将运用无序列表制作一款精美的电商“悬浮框” 博学谷——让 IT 教学更简单，让 IT 学习更有效4 知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“无序列表、有序列表”等 讲解“无序列表”（1） 、教师展示 PPT 对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。

2） 、教师展示 PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示3） 、教师指出定义“无序列表”时需要注意的问题，并给与解答4） 、学生练习，教师巡视，对疑难问题进行解答 讲解“有序列表”（1） 、教师展示 PPT 对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明2） 、教师展示 PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示3） 、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系4） 、教师指出定义“有序列表”时需要注意的问题，并给与解答5） 、学生练习，教师巡视，对疑难问题进行解答博学谷——让 IT 教学更简单，让 IT 学习更有效14 案例讲解 案例分析分析“精美电商悬浮框”构成元素，将其拆解为几个部分，分析各部分使用了哪些 HTML 标记及应用了哪些 CSS 样式 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义 CSS 样式等步骤完成页面的制作，并指出其中需要注意的事项说明：在网页制作时可适时停下来，让学生自行尝试小组之间可以协作讨论，教师巡视，对疑难问题进行解答。

 阶段小结 小结重点：无序列表、有序列表易错点：注意区分无序列表和有序列表的不同 答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给与解释 巩固练习 巩固“精美电商悬浮框”的制作学完知识点后，让学生再制作一次“精美电商悬浮框”案例以此使学生更熟练地掌握如何定义无序列表、有序列表等知识点 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固第二课时（制作“二维码名片” ，讲解定义列表、定义列表实现图文混排、列表嵌套）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容1、 下列选项中，属于定义有序列表相关属性的是（ ） A、background B、typeC、start D、value答案：BCD答案解析：在有序列表中，除了 type 属性之外，还可以为定义start 属性、为定义 value 属性，它们决定有序列表的项目符号说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。

本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：博学谷——让 IT 教学更简单，让 IT 学习更有效12在上节课中，我们已经学习了如何定义无序列表和有序列表本节课将学习另一种列表——定义列表那么，请大家讨论下什么是“定义列表”？以及如何使用“定义列表”？答案：请小组代表对以上问题发表见解教师对上述问题进行解释： 定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号 定义列表使用、和 进行定义，其中，标记用于指定术语名词，标记用于对名词进行解释和描述一对可以对应多对，即可以对一个名词进行多项解释 案例描述传统的名片，往往需要手动把上面的信息存进，这样的录入方式繁琐且容易出错二维码名片的出现，简化了繁琐的信息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度本节将运用定义列表制作一款时尚潮流的“二维码名片”  知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“定义列表、定义列表实现图文混排、列表嵌套”等 讲解“定义列表”（1） 、教师展示 PPT 对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。

2） 、教师展示 PPT，对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示3） 、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系4） 、教师指出定义“定义列表”时需要注意的问题，并给与解答5） 、学生练习，教师巡视，对疑难问题进行解答博学谷——让 IT 教学更简单，让 IT 学习更有效1 讲解“定义列表实现图文混排”（1） 、教师访问“传智播客”官方网址，展示常见的“图文混排”效果2） 、教师对“定义列表实现图文混排”进行讲解并通过代码进行演示3）教师分析“定义列表实现图文混排”时需要注意的问题，并给与解答4） 、学生练习，教师巡视，对疑难问题进行解答 讲解“列表嵌套”（1） 、教师和学生互动：在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，例如“淘宝网”中的导航栏效果要想在列表项中定义子列表项就需要将列表进行嵌套，下面，将对列表的嵌套进行讲解2） 、教师通过 PPT 对“列表嵌套”在网页中的常见效果进行展示3） 、教师对“列表嵌套”进行讲解并通过代码进行演示。

4） 、教师指出“列表嵌套”时需要注意的问题，并给予解答5） 、学生练习，教师巡视，对疑难问题进行解答 案例讲解 案例分析分析“二维码名片”的构成元素，将其拆解为几个部分，分析各部分使用了哪些 HTML 标记及应用了哪些 CSS 样式 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义 CSS 样式等步骤完成页面的制作，并指出其中需要注意的事项博学谷——让 IT 教学更简单，让 IT 学习更有效12说明：在网页制作时可适时停下来，让学生自行尝试小组之间可以协作讨论，教师巡视，对疑难问题进行解答 阶段小结 小结重点：定义列表、定义列表实现图文混排、列表嵌套易错点：定义列表背景时，需要清除列表项的默认项目符号 答疑教师询问学生对于知识点还有什么不理解的地方针对学生不理解的知识点给与解释 巩固练习 巩固“二维码名片”的制作学完知识点后，让学生再制作一次“二维码名片”案例以此使学生更熟练地掌握如何使用定义列表及列表的嵌套，并能灵活应用定义列表实现图文混排的效果 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。

 布置作业 完成“补充案例” ，通过平台提交给教师，教师下节课进行点评 预习 5.3 节【案例 13】电商团购悬浮框 预习 5.4 节【案例 14】唱吧导航栏第三课时（制作“电商团购悬浮框” ，讲解 list-style 复合属性、背景图像定义列表项目符号）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容如左上图所示效果，下列嵌套列表可以实现的是（ ） A、有序列表嵌套有序列表B、有序列表嵌套无序列表C、无序列表嵌套有序列表D、无序列表嵌套无序列表答案：C答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表因此为无序列表嵌套有序列表说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：博学谷——让 IT 教学更简单，让 IT 学习更有效1在网页中，我们很少看见规范的列表项目符号，而一般使用小图像来代替这样，不仅更加美观，而且更容易控制那么，如何使用背景图像定义列表项目符号呢？请小组代表对以上问题发表见解教师对上述问题进行解释：答案：由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为设置背景图像的方式实现列表项目图像。

具体步骤： 使用“list-style”属性将列表项目符号的默认效果设置为 none; 通过“background”综合属性给列表项添加背景图像并控制到合适的位置  案例描述单调的列表。