静态网页设计与制作 课件 第7章 用表格规划网页

项目七

用表格规划网页任务1

创建表格任务2表格操作任务1创建表格任务引入小明已经学会了在网页中添加各种类型的内容，但是他又发现网页是分为不同的区域进行分布的，如何对网页的页面进行合理的布局呢，通过请教同事了解到，在网页中可以创建表格，通过对表格进行操作可以将网页进行布局，那么首先应该学会如何在网页中创建表格，以及如何在单元格中创建嵌套表格？知识准备一、创建表格、单元格在Dreamweaver中，利用表格可以方便地将数据、文本、图片规范地显示在页面上，使网页更加美观、有条理。在HTML中，表格是很多优秀站点设计的整体标准，用表格格式化的页面在不同平台、不同分辨率的浏览器中都能保持布局和对齐。不过，表格有一个缺陷：它会使网页显示的速度变慢。尽管如此，表格在网页布局中仍扮演着很重要的角色，是网页设计者必须掌握的一个强大的工具。下面我们就介绍表格一些常用的操作。表格由三个基本部分组成：行、列和单元格。案例——创建表格下面以在网页中插入一个3行3列的表格为例，介绍在网页中创建表格的操作步骤。（1）在“插入”面板顶部的下拉菜单中单击“HTML”标签，切换到“HTML”插入面板。（2）单击“表格”图标按钮，或执行“插入”｜“表格”菜单命令，弹出“表格”对话框，如图所示。（3）在“行数”文本框中输入表格的行数3。（4）单击“确定”按钮即可插入表格，最终制作结果如图所示。“表格”对话框

插入的表格案例——使用DOM面板插入表格使用DreamweaverCC2021中的DOM面板也可以很便捷地在网页中插入表格。方法如下：（1）执行“窗口”|“DOM”菜单命令，打开DOM面板。按空格键或单击DOM面板中与所需元素相邻的标签，单击标签左侧的“添加元素”按钮，在弹出的下拉菜单中选择要插入元素的位置，如图所示。（2）根据需要选择要插入元素的位置，例如要在图片后插入元素，则选择“在此项后插入”命令，将会插入并显示占位符div标签。

添加元素下拉菜单

键入标签名称

使用DOM面板插入表格二、创建嵌套表格嵌套表格是位于一个单元格中的表格。可以像对其他表格一样对嵌套表格进行格式设置，但其宽度受它所在单元格的宽度的限制。若要创建嵌套表格，可以单击现有表格中的一个单元格，再在单元格插入表格。例如，在一个3行3列的表格的中间单元格中插入一个3行3列的表格，就形成一个如图所示的嵌套表格。与插入表格类似，使用DOM面板也可以很轻松地插入嵌套表格。例如，要在第二行第二列单元格中嵌套一个3行3列的表格，可以执行如下操作：（1）选中要嵌套表格的单元格，打开DOM面板，单击添加元素按钮，在弹出的下拉菜单中选择“插入子元素”命令，如图所示。（2）将自动插入的div标签修改为table，如图所示，按Enter键提交。在DOM面板中可以很直观地看到元素之间的结构关系。嵌套后的表格效果如图所示。嵌套表格插入子元素嵌套的表格标签嵌套的表格效果。任务2表格操作任务引入学会了创建表格和嵌套表格之后，接下来就可以对表格进行相关的操作，那么如何选定表格和单元格，如何设置表格和单元格属性，如何增加删除行或列，如何拆分/合并单元格，如何在表格中添加内容，如何对表格数据排序呢？知识准备常用的表格操作包括选定表格和单元格、设置表格和单元格属性、增加/删除行或列、拆分/合并单元格，以及在表格中添加内容、表格数据排序等内容。下面分别进行介绍。一、选定表格对象在对表格进行操作之前，必须先选中表格元素。可以一次选中整个表格、一行表格单元、一列表格单元或者几个连续（或不连续）的单元格。1．选择整个表格将光标放置在表格的任一单元格中，然后在文档窗口底部的标签选择器中单击<table>标记，或执行“编辑”｜“表格”｜“选择表格”命令，选中整个表格。选中整个表格的效果如图左图所示。2．选中一行表格或一列单元格将光标放置在一行表格单元的左边界上，或将光标放置在一列表格单元的顶端，当显示黑色箭头（或）时单击鼠标。选中一列表格单元的情况如图左图所示。3．选中多个连续的单元格单击一个单元格，然后纵向或横向拖动鼠标到另一个单元格；或单击一个单元格，然后按住Shift键单击另一个单元格，所有矩形区域内的单元格都被选择。4．选中多个不连续的单元格按住Ctrl键单击多个要选择的单元格。选中多个不连续单元格的效果如图所示。

选中整个表格选中一列或一行表格单元选中多个连续表格单元

选中多个不连续表格单元二、设置表格和单元格属性1．表格的属性面板选中表格，执行“窗口”｜“属性”命令显示表格属性面板，如图所示。2．单元格的属性面板选中单元格，执行“窗口”｜“属性”命令显示单元格属性面板，如图所示。

表格属性面板清除列宽前后

