表格及布局网页课件.ppt

1、第第11 11章章 表格及布局网页表格及布局网页本章学习要点：本章学习要点：l创建表格，表格的组成创建表格，表格的组成l表格的属性设置表格的属性设置l表格编辑表格编辑l使用表格布局网页使用表格布局网页11.111.1表格简介表格简介11.2 11.2 向表格内添加内容向表格内添加内容11.3 11.3 编辑表格编辑表格11.4 11.4 使用表格布局网页使用表格布局网页11.1.1表格概述表格概述11.1.2 创建表格创建表格11.1.3表格的属性设置面板表格的属性设置面板11.111.1表格简介表格简介11.1.111.1.1表格概述表格概述表格是网页设计制作不可缺少的重要元素，它以表格是网

2、页设计制作不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单简洁明了和高效快捷的方式将数据、文本、图片、表单等网页元素合理有序地布局在页面上，使页面结构整齐等网页元素合理有序地布局在页面上，使页面结构整齐, ,版面清晰。不太复杂的网页一般都利用表格进行网页布版面清晰。不太复杂的网页一般都利用表格进行网页布局。局。11.1.2 11.1.2 创建表格创建表格操作步骤如下：操作步骤如下：步骤步骤1 1：在设计窗口中：在设计窗口中, ,将插入点放在需要插入表格将插入点放在需要插入表格的位置。的位置。步骤步骤2 2：选择菜单：选择菜单“插入插入(I)”|“(I)”|“表格表格(T

3、)”(T)”命令。命令。或单击对象面板组上的或单击对象面板组上的“插入表格插入表格”按钮按钮, ,打开表格对话框，如图打开表格对话框，如图11.111.1所示。所示。图图11.1 11.1 表格对话框表格对话框 步骤步骤3 3：在表格对话框中设置相应的选项。：在表格对话框中设置相应的选项。“表格大小表格大小”选项组中各选项的功能如下：选项组中各选项的功能如下：l“行数行数” ” 此文本框用来确定表格具有的行的数目，如此文本框用来确定表格具有的行的数目，如输入输入3 3行。行。l“列数列数” ” 此文本框用来确定表格具有的列的数目，如此文本框用来确定表格具有的列的数目，如输入输入8 8列。列。l

4、“表格宽度表格宽度” ” 此文本框用来以像素为单位或按占浏览此文本框用来以像素为单位或按占浏览器窗口宽度的百分比，确定器窗口宽度的百分比，确定 表格宽度，如输入表格宽度，如输入200200像素。像素。l“边框粗细边框粗细” ” 此文本框用来以像素为单位确定表格边此文本框用来以像素为单位确定表格边框粗细，如输入框粗细，如输入1 1像素。像素。l“单元格边距单元格边距”可以采取默认值。可以采取默认值。l“单元格间距单元格间距” ” 可以采取默认值。可以采取默认值。 “页眉页眉” ” 选项组中各选项的功能如下：选项组中各选项的功能如下：l“无无” ” 不设置页眉。不设置页眉。l“顶部顶部” ” 页眉

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

6、各选项设置完成后，用鼠标单击：各选项设置完成后，用鼠标单击“确定确定”按钮。即会在设计窗口中出现表格。如图、所示。按钮。即会在设计窗口中出现表格。如图、所示。图图11.211.2设计窗口中的表格设计窗口中的表格11.1.311.1.3表格的属性设置面板表格的属性设置面板在在Dreamweaver MX 2004Dreamweaver MX 2004中中, ,可以通过表格的属性可以通过表格的属性设置面板设置表格的各种属性。如图所示。设置面板设置表格的各种属性。如图所示。图图11.3 11.3 表格的属性设置面板表格的属性设置面板表格属性设置面板中各个选项功能如下（表格属性设置面板中各个选项功能如

