网页设计与制作实用技术CH4

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1. 创建表格的方法创建表格的方法2. 编辑表格的方法编辑表格的方法3. 表格的排序方法表格的排序方法4. 表格的格式化方法表格的格式化方法5. 设置表格属性的方法设置表格属性的方法6. 用表格设计页面布局的方法用表格设计页面布局的方法 4.1 利用利用Dreamweaver MX处理网页表格处理网页表格 4.1.1 创建表格创建表格 1新建表格新建表格 利用利用Dreamweaver MX创建新表格时，首先打开插创建新表格时，首先打开插入入“常用常用”面板，然后可以通过下列四种方式中的任面板，然后可以通过下列四种方式中的任意一

2、种：意一种：（1）在插入）在插入“常用常用”面板上，单击插入表格按钮面板上，单击插入表格按钮 。（2）通过主窗口的菜单）通过主窗口的菜单“插入插入”|“表格表格”命令。命令。（3）使用快捷组合键）使用快捷组合键“Ctrl+Alt+T”。 （4）在插入）在插入“常用常用”面板上，拖动表格面板上，拖动表格 按钮到主窗按钮到主窗口的工作区中。口的工作区中。 执行完上述任何一种操作，都可以看到执行完上述任何一种操作，都可以看到如图所示如图所示的的“插入表格插入表格”对话框。对话框。 行数：初次指定表格的总行数。行数：初次指定表格的总行数。 列数：初次指定表格的总列数。列数：初次指定表格的总列数。 单元

3、格填充：指定单元格的大小，以像素为单位。单元格填充：指定单元格的大小，以像素为单位。 单元格间距：指定单元格之间的距离，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。 宽度：指定表格的宽度，以百分比或像素为单位（百宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽分比用于根据浏览器窗口的大小来自动调整表格的宽度）。度）。 边框：指定表格边界的宽度，以像素为单位（如果在边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为浏览器窗口中不显示表格的边框，则定义为0 0）。）。2导入表格数据文件导入表格数据文件

4、在在DreamweaverDreamweaver MX MX中，利用插入列表数据命令中，利用插入列表数据命令可以很容易把表格数据加入到网页中。在插入外部数可以很容易把表格数据加入到网页中。在插入外部数据前，首先要将表格数据文件转换成据前，首先要将表格数据文件转换成 .txt.txt（文本文（文本文件）格式，并且该文件中的数据要带有分隔符，如逗件）格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等，但加入到号、分号、冒号等，但加入到DreamweaverDreamweaver MX MX中的数中的数据并不会出现分隔符，且会自动生成表格。据并不会出现分隔符，且会自动生成表格。 要加入外部数

5、据，选择如下的任何一种操作：要加入外部数据，选择如下的任何一种操作：（1 1）选择）选择“文件文件”| |“导入导入”| |“表格式数据表格式数据”命令。命令。（2 2）选择）选择“插入插入”| |“表格对象表格对象”| |“导入表格式数据导入表格式数据”命令。命令。（3 3）单击插入）单击插入“常用常用”面板上的面板上的“表格数据表格数据”按按钮钮 。 4.1.2 编辑表格编辑表格 （1）如果要选择整个表格，可进行如下的操作之一：）如果要选择整个表格，可进行如下的操作之一： 将光标置于表格中的某个单元格中，选择将光标置于表格中的某个单元格中，选择“修修改改”|“表格表格”|“选择表格选择表格

6、”命令。命令。 将光标置于表格中的某个单元格中，再按两次组合键将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。 将光标置于表格中的某个单元格中，单击鼠标右键，将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”|“选择表格选择表格”命令。命令。 将光标置于表格的尾部（在表格的同一行，但不在表将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。格之内），向左拖动鼠标。 单击表格的边线。单击表格的边线。1选择表格选择表格 （2）选择单个单元格的方法有以下几种：）选择单个单元格的方法有以下几种： 将光标置于所要选择的

7、单元格中，按一次组合键将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。 将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，向右拖动鼠标。 将光标置于所要选择的单元格中，选择将光标置于所要选择的单元格中，选择“编辑编辑”|“全全选选”命令。命令。 按住按住Ctrl键，单击所要选择的单元格，再单击一次则键，单击所要选择的单元格，再单击一次则取消对单元格的选择。取消对单元格的选择。（3）选择多个单元格的方法有以下几种：）选择多个单元格的方法有以下几种：按住按住Ctrl键，单击所要选择的所有单元格。键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个

