第3天下午 使用表格轻松排列和布局网页元素

本章学习流程图

知识导读

前几天学习了网页基本元素的使用，今天下午我们将学习网页的布局定位。众所周知，任何界面的产生，都需要对其进行排列，网页自然也不会例外，而排列时最常使用的工具就是表格了。利用表格对网页元素进行定位是网页排版最基本的方法，它以简洁明了和高效快捷的方式，将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的网页。今天下午主要学习插入表格和表格元素、选择表格元素、表格的基本操作、排序及整理表格内容等相关知识，通过今天下午的学习，读者可以利用表格排版布局出各种复杂的网页。

完成今天下午内容后，您将能够

◎ 插入表格和表格元素

◎ 选择表格元素

◎ 掌握表格的基本操作

◎ 掌握排序及整理表格内容

实例展示

6.1 插入表格和表格元素

表格由行、列和单元格三部分组成。行贯穿表格的左右，列则采用上下方式。单元格是行和列交汇的部分，它是输入信息的地方。单元格会自动扩展到与输入信息的相适应尺寸。

6.1.1 插入表格

在Dreamweaver中，表格可以用于制作简单的图表，还可以用于安排网页文档的整体布局，它起着非常重要的作用。在网页中插入表格的方法非常简单。执行“插入”|“表格”命令，弹出“表格”对话框，如图6-1所示。

下面通过实例讲述表格的插入方法，具体操作步骤如下。

1 打开网页文档，如图6-2所示。

2 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为7，“列数”设置为3，“表格宽度”设置为500像素，如图6-3所示。

3 单击“确定”按钮，插入表格，如图6-4所示。

6.1.2 设置表格属性

创建完表格后可以根据实际需要对表格的属性进行设置，如宽度、边框、背景颜色、边框颜色或对齐等，也可只对某些单元格进行设置。设置表格属性之前首先要选中表格，在“属性”面板中将显示表格的属性，并进行相应的设置，如图6-5所示。

6.1.3 添加内容到单元格

将光标置于表格中，分别输入相应的内容，如图6-6所示。

6.2 选择表格元素

处理表格时经常要选择表格中的一个或多个单元格，或者选择整行整列单元格，这时可以根据具体情况使用不同的方法进行选择。

6.2.1 选取表格

要想对表格进行编辑，那么首先应该选择它，主要有以下几种方法选取整个表格。

◎ 将光标置于表格的左上角，按住鼠标的左键不放，拖曳鼠标指针到表格的右下角，将整个表格中的单元格选中，单击鼠标右键，在弹出的菜单中选择“表格”|“选择表格”选项。

◎ 单击表格边框线的任意位置，即可选中表格。

◎ 将光标置于表格内的任意位置，执行“修改”|“表格”|“选择表格”命令。

◎ 将光标置于表格内的任意位置，单击文档窗口左下角的<table>标签，如图6-7所示。

6.2.2 选取行或列

选择表格的行与列也有两种不同的方法。

◎ 将鼠标置于要选择行首或列顶，当鼠标指针形状变成了黑箭头时，单击鼠标左键即可以选中列或行，如图6-8所示。

◎ 按住鼠标左键不放从左至右或者从上至下拖曳，即可选中行或列，如图6-9所示。

6.2.3 选取单元格

选择表格中的单元格有两种方式，一种是选择单个单元格，另一种是选择多个单元格，如图6-10所示。

6.3 表格的基本操作

创建了表格后，用户要根据网页设置对表格进行处理，例如调整表格和单元格的大小、添加/删除行或列、拆分单元格以及剪切、复制和粘贴单元格等，熟练掌握表格的基本操作，可以提高网页制作速度。

6.3.1 调整表格和单元格的大小

使用“属性”面板中的“宽”和“高”文本框能精确地调整表格的大小，而用鼠标拖动调整则显得更为方便快捷，调整表格大小的方法如下。

◎ 调整表格的宽：选中整个表格，将光标置于表格右边框控制点上，当光标变成双箭头时，如图6-11所示，拖动鼠标即可调整表格整体宽度。

◎ 调整表格的高：选中整个表格，将光标置于表格底边框控制点上，当光标变成双箭头时，如图6-12所示，拖动鼠标即可调整表格整体高度。

