《网页设计与制作（活页式）》 教案 项目6 表格和表单.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目六表格和表单

计划课时

课时

内容分析

表格与表单是HTML5中的重要标签，利用表格可以对网页进行排版，使网页信息有条理地显示出来，利用表单可以实现与用户交互，实现网上注册、网上登录、网上交易等功能。

教学目标

掌握创建表格的标签。

掌握表格的CSS样式。

掌握创建表单的标签。

掌握表单的CSS样式。

重点及措施

教学重点：利用表格布局页面；使用表格标签；正确使用表单

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：正确使用表单

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务6.1表格

6.1.1表格标签

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

表格的基本标签有哪些？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

table标签、tr标签、th标签、td标签。

知识点讲解

讲解实例1创建表格

（1）教师展示PPT，对实例1进行具体讲解。

通过实例1的代码，可以看出创建表格的基本标签有以下4种。

（1）table标签：用于定义一个表格。

（2）tr标签：用于定义表格的一行，该标签必须包含在table标签中，表格的行数与tr标签数量对应。

（3）th标签：用于定义表头的单元格，该标签必须包含在tr标签中，表头行的单元格数量与th标签数量对应。该单元格中的文字自动设为粗体，居中对齐显示。

（4）td标签：用于定义表格的普通单元格，该标签必须包含在tr标签中，一行的单元格数量与td标签数量对应。该单元格中的文字自动设为左对齐显示。

在实例1的代码中，table标签中用到了border属性，其作用是给表格添加边框，如果去掉该属性，则表格默认情况下无边框。默认情况下，表格的宽度和高度靠其自身的内容来支撑。如果要进一步设置表格的外观样式，可以通过设置表格的相关属性来实现。

（2）学生自主提问，教师对疑难问题进行解答。

6.1.2table标签的属性

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

table标签有哪些属性？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

borderpx设置表格的边框

widthpx设置表格的宽度

heightpx设置表格的高度

alignleft、center、right设置表格的对齐方式

bgcolor预定义的颜色值、#RGB、rgb()设置表格的背景颜色

backgroundURL地址设置表格的背景图像

cellspacing默认为2px设置单元格与单元格之间的空白间距

cellpadding默认为1px设置单元格与边框之间的空白间距。

知识点讲解

讲解table标签的属性

（1）教师展示PPT，对table标签的属性进行具体讲解。

table标签的常用属性

（2）学生自主提问，教师对疑难问题进行解答。

讲解实例2使用table标签的属性

（1）教师展示PPT，对实例2使用table标签的属性进行具体讲解。

实例2使用table标签的属性

新建网页并创建表格，在table标签中使用border属性给表格设置了5px的边框，使用align属性使表格在浏览器中居中对齐，使用width和height属性设置表格的宽度和高度，使用bgcolor属性设置了背景颜色，使用cellpadding属性设置了3px的间距，使用cellspacing属性设置了5px的间距

（2）学生自主提问，教师对疑难问题进行解答。

6.1.3tr标签的属性

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

tr标签有哪些属性？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

heightpx设置行的高度

alignleft、center、right设置一行内容的水平对齐方式

valigntop、middle、bottom设置一行内容的垂直对齐方式

bgcolor预定义的颜色值、#RGB、rgb()设置行的背景颜色

backgroundURL地址设置行的背景图像

。

知识点讲解

讲解tr标签的常用属性

（1）教师展示PPT，对tr标签的常用属性进行具体讲解。

tr标签的常用属性

（2）学生自主提问，教师对疑难问题进行解答。

讲解实例3使用tr标签

（1）教师展示PPT，对实例3使用tr标签进行具体讲解。

实例3使用tr标签

（2）学生自主