- 14天学通Dreamweaver+Photoshop+Flash网站建设与网页设计
- 孙东梅编著
- 633字
- 2024-12-22 13:32:22
第3天下午 使用表格轻松排列和布局网页元素
本章学习流程图

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

创建细线表格

导入表格数据

创建圆角表格

利用表格排列数据
6.1 插入表格和表格元素
表格由行、列和单元格三部分组成。行贯穿表格的左右,列则采用上下方式。单元格是行和列交汇的部分,它是输入信息的地方。单元格会自动扩展到与输入信息的相适应尺寸。
6.1.1 插入表格
在Dreamweaver中,表格可以用于制作简单的图表,还可以用于安排网页文档的整体布局,它起着非常重要的作用。在网页中插入表格的方法非常简单。执行“插入”|“表格”命令,弹出“表格”对话框,如图6-1所示。

图6-1 “表格”对话框
知识要点
“表格”对话框中可以进行如下设置。
◎ 行数:在文本框中输入新建表格的行数。
◎ 列数:在文本框中输入新建表格的列数。
◎ 表格宽度:用于设置表格的宽度,其中右边的下拉列表中包含“百分比”和“像素”两个选项。
◎ 边框粗细:用于设置表格边框的宽度,如果设置为0,在浏览时看不到表格的边框。
◎ 单元格边距:单元格内容和单元格边界之间的像素数。
◎ 单元格间距:单元格之间的像素数。
◎ 页眉:可以定义表头样式,4种样式可以任选一种。
◎ 标题:定义表格的标题。
◎ 对齐标题:用来定义表格标题的对齐方式。
◎ 摘要:用来对表格进行注释。
下面通过实例讲述表格的插入方法,具体操作步骤如下。
1 打开网页文档,如图6-2所示。

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

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

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

图6-5 表格的属性面板
指点迷津
表格属性面板中可以进行如下设置。
◎ 表格:表格的ID。
◎ 行、列:表格中行和列的数量。
◎ 宽:表格的宽度。
◎ 填充:单元格内容和单元格边框之间的像素数。
◎ 间距:相邻单元格间的像素数。
◎ 边框:表格边框的宽度。
◎ 对齐:确定表格相对于同一段落中其他元素(例如文本或图像)的显示位置。“左对齐”沿其他元素的左侧对齐表格(因此同一段落中的文本在表格的右侧换行);“右对齐”沿其他元素的右侧对齐表格(文本在表格的左侧换行);“居中对齐”将表格居中(文本显示在表格的上方和/或下方);“默认”指示浏览器应该使用其默认对齐方式。
◎ 类:对该表格设置一个CSS类。
◎ 用于清除行高。
◎ 用于清除列宽。
◎ 将表格宽由百分比转转为像素。
◎ 将表格宽由像素转换为百分比。
6.1.3 添加内容到单元格
将光标置于表格中,分别输入相应的内容,如图6-6所示。

图6-6 输入相应的内容
6.2 选择表格元素
处理表格时经常要选择表格中的一个或多个单元格,或者选择整行整列单元格,这时可以根据具体情况使用不同的方法进行选择。
6.2.1 选取表格
要想对表格进行编辑,那么首先应该选择它,主要有以下几种方法选取整个表格。
◎ 将光标置于表格的左上角,按住鼠标的左键不放,拖曳鼠标指针到表格的右下角,将整个表格中的单元格选中,单击鼠标右键,在弹出的菜单中选择“表格”|“选择表格”选项。
◎ 单击表格边框线的任意位置,即可选中表格。
◎ 将光标置于表格内的任意位置,执行“修改”|“表格”|“选择表格”命令。
◎ 将光标置于表格内的任意位置,单击文档窗口左下角的<table>标签,如图6-7所示。

图6-7 选择<table>标签
6.2.2 选取行或列
选择表格的行与列也有两种不同的方法。
◎ 将鼠标置于要选择行首或列顶,当鼠标指针形状变成了黑箭头时,单击鼠标左键即可以选中列或行,如图6-8所示。

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

图6-9 选择行
提示
还有一种方法只可以选中行,将光标置于要选择的行中,然后单击窗口左下角的<tr>标签,这种方法只能选择行,而不能选择列。
6.2.3 选取单元格
选择表格中的单元格有两种方式,一种是选择单个单元格,另一种是选择多个单元格,如图6-10所示。