◎ 同时调整表宽和高：选中整个表格，将光标置于表格右下角控制点上，当光标变成双箭头时，如图6-13所示，拖动鼠标即可调整表格整体高度和宽度。

将光标置于要设置大小的单元格中，用“属性”面板中的“宽”和“高”文本框能精确地调整单元格的大小，而用鼠标拖动调整则显得更为方便快捷，调整单元格大小的方法如下。

◎ 调整列宽：将光标置于表格右边的边框上，当鼠标变成为时，拖动鼠标即可调整最后一列单元格的宽度，如图6-14所示。

◎ 调整行高：将光标置于表格底部边框或者中间行线上，当光标变成时，拖动鼠标即可调整上面一行单元格的高度，如图6-15所示。

6.3.2 添加/删除行或列

可以执行“修改”|“表格”菜单中的子命令，增加或减少行与列。

增加行与列可以使用以下方法。

◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入行”命令，即可插入一行。

◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入列”命令，即可在相应的位置插入一列。

◎ 将光标置于相应的位置，执行“修改”|“表格”|“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图6-16所示。单击“确定”按钮，即可在相应的位置插入行或列，如图6-17所示。

删除行或列有以下几种方法。

◎ 将光标置于要删除行或列的位置，执行“修改”|“表格”|“删除行”命令，或执行“修改”|“表格”|“删除列”命令，即可删除行或列，如图6-18所示。

◎ 选中要删除的行或列，执行“编辑”|“清除”命令，即可删除行或列。

◎ 选中要删除的行或列，按Delete键或按BackSpace键也可删除行或列。

6.3.3 拆分单元格

在使用表格的过程中，有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的单元格拆分为多行或多列，具体操作步骤如下。

1 将光标置于要拆分的单元格中，执行“修改”|“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图6-19所示。

2 在对话框中的“把单元格拆分”选择“行”，“行数”设置为2，单击“确定”按钮，即可将单元格进行拆分，如图6-20所示。

6.3.4 合并单元格

合并单元格就是将选中单元格的内容合并到一个单元格。合并单元格，首先将需要合并的单元格选中，然后执行“修改”|“表格”|“合并单元格”命令，将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键，在弹出的菜单中选择“表格”|“合并单元格”选项，将多个单元格合并成一个单元格，如图6-21所示。

6.3.5 剪切、复制、粘贴单元格

选中表格后执行“编辑”|“拷贝”命令，或者按Ctrl+C组合键就可将选中的表格复制到剪贴板上，而执行“编辑”|“剪切”命令，或者按Ctrl+X组合键也可以将选中的表格复制到剪贴板上，如图6-22所示。执行“编辑”|“粘贴”命令，或者按Ctrl+V组合键即可完成表格的粘贴操作，如图6-23所示。

6.4 排序及整理表格内容

为了更加快速有效地处理网页中的表格和内容，Dreamweaver CS4提供了多种自动处理功能，包括导入表格数据和排序表格等。本节将介绍表格自动化处理技巧，以提升读者网页表格设计技能。

6.4.1 导入表格式数据

Dreamweaver中导入表格式数据功能能够根据素材来源的结构，为网页自动建立相应的表格，并自动生成表格数据，因此，当遇到大篇幅的表格内容编排，而手头又拥有相关表格式素材时，便可以使网页编排工作轻松得多。

将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出如图6-24所示的“导入表格式数据”对话框。

下面通过实例讲述导入表格数据的方法，效果如图6-25所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第3天下午/6.4.1/index.htm

完成文件：CD-ROM/完成文件/第3天下午/6.4.1/index1.htm

1 打开网页文档，如图6-26所示。

2 将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出“导入表格式数据”对话框，如图6-27所示。

3 在对话框中单击“数据文件”文本框右边的“浏览”按钮，弹出“打开”对话框，选择数据文件，如图6-28所示。

4 单击“打开”按钮，将数据文件添加到文本框中，在对话框的“定界符”下拉表中选择“逗点”选项，“表格宽度”选中“匹配内容”单选按钮，如图6-29所示。

5 单击“确定”按钮，导入表格式数据，如图6-30所示。

6 对导入的表格设置背景颜色，如图6-31所示。

7 保存文档，按F12键在浏览器中预览，效果如图6-25所示。

6.4.2 排序表格

