第 11 章表格及布局网页

第11章 表格及布局网页

本章学习要点： • 创建表格，表格的组成 • 表格的属性设置 • 表格编辑 • 使用表格布局网页

11.1表格简介 11.2 向表格内添加内容 11.3 编辑表格 11.4 使用表格布局网页

11.1表格简介 11.1.1表格概述 11.1.2 创建表格 11.1.3表格的属性设置面板

11.1.1表格概述 表格是网页设计制作不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等网页元素合理有序地布局在页面上，使页面结构整齐,版面清晰。不太复杂的网页一般都利用表格进行网页布局。

11.1.2 创建表格 操作步骤如下：步骤1：在设计窗口中,将插入点放在需要插入表格的位置。步骤2：选择菜单“插入(I)”|“表格(T)”命令。或单击对象面板组上的“插入表格”按钮, 打开表格对话框，如图11.1所示。图11.1 表格对话框

步骤3：在表格对话框中设置相应的选项。 “表格大小”选项组中各选项的功能如下： • “行数” 此文本框用来确定表格具有的行的数目，如输入3行。 • “列数” 此文本框用来确定表格具有的列的数目，如输入8列。 • “表格宽度” 此文本框用来以像素为单位或按占浏览器窗口宽度的百分比，确定表格宽度，如输入200像素。 • “边框粗细” 此文本框用来以像素为单位确定表格边框粗细，如输入1像素。 • “单元格边距”可以采取默认值。 • “单元格间距” 可以采取默认值。

“页眉” 选项组中各选项的功能如下： • “无” 不设置页眉。 • “顶部” 页眉设置在表格顶部。 • “左” 页眉设置在表格左边。 • “两者” 页眉设置在表格左边与顶部。 • “辅助功能”选项可以不进行设置。 • “标题” 提供了一个显示在表格外的表格标题。 • “对齐标题” 指定表格标题相对于表格的显示位置。 • “摘要” 给出了表格的说明。屏幕阅读器可以读取摘要文本,但是该文本不会显示在浏览器中。

步骤4：各选项设置完成后，用鼠标单击“确定”按钮。即会在设计窗口中出现表格。如图、所示。步骤4：各选项设置完成后，用鼠标单击“确定”按钮。即会在设计窗口中出现表格。如图、所示。图11.2设计窗口中的表格

11.1.3表格的属性设置面板 在Dreamweaver MX 2004中,可以通过表格的属性设置面板设置表格的各种属性。如图所示。图11.3 表格的属性设置面板

表格属性设置面板中各个选项功能如下（1） • “表格Id”中的下拉列表框用来为选中表格名称。 • “行(R)”此文本框用来为选中表格设定行数。用鼠标单击文档内任一位置,表格自动改变。 • “列(C)”此文本框用来为选中表格设定列数。用鼠标单击文档内任一位置,表格自动改变。 • “宽(W)”此文本框用来为选中表格设定宽度。在文本框后的下拉列表中选择所设宽度的单位,有百分比和像素两种选择。

表格属性设置面板中各个选项功能如下（2） • “高(H)”此文本框用来为选中表格设定高度。在文 • 本框后的下拉列表中选择所设高度的单位,有百分比和像素两种选择。 • “填充(P)”此文本框用来指定选中表格的单元格高度，使用默认值。 • “对齐(A)”此下拉列表框用来指定表格相对于同一段落中其他元素的显示位置，使用默认值。 • “左对齐” 沿其他元素的左侧对齐表格。 • “右对齐” 沿其他元素的右侧对齐表格。 • “居中对齐” 将表格居中。

表格属性设置面板中各个选项功能如下（3） • “默认” 指示浏览器应该使用其默认对齐方式。 • “间距(S)”此文本框用来指定选中表格的边框距离。 • “边框(B)”此文本框用来设置选中表格的边框大小。 • “类(C)”设置选中表格的CSS样式。 • “背景颜色(G)”设置选中表格的背景颜色,可以从颜色选择器后面的文本框内直接输入。 • “边框颜色(R)”设置选中表格的边框颜色,可以从颜色选择器后面的文本框内直接输入。 • “背景图像(B)”可在文本框内输入图像位置和名称,将该图像作为选中表格的背景图像。

11.2 向表格内添加内容 在表格的单元格中可以输入任何数据。同时也可以对数据进行常规的编辑操作。操作步骤如下：步骤1：将光标移到要插入数据的单元格内。步骤2：直接输入对象,或者将复制的对象粘贴到单元格中。步骤3：一个单元格内的内容输入完毕后,可以用Tab键将光标移动到下一个单元格,以便继续输入，也可以使用鼠标移动光标。

11.3 编辑表格 11.3.1选择表格对象 11.3.2 调整表格大小 11.3.3调整行和列的大小 11.3.4 添加及删除行和列 11.3.5 拆分和合并单元格 11.3.6复制、粘贴及删除单元格 11.3.7嵌套表格