图6-10 选择多个不相邻的单元格
知识要点
◎ 按住Ctrl键,然后单击要选中的单元格即可。
◎ 将光标移到要选中的单元格中,按住Ctrl+A组合键,即可选中该单元格。
◎ 将光标置于要选中的单元格中,执行“编辑”|“全选”命令,即可选中该单元格。
◎ 将光标置于要选择的单元格内,单击文档窗口左下角的<td>标签即可选中该单元格。
◎ 按住Shift键不放并单击选择多个单元格中的第一个和最后一个,可以选择多个相邻的单元格。
◎按住Ctrl键不放单击并选择的多个单元格,可以选择多个相邻或不相邻的单元格。
6.3 表格的基本操作
创建了表格后,用户要根据网页设置对表格进行处理,例如调整表格和单元格的大小、添加/删除行或列、拆分单元格以及剪切、复制和粘贴单元格等,熟练掌握表格的基本操作,可以提高网页制作速度。
提示
表格设置的优先顺序应该是单元格、行、表格。
6.3.1 调整表格和单元格的大小
使用“属性”面板中的“宽”和“高”文本框能精确地调整表格的大小,而用鼠标拖动调整则显得更为方便快捷,调整表格大小的方法如下。
◎ 调整表格的宽:选中整个表格,将光标置于表格右边框控制点上,当光标变成双箭头
时,如图6-11所示,拖动鼠标即可调整表格整体宽度。

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

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

图6-13 调整表格的宽和高
指点迷津
使用布局表格排版时应注意什么?
在Dreamweaver中有一个非常重要的功能,即利用布局模式来给网页排版。在布局模式下,可以在网页中直接拖出表格与单元格,还可以自由拖动。利用布局模式对网页定位非常方便,但生成的表格比较复杂,不适合大型网站使用,一般只应用于中小型网站。
将光标置于要设置大小的单元格中,用“属性”面板中的“宽”和“高”文本框能精确地调整单元格的大小,而用鼠标拖动调整则显得更为方便快捷,调整单元格大小的方法如下。
◎ 调整列宽:将光标置于表格右边的边框上,当鼠标变成为时,拖动鼠标即可调整最后一列单元格的宽度,如图6-14所示。

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

图6-15 调整行高
提示
在编辑页面中的表格时,尽量使用像素作为宽度和高度的单位,这样会避免因为访问者显示器分辨率不同而造成的页面偏差。
6.3.2 添加/删除行或列
可以执行“修改”|“表格”菜单中的子命令,增加或减少行与列。
增加行与列可以使用以下方法。
◎ 将光标置于相应的位置,执行“修改”|“表格”|“插入行”命令,即可插入一行。
◎ 将光标置于相应的位置,执行“修改”|“表格”|“插入列”命令,即可在相应的位置插入一列。
◎ 将光标置于相应的位置,执行“修改”|“表格”|“插入行或列”命令,弹出“插入行或列”对话框,在对话框中进行相应的设置,如图6-16所示。单击“确定”按钮,即可在相应的位置插入行或列,如图6-17所示。

图6-16 “插入行或列”对话框

图6-17 插入行
知识要点
在“插入行或列”对话框中可以进行如下设置。
◎ 插入:包含“行”和“列”两个单选按钮,一次只能选择其中一个来进行插入行或者列的操作。该选项组的初始状态选择的是“行”选项,所以下面的选项就是“行数”。如果选择的是“列”选项,那么下面的选项就变成了“列数”,在“列数”选项的文本框内可以直接输入要插入的列数。
◎ 位置:包含“所选之上”和“所选之下”两个单选按钮。如果“插入”选项选择的是“列”选项,那么“位置”选项后面的两个单选按钮就会变成“在当前列之前”和“在当前列之后”。
删除行或列有以下几种方法。
◎ 将光标置于要删除行或列的位置,执行“修改”|“表格”|“删除行”命令,或执行“修改”|“表格”|“删除列”命令,即可删除行或列,如图6-18所示。

图6-18 删除行
◎ 选中要删除的行或列,执行“编辑”|“清除”命令,即可删除行或列。
◎ 选中要删除的行或列,按Delete键或按BackSpace键也可删除行或列。
6.3.3 拆分单元格
在使用表格的过程中,有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的单元格拆分为多行或多列,具体操作步骤如下。
1 将光标置于要拆分的单元格中,执行“修改”|“表格”|“拆分单元格”命令,弹出“拆分单元格”对话框,如图6-19所示。

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

图6-20 拆分单元格
高手支招
拆分单元格还有以下两种方法:
◎ 将光标置于拆分的单元格中,单击鼠标右键,在弹出的菜单中选择“表格”|“拆分单元格”选项,弹出“拆分单元格”对话框,然后进行相应的设置。
◎ 单击属性面板中的“拆分单元格为行或列”按钮,它往往是创建复杂表格的重要步骤。
6.3.4 合并单元格
合并单元格就是将选中单元格的内容合并到一个单元格。合并单元格,首先将需要合并的单元格选中,然后执行“修改”|“表格”|“合并单元格”命令,将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键,在弹出的菜单中选择“表格”|“合并单元格”选项,将多个单元格合并成一个单元格,如图6-21所示。