排序表格的功能主要针对具有格式数据的表格而言，它根据表格中的数据进行排序操作。选中要排序的表格，执行“命令”|“排序表格”命令，弹出“排序表格”对话框，如图6-32所示。

下面通过实例讲述排序表格的方法，效果如图6-33所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第3天下午/6.4.2/index.htm

完成文件：CD-ROM/完成文件/第3天下午/6.4.2/index1.htm

1 打开网页文档，选中表格，如图6-34所示。

2 执行“命令”|“排序表格”命令，弹出“排序表格”对话框，将“排序按”设置为列1，“顺序”设置为“按数字顺序”，在右边的下拉列表中选择“降序”，如图6-35所示。

3 单击“确定”按钮，对表格进行排序，如图6-36所示。

4 保存文档，按F12键在浏览器中预览，效果如图6-33所示。

6.5 综合练习

表格最基本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往要利用表格来布局定位网页元素。下面通过几个实例掌握表格的使用方法。

练习1——利用表格排列数据

下面通过实例讲述利用表格排列数据，效果如图6-37所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第3天下午/综合练习1/index.htm

完成文件：CD-ROM/完成文件/第3天下午/综合练习1/index1.htm

1 打开网页文档，如图6-38所示。

2 将光标置于要导入表格数据的位置，执行“插入”|“表格对象”|“导入表格式数据”命令，弹出“导入表格式数据”对话框，单击“数据文件”文本框右边的“浏览”按钮，弹出“打开”对话框，选择相应的数据文件，如图6-39所示。

3 单击“打开”按钮，将数据文件添加到文本框中，在“定界符”下拉列表中选择“逗点”，如图6-40所示。

4 单击“确定”按钮，导入表格式数据，如图6-41所示。

5 选中表格，执行“命令”|“排序表格”命令，弹出“排序表格”对话框，在对话框中将“排序按”设置为“列3”，“顺序”设置为“按数字顺序”，在后面的下拉列表中选择“降序”，如图6-42所示。

6 单击“确定”按钮，对表格进行排序，如图6-43所示。

7 保存文档，按F12键在浏览器中预览，效果如图6-37所示。

练习2——创建圆角表格

在网页中，有时会用一些大的色块区域作为某个版块内容的底色，来达到突出该版块的目的。这种效果可以通过填充表格的背景颜色来实现。其中，圆角表格是最常用的一种背景方式。但是在Dreamweaver中，表格都是矩形的，边角都为直角，填充背景颜色只能得到矩形的色块，那么圆角该如何处理呢？我们有一个办法，就是把这个圆角做成图像，然后再插入到表格中来，虽然它和设置背景色的原理不同，但是在浏览器中的显示却没有分别。下面通过实例讲述创建圆角表格的方法，效果如图6-44所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第3天下午/综合练习2/index.htm

完成文件：CD-ROM/完成文件/第3天下午/综合练习2/index1.htm

1 打开网页文档，如图6-45所示。

2 将光标置于相应的位置，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为3，“列数”设置为1，“表格宽度”设置为575像素，如图6-46所示。

3 单击“确定”按钮，插入表格，此表格记为表格1，如图6-47所示。

4 将光标置于表格1的第1行单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像images/lfbg_jj_top，如图6-48所示。

5 单击“确定”按钮，插入图像，如图6-49所示。

6 将光标置于表格1的第2行单元格中，执行“插入”|“表格”命令，插入2行2列的表格，“表格宽度”设置为100%，此表格记为表格2，如图6-50所示。

7 将光标置于表格2的第1行第1列单元格中，执行“插入”|“图像”命令，插入图像images/jj_r2_c3.png，如图6-51所示。

8 将光标置于表格2的第1行第2列单元中，拖住鼠标至表格2的第2行第2列单元格中，合并单元格，如图6-52所示。

9 将光标置于合并后的单元格中，执行“插入”|“图像”命令，插入图像images/lfbg_jj_ctn.png，如图6-53所示。

10 将光标置于表格2的第2行第1列单元格中，执行“插入”|“表格”命令，插入1行2列的表格，此表格记为表格3，如图6-54所示。

11 将光标置于表格3的第1列单元格中，执行“插入”|“图像”命令，插入图像images/jj_r4_c3.png，如图6-55所示。

