响应式Web开发项目教程（HTML5 CSS3 Bootstrap）（第3版）教案-教学设计 第3章 表格和表单.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE2

《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第3章表格和表单

计划课时

4课时

教学引入

在网页中，我们常常使用表格来清晰地展示各种信息。表格的应用场景非常广泛，如展示统计数据、产品比较情况以及价格列表等。此外，我们还经常使用表单来收集用户反馈的信息。表单适用于多种场景，如用户注册、用户登录、联系我们以及调查问卷填写等。通过合理运用表格和表单，我们可以提高网页的用户体验和交互性，使得网页内容更加丰富、有序且易于操作。本章将详细讲解如何使用表格和表单。

教学目标

使学生掌握表格标签的使用方法，能够使用表格标签创建表格

使学生掌握CSS控制表格样式，能够使用CSS设置表格的样式

使学生掌握表格标签属性的使用方法，能够使用colspan和rowspan属性来合并单元格

使学生掌握表单标签的使用方法，能够使用表单标签创建表单

使学生掌握form标签的使用方法，能够使用form标签创建表单

使学生掌握input标签的使用方法，能够定义不同的表单控件

使学生掌握label标签的使用方法，能够定义表单控件的标签文本

使学生掌握textarea标签的使用方法，能够定义多行文本输入框

使学生掌握select、optgroup、option标签的使用方法，能够定义下拉菜单

使学生掌握图书列表页面的制作方法，能够完成图书列表页面的开发

使学生掌握安全教育活动调查问卷页面的制作方法，能够完成安全教育活动调查问卷页面的开发

教学重点

表格标签

input标签

textarea标签

select、optgroup、option标签

教学难点

表格标签

input标签

select、optgroup、option标签

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（表格标签、CSS控制表格样式、表格标签属性、项目3-1图书列表页面）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过直接引入的方式导入新课

网页中的表格由一系列单元格组成，每个单元格用于展示一项数据。在HTML中，可以使用表格标签完成表格的创建。本节课将对表格标签、CSS控制表格样式、表格标签属性、项目3-1图书列表页面进行讲解。

三、新课讲解

知识点1-表格标签

教师通过PPT结合实际操作的方式讲解表格标签。

表格标签的作用。

常用的表格标签。

创建表格结构的完整语法格式。

知识点2-CSS控制表格样式

教师通过PPT结合实际操作的方式讲解CSS控制表格样式。

border属性。

border-collapse属性。

padding属性。

width属性和height属性。

知识点3-表格标签属性

教师通过PPT结合实际操作的方式讲解表格标签属性。

colspan属性。

rowspan属性。

知识点4-项目3-1图书列表页面

教师通过PPT结合实际操作的方式讲解项目3-1图书列表页面。

创建项目目录。

编写图书列页面的结构。

编写页面样式。

访问测试。

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。

五、布置作业

教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。

第二课时

（表单标签、form标签、input标签、label标签）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过直接引入的方式导入新课

表单主要用于收集用户输入的信息。form标签用于创建表单，可以包含多种表单元素来接收用户的输入；label标签用于定义表单控件的标签文本，即显示在控件旁边的文字描述。本节课将对表单标签、form标签、input标签、label标签进行讲解。

三、新课讲解

知识点1-表单标签

教师通过PPT的方式讲解表单标签。

表单标签的作用。

常用的表单标签。

知识点2-form标签

教师通过PPT结合实际操作的方式讲解form标签。

form标签的作用。

form标签的常用属性。

演示如何使用form标签。

知识点3-input标签

教师通过PPT的方式讲解input标签。

input标签的作用。

input标签的常用属性。

type属性的属性值。

知识点4-label标签

教师通过PPT结合实际操作的方式讲解label标签。

label标签的作用。

将labe