图6-21 合并单元格
提示
也可以单击“属性”面板中的“合并所选单元格,使用跨度”按钮,它往往是创建复杂表格的重要步骤。
6.3.5 剪切、复制、粘贴单元格
选中表格后执行“编辑”|“拷贝”命令,或者按Ctrl+C组合键就可将选中的表格复制到剪贴板上,而执行“编辑”|“剪切”命令,或者按Ctrl+X组合键也可以将选中的表格复制到剪贴板上,如图6-22所示。执行“编辑”|“粘贴”命令,或者按Ctrl+V组合键即可完成表格的粘贴操作,如图6-23所示。

图6-22 选择“拷贝”命令

图6-23 粘贴表格
6.4 排序及整理表格内容
为了更加快速有效地处理网页中的表格和内容,Dreamweaver CS4提供了多种自动处理功能,包括导入表格数据和排序表格等。本节将介绍表格自动化处理技巧,以提升读者网页表格设计技能。
6.4.1 导入表格式数据
Dreamweaver中导入表格式数据功能能够根据素材来源的结构,为网页自动建立相应的表格,并自动生成表格数据,因此,当遇到大篇幅的表格内容编排,而手头又拥有相关表格式素材时,便可以使网页编排工作轻松得多。
将光标置于要导入表格数据的位置,执行“插入”|“表格对象”|“导入表格式数据”命令,弹出如图6-24所示的“导入表格式数据”对话框。

图6-24 “导入表格式数据”对话框
知识要点
在“导入表格式数据”对话框中可以进行如下设置。
◎ 数据文件:输入要导入数据文件的保存路径和文件名,或单击右边的“浏览”按钮进行选择。
◎ 定界符:选择定界符,使之与导入的数据文件格式匹配。有“Tab”、“逗点”、“分号”、“引号”和“其他”5个选项。
◎ 表格宽度:设置导入表格的宽度。
◎ 匹配内容:勾选此单选按钮,创建一个根据最长文件进行调整的表格。
◎ 设置为:勾选此单选按钮,在后面的文本框中输入表格的宽度及其单位。
◎ 单元格边距:单元格内容和单元格边界之间的像素数。
◎ 单元格间距:相邻的表格单元格间的像素数。
◎ 格式化首行:设置首行标题的格式。
◎ 边框:以像素为单位设置表格边框的宽度。
下面通过实例讲述导入表格数据的方法,效果如图6-25所示,具体操作步骤如下。

图6-25 导入表格数据效果
起始文件:CD-ROM/起始文件/第3天下午/6.4.1/index.htm
完成文件:CD-ROM/完成文件/第3天下午/6.4.1/index1.htm
1 打开网页文档,如图6-26所示。

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

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

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

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

图6-30 导入表格式数据
6 对导入的表格设置背景颜色,如图6-31所示。

图6-31 设置表格的背景颜色
提示
在导入数据表格时注意定界符必须是逗点,否则可能会造成表格格式的混乱。
7 保存文档,按F12键在浏览器中预览,效果如图6-25所示。
6.4.2 排序表格
排序表格的功能主要针对具有格式数据的表格而言,它根据表格中的数据进行排序操作。选中要排序的表格,执行“命令”|“排序表格”命令,弹出“排序表格”对话框,如图6-32所示。

图6-32 “排序表格”对话框
知识要点
在“排序表格”对话框中可以进行如下设置。
◎ 排序按:确定哪个列的值将用于对表格排序。
◎ 顺序:确定是按字母还是数字顺序以及是升序还是降序对列排序。
◎ 再按:确定在不同列上第二种排列方法的排列顺序。在其后面的下拉列表中指定应用第二种排列方法的列,在后面的下拉列表中指定第二种排序方法的排序顺序。
◎ 排序包含第一行:指定表格的第一行应该包括在排序中。
◎ 排序标题行:指定使用与body行相同的条件对表格thead部分中的所有行排序。
◎ 排序脚注行:指定使用与body行相同的条件对表格tfoot部分中的所有行排序。
◎ 完成排序后所有行颜色保持不变:指定排序之后表格行属性应该与同一内容保持关联。
下面通过实例讲述排序表格的方法,效果如图6-33所示,具体操作步骤如下。

图6-33 排序表格效果
起始文件:CD-ROM/起始文件/第3天下午/6.4.2/index.htm
完成文件:CD-ROM/完成文件/第3天下午/6.4.2/index1.htm
1 打开网页文档,选中表格,如图6-34所示。

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

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