8、单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光如果要选择整行，将光标置于该行的左边缘，当光标变成标变成图标时单击鼠标左键。图标时单击鼠标左键。如果要选择整列，将光标置于该列的上边缘，当光如果要选择整列，将光标置于该列的上边缘，当光标变成标变成图标时单击鼠标左键。图标时单击鼠标左键。（4）选择的全部单元格的方法有以下几种：）选择的全部单元格的方法有以下几种：将光标置于第将光标置于第1个单元格中，并拖动鼠标至最后一个个单元格中，并拖动鼠标至最后一个单元格。单元格。将光标置于第将光标置于第1个单元格中，按住个单元格中，按住Shift键，再单击最键，

9、再单击最后一个单元格。后一个单元格。将光标置于第将光标置于第1行的左边缘，当光标变成行的左边缘，当光标变成图标时，图标时，向下拖动鼠标至最后一行。向下拖动鼠标至最后一行。 将光标置于第将光标置于第1列的上边缘，当光标变成列的上边缘，当光标变成图标时，图标时，向右拖动鼠标至最后一列。向右拖动鼠标至最后一列。 （1）在现有的表格中插入单元行，可以选择以下的操）在现有的表格中插入单元行，可以选择以下的操作之一：作之一：将光标移到要插入单元行的下一行，选择将光标移到要插入单元行的下一行，选择“修修改改”|“表格表格”|“插入行插入行”命令。命令。将光标移到要插入单元行的下一行，按组合键将光标移到要插入

10、单元行的下一行，按组合键“Ctrl+M”。 将光标移到要插入单元行的下一行，单击鼠标右键，将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”|“插入行插入行”命令。命令。 2添加添加/删除行列删除行列 （2）在现有的表格中插入单元列，可以选择以上的操）在现有的表格中插入单元列，可以选择以上的操作之一：作之一：将光标移到在插入单元列的右边一列，选择将光标移到在插入单元列的右边一列，选择“修修改改”|“表格表格”|“插入列插入列”命令。命令。将光标移到要插入单元列的右边一列，按组合键将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift

11、+A”。将光标移到要插入单元列的右边一列，单击鼠标右将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择键，在弹出的快捷菜单中选择“表格表格”|“插入列插入列”命命令。令。（3）如果想在现有的表格中添加多行或多列，可执行）如果想在现有的表格中添加多行或多列，可执行以下操作：以下操作： 首先将光标移到要插入行或列附近的单元格中，首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择单击鼠标右键，在弹出的下拉菜单中选择“表表格格”|“插入行或列插入行或列”命令，或是选择命令，或是选择“修改修改”|“表表格格”|“插入行或列插入行或列”命令，将弹出如图命令，

12、将弹出如图4-5所示的所示的“插入行或列插入行或列”对话框。在此对话框中进行相关的设对话框。在此对话框中进行相关的设置，然后单击置，然后单击“确定确定”按钮，设置的多列或多行将插按钮，设置的多列或多行将插入到页面中。入到页面中。 （4）删除整行）删除整行/整列，可以采用下列办法之一：整列，可以采用下列办法之一： 先选择欲删除的整行或整列，直接按先选择欲删除的整行或整列，直接按Del键，即可删键，即可删除。除。 先将光标移到要删除的行或列中，选择先将光标移到要删除的行或列中，选择“修改修改”|“表表格格”|“删除行删除行”或或“删除列删除列”命令。命令。 将光标移到要删除的行或列中，单击鼠标右键

13、，在将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择弹出的快捷菜单中选择“表格表格”|“删除行删除行”或或“删删除列除列”命令。命令。 （1）设置表格的宽度及高度）设置表格的宽度及高度 在在Dreamweaver MX中，修改表格的大小有以下中，修改表格的大小有以下两种方法。两种方法。 通过鼠标拖曳法可以粗略地调整表格的大小。通过鼠标拖曳法可以粗略地调整表格的大小。 通过通过“表格属性表格属性”对话框可以精确地调整表格的大对话框可以精确地调整表格的大小。小。 在创建表格时，可以通过表格对话框来设置表格在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要

14、设置表格的的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。高度，可以通过表格属性面板来确定。 3修改表格大小修改表格大小 （2）设置单元格的宽度及高度）设置单元格的宽度及高度 在默认情况下，单元格的宽度是随表格的宽度而在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的每一个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格高度，则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变

15、单元格默认的宽的高度相同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的中，此时属性面板显示单元格属性。在属性面板上的“宽宽”或或“高高”文本框中输入适当的数值即可。但单文本框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百元格宽度与高度的单位只可以使用像素，不能使用百分比。分比。 4合并合并/拆分单元格拆分单元格 （1）合并单元格）合并单元格 首先在表格中选择需合并的单元格，属性面板变首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，

