1、1 1第14章 表格在网页中的应用14.1 创建和编辑表格创建和编辑表格14.2 使用其他程序创建的数据表格使用其他程序创建的数据表格14.3 设计页面布局设计页面布局本章小结本章小结2 2表格是现代网页制作的一个重要组成部分，表格之所以重要是因为表格可以实现网页的精确排版和定位。表格是由许多单元格构成的，它能够以有序、整洁的方式组织数据。在Dreamweaver中对表格的操作主要包括：表格的创建和编辑以及利用表格进行页面布局。3 3表格横向叫行，纵向叫列，行列交叉部分叫做单元格。单元格中的内容和边框之间的距离叫边距，单元格和单元格之间的距离叫间距。14.1 创建和编辑表格创建和编辑表格4 4
2、14.1.1 新建表格如果要在网页中新建表格，可在插入栏“常规”标签中选择按钮或执行“插入表格”菜单命令，打开“表格”对话框(如图14-1所示)，然后在“表格”对话框中分别设置“表格大小“、“页眉”和“辅助功能”。5 5图14-1 “表格”对话框6 6(1)在“表格大小”栏设置如下选项：“行数”：指定表格的行数。“列数”：指定表格的列数。“表格宽度”：指定表格的宽度，单位可以是像素或百分比。按像素定义的表格大小是固定的，而按百分比定义的表格会按照浏览器的大小而变化。“边框粗细”：指定表格边框线的宽度。“单元格边距”：指定单元格中的内容与边框之间的距离。7 7“单元格间距”：指定单元格和单元格之
3、间的距离。(2)在“页眉”栏定义页眉，可以在“无”、“左”、“顶部”和“两者”四种页眉样式中选择一种(如图14-1所示)。(3)在“辅助功能”栏中包括如下选项：“标题”：指定表格的标题。“对齐标题”：定义表格标题的对齐方式。“摘要”：对表格进行注释。如果将“行数”设为2，“列数”设为2，“表格宽度”设为200像素，“边框粗细”设为1像素，其他值均为默认值，单击“确定”按钮，即可得到如图14-2所示的表格。8 8图14-2 表格示例9 914.1.2 编辑表格 在页面中创建表格的基本结构后，可对该表格进行各种操作，即编辑表格。1.选择表格及单元格 要对表格进行编辑，必须遵循先选定后操作的原则。表
4、格和单元格的选取方法比较多。(1)如果要选择整个表格，可执行如下操作之一：将光标置于表格的某个单元格中，执行“修改表格选择表格”命令。10 10 单击状态栏上的标记(如图14-2所示)。将光标置于表格的某个单元格中，按组合键Ctrl+A两次。将光标置于表格的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择执行“表格选择表格”命令。用鼠标单击表格的边线。11 11(2)如果要选择单个单元格，可执行如下操作之一：将光标置于所要选择的单元格中，按组合键Ctrl+A一次。单击状态栏上的标记。将光标置于待选择的单元格中，向右拖动鼠标。按住Ctrl键，单击要选择的单元格，若再单击一次则可取消对该单元格的
5、选择。12 12(3)如果要选择多个单元格，可执行如下操作之一：按住Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。(4)如果要选择一行，可执行如下操作之一：将光标置于该行的左侧，当光标变成向右箭头时单击鼠标左键。单击状态栏上的标记。(5)如果要选择一列，可执行如下操作之一：将光标置于该列的上方，当光标变成向下箭头时单击鼠标左键。在待选行上按住鼠标左键向下拖移。13 132.修改表格属性和单元格属性(1)表格整体属性设置。选中一个表格后，可以通过如图14-3所示的“属性”面板来更改表格属性。图14-3 表格“属性”面板14 14“表格Id”：在“表格Id”文
6、本框中指定表格的名称。“行”：指定表格的行数。“列”：指定表格的列数。“宽”：指定表格的宽度，可选择以“像素”为单位，也可以选择以“%”为单位。“高”：指定表格的高度。“填充”：指定单元格中内容与边框之间的距离。“间距”：指定表格中单元格与单元格之间的间距。“对齐”：指定表格的对齐方式，可选的对齐方式有“默认”、“左对齐”、“居中对齐”和“右对齐”，默认的对齐方式一般为左对齐。15 15“边框”：设置表格边框的宽度，若设置为“0”，则表示没有边框。“背景颜色”：设置表格的背景颜色。“背景图像”：为表格指定一个背景图像，可以在文本框中输入图像文件名或者单击文件夹图标指定所需的图像文件。“边框颜色
7、”：设置表格边框的颜色。16 1617 17提示：如使用表格进行页面布局，应将表格的边框宽度设置为0；如果要查看单元格和表格的边界，执行“查看可视化助理表格边框”命令。(2)单元格属性设置。把光标移动到某个单元格内，并利用如图14-4所示的单元格“属性”面板对单元格的属性进行设置。18 18图14-4 单元格“属性”面板19 19“水平”：设置单元格内元素的水平排版方式，是居左、居右或是居中。“垂直”：设置单元格内的垂直排版方式，是顶端对齐、底端对齐或是居中对齐。“高”和“宽”：分别用来设置单元格的宽度和高度。“不换行”：阻止单元格中较长的文本自动换行。“标题”：指定所选的单元格成为标题单元格
8、，标题单元格内的文字自动以标题格式显示。2020“背景”：指定表格的背景图像，可以在文本框中输入图像文件名或者单击文件夹图标指定图像文件所在的位置。“背景颜色”：设置表格的背景颜色。“边框”：设置表格边框的颜色。3.插入及删除行或列(1)插入行或列。若要在表格中插入一行或在左侧插入一列，21 21单击该表格中的一个单元格，执行“修改表格插入行”命令或“修改表格插入列”命令，打开“插入行或列”对话框(如图14-5所示)；在该对话框中选择“行”或“列”，并“行数”文本框中输入1，“位置”选择“所选之上”，即可在该单元格的上方或左侧插入一行或一列。2222图14-5 “插入行或列”对话框2323如果
9、在“插入行或列”对话框中的“行数”文本框中指定一个大于1的数，可插入多行或多列，插入多行或多列时的其他设置和插入一行或一列时的设置方法相同。(2)删除行或列。方法一：单击要删除的行或列中的某一个单元格，执行“修改表格删除行”或“修改表格删除列”命令。方法二：选择完整的一行或列，执行“编辑清除”命令或直接按Delete键。24244.拆分与合并单元格合并单元格时，选中要合并的单元格，单击“属性”面板中的“合并”按钮即可，效果如图14-6所示。图14-6 合并单元格2525拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出对话框中，如图14-7所示，根据具体需要设置其中
10、的行数或列数即可，效果如图14-8所示。2626 图14-7 “拆分单元格”对话框2727 图14-8 拆分单元格28285.格式化表格除了手动设置表格格式外，套用现有的表格样式可以很方便地设置表格的格式。具体操作步骤如下：(1)选择表格，执行“命令格式化表格”命令，打开“格式化表格”对话框，如图14-9所示。2929图14-9 “格式化表格”对话框3030(2)“格式化表格”对话框中提供了许多表格样式。只要单击左侧文本选项栏中某一个表格名，在右侧就会显示该表格样式，按需要自定义各选项。(3)单击“应用”或“确定”按钮，完成对表格进行格式化处理。31 3114.1.3 创建嵌套表格所谓嵌套表格
11、，就是表格之中还套有表格。网页的排版有时会很复杂，往往需要一个表格来控制页面的总体布局，内部排版的细节则通过嵌套的表格来控制。另外，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格的，如果不使用嵌套的形式，表格就会非常复杂，浏览者要等待很长时间才能看到网页内容。由于上述原因，嵌套表格在网页制作中被经常使用，尤其是在门户网站中，这样可以使大量的信息整齐地展示在浏览者面前。3232通过嵌套表格，由总表格负责整体排版，嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中；此外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性还可以得到漂亮的边框效果。创建嵌套
12、表格的操作方法非常简单：先插入总表格，然后将光标置于要插入嵌套表格的地方，继续插入表格即可(如图14-10所示)。3333图14-10 嵌套表格3434在另一个应用程序(例如Microsoft Excel)中创建并以分隔文本的格式(其中的项以制表符、逗号、冒号、分号或其他分隔符隔开)保存的表格式数据可以直接导入到Dreamweaver中使用。14.2 使用其他程序创建的使用其他程序创建的数据表格数据表格35351.直接导入Excel文档在Dreamweaver中，可以直接导入Excel文档，生成表格数据。具体操作方法如下：(1)执行“文件导入Excel文档”命令。(2)选中导入表格的边框，先用
13、鼠标对表格边框大小进行调整，再在“表格”属性栏中设置间距和边框大小、边框颜色及背景颜色等，如图14-11所示。(3)将插入点置于表格中，在“单元格”属性栏中调整表格中单元格的行高和列宽，设置数据的大小和格式等，如图14-12所示。3636图14-11 “表格”属性栏调整3737图14-12 “单元格”属性栏调整38382.导入表格式数据用“导入表格式数据”命令，也可以创建数据表格。具体操作方法如下：(1)选择“插入表格对象导入表格式数据”命令，打开“导入表格式数据”对话框。(2)在“导入表格式数据”对话框中，点击“浏览”按钮选择数据文件来源；“定界符”可根据数据文件选择“逗号”，“表格宽度”选
14、择“匹配内容”，单元格间距设为1，边框设为5，点击“确定”(如图14-13所示)，完成表格的导入。3939图14-13 “导入表格式数据”对话框4040布局表格是Dreamweaver提供的一个工具，目的是使设计师能够更方便地进行网页布局设计。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”视图。14.3 设计页面布局设计页面布局41 41在“布局”视图中，可以将表格作为一种结构使用，从而避免了一些使用表格的传统缺陷。例如，可以轻松地在页面上绘制单元格(表格单元格)，然后定制并移动单元格到需要的地方。可以同时使用多个独立的布局表格来布局页面的不同部分，这样它们之间就不会
15、相互影响了，这在修改单元格中内容而引起单元格扩大的情况下十分有用。一般情况下，当单元格扩展时，将会影响相邻的单元格，因为单元格之间是不能重叠的；如果使用多个布局表格创建布局，则可以消除这种现象。424214.3.1 切换到布局视图要进入“布局”模式，可以采用以下两种方法：(1)执行“查看表格模式布局模式”命令。(2)在“插入”栏的“布局”标签中单击“布局模式”按钮。434314.3.2 绘制布局单元格和布局表格在“布局”模式中，可以执行两种操作：绘制布局表格和绘制布局单元格。具体操作步骤如下：(1)选择“查看表格模式布局模式”，进入布局模式。(2)若要绘制布局表格，在“插入”栏的“布局”标签中
16、，单击“绘制布局表格”按钮；若要绘制布局单元格，在“插入”栏的“布局”标签中，单击“绘制布局单元格”按钮。(3)将鼠标指针放置在页面中要开始绘制的位置，然后拖动鼠标就可以创建布局表格或布局单元格了(如图14-14所示)。4444图14-14 利用布局模式创建表格454514.3.3 绘制嵌套布局表格用户可以在已有的布局表格中再次绘制布局表格，从而产生嵌套布局表格。嵌套布局表格中的单元格不受外层布局表格的行和列约束，用户可以插入多个嵌套布局表格，如图14-15所示。在“插入”栏的“布局”标签中，单击“绘制布局表格”按钮，就可以在现有布局表格中的空白(灰色)区域中拖动指针创建嵌套布局表格。注意：不
17、能在布局单元格中创建布局表格。4646图14-15 绘制嵌套布局表格474714.3.4 编辑布局单元格和布局表格创建布局表格和布局单元格后，可根据需要对其进行移动和改变大小等编辑操作。(1)移动布局表格和布局单元格。选中要移动的对象(布局表格或布局单元格)，当对象周围出现选择控制点时，即可用鼠标将该对象拖到适当位置；按键盘上的箭头键也可移动该对象，每次移动1个像素。布局单元格和嵌入的布局表格都可以进行移动操作。(2)调整布局表格和布局单元格的大小。选中要调整的对象，拖动选择对象的控制点直接调整对象的大小。484814.3.5 向布局单元格中添加内容在“布局”模式中可以将文本、图像和其他内容添
18、加到布局单元格中。具体操作如下：(1)添加文本时，将插入点放置在布局单元格中，然后输入文本内容和数据即可。(2)添加图像时，将插入点放置在布局单元格中，执行“插入图像”命令，打开一对话框(如图14-16所示)，通过“查找范围”选择一个图像文件，点击“确定”按钮。4949图14-16 “选择图像源文件”对话框5050(3)此时会弹出一个对话框(如图14-17所示)，提醒用户要将该图像文件通过相对路径进行保存，点击“确定”按钮；在打开的“复制文件为”对话框中将此文件保存在站点根目录下。对该图像添加文字后的效果如图14-18所示。51 51图14-17 提示对话框5252图14-18 在布局单元格中添加文字和图像5353本章主要介绍如何在网页中创建表格和编辑表格，以及嵌套表格的制作和应用；还较详细地介绍了数据表格的导入和利用表格进行页面布局的方法等。通过本章的学习，学习者不但应掌握表格制作的一些基本操作，而且还应学会使用表格来组织网页的布局。本本 章章 小小 结结