7、下（1 1）l“表格表格Id” Id” 中的下拉列表框用来为选中表格名称。中的下拉列表框用来为选中表格名称。l“行行(R)” (R)” 此文本框用来为选中表格设定行数。用鼠此文本框用来为选中表格设定行数。用鼠标标 单击文档内任一位置单击文档内任一位置, ,表格自动改变。表格自动改变。l“列列(C)” (C)” 此文本框用来为选中表格设定列数。用鼠此文本框用来为选中表格设定列数。用鼠标标单击文档内任一位置单击文档内任一位置, ,表格自动改变。表格自动改变。l“宽宽(W)” (W)” 此文本框用来为选中表格设定宽度。在文此文本框用来为选中表格设定宽度。在文本本框后的下拉列表中选择所设宽度的单位框后

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

9、用来指定表格相对于同一段落中其他元素的显示位置，使用默认值。段落中其他元素的显示位置，使用默认值。l“左对齐左对齐” ” 沿其他元素的左侧对齐表格。沿其他元素的左侧对齐表格。l“右对齐右对齐” ” 沿其他元素的右侧对齐表格。沿其他元素的右侧对齐表格。l“居中对齐居中对齐” ” 将表格居中。将表格居中。表格属性设置面板中各个选项功能如下（表格属性设置面板中各个选项功能如下（3）l“默认默认” ” 指示浏览器应该使用其默认对齐方式。指示浏览器应该使用其默认对齐方式。l“间距间距(S)” (S)” 此文本框用来指定选中表格的边框距离。此文本框用来指定选中表格的边框距离。 l“边框边框(B)” (B)

10、” 此文本框用来设置选中表格的边框大小。此文本框用来设置选中表格的边框大小。l“类类(C)” (C)” 设置选中表格的设置选中表格的CSSCSS样式。样式。l“背景颜色背景颜色(G)”(G)”设置选中表格的背景颜色设置选中表格的背景颜色, ,可以从颜色选可以从颜色选择器后面的文本框内直接输入。择器后面的文本框内直接输入。l“边框颜色边框颜色(R)”(R)”设置选中表格的边框颜色设置选中表格的边框颜色, ,可以从颜色选可以从颜色选择器后面的文本框内直接输入。择器后面的文本框内直接输入。l“背景图像背景图像(B)” (B)” 可在文本框内输入图像位置和名称可在文本框内输入图像位置和名称, ,将将该

11、图像作为选中表格的背该图像作为选中表格的背 景图像。景图像。11.2 11.2 向表格内添加内容向表格内添加内容在表格的单元格中可以输入任何数据。同时也可以对数在表格的单元格中可以输入任何数据。同时也可以对数据进行常规的编辑操作。据进行常规的编辑操作。操作步骤如下：操作步骤如下：步骤步骤1 1：将光标移到要插入数据的单元格内。：将光标移到要插入数据的单元格内。步骤步骤2 2：直接输入对象：直接输入对象, ,或者将复制的对象粘贴到单元格或者将复制的对象粘贴到单元格中。中。步骤步骤3 3：一个单元格内的内容输入完毕后：一个单元格内的内容输入完毕后, ,可以用可以用TabTab键键将光标移动到下一个

12、单元格将光标移动到下一个单元格, ,以便继续输入，也可以使用以便继续输入，也可以使用鼠标移动光标。鼠标移动光标。11.3 11.3 编辑表格编辑表格11.3.111.3.1选择表格对象选择表格对象11.3.2 11.3.2 调整表格大小调整表格大小11.3.311.3.3调整行和列的大小调整行和列的大小11.3.4 11.3.4 添加及删除行和列添加及删除行和列11.3.5 11.3.5 拆分和合并单元格拆分和合并单元格11.3.611.3.6复制、粘贴及删除单元格复制、粘贴及删除单元格11.3.711.3.7嵌套表格嵌套表格11.3.111.3.1选择表格对象选择表格对象1 1。选择整个表格

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

