《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目五 网页中的表格与表单.docx

PAGE8

PAGE8

PAGE9

PAGE9

课题

项目五网页中的表格与表单

课时

8课时（360min）

教学目标

知识技能目标：

（1）掌握在网页中添加表格与表单的方法

（2）掌握用于标记表格与表单的标签

（3）掌握表格样式与表单样式的设置方法

（4）能够使用Dreamweaver2021在网页中添加表格，并设置表格样式

（5）能够使用Dreamweaver2021在网页中添加表单，并设置表单样式

素质目标：

（1）勤动脑、多思考，持续提升学习和工作能力

（2）增强条理性与系统性，能够更好地组织和规划生活中的各种事务

教学重难点

教学重点：在网页中添加表格与表单的方法，用于标记表格与表单的标签，表格样式与表单样式的设置方法

教学难点：在网页中添加表格，并设置表格样式；在网页中添加表单，并设置表单样式

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请大家预习本节课内容，了解在网页中添加、设置表格和表单的方法

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

互动导入

【教师】组织学生扫码观看“网页中的表格”视频，并讨论以下问题：

（1）网页中的表格有哪些应用？

（2）任选一种类型的网站，简述如何设计网页中的表格。

【学生】观看、思考、讨论、举手回答

【教师】总结学生的回答

传授新知

【教师】通过学生的回答，引入新知，讲解添加表格、调整表格结构、设置表格样式的方法

一、添加表格

【教师】利用多媒体展示“表格”图片（详见教材），并进行讲解

表格由行和列组成，行和列的交点称为单元格。

【教师】利用多媒体展示“添加表格”图片（详见教材），并进行讲解

使用Dreamweaver2021可以在网页中添加表格，具体操作方法是，首先确定添加表格的位置；然后在“插入”面板中单击“Table”按钮，打开“Table”对话框；接着在“表格大小”设置区中设置表格的行数、列数、表格宽度、表格边框粗细及单元格的边距与间距，在“标题”设置区中选择表格表头所在的位置，在“辅助功能”设置区中设置表格的标题与摘要；最后单击“确定”按钮。

【教师】利用多媒体展示“表格的代码与页面效果”图片（详见教材），并进行讲解

添加表格后，自动生成的代码与页面效果如图所示。

（1） table标签用于标记表格。……（详见教材）

（2） caption标签用于标记表格标题。……（详见教材）

（3） tbody标签用于标记表体。表体是指表格的主体，……（详见教材）

（4） tr标签用于标记行。……（详见教材）

（5） th标签用于标记表头单元格。……（详见教材）

th标签的scope属性用于设置当前单元格是行的表头（属性值为row）还是列的表头（属性值为col）。需要注意的是，th标签必须放置在tr标签中。

【小贴士】

在实际应用中，可以根据需要将表头单元格放置在表格中的任意位置，也可以设置多重表头。默认情况下，表头单元格中的文本呈现为居中对齐、字体加粗。

（6） td标签用于标记普通单元格。

【小贴士】

在实际应用中，可以根据需要将表格按行或列进行分组。

（1） 按行分组。一个完整的表格按行分组可分为表头、表体和表尾3部分，分别使用thead、tbody和tfoot标签对它们进行标记。当表格中的数据过多以至于无法在屏幕中完整显示时，可以将表头与表尾的内容设置为始终可见，表体的内容则设置为滚动或翻页显示，以达到更佳的显示效果。

（2） 按列分组。当需要单独设置表格中某一列或多列的样式时，可以先将表格按列分组，再设置样式。在HTML5中，使用col标签对列进行分组，每个col标签依次对应表格中的列。该标签一般位于第1个tr标签上方。指定col

二、调整表格结构

【教师】利用多媒体展示“表格选项的子选项列表”图片（详见教材），并进行讲解

当直接添加的表格的结构无法满足需求时，可以在Dreamweaver2021的设计视图中使用快捷菜单对表格的结构进行调整。具体操作方法是，首先添加表格；然后在设计视图中选中需要调整的单元格并右击；最后在弹出的快捷菜单中选择“表格”选项，在展开的子选项列表（见图5-4）中选择调整操作对应的选项。

【例5-1】制作“高中课程表”网页，页面效果详见教材。

【教师】利用多媒体展示“‘高中课程表’网页的页面效果”图片（详见教材），并进行讲解

步骤1在Dreamweaver2021中新建“schedule.html”文件，网页标题为“高中课程表

步骤2将鼠