16、然后选择下列操作之一：成单元格属性面板，然后选择下列操作之一： 选择选择“修改修改”|“表格表格”|“合并单元格合并单元格”命令。命令。 单击鼠标右键，在弹出的快捷菜单中选择单击鼠标右键，在弹出的快捷菜单中选择“表表格格”|“合并单元格合并单元格”命令。命令。 按组合键按组合键“Ctrl+Alt+M”。 单击单元格属性面板上的合并单元格图标单击单元格属性面板上的合并单元格图标 。 （2）拆分单元格）拆分单元格首先在表格中选择需拆分的单元格，选择下列任何一种首先在表格中选择需拆分的单元格，选择下列任何一种操作：操作： 选择选择“修改修改”| |“表格表格”| |“拆分单元格拆分单元格”命令。命令

17、。 单击鼠标右键，在弹出的下拉菜单中选择单击鼠标右键，在弹出的下拉菜单中选择“表表格格”| |“拆分单元格拆分单元格”命令。命令。 按组合键按组合键“Ctrl+Alt+SCtrl+Alt+S”。 单击属性面板上的拆分单元格图标单击属性面板上的拆分单元格图标 。 在在“拆分单元格拆分单元格”对话框中，可以选择拆分成行对话框中，可以选择拆分成行和列以及行和列以及行/ /列的数量。列的数量。4.1.3 表格属性的设置表格属性的设置 要将表格背景设为单一的颜色，首先选择整个要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上表格，再单击属性面板上“背景颜色背景颜色”后面的颜后面的颜色框，在弹

18、出的调色板中选择颜色，或者是在后色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面为表格的背景，首先选择整个表格，再在属性面板上的板上的“背景图像背景图像”文本框中输入图像所在的路文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。框中选择图像文件。 1设置表格的背景设置表格的背景 5在表格中添加文字和图片在表格中添加文字和图片 （1 1）在表格中添加文字）在表格中添加文字 在上图中的表格内按要求输入文字

19、，调整文在上图中的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。字的字号、字体、对齐方式等。 （2 2）在表格中插入图片）在表格中插入图片 选中要插入图片的单元格，选择选中要插入图片的单元格，选择“插入插入”| |“图图像像”菜单命令，打开菜单命令，打开“选择图像源选择图像源”对话框，对话框，如如图所示图所示； 在对话框中选择图像，选中图像文件之后，单在对话框中选择图像，选中图像文件之后，单击击“确认确认”按钮，图片即插入到相应的单元格里。按钮，图片即插入到相应的单元格里。 2设置表格的边框颜色和宽度设置表格的边框颜色和宽度 设置表格的边框颜色和宽度时，必须指定表设置表格的边框颜色和

20、宽度时，必须指定表格的边框线的宽度不为格的边框线的宽度不为0。 要为表格的边框指定颜色和宽度，可按如下步要为表格的边框指定颜色和宽度，可按如下步骤进行。骤进行。（1 1）选择表格，单击其属性面板上）选择表格，单击其属性面板上“边框颜色边框颜色”的的颜色框颜色框 ，在弹出的调色板中选择颜色，或者是，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。表格的边框添加颜色。 （2 2）在表）在表格格属性面板上的属性面板上的“边框边框”文本框中输入文本框中输入边框的宽度数值。边框的宽度数值。 在在Dreamweaver

21、Dreamweaver MX MX中可以实现按数字的排序和中可以实现按数字的排序和按字母的排序，具体操作方法如下：按字母的排序，具体操作方法如下： （1 1）单击表格中的任一单元格，执行主菜单中的）单击表格中的任一单元格，执行主菜单中的“命令命令”|“|“排序表格排序表格”命令，打开命令，打开 “ “排序表格排序表格”对话框，对话框，如图所示如图所示。（2 2）在）在“排序按排序按”下拉列表框中选择要排序的列下拉列表框中选择要排序的列（第一关键字），在（第一关键字），在“顺序顺序”下拉列表框中选择所下拉列表框中选择所需顺序。需顺序。（3 3）在）在“再按再按”下拉列表框中选择要进行次级排序下拉

