第2章 HTML5页面元素及属性_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 18 PAGE 2 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第2章 HTML5页面元素及属性 计划课时 6课时 内容分析 HTML5中引入了很多新的标记元素和属性，这是HTML5的一大亮点，这些新增元素使文档结构更加清晰明确，属性则使标记的功能更加强大，掌握这些元素和属性是正确使用HTML5构建网页的基础。本章将HTML5中的新增元素分为结构元素、分组元素、页面交互元素和文本层次语义元素，除了介绍这些元素外，还会介绍HTML5中常用的几种标准属性。 教学目标 掌握结构元素的使用，可以使页面分区更明确。 理解分组元素的使用，能够建立简单的标题组。 掌握页面交互元素的使用，能够实现简单的交互效果。 理解文本层次语义元素，能够在页面中突出所标记的文本内容。 掌握全局属性的应用，能够使页面元素实现相应的操作。 重点及措施 教学重点：列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：列表元素、结构元素、页面交互元、。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解ul元素、ol元素、dl元素、列表的嵌套应用） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第一章“初识HTML5”的基础知识。 1、在上一章中，我们学习了HTML5的相关标记及其属性。在HTML标记中，主要分为单标记和双标记两种。那么，什么是“单标记”呢？ 答案： 单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下： 标记名 / 例如： hr / 2、浏览网页时，我们经常阅读很多的段落文字。在网页制作时，同样需要使用段落标记搭建页面结构，那么如何设置段落标记p的对齐属性呢？ 答案： 段落标记p的基本语法格式如下： p align=对齐方式段落文本/p 该语法中align属性为p标记的可选属性，使用align属性可以设置标题和段落的对齐方式，其取值如下： left 设置标题文字左对齐（默认值） center 设置标题文字居中对齐 right 设置标题文字右对齐 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。其实，在HTML5中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。例如传智播客官网的导航栏结构清晰，各列表项之间（如“网页平面”与“java培训”）排序不分先后，这个导航栏就可以看做一个无序列表。 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。 无序列表使用ul/ul标记定义，li/li为具体的列表项。有序列表使用ol/ol标记定义，li/li为具体的列表项。 知识点讲解 讲解“ul元素” （1）、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。 （2）、教师展示PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。 （3）、教师指出定义“无序列表”时需要注意的问题，并给与解答。 （4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“ol元素” （1）、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。 （2）、教师展示PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。 （3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。 （4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。 （5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“dl元素” （1）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的