单元格属性面板单元格CSS属性设置面板案例——设置单元格背景图像下面通过一个简单示例，介绍在DreamweaverCC2021中新建CSS规则设置单元格背景图像的操作步骤。（1）执行“插入”｜“表格”菜单命令，在弹出的“表格”对话框中设置表格的宽度为300像素，行数为3，列数也为3，边框粗细为1。（2）将光标置于第一行第一列的单元格中，右击弹出快捷菜单，选择“CSS样式”｜“新建”命令，如图所示，打开“新建CSS规则”对话框，如图所示。快捷菜单

“新建CSS规则”对话框（3）在“选择器类型”下拉列表中选择“标签”，“选择器名称”选择td，“规则定义”选择“仅限该文档”。然后单击“确定”按钮打开对应的规则定义对话框。（4）在对话框左侧的“分类”列表中选择“背景”，然后单击“背景图像”右侧的“浏览”按钮，在弹出的资源对话框中选择喜欢的背景图片。单击“确定”按钮关闭对话框。三、扩展表格模式通常情况下，表格是在“标准”模式下直接插入的，最初的用途是显示表格式数据。“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框，使编辑操作更加容易。设置单元格背景图像

设置单元格背景图像案例——切换表格模式下面通过一个简单示例介绍切换到表格“扩展”模式下的具体操作步骤。（1）由于在“代码”视图下无法切换到表格的“扩展”模式，所以应先将当前文档窗口的视图切换到“设计”视图或“拆分”视图。（2）在文档窗口插入一个表格，如图所示。（3）将鼠标放置在任一单元格中，单击鼠标右键弹出快捷菜单，执行“表格”｜“扩展表格模式”命令，如图所示。

标准模式下的表格

执行扩展模式表格的扩展模式四、增加、删除行或列在DreamweaverCC2021中增加、删除行或列非常简单。下面通过一个简单示例介绍这些操作的具体步骤。本例首先创建一张表格，然后进行增加、删除行或列的操作。（1）切换到“HTML”插入面板，单击“表格”图标按钮，或执行“插入”｜“表格”命令，弹出“表格”对话框。（2）在“行数”文本框中输入表格的行数4。在“列数”文本框中输入表格列数5，其余选项保持默认值。单击“确定”按钮关闭对话框，然后输入文本，如图所示。（3）将光标定位于第3行的任一单元格中，通过以下方法之一删除一行：执行“编辑”｜“表格”｜“删除行”命令，删除表格第3行。在单元格上单击鼠标右键，在弹出的快捷菜单中执行“表格”｜“删除行”命令，删除表格第3行。将光标放置在第3行表格单元的左边界上，当黑色箭头出现时单击鼠标，选中表格第3行，然后按Delete键删除行。切换到实时视图，选中表格第3行，然后按Delete键删除选定行。创建表格

删除第3行

删除第2列（5）用上一步同样的方法删除第3列和第4列。此时效果如图7-27所示。（6）将光标定位于数字为2.5的单元格，通过以下方法之一增加一行：执行“编辑”｜“表格”｜“插入行”命令。（7）将光标定位于数字为1.5的单元格，通过以下方法之一增加一列：

执行“编辑”｜“表格”｜“插入列”命令。在单元格上单击鼠标右键，在弹出的快捷菜单中执行“表格”｜“插入列”命令。在实时视图中选中单元格，单击鼠标右键，在弹出的快捷菜单中选择“插入列”命令。插入空列后的最终效果如图所示。五、拆分、合并单元格在DreamweaverCC2021中拆分、合并单元格也非常简单。

删除第3、4列

插入空白行

实例制作结果案例——拆分、合并单元格下面通过一个简单示例介绍这些操作的具体步骤。本例首先创建一张表格，如图所示，然后进行拆分、合并单元格操作，最终实现图的效果。（1）在文档中插入如图7-30所示的表格。（2）选中数字分别为1.1和1.2的单元格。（3）通过以下方法之一合并这两个单元格：（4）同样办法合并数字为2.2和3.2的单元格，操作的结果如图所示。（5）将光标定位于数字为1.3的单元格，通过以下方法之一打开如图7-34所示的“拆分单元格”对话框。（6）在对话框中选择“把单元格拆分为行”，在“行数”文本框中输入2。单击“确定”按钮完成单元格拆分，结果如图所示。

插入表格

操作结果合并单元格（1）

合并单元格（2）