22、列表框中选择要进行次级排序的顺序。的顺序。（4 4）单击）单击“确定确定”按钮完成设置。按钮完成设置。 4.1.4 表格的排序表格的排序 Dreamweaver Dreamweaver MX MX预置了十几种表格设计，使用预置了十几种表格设计，使用这些预置的表格样式格式化表格，可以大大提高表这些预置的表格样式格式化表格，可以大大提高表格的设计效率。格的设计效率。 格式化表格的具体操作方法如下：格式化表格的具体操作方法如下： 选择一个表格，然后执行主菜单中的选择一个表格，然后执行主菜单中的“命命令令”|“|“格式化表格格式化表格”命令，打开命令，打开如图所示如图所示的的“格格式化表格式化表格”对

23、话框。从中选择一种模板方案，再对对话框。从中选择一种模板方案，再对各选项进一步自定义设置，然后应用于自己所设计各选项进一步自定义设置，然后应用于自己所设计的表格中。的表格中。 4.1.5 表格的格式化表格的格式化 Dreamweaver Dreamweaver MX MX提供了一种新的网页排版视提供了一种新的网页排版视图图布局视图（布局视图（Layout ViewLayout View），在这种视图模），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，从而可以像在一张白纸上用笔来规划网页的布局，并可

24、在布局单元格中插入文本和图像，通过移动布并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的局表格和布局单元格的位置来精确地定位网页上的文本和图像。文本和图像。 步骤如下：步骤如下： 1 1打开打开“布局视图布局视图”面板面板 2. 2. 绘制布局表格绘制布局表格 4.1.6 用表格进行页面布局用表格进行页面布局 在在HTMLHTML中一个普通的表格应包括以下标记符：中一个普通的表格应包括以下标记符：1TABLE TABLE TABLE标记符用于定义整个表格，表格内的所标记符用于定义整个表格，表格内的所有内容都应该位于有内容都应该位于和和之间。之间。 2CA

25、PTION 如果表格需要标题，那么就应该使用如果表格需要标题，那么就应该使用CAPTIONCAPTION标记符将表格标题包括在标记符将表格标题包括在和和之间。之间。CAPTIONCAPTION标记符的格式为：标记符的格式为： CAPTION align= 标题标题 /CAPTION 4.2 利用利用HTML处理网页表格处理网页表格 4.2.1 表格的基本构成表格的基本构成 3TR TR TR标记符用于定义表格的行，对于每一个表格行，标记符用于定义表格的行，对于每一个表格行，都对应一个都对应一个TRTR标记符。标记符。TRTR标记符的结束标记符可以省标记符的结束标记符可以省略。略。 4TD和和T

26、H 在表格行中的每个单元格，都对应于一个在表格行中的每个单元格，都对应于一个TDTD标标记符或者记符或者THTH标记符，用于标记表格的内容，其中可以标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。包括文字、图像或其他对象。TDTD与与THTH的功能和用法几的功能和用法几乎完全相同，唯一不同之处在于乎完全相同，唯一不同之处在于TDTD表示普通表格数据，表示普通表格数据，而而THTH表示表格的行列标题数据。表示表格的行列标题数据。TDTD和和THTH的结束标记符的结束标记符都可以省略，并且可以不包括任何内容。都可以省略，并且可以不包括任何内容。 1合并单元格合并单元格 4.2.2 表

27、格的编辑及属性设置表格的编辑及属性设置 在在和和标记内使用标记内使用rowspanrowspan属性可以进行属性可以进行行合并，行合并，rowspanrowspan的取值表示垂直方向上合并的行数。的取值表示垂直方向上合并的行数。 在在和和标记内使用标记内使用colspancolspan属性可以进行属性可以进行列合并，列合并，colspancolspan的取值表示水平方向上的合并的列的取值表示水平方向上的合并的列数。数。 在在TABLETABLE标记内使用标记内使用frameframe、rulesrules和和borderborder属性属性可以设置表格的边框和单元格分隔线。可以设置表格的边框和

28、单元格分隔线。 表格边框表示表格最外层的四条框线，可以用表格边框表示表格最外层的四条框线，可以用frameframe属性进行控制；属性进行控制；rulesrules属性用于控制是否显示属性用于控制是否显示单元格之间的分隔线；单元格之间的分隔线；borderborder属性用于设置边框的属性用于设置边框的宽度，其值为像素数。如果设置宽度，其值为像素数。如果设置border=0border=0，则意，则意味着味着frame=voidframe=void，rules= none rules= none 。 2边框与分隔线边框与分隔线 在在TABLETABLE标记符中使用标记符中使用cellspacingcellspacing属性可以控属性可以控制单元格之间的空白，使用制单元格之间的空白，使用cellpaddingcellpadding属性可以属性可以控制表格分隔线和数据之间的距离，这两个属性之控制表格分隔线和数据之间的距离，这两个属性之间的取值通常采用像素数。间的取值通常采用像素数。 3