14、”(S)”命令。命令。l单击某个表格单元格单击某个表格单元格, ,然后选择表下边的倒三角，然后选择表下边的倒三角，出现标题菜单，在标题菜单中选择出现标题菜单，在标题菜单中选择“选择表格选择表格(S)”(S)”。l将光标位于表格外将光标位于表格外, ,按住按住ShiftShift键键, ,然后单击表格中任然后单击表格中任意位置。意位置。l将光标置于表格内任意位置将光标置于表格内任意位置, ,连续两次按下连续两次按下Ctr1+ACtr1+A组组合键。合键。l所选中表格的下边缘和右边缘出现选择柄。如图所选中表格的下边缘和右边缘出现选择柄。如图标题菜单标题菜单若要选择单个或多个行若要选择单个或多个行,

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

16、击已选择单个列。进行拖动以选择多个列。按住进行拖动以选择多个列。按住CtrlCtrl键键, ,则可以选择多个不相则可以选择多个不相邻的表格列。邻的表格列。3.3.选择单元格选择单元格选择单个单元格有如下一些操作方法：选择单个单元格有如下一些操作方法：l将光标放在要选择的单元格内将光标放在要选择的单元格内, ,然后在设计窗口左下然后在设计窗口左下角的标签选择器中选择角的标签选择器中选择标签。标签。l按住按住CtrlCtrl键单击该单元格。键单击该单元格。l将光标放在要选择的单元格内将光标放在要选择的单元格内, ,然后选择然后选择“编辑编辑(E)”|“(E)”|“全选全选(L)”(L)”命令。如果

17、选择了一个单元格后再命令。如果选择了一个单元格后再次选择次选择“编辑编辑(E)”|“(E)”|“全选全选(L)”(L)”命令可以选择整个表命令可以选择整个表格。格。选择一行或多个单元格有如下一些操作方法：选择一行或多个单元格有如下一些操作方法：l从一个单元格拖到另一个单元格。从一个单元格拖到另一个单元格。l在一个单元格中按住在一个单元格中按住CtrlCtrl键的同时单击鼠标键的同时单击鼠标, ,然后按住然后按住 ShiftShift键单击另一个单元格。这两个单元格定义的直线或键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。矩形区域中的所有单元格都将被选中。若要选择

18、不相邻的单元格有如下一些操作方法：若要选择不相邻的单元格有如下一些操作方法：l将光标放在要选择的任一单元格内，按住将光标放在要选择的任一单元格内，按住CtrlCtrl键键的同时单击要选择的单元格。的同时单击要选择的单元格。l在按住在按住CtrlCtrl键的同时单击要选择的单元格。如果键的同时单击要选择的单元格。如果它己经被选中它己经被选中, ,再次单击会将其从选择中删除。再次单击会将其从选择中删除。11.3.2 11.3.2 调整表格大小调整表格大小若要调整表格的大小，先选择该表格。该表格周围若要调整表格的大小，先选择该表格。该表格周围出现选择柄出现选择柄, ,如图。如图。通过拖动表格的一个选

19、择柄来调整表格大小。通过拖动表格的一个选择柄来调整表格大小。标题菜单标题菜单有以下一些操作方法：有以下一些操作方法：l若要在水平方向调整表格大小，拖动右边的选择柄。若要在水平方向调整表格大小，拖动右边的选择柄。l若要在垂直方向调整表格大小，拖动底部的选择柄。若要在垂直方向调整表格大小，拖动底部的选择柄。l若要在两个方向调整表格大小，拖动右下角的选择柄。若要在两个方向调整表格大小，拖动右下角的选择柄。11.3.311.3.3调整行和列的大小调整行和列的大小使用属性面板设置列宽或行高使用属性面板设置列宽或行高, ,操作步骤如下：操作步骤如下：步骤步骤1 1：先选择列或行。：先选择列或行。步骤步骤2