“拆分单元格”对话框六、在表格中添加内容在文档中插入表格后，就可以在表格中输入各种数据了。若要将图像、Flash动画或其他媒体插入到单元格中，应先单击单元格，将光标放置在需要插入数据的单元格中，从“插入”菜单或“插入”面板中选择相应的选项即可。若要插入文本，可以先将文本复制到剪贴板，然后粘贴在单元格内；或者直接在单元格内输入数据。按Tab键可以在单元格之间移动。若要使表格中的数据对齐，应尽量使用单元格属性面板下半部分的“水平”和“垂直”选项，要避免使用属性面板上半部分的对齐属性。案例——在表格中添加内容下面以制作图为例，介绍在表格中添加内容的操作步骤。（1）单击“HTML”插入面板中的“表格”按钮，插入一张2行2列，宽700像素，标题显示方式为“顶部”的表格。（2）选中第一行单元格，设置单元格内容水平对齐方式为“居中”，垂直对齐方式为“居中”。（3）将光标定位在第二行第一列单元格，执行“插入”|“图像”命令，在弹出的对话框中选择图像。（4）将光标定位在第二行第二列单元格内，执行“插入”|“HTML”|“日期”命令，在弹出的对话框中选择日期格式，单击“确定”按钮关闭对话框。（5）打开CSS设计器面板，在页面中定义CSS规则.bg，设置单元格的背景图像。（6）保存文件，在浏览器预览页面。七、复制、粘贴单元格在DreamweaverCC2021中，可以非常灵活地复制、粘贴单元格。可以一次只复制、粘贴一个单元格，也可以一次复制、粘贴一行、一列乃至多行多列单元格。但不能复制不是矩形的区域。复制及粘贴单元格的步骤如下：（1）选择表格中的一个或多个单元格。所选的单元格必须是连续的，并且形状必须为矩形。（2）鼠标右击选中的单元格，在弹出的上下文菜单中执行“拷贝”命令。（3）选择要粘贴单元格的位置。（4）将光标定位于目标表格中，鼠标右击目标单元格，在弹出的快捷菜单中执行“粘贴”命令，完成粘贴。源表格

目标表格粘贴结果出错信息八、导出/导入表格数据在DreamweaverCC2021中建立的表格，可以保存到一个文本文件中，需要时再从文件中导入表格数据。下面对表格的导出和导入操作分别进行说明。1．输出表格数据将表格数据导出为文本文件的具体操作步骤如下：（1）在文档窗口中创建一个表格，在表格中输入数据，如图7-41所示。（2）将光标放置在表格中或选中表格。执行“文件”｜“导出”｜“表格”命令。弹出“导出表格”对话框，如图所示。（3）在“定界符”下拉列表中选择一种表格数据输出到文本文件后的分隔符。（4）在“换行符”下拉列表中选择一种表格数据输出到文本文件后的换行方式。（5）设置完成之后，单击“导出”按钮，弹出“表格导出为”对话框。（6）输入文件名table1.txt，然后单击“保存”按钮导出表格数据。

表格

“导出表格”对话框

表格数据文件2．导入文本数据以前保存的表格数据或其他文本数据可以重新以表格的形式导入到Dreamweaver文档中。将文本文件数据导入为表格数据的具体操作步骤如下：（1）在记事本中创建一组带分隔符格式的数据，如图所示。（2）在Dreamweaver文档窗口中执行“文件”｜“导入”｜“表格式数据”命令。弹出“导入表格式数据”对话框，如图所示。（3）在该对话框中设置需要引入数据的位置和输入数据时所用的分隔符类型，本例选择逗号“，”。（4）单击“确定”按钮。在Dreamweaver文档窗口中出现数据表格，如图所示。九、表格排序在表格中输入内容时，常常需要对表格内容进行排序。Dreamweaver2021提供了表格排序的功能。数据文件

“导入表格式数据”对话框

导入数据后的效果案例——表格排序下面以一个示例介绍表格排序的具体步骤。（1）新建一个表格，效果如图所示。（2）将光标定位在表格内，然后执行“编辑”｜“表格”｜“排序表格”命令，弹出“排序表格”对话框，如图所示。（3）在“排序按”下拉列表框选择需要进行排序的列。本例按数学成绩排序，各项具体设置如图所示。（4）单击“确定”按钮，完成操作。排序结果如图所示。排序前的表格

“排序表格”对话框“排序表格”对话框排序后的表格综合案例利用表格布局页面DreamweaverCC2021提供了多种对网页进行布局的方法，利用表格设计网页布局是其中常用的一种。本节将通过一个简单的例子介绍使用表格进行页面布局的方法。（1）新建一个HTML页面。（2）切换到“插入”面板中的“HTML”面板，单击表格图标，在弹出的对话框中设置表格的行为1，列为2，宽为850像素，然后单击“确定”按钮插入表格。（3）选中表格，在属性面板上的“对齐”下拉列表中选择“居中对齐”，使表格在页面上居中。（4）选中第一行第二列的单元格，在属性面板上设置其宽度为280像素，单元格内容水平“右对齐”，垂直“底部”对齐，然后执行“插入”|“图像”命令，在单元格中插入一张图片。效果如图所示。（5）将光标定位在第一行第一列的单元格中，单击属性面板上的“拆分单元格”按钮，在弹出的对话框中将单元格拆分为五行一列。（5）将光标定位在第一行第一列的单元格中，单击属性面板上的“拆分单元格”按钮，在弹出的对话框中将单元格拆分为五行一列。（6）将光标定位在拆分后的第一行单元格中，输入文本“welcome”。（7）将光标定位在拆分后的第二行单元格中，输入文本“财经”，单元格高度为45。然后在属性面板上设置单元格水平对齐方式为“左对齐”，垂直“居中”对齐。（8）将光标定位在拆分后的第三行单元格中，单击属性面板上的“拆分单元格