图6-36 对表格进行排序
知识要点
如果表格中含有合并或拆分的单元格,则无法使用表格排序功能。
4 保存文档,按F12键在浏览器中预览,效果如图6-33所示。
6.5 综合练习
表格最基本的作用就是让复杂的数据变得更有条理,让人容易看懂,在设计页面时,往往要利用表格来布局定位网页元素。下面通过几个实例掌握表格的使用方法。
练习1——利用表格排列数据
下面通过实例讲述利用表格排列数据,效果如图6-37所示,具体操作步骤如下。

图6-37 利用表格排列数据的效果
起始文件:CD-ROM/起始文件/第3天下午/综合练习1/index.htm
完成文件:CD-ROM/完成文件/第3天下午/综合练习1/index1.htm
1 打开网页文档,如图6-38所示。

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

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

图6-40 设置“导入表格式数据”对话框
指点迷津
一定要确保指定保存数据文件时使用分隔符。如果未能指定分隔符,则无法正确地导入文件,也无法在表格中对你的数据进行正确的格式设置。
4 单击“确定”按钮,导入表格式数据,如图6-41所示。

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

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

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

图6-44 创建圆角表格效果
起始文件:CD-ROM/起始文件/第3天下午/综合练习2/index.htm
完成文件:CD-ROM/完成文件/第3天下午/综合练习2/index1.htm
1 打开网页文档,如图6-45所示。

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

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

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

图6-48 “选择图像源文件”对话框
5 单击“确定”按钮,插入图像,如图6-49所示。

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

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

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

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

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

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

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

图6-56 “页面属性”对话框
13 单击“确定”按钮,插入背景图像,如图6-57所示。

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

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

图6-59 插入图像
16 保存文档,按F12键在浏览器中预览,效果如图6-44所示。
指点迷津
为什么当浏览器缩小时页面会很难看?
当浏览器改变尺寸(缩小或者放大)时,有的网页会发生变形,导致页面很难看,这是由于排版页面表格的宽度单位导致的。
练习3——创建细线表格
有些读者可能会说,这不就是加了边框颜色的表格,把边框宽度设成最小的值1么,有什么新鲜的。没关系,你可以试一下,就算你把边框宽度设成最小的值1,它也不是真正的细线表格。真正的细线表格不是通过设置边框来制作的。边框为1的表格在浏览器中看起来还是有些蠢笨,虽然它已经是最小值了,但在实际应用中基本上没有人会使用这种表格,可以说网页上很多的表格都是细线表格,因此读者也一定要熟练掌握制作细线表格的方法。下面通过实例讲述创建细线表格的方法,效果如图6-60所示,具体操作步骤如下。

图6-60 创建细线表格效果
起始文件:CD-ROM/起始文件/第3天下午/综合练习3/index.htm
完成文件:CD-ROM/完成文件/第3天下午/综合练习3/index1.htm
1 打开网页文档,将光标置于要插入表格的单元格中,将背景颜色设置为#87B038,如图6-61所示。

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

图6-62 “表格”对话框
3 单击“确定”按钮,插入表格,如图6-63所示。

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

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

图6-65 设置单元格的背景颜色
6 在单元格中分别输入内容,如图6-66所示。

图6-66 输入内容
7 保存文档,按F12键在浏览器中预览,效果如图6-60所示。
6.6 本章小结
表格在网页设计中的地位非常重要,可以说如果表格使用不好的话,就不可能设计出出色的网页。Dreamweaver提供的表格工具不但可以实现一般功能的数据组织,还可以用于定位网页中的各种元素和设计规划页面的布局。本章主要学习了表格的基本知识和操作,最后的几个综合实例通过逐步的详细讲解,帮助读者学习到如何利用表格来进行网页的排版布局,并且还学到一些表格的高级应用和制作时的注意事项等。如果读者能够完成这些实例的话,相信对表格的排版技术就会有一个更深层次的认识,完全能利用表格排版布局出各种复杂的网页。
6.7 课后习题
1.填空题
(1)表格由____、____和____三部分组成。____贯穿表格的左右,____则是上下方式的,____是输入信息的地方。
(2)为了更加快速有效地处理网页中的表格和内容,Dreamweaver CS4提供了多种自动处理功能,包括____和____等。
2.操作题
(1)给如图6-67所示的网页创建细线表格效果,如图6-68所示。

图6-67 起始文件

图6-68 细线表格效果
起始文件:CD-ROM/起始文件/第3天下午/操作题1/index.htm
完成文件:CD-ROM/完成文件/第3天下午/操作题1/index1.htm
1 将光标置于要插入表格的单元格中,“将背景颜色”设置为#999900,如图6-69所示。

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

图6-70 “表格”对话框
3 单击“确定”按钮,插入表格,如图6-71所示。

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

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

图6-73 输入文字
(2)创建如图6-74所示的利用表格布局网页的效果。

图6-74 利用表格布局网页的效果
完成文件:CD-ROM/完成文件/第3天下午/操作题2/index1.htm