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

中文版Dreamweaver网页制作案例教程

目录contents项目一网页设计与制作基础知识项目二网站规划与站点创建项目三网页中的文本、图像与音视频项目四网页中的列表与超链接项目五网页中的表格与表单项目六网页布局项目七行为、模板与库项目八实战案例——制作爱学精品课网站

项目五网页中的表格与表单在网页中添加表格在网页中添加表单任务一任务二

表格功能强大，结构多样，适合制作格式化较强的模块。表单是实现用户与网站交互的重要工具，如将用户输入的账号及密码等信息传送至后台服务器以实现登录、注册功能等。本项目将介绍网页中表格与表单的相关知识，以及使用Dreamweaver2021在网页中添加表格与表单并设置样式的方法。项目导读

知识目标技能目标思政目标掌握在网页中添加表格与表单的方法。掌握用于标记表格与表单的标签。掌握表格样式与表单样式的设置方法。能够使用Dreamweaver2021在网页中添加表格，并设置表格样式。能够使用Dreamweaver2021在网页中添加表单，并设置表单样式。勤动脑、多思考，持续提升学习和工作能力。增强条理性与系统性，能够更好地组织和规划生活中的各种事务。学习目标

在网页中添加表格1PART01任务描述任务准备任务实施——制作“列车时刻表”网页一、添加表格二、调整表格结构三、设置表格样式

表格能够以二维表的形式展示各种各样的信息，以便用户阅读和理解。本任务首先介绍在网页中添加表格与调整表格结构的方法，然后介绍设置表格样式的方法，最后通过制作“列车时刻表”网页，使学生练习使用Dreamweaver2021在网页中添加表格并设置表格样式的操作。任务描述

任务准备一、添加表格二、调整表格结构三、设置表格样式

全班学生以3～5人为一组，各组选出小组长，小组长组织组内成员扫码观看视频“网页中的表格”，讨论并回答以下问题。任务准备问题1：网页中的表格有哪些应用？问题2：任选一种类型的网站，简述如何设计网页中的表格。网页中的表格

一、添加表格表格由行和列组成，行和列的交点称为单元格，如图所示。行单元格列

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

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

（1）table标签用于标记表格。该标签具有width、border、cellspacing、cellpadding等属性。width属性用于设置表格宽度。border属性用于设置表格边框粗细（与CSS3中的border属性不同）。cellspacing属性用于设置单元格间距，即单元格之间的距离。cellpadding属性用于设置单元格边距，即单元格的内容与边框的距离。这4个属性的值均为数值，单位均默认为像素。一、添加表格

（3）tbody标签用于标记表体。表体是指表格的主体，由多个单元格组成。一个tbody标签中可以添加一个或多个tr标签。（4）tr标签用于标记行。一个tr标签中可以添加一个或多个th标签或td标签。一、添加表格（2）caption标签用于标记表格标题。标题是指表格的名称，用于概括整个表格表达的内容。一个table标签中只能添加一个caption标签，且caption标签一般位于table标签内容的首行。

（5）th标签用于标记表头单元格。表头是对表格中的一个或一组信息的概括或解释，设置表头可以方便用户快速理解表格内容的含义，提高表格的可读性。th标签的scope属性用于设置当前单元格是行的表头（属性值为row）还是列的表头（属性值为col）。需要注意的是，th标签必须放置在tr标签中。一、添加表格

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

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