11.3.1选择表格对象 • 1。选择整个表格 • 选择整个表格有如下一些操作方法： • 单击表格左上角、表格的顶边缘和底边缘的任何位置，或者行或者列的边框，当可以选择表格时,鼠标指针会变成表格网格图标。 • 单击某个表格单元格,然后在设计窗口左下角的标签选择器中选择<table> 标签。 • 单击某个表格单元格,然后选择菜单“修改(M)”|“表格(T)”|“选择表格(S)”命令。 • 单击某个表格单元格,然后选择表下边的倒三角，出现标题菜单，在标题菜单中选择“选择表格(S)”。

将光标位于表格外,按住Shift键,然后单击表格中任意位置。将光标位于表格外,按住Shift键,然后单击表格中任意位置。 • 将光标置于表格内任意位置,连续两次按下Ctr1+A组合键。 • 所选中表格的下边缘和右边缘出现选择柄。如图标题菜单

若要选择单个或多个行,操作步骤如下： 步骤1：定位鼠标指针使其指向行的左边缘。步骤2：当鼠标指针变为选择箭头时,单击已选择单个行。进行拖动以选择多个行。按住Ctrl键,则可以选择多个不相邻的表格行。

若要选择单个或多个列, 操作步骤如下： 步骤1：将鼠标指针指向列的上边缘。步骤2：当鼠标指针变为选择箭头时,单击已选择单个列。进行拖动以选择多个列。按住Ctrl键,则可以选择多个不相邻的表格列。

3.选择单元格 • 选择单个单元格有如下一些操作方法： • 将光标放在要选择的单元格内,然后在设计窗口左下角的标签选择器中选择<td>标签。 • 按住Ctrl键单击该单元格。 • 将光标放在要选择的单元格内,然后选择“编辑(E)”|“全选(L)”命令。如果选择了一个单元格后再次选择“编辑(E)”|“全选(L)”命令可以选择整个表格。

选择一行或多个单元格有如下一些操作方法： • 从一个单元格拖到另一个单元格。 • 在一个单元格中按住Ctrl键的同时单击鼠标,然后按住 Shift键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。

若要选择不相邻的单元格有如下一些操作方法：若要选择不相邻的单元格有如下一些操作方法： • 将光标放在要选择的任一单元格内，按住Ctrl键的同时单击要选择的单元格。 • 在按住Ctrl键的同时单击要选择的单元格。如果它己经被选中,再次单击会将其从选择中删除。

11.3.2 调整表格大小 若要调整表格的大小，先选择该表格。该表格周围出现选择柄,如图。标题菜单通过拖动表格的一个选择柄来调整表格大小。

有以下一些操作方法： • 若要在水平方向调整表格大小，拖动右边的选择柄。 • 若要在垂直方向调整表格大小，拖动底部的选择柄。 • 若要在两个方向调整表格大小，拖动右下角的选择柄。

11.3.3调整行和列的大小 使用属性面板设置列宽或行高,操作步骤如下：步骤1：先选择列或行。步骤2：再选择属性面板，在“宽(W)”右边的文本中输入数字,如输入18。或在“高(H)”右边的文本中输入数字，如输入20。按Tab键或Enter键确定应用该值。

11.3.4 添加及删除行和列 添加单个行或列，有如下一些操作方法：步骤1：选择菜单“修改(M)”|“表格(T)”|“插入行(N)”命令或“修改(M)”|“表格(T)”|“插入列(C)”命令, 则在插入点的上面出现一行或在插入点的左侧出现一列。步骤2：单击表格每列下面的小三角（列标题菜单）,然后选择“左侧插入列(L)”或“右侧插入列(R)”命令。则在插入点的左侧或右侧出现一列。

添加多行或多列,操作步骤如下： 步骤1：单击一个单元格。选择菜单“修改（M）”|“表格(T)”|“插入行或列(I)”命令,即出现插入行或列对话框,如图11.5所示。图11.5插入行或列对话框

步骤2：选中“行(R)”或“列(C)”单选按钮,在“行数(N)”中输入1。步骤2：选中“行(R)”或“列(C)”单选按钮,在“行数(N)”中输入1。步骤3：选择位置中的单选按钮。步骤4：单击“确定”按钮,行或列出现在表格中。

使用属性面板添加或删除行或列 选中整个表格。在属性面板中增加或减少行数值以添加或删除行。它将在表格的底部添加和删除行。增加或减少列数值以添加或删除列。它将在表格的右边添加和删除列。

11.3.5 拆分和合并单元格 • 合并单元格 • 操作步骤如下： • 步骤1：选中要合并的单元格,单元格必须相邻,不相邻的单元格不能合并,如图11.6所示。

步骤2：选择菜单“修改(M)”|“表格(T)”|“合并单元格(M)”命令实现单元格的合并,如图11.7所示。步骤2：选择菜单“修改(M)”|“表格(T)”|“合并单元格(M)”命令实现单元格的合并,如图11.7所示。图11.7 合并的单元格