12 将光标置于表格3的第2列单元格中，单击属性面板中的“页面属性”按钮，在弹出的“选择图像源文件”对话框中选择背景图像文件images/jj_bg.png，单击“确定”按钮，添加背景图像文件，如图6-56所示。

13 单击“确定”按钮，插入背景图像，如图6-57所示。

14 将光标置于背景图像上，输入相应的文字，将“大小”设置为12像素，“颜色”设置为#d76011，如图6-58所示。

15 将光标置于表格1的第3行单元格中，执行“插入”|“图像”命令，插入图像images/lfbg_jj_bot.png，如图6-59所示。

16 保存文档，按F12键在浏览器中预览，效果如图6-44所示。

练习3——创建细线表格

有些读者可能会说，这不就是加了边框颜色的表格，把边框宽度设成最小的值1么，有什么新鲜的。没关系，你可以试一下，就算你把边框宽度设成最小的值1，它也不是真正的细线表格。真正的细线表格不是通过设置边框来制作的。边框为1的表格在浏览器中看起来还是有些蠢笨，虽然它已经是最小值了，但在实际应用中基本上没有人会使用这种表格，可以说网页上很多的表格都是细线表格，因此读者也一定要熟练掌握制作细线表格的方法。下面通过实例讲述创建细线表格的方法，效果如图6-60所示，具体操作步骤如下。

起始文件：CD-ROM/起始文件/第3天下午/综合练习3/index.htm

完成文件：CD-ROM/完成文件/第3天下午/综合练习3/index1.htm

1 打开网页文档，将光标置于要插入表格的单元格中，将背景颜色设置为#87B038，如图6-61所示。

2 将光标置于要插入表格的位置，执行“插入”|“表格”命令，在弹出的“表格”对话框中将“行数”设置为8，“列数”设置为3，“表格宽度”设置为600像数，如图6-62所示。

3 单击“确定”按钮，插入表格，如图6-63所示。

4 选中表格，在“属性”面板中将“填充”设置为3，“间距”设置为1，如图6-64所示。

5 将光标置于第1行第1列单元格中，按住鼠标左键向右拖动至第8行第3列单元格，在“属性”面板中将“背景颜色”设置为#FFFFFF，如图6-65所示。

6 在单元格中分别输入内容，如图6-66所示。

7 保存文档，按F12键在浏览器中预览，效果如图6-60所示。

6.6 本章小结

表格在网页设计中的地位非常重要，可以说如果表格使用不好的话，就不可能设计出出色的网页。Dreamweaver提供的表格工具不但可以实现一般功能的数据组织，还可以用于定位网页中的各种元素和设计规划页面的布局。本章主要学习了表格的基本知识和操作，最后的几个综合实例通过逐步的详细讲解，帮助读者学习到如何利用表格来进行网页的排版布局，并且还学到一些表格的高级应用和制作时的注意事项等。如果读者能够完成这些实例的话，相信对表格的排版技术就会有一个更深层次的认识，完全能利用表格排版布局出各种复杂的网页。

6.7 课后习题

1.填空题

（1）表格由____、____和____三部分组成。____贯穿表格的左右，____则是上下方式的，____是输入信息的地方。

（2）为了更加快速有效地处理网页中的表格和内容，Dreamweaver CS4提供了多种自动处理功能，包括____和____等。

2.操作题

（1）给如图6-67所示的网页创建细线表格效果，如图6-68所示。

起始文件：CD-ROM/起始文件/第3天下午/操作题1/index.htm

完成文件：CD-ROM/完成文件/第3天下午/操作题1/index1.htm

1 将光标置于要插入表格的单元格中，“将背景颜色”设置为#999900，如图6-69所示。

2 执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为6，“列数”设置为6，“表格宽度”设置为461像素，“单元格边距”设置为1，“单元格间距”设置为1，如图6-70所示。

3 单击“确定”按钮，插入表格，如图6-71所示。

4 选中所有的单元格，将“背景颜色”设置为#FFFFFF，如图6-72所示。

5 分别在表格中输入文字，在“属性”面板中将“大小”设置为12像素，“文本颜色”设置为#19217b，如图6-73所示。

（2）创建如图6-74所示的利用表格布局网页的效果。

完成文件：CD-ROM/完成文件/第3天下午/操作题2/index1.htm