IHTML+CSS+JavaScript网页制作案例教程课程教学Design.docVIP

传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称： HTML+CSS+JavaScript网页制作案例教程 授课年级： 2015年级 授课学期： 2015学年第二学期 教师姓名： 某某老师 201 年 月 日 课题名称 第5章 列表与超链接 计划课时 6课时 内容分析 通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标 掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； 掌握超链接标记的使用，能够使用超链接定义网页元素； 掌握CSS伪类，会使用CSS伪类实现超链接特效； 重点及措施 教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：有序列表、定义列表、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （制作“精美电商悬浮框”，讲解无序列表、有序列表） 复习上节课内容 在讲解内容前，抛出以下问题让学生回答，。。 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。 无序列表使用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）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。 （2）、教师展示PPT，对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。 （3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。 （4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。 （5）