2.拆分单元格 操作步骤如下：步骤1：选中要拆分的单元格。步骤2：选择菜单“修改(M)”|“表格(T)”|“拆分单元格(P)”命令,弹出拆分单元格对话框，如图11.8所示。图11.8 拆分单元格对话框

步骤3：选中“行(R)”单选按钮,在“行数(N)”中输入5，可以将选中的单元格拆分为5行；选中“列(C)”单选按钮, 则可以将选中的单元格拆分为多列。步骤4：单击“确定”按钮,完成单元格的拆分。,如图11.9所示图11.9 按行拆分单元格

11.3.6复制、粘贴及删除单元格 剪切或复制表格单元格,操作步骤如下: 步骤1：选择连续的一个或多个单元格。步骤2：选择菜单“编辑(E)”|“剪切(T)”或“编辑(E)”|“复制(C)”命令。

粘贴表格单元格,操作步骤如下： 步骤1：选择要粘贴单元格的位置。步骤2：选择菜单“编辑(E)”|“粘贴(P)”命令或者按Ctrl+V快捷键粘贴。如果要将整个行或列粘贴到现有的表格中,则这些行或列将被添加到该表格中。如果要粘贴单个单元格, 则将替换所选单元格的内容。如果要在表格外进行粘贴,则这些行、列或单元格用于定义一个新表格。

删除单元格内容,操作步骤如下: 步骤1：选择一个或多个单元格。步骤2：选择“编辑(E)”|“清除(A)”命令或按Delete键。如果在选择“编辑(E)”|“清除(A)”命令或按Delete键前，选择了完整的行或列,则将从表格中删除整个行或列,而不仅仅是删除它们的内容。

删除包含合并单元格的行或列,操作步骤如下：删除包含合并单元格的行或列,操作步骤如下：步骤1：选择行或列。步骤2：选择菜单“修改(M)”|“表格(T)”|“删除行(N)”命令或“修改(M)”|“表格(T)”|“删除列(C)”命令。

11.3.7嵌套表格 嵌套表格是在表格的单元格中再插入另一个表格。在对嵌套表格进行格式设置时,其宽度受它所在单元格的宽度的限制。

在表格单元格中嵌套表格,操作步骤如下: 步骤1：单击现有表格中的一个单元格。步骤2：选择菜单“插入(I)”|“表格(T)”命令,弹出表格对话框,如图11.10所示。图11.10 表格对话框

步骤3：输入行数2；列数2。 步骤4：单击“确定”按钮,两行两列的表格插入到现有表格中, 如图11.11所示。图11.11 嵌套表格

11.4 使用表格布局网页 11.4.1 打开设计窗口 14.4.2 绘制表格草图 11.4.3 插入和调整表格 11.4.4 向表格添加内容 11.4.5导入和导出表格式数据

11.4.1 打开设计窗口 选择菜单“文件(F)”|“新建(N)”,打开设计窗口，如图11.12所示。图11.12 设计窗口

14.4.2 绘制表格草图 在插入表格之前，首先画一个草图，安排好各个表格中的内容，避免在插入元素时产生许多麻烦。如图11.13所示。图11.13 表格草图

11.4.3 插入和调整表格 操作步骤如下：步骤1：选择常用面板中的“表格”按钮,显示表格对话框，如图11.14所示。图11.14 表格对话框步骤2：在弹出的表格对话框中,输入行数3,列数3。

步骤3：依照草图编辑表格，将表格调整好，将“单元格填充”、“单元格间距”和“边框”属性值均设置为0,这里我们设置表格宽度为200像素,并将表格居中显示,当然也可以将表格设置为100%,这样表格将铺满整个屏幕。调整后的表格如图11.15所示。步骤3：依照草图编辑表格，将表格调整好，将“单元格填充”、“单元格间距”和“边框”属性值均设置为0,这里我们设置表格宽度为200像素,并将表格居中显示,当然也可以将表格设置为100%,这样表格将铺满整个屏幕。调整后的表格如图11.15所示。图11.15 调整后的表格

11.4.4 向表格添加内容 1. 添加文字和图形操作步骤如下：步骤1：打开文件D:\渊博书屋\Untitled-6.tml。步骤2：选择D:\渊博书屋\image1文件夹中的素材。

步骤3：按第10章所讲的方法，分别向表格中插入文字，图形。如图11.16所示。步骤3：按第10章所讲的方法，分别向表格中插入文字，图形。如图11.16所示。图11.16名字为Untitled-6.tml的网页

2.插入导航图 • 导航图主要用于制作网页主题的链接，以便浏览者能够快速查找有关的网页，并随时可以切换网页主题来浏览不同的网页，它是在页面中插入一排垂直或水平的导航按钮。经常使用的导航图有4种： • 状态图像 • 鼠标经过图像 • 按下图像 • 按下时鼠标经过图像

状态图像 是一种还未使用鼠标单击图像或与元素交互时显现的图像。插入“状态图像”的操作步骤如下：步骤1：选择菜单“插入(I)”|“图像对象(G)”|“导航条(G)”命令，如图11.17所示。图11.17 插入导航条对话框

第 11 章 表格及布局网页