20、 2：再选择属性面板，在：再选择属性面板，在“宽宽(W)”(W)”右边的文本中输右边的文本中输入数字入数字, ,如输入如输入1818。 或在或在“高高(H)”(H)”右边的文本中输入数右边的文本中输入数字，如输入字，如输入2020。按。按TabTab键或键或EnterEnter键确定应用该值。键确定应用该值。11.3.4 11.3.4 添加及删除行和列添加及删除行和列添加单个行或列，有如下一些操作方法：添加单个行或列，有如下一些操作方法：步骤步骤1：选择菜单选择菜单“修改修改(M)”|“(M)”|“表格表格(T)”|“(T)”|“插入插入行行(N)”(N)”命令或命令或“修改修改(M)”|“(

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

22、）”|“|“表格表格(T)”|“(T)”|“插入行或列插入行或列(I)”(I)”命令命令, ,即出现插入即出现插入行或列对话框行或列对话框, ,如图如图11.511.5所示。所示。图图11.511.5插入行或列对话框插入行或列对话框步骤步骤2 2：选中：选中“行行(R)”(R)”或或“列列(C)”(C)”单选按钮单选按钮, ,在在“行数行数(N)”(N)”中输入中输入1 1。步骤步骤3 3：选择位置中的单选按钮。：选择位置中的单选按钮。步骤步骤4 4：单击：单击“确定确定”按钮按钮, ,行或列出现在表格中。行或列出现在表格中。删除某行或列删除某行或列, ,操作步骤如下：操作步骤如下：步骤步骤1

23、 1：单击要删除的行或列中的一个单元格：单击要删除的行或列中的一个单元格, ,然然后选择后选择“修改修改(M)”|“(M)”|“表格表格(T)”|“(T)”|“删除行删除行(D)”(D)”命令或命令或“修改修改(M)”|“(M)”|“表格表格(T)”|“(T)”|“删除列删除列(E)”(E)”命令。命令。步骤步骤2 2：选择完整的一行或列：选择完整的一行或列, ,然后选择然后选择“编辑编辑(E)”|“(E)”|“清除清除(A)”(A)”命令或按命令或按DeleteDelete键。整个行或列即从键。整个行或列即从表格中消失。表格中消失。使用属性面板添加或删除行或列使用属性面板添加或删除行或列选中

24、整个表格。在属性面板中增加或减少行数值以选中整个表格。在属性面板中增加或减少行数值以添加或删除行。它将在表格的底部添加和删除行。增加或添加或删除行。它将在表格的底部添加和删除行。增加或减少列数值以添加或删除列。它将在表格的右边添加和删减少列数值以添加或删除列。它将在表格的右边添加和删除列。除列。11.3.5 11.3.5 拆分和合并单元格拆分和合并单元格1.1.合并单元格合并单元格操作步骤如下：操作步骤如下：步骤步骤1 1：选中要合并的单元格：选中要合并的单元格, ,单元格必须相邻单元格必须相邻, ,不相邻的单元格不能合并不相邻的单元格不能合并, ,如图如图11.611.6所示。所示。 步骤步

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

26、示。图图11.8 11.8 拆分单元格对话框拆分单元格对话框步骤步骤3 3：选中：选中“行行(R)”(R)”单选按钮单选按钮, ,在在“行数行数(N)”(N)”中输入中输入5 5，可以将选中的单元格拆分为，可以将选中的单元格拆分为5 5行；选中行；选中“列列(C)”(C)”单选单选按钮按钮, , 则可以将选中的单元格拆分为多列。则可以将选中的单元格拆分为多列。步骤步骤4 4：单击：单击“确定确定”按钮按钮, ,完成单元格的拆分。完成单元格的拆分。, ,如图如图11.911.9所示所示图图11.9 11.9 按行拆分单元格按行拆分单元格11.3.611.3.6复制、粘贴及删除单元格复制、粘贴及删

27、除单元格剪切或复制表格单元格剪切或复制表格单元格, ,操作步骤如下操作步骤如下: :步骤步骤1 1：选择连续的一个或多个单元格。：选择连续的一个或多个单元格。步骤步骤2 2：选择菜单：选择菜单“编辑编辑(E)”|“(E)”|“剪切剪切(T)”(T)”或或“编辑编辑(E)”|“(E)”|“复制复制(C)”(C)”命令。命令。粘贴表格单元格粘贴表格单元格, ,操作步骤如下：操作步骤如下：步骤步骤1 1：选择要粘贴单元格的位置。：选择要粘贴单元格的位置。步骤步骤2 2：选择菜单：选择菜单“编辑编辑(E)”|“(E)”|“粘贴粘贴(P)”(P)”命令命令或者按或者按Ctrl+VCtrl+V快捷键粘贴。

28、快捷键粘贴。如果要将整个行或列粘贴到现有的表格中如果要将整个行或列粘贴到现有的表格中, ,则这则这些行或列将被添加到该表格中。如果要粘贴单个单元格些行或列将被添加到该表格中。如果要粘贴单个单元格, , 则将替换所选单元格的内容。如果要在表格外进行粘贴则将替换所选单元格的内容。如果要在表格外进行粘贴, ,则这些行、列或单元格用于定义一个新表格。则这些行、列或单元格用于定义一个新表格。删除单元格内容删除单元格内容, ,操作步骤如下操作步骤如下: : 步骤步骤1 1：选择一个或多个单元格。：选择一个或多个单元格。 步骤步骤2 2：选择：选择“编辑编辑(E)”|“(E)”|“清除清除(A)”(A)”命

29、令或按命令或按DeleteDelete键。键。 如果在选择如果在选择“编辑编辑(E)”|“(E)”|“清除清除(A)”(A)”命令或按命令或按DeleteDelete键前，选择了完整的行或列键前，选择了完整的行或列, ,则将从表格中删除整个则将从表格中删除整个行或列行或列, ,而不仅仅是删除它们的内容。而不仅仅是删除它们的内容。删除包含合并单元格的行或列删除包含合并单元格的行或列, ,操作步骤如下：操作步骤如下：步骤步骤1 1：选择行或列。：选择行或列。步骤步骤2 2：选择菜单：选择菜单“修改修改(M)”|“(M)”|“表格表格(T)”|“(T)”|“删除行删除行(N)”(N)”命令或命令或“

30、修改修改(M)”|“(M)”|“表格表格(T)”|“(T)”|“删除列删除列(C)”(C)”命令。命令。11.3.711.3.7嵌套表格嵌套表格嵌套表格是在表格的单元格中再插入另一个表格。嵌套表格是在表格的单元格中再插入另一个表格。在对嵌套表格进行格式设置时在对嵌套表格进行格式设置时, ,其宽度受它所在单元格的其宽度受它所在单元格的宽度的限制。宽度的限制。 在表格单元格中嵌套表格在表格单元格中嵌套表格, ,操作步骤如下操作步骤如下: :步骤步骤1 1：单击现有表格中的一个单元格。：单击现有表格中的一个单元格。步骤步骤2 2：选择菜单：选择菜单“插入插入(I)”|“(I)”|“表格表格(T)”(

31、T)”命令命令, ,弹弹出表格对话框出表格对话框, ,如图如图11.1011.10所示。所示。图图11.10 11.10 表格对话框表格对话框步骤步骤3 3：输入行数：输入行数2 2；列数；列数2 2。 步骤步骤4 4：单击：单击“确定确定”按钮按钮, ,两行两列的表格插入到两行两列的表格插入到现有表格中现有表格中, , 如图如图11.1111.11所示。所示。图图11.11 11.11 嵌套表格嵌套表格11.4 11.4 使用表格布局网页使用表格布局网页11.4.1 11.4.1 打开设计窗口打开设计窗口14.4.2 14.4.2 绘制表格草图绘制表格草图11.4.3 11.4.3 插入和调

32、整表格插入和调整表格11.4.4 11.4.4 向表格添加内容向表格添加内容11.4.511.4.5导入和导出表格式数据导入和导出表格式数据11.4.1 11.4.1 打开设计窗口打开设计窗口选择菜单选择菜单“文件文件(F)”|“(F)”|“新建新建(N)”,(N)”,打开设计窗打开设计窗口，如图口，如图11.1211.12所示。所示。图图11.12 11.12 设计窗口设计窗口14.4.2 14.4.2 绘制表格草图绘制表格草图在插入表格之前，首先画一个草图，安排好各在插入表格之前，首先画一个草图，安排好各个表格中的内容，避免在插入元素时产生许多麻烦。个表格中的内容，避免在插入元素时产生许多

33、麻烦。如图如图11.1311.13所示。所示。图图11.13 11.13 表格草图表格草图11.4.3 11.4.3 插入和调整表格插入和调整表格操作步骤如下：操作步骤如下：步骤步骤1 1：选择常用面板中的：选择常用面板中的“表格表格”按钮按钮, ,显示显示表格对话框，如图表格对话框，如图11.1411.14所示。所示。步骤步骤2 2：在弹出的表格对话框中：在弹出的表格对话框中, ,输入行数输入行数3,3,列数列数3 3。图图11.14 表格对话框表格对话框步骤步骤3 3：依照草图编辑表格，将表格调整好，将：依照草图编辑表格，将表格调整好，将“单元格填充单元格填充”、“单元格间距单元格间距”和

34、和“边框边框”属性值均设属性值均设置为置为0,0,这里我们设置表格宽度为这里我们设置表格宽度为200200像素像素, ,并将表格居中显并将表格居中显示示, ,当然也可以将表格设置为当然也可以将表格设置为100%,100%,这样表格将铺满整个屏这样表格将铺满整个屏幕。调整后的表格如图幕。调整后的表格如图11.1511.15所示。所示。图图11.15 11.15 调整后的表格调整后的表格11.4.4 11.4.4 向表格添加内容向表格添加内容1. 1. 添加文字和图形添加文字和图形操作步骤如下：操作步骤如下：步骤步骤1 1：打开文件：打开文件D:D:渊博书屋渊博书屋Untitled-6.tmlUn

35、titled-6.tml。步骤步骤2 2：选择：选择D:D:渊博书屋渊博书屋image1image1文件夹中的素材。文件夹中的素材。步骤步骤3 3：按第：按第1010章所讲的方法，分别向表格中插入章所讲的方法，分别向表格中插入文字，图形。如图文字，图形。如图11.1611.16所示。所示。图图11.1611.16名字为名字为Untitled-6.tmlUntitled-6.tml的网页的网页 2.2.插入导航图插入导航图导航图主要用于制作网页主题的链接，以便浏览导航图主要用于制作网页主题的链接，以便浏览者能够快速查找有关的网页，并随时可以切换网页主题者能够快速查找有关的网页，并随时可以切换网页

36、主题来浏览不同的网页，它是在页面中插入一排垂直或水平来浏览不同的网页，它是在页面中插入一排垂直或水平的导航按钮。经常使用的导航图有的导航按钮。经常使用的导航图有4 4种：种：l状态图像状态图像l鼠标经过图像鼠标经过图像l按下图像按下图像l按下时鼠标经过图像按下时鼠标经过图像状态图像状态图像是一种还未使用鼠标单击图像或与元素交互时是一种还未使用鼠标单击图像或与元素交互时显现的图像。显现的图像。插入插入“状态图像状态图像”的操作步骤如下：的操作步骤如下：步骤步骤1 1：选择菜单：选择菜单“插入插入(I)”|“(I)”|“图像对象图像对象(G)”|“(G)”|“导导航条航条(G)”(G)”命令，如图

37、命令，如图11.1711.17所示。所示。图图11.17 11.17 插入导航条对话框插入导航条对话框 步骤步骤2 2：在图：在图11.1711.17中选择中选择“状态图像状态图像”，通过，通过“浏浏览览”查找图像文件查找图像文件“图书图书6”6”，如图，如图11.1811.18所示。所示。图图11.18 11.18 选择状态图像选择状态图像步骤步骤3 3：在：在“替换文本替换文本”中输入中输入“状态图像状态图像”。步骤步骤4 4：选中：选中“选项选项”中的中的“预先载入图像预先载入图像”按钮。按钮。步骤步骤5 5：单击：单击“确定确定”按钮，完成制作过程，如图按钮，完成制作过程，如图11.1

38、911.19所示。所示。步骤步骤6 6：在浏览器中浏览，即可看到：在浏览器中浏览，即可看到“状态图像状态图像”。 状态图像状态图像图图11.19 插入状态图像插入状态图像鼠标经过图像鼠标经过图像是一种当鼠标指针移动到状态图像时显现的图像。是一种当鼠标指针移动到状态图像时显现的图像。插入插入“鼠标经过图像鼠标经过图像”操作步骤如下：操作步骤如下：步骤步骤1 1：将光标定位于图像插入位置。：将光标定位于图像插入位置。步骤步骤2 2：选择菜单：选择菜单“插入插入(I)”|“(I)”|“图像对象图像对象(G)”|“(G)”|“鼠标鼠标经过图像经过图像(R)”(R)”命令，如图命令，如图11.2011.

39、20所示。所示。 图图11.20 11.20 插入鼠标经过图像对话框插入鼠标经过图像对话框 步骤步骤3 3：选择：选择“原始图像原始图像”，通过浏览选择文件，通过浏览选择文件“梦幻小说梦幻小说.gif”.gif”。步骤步骤4 4：选择：选择“鼠标经过图像鼠标经过图像”，通过浏览选择，通过浏览选择文件文件“骗鲜记骗鲜记.jpg”.jpg”。步骤步骤5 5：在：在“替换文本替换文本”中输入中输入“鼠标经过图鼠标经过图像像”。步骤步骤6 6：单击：单击“确定确定”按钮，完成制作过程，如图按钮，完成制作过程，如图11.2111.21所示。所示。步骤步骤7 7：在浏览器中浏览，即可看到：在浏览器中浏览，

40、即可看到“鼠标经过图像鼠标经过图像”和和“替换文本替换文本”。鼠标经过图像鼠标经过图像图图11.21插入鼠标经过图像插入鼠标经过图像按下图像按下图像是被鼠标单击后显现的图像。是被鼠标单击后显现的图像。“按下图像按下图像”的操作步骤如下：的操作步骤如下：步骤步骤1 1：选择菜单：选择菜单“插入插入(I)”|“(I)”|“图像对象图像对象(G)”|“(G)”|“导航条导航条(G)”(G)”命令。命令。步骤步骤2 2：在图：在图11.1711.17中选择中选择“按下图像按下图像”，通过浏览，通过浏览选择文件选择文件“图书图书3”3”。步骤步骤3 3：在：在“替换文本替换文本”中输入中输入“按下图像按

41、下图像”。步骤步骤4 4：点击：点击“选项选项”中的中的“预先载入图像预先载入图像”按钮。按钮。步骤步骤5 5：单击：单击“确定确定”按钮，完成制作过程。按钮，完成制作过程。因为在一个网页中只能够有一个导航条，所以因为在一个网页中只能够有一个导航条，所以“按按下图像下图像”的图示没有插入。的图示没有插入。按下时鼠标经过图像按下时鼠标经过图像是在图像被单击后是在图像被单击后, ,当鼠标指针移动到按下图像上时显当鼠标指针移动到按下图像上时显现的图像。现的图像。“按下时鼠标经过图像按下时鼠标经过图像” ” 的操作步骤如下：的操作步骤如下：步骤步骤1 1：选择菜单：选择菜单“插入插入(I)”|“(I)

42、”|“图像对象图像对象(G)”|“(G)”|“导导航条航条(G)”(G)”命令。命令。步骤步骤2 2：在图：在图11.1711.17中选择中选择“按下时鼠标经过图像按下时鼠标经过图像”，通，通过浏览选择文件过浏览选择文件“图书图书4”4”。步骤步骤3 3：在：在“替换文本替换文本”中输入中输入“按下时鼠标经过图按下时鼠标经过图像像”。步骤步骤4 4：点击：点击“选项选项”中的中的“预先载入图像预先载入图像”按钮。按钮。步骤步骤5 5：单击：单击“确定确定”按钮，完成制作过程。按钮，完成制作过程。步骤步骤6 6：在浏览器中浏览，即可看到：在浏览器中浏览，即可看到“按下时鼠标经过图按下时鼠标经过图

43、像像”和和“替换文本替换文本”。如图。如图11.2211.22所示。所示。图图11.2211.22浏览器中的浏览器中的“按下时鼠标经过图像按下时鼠标经过图像”按下时鼠标经过图像按下时鼠标经过图像11.4.511.4.5导入和导出表格式数据导入和导出表格式数据1.1.导入表格数据导入表格数据以前保存的表格数据或其他文本数据都可以重新以前保存的表格数据或其他文本数据都可以重新以表格的形式导入到文档中。以表格的形式导入到文档中。导入表格数据导入表格数据, ,操作步骤如下操作步骤如下: :步骤步骤1 1：在：在Dreamweaver MX 2004Dreamweaver MX 2004设计窗口中选择设

44、计窗口中选择“文件文件(F)”|“(F)”|“导入导入(I)”|“Excel(I)”|“Excel文档文档”命令命令, , 显示打开显示打开文件对话框文件对话框, ,如图如图11.2311.23所示。所示。 图图11.2311.23打开文件对话框打开文件对话框 步骤步骤2 2：在对话框中选择需要导入的文件：在对话框中选择需要导入的文件book1.xlsbook1.xls。步骤步骤3 3：单击：单击“打开打开”按钮，即可完成对数据表格按钮，即可完成对数据表格的导入。如图的导入。如图11.2411.24所示。所示。图图11.24 11.24 导入的导入的ExcelExcel表格数据表格数据2.2.

45、导出表格式数据导出表格式数据在在Dreamweaver MX 2004Dreamweaver MX 2004中中, ,除了可以导入表格式数除了可以导入表格式数据外据外, ,还可以将还可以将Dreamweaver MX 2004Dreamweaver MX 2004中建立的表格保存中建立的表格保存到到一个文本文件中一个文本文件中, ,以便以后需要时使用。以便以后需要时使用。导出表格式数据操作步骤如下导出表格式数据操作步骤如下: :步骤步骤1 1：选择网页中的数据表格：选择网页中的数据表格, ,如图如图11.2511.25所示。所示。图图11.25 11.25 网页中的数据表格网页中的数据表格步骤

46、步骤2 2：将光标放在表格中或选中该表格。：将光标放在表格中或选中该表格。步骤步骤3 3：选择：选择“文件文件(F)”|“(F)”|“导出导出(E)”|“(E)”|“表格表格(T)”(T)”命令命令, ,出现如图出现如图11.2611.26所示的导出表格对话框。所示的导出表格对话框。图图11.26 11.26 导出表格对话框导出表格对话框步骤步骤4 4：在：在“定界符定界符”下拉列表框中选择表格数据下拉列表框中选择表格数据输出到文本文件后的分隔符号输出到文本文件后的分隔符号, ,默认的是默认的是Tab,Tab,这里选择逗这里选择逗号号, ,步骤步骤5 5：在：在“换行符换行符”下拉列表框中选择

47、数据输出下拉列表框中选择数据输出到文本文件后的换行方式到文本文件后的换行方式, ,这里选择这里选择WindowsWindows， 表示按表示按WindowsWindows系统格式换行。系统格式换行。 步骤步骤6 6：设置完成后：设置完成后, ,单击单击“导出导出”按钮按钮, ,弹出表格弹出表格导出为对话框导出为对话框, ,在表格导出为对话框中输入一个文件名在表格导出为对话框中输入一个文件名dcbgdcbg, ,可以不输入扩展名可以不输入扩展名, ,也可以使用一个文本类型的扩展也可以使用一个文本类型的扩展名名, ,然后单击然后单击“保存保存”按钮即可。如图按钮即可。如图11.2711.27所示。所示。图图11.27 11.27 表格导出为对话框表格导出为对话框导出后导出后, ,用记事本打开该文件用记事本打开该文件, ,可以看到导可以看到导出的文件出的文件, , 如图如图11.2811.28所示。所示。图图11.28 11.28 导出到记事本中的表导出到记事本中的表