1、最终效果图 1 完成页面布局 2 3 一个简单示例 4 本章导读 n学会插入表格 n掌握表格的基本操作 n学会设置表格属性 n掌握表格的高级操作 第4章 表格的应用 5 学习目标 n页面布局是网页制作的一个重要部分，使用 表格布局页面是一种最常用的手段。 n本章将学习在网页中插入表格以及表格的操 作，让读者熟练掌握对表格的使用。 6 本章要点 n插入表格 n表格的基本操作 n设置表格属性 n表格的高级操作 7 4.1 插 入 表 格 n在网页制作中，表格的功能较多，可用表格对 网页中的文本、图像及其他元素进行定位，也 可有序地排列数据等，为网页制作提供了很大 的方便。 n下面将讲解表格的创建方
2、法以及如何添加表格 的内容。 8 3.1 插 入 表 格 n3.1.1 插入表格的方法 n3.1.2 嵌套表格的创建 n3.1.3 在表格中添加内容 n3.1.4 应用举例在网页中插入表格并添加 网页元素 9 3.1.1 插入表格的方法 n表格不仅可 以为页面进 行宏观的布 局，还可以 使页面中的 文本、图像 等元素更有 条理。 10 n一张表格横向叫行， 纵向叫列。 n行列交叉部分就叫做 单元格。 n单元格中的内容和边 框之间的距离叫边距 。 n单元格和单元格之间 的距离叫间距。 n整张表格的边缘叫做 边框。 11 3.1.2 嵌套表格的创建 n表格可进行嵌套。嵌套表格是指在表格的某个 单元
3、格中再插入一个表格，其宽度受所在单元 格的宽度限制。当单个表格不能满足布局的需 求时，可以进行嵌套表格的创建。 12 3.1.3 在表格中添加内容 n在表格中可添加各种网页元素。添加表格内容 的方法很简单，只需将光标插入点定位到所需 的单元格中，然后按照添加网页元素的方法操 作即可。 13 3.1.4 应用举例在网页中插入表格并添加网页 元素 n下面为“繁花似锦”网页进行表格的添加和网页 元素的添加。 14 最终效果图 15 3.2 表格的基本操作 n通常插入的表格并不符合要求，这时可根据实 际情况对表格进行一些基本操作，如合并及拆 分单元格、删除和添加行或列等。 16 3.2 表格的基本操作
4、 n3.2.1 选中操作 n3.2.2 单元格的合并及拆分 n3.2.3 插入、删除行或列 17 3.2.1 选中操作 n在对表格进行操作之前需先将表格选中。可以 选中整个表格，也可以只选中某行或某列甚至 某个单元格。 18 3.2.1 选中操作 n1整个表格的选中 n2行或列的选中 n3单元格的选中 19 1整个表格的选中 n选中整个表格有以下几种方法： n将光标移到表格边框线上，当边框线为红色且光标变 为 形状时，单击鼠标左键即可。 n将光标移到表格的边框上，当鼠标光标变为 或 的 形状时单击鼠标即可。 n将光标插入点定位到表格的任一单元格中，单击窗口 左下角标签选择器中的标签即可。 n将
5、光标插入点定位到表格的任意单元格中，表格上端 或下端将弹出绿线的标志，单击最上端标有表格宽度的绿 线中的 按钮，如这里单击 按钮，在弹出的快捷菜单中 选择“选择表格”命令即可。 20 21 2行或列的选中 n行、列的选中方法如下： n 将光标移到所需行的左侧，当光标变为 形状且该行的边框线变为红色时单击鼠标即可 选中该行。 n 将光标移到所需列的上端，当光标变为 形状且该列的边框线变为红色时单击鼠标左键 即可选中该列。 22 3单元格的选中 n单个单元格的选中与多个单元格的选中操作不 相同，下面将分别介绍。 n1）单个单元格的选中 n2）多个单元格的选中 23 24 3.2.2 单元格的合并及
6、拆分 n为了更好地对网页进行布局，在使用表格时常 常需要把单元格进行拆分或合并，特别是在页 面内容非常多的情况下，更加需要这些操作。 25 3.2.2 单元格的合并及拆分 n1单元格的拆分 n2单元格的合并 26 1单元格的拆分 n当表格中的单元格不够使用时，可将单元格拆 分。 27 2单元格的合并 n合并单元格的操作比较简单，选中要合并的单 元格区域并单击“属性”面板左下角的 按钮即可。 28 3.2.3 插入、删除行或列 n在进行网页制作时，若插入表格的行、列不够 或行、列太多，则可根据实际情况进行插入或 删除行、列的操作。 29 3.2.3 插入、删除行或列 n1行或列的插入 n2行或列
7、的删除 30 1行或列的插入 n行或列的插入有单行、单列的插入和多行、多 列的插入两种情况。 n1）单行或单列的插入 n2）多行或多列的插入 31 插入单行或单列 32 插入多行或多列 “修改”“表格”“插入行或列” 33 2行或列的删除 n将光标插入点定位到所需单元格中，单击鼠标 右键，在弹出的快捷菜单中选择“表格/删除行” 命令可删除光标插入点所在的行；选择“表格/ 删除列”命令可删除光标插入点所在的列。 34 3.3 表 格 属 性 n在“属性”面板中可对表格进行宽度、边框粗细 、对齐、背景颜色或背景图像等的属性设置。 35 3.3 表 格 属 性 n8.3.1 设置表格属性 n8.3.
8、2 设置单元格属性 36 3.3.1 设置表格属性 n选中表格后，“属性”面板可在其中进行各项设置。 n “表格Id”下拉列表框 n“行”和“列”文本框 n“宽”和“高”文本框 n“填充”文本框 n“间距”文本框 n“对齐”下拉列表框 n“边框”文本框 n“边框颜色”文本框 37 3.3.1 设置表格属性 n“背景颜色”文本框 n“背景图像”文本框 n单击 按钮可删除表格的列宽值。 n单击 按钮可删除表格的行高值。 n单击 按钮可将表格宽度单位从浏览器窗口的百分比 转换为像素。 n单击 按钮可将表格宽度单位从像素转换为百分比。 n设置完成后按Enter键即可使设置生效。 38 3.3.2 设置
9、单元格属性 n除了可以设置整个表格的属性外，还可以对表格的单 元格、行或列的属性进行设置。选中要设置属性的单 元格、行或列，其中的设置与表格属性的设置大致相 同，这里就不再赘述。 n需要说明的是在“水平”下拉列表框中可选择单元格中 文本在水平方向上的对齐方式；在“垂直”下拉列表框 中可选择单元格中的文本在垂直方向上的对齐方式。 设置完成后按Enter键即可使设置生效。 39 3.4 表格的高级操作 n对表格还可进行一些高级操作，如对表格内容 排序、导入/导出表格数据等。 40 3.4 表格的高级操作 n3.4.1 表格的排序 n3.4.2 表格中数据的导入与导出 41 3.4.1 3.4.1
10、表格的排序表格的排序 n菜单“命令”|“排序表格” n表格是一种常见的处理数据的形式，在 Dreamweaver中可对其中的数据进行排序。 42 3.4.2 表格中数据的导入与导出 n在Dreamweaver中，可对表格的数据进行导入 和导出，这给网页制作提供了很大的 方便。 43 3.4.2 表格中数据的导入与导出 n1表格数据的导入 n2表格数据的导出 44 1表格数据的导入 n在页面中需添加表格时，如果预先有表格数据 存储在其他应用程序如记事本、Word中，可 以直接将数据导入。 n菜单“文件”|“导入” 45 2表格数据的导出 n进行表格数据的导出操作可将网页中的表格数 据用其他应用程序存储。 n菜单“文件”|“导出” 46 应用实例 n完成以下页面的制作： 47 48 49 50
