应用表格布局-《网页设计制作》

1、应用表格布局-网页设计制作 最终效果图 应用表格布局-网页设计制作 完成页面布局 应用表格布局-网页设计制作 应用表格布局-网页设计制作 一个简单示例 应用表格布局-网页设计制作 本章导读本章导读 n学会插入表格 n掌握表格的基本操作 n学会设置表格属性 n掌握表格的高级操作 第4章 表格的应用 应用表格布局-网页设计制作 学习目标 n页面布局是网页制作的一个重要部分，使用 表格布局页面是一种最常用的手段。 n本章将学习在网页中插入表格以及表格的操 作，让读者熟练掌握对表格的使用。 应用表格布局-网页设计制作 本章要点 n插入表格 n表格的基本操作 n设置表格属性 n表格的高级操作 应用表格布

2、局-网页设计制作 4.1 插 入 表 格 n在网页制作中，表格的功能较多，可用表格对 网页中的文本、图像及其他元素进行定位，也 可有序地排列数据等，为网页制作提供了很大 的方便。 n下面将讲解表格的创建方法以及如何添加表格 的内容。 应用表格布局-网页设计制作 3.1 插 入 表 格 n3.1.1 插入表格的方法 n3.1.2 嵌套表格的创建 n3.1.3 在表格中添加内容 n3.1.4 应用举例在网页中插入表格并添加 网页元素 应用表格布局-网页设计制作 3.1.1 插入表格的方法 n表格不仅可 以为页面进 行宏观的布 局，还可以 使页面中的 文本、图像 等元素更有 条理。 应用表格布局-网

3、页设计制作 n一张表格横向叫行行， 纵向叫列列。 n行列交叉部分就叫做 单元格单元格。 n单元格中的内容和边 框之间的距离叫边距边距。 n单元格和单元格之间 的距离叫间距间距。 n整张表格的边缘叫做 边框边框。 应用表格布局-网页设计制作 3.1.2 嵌套表格的创建 n表格可进行嵌套。嵌套表格是指在表格的某个 单元格中再插入一个表格，其宽度受所在单元 格的宽度限制。当单个表格不能满足布局的需 求时，可以进行嵌套表格的创建。 应用表格布局-网页设计制作 3.1.3 在表格中添加内容 n在表格中可添加各种网页元素。添加表格内容 的方法很简单，只需将光标插入点定位到所需 的单元格中，然后按照添加网页

4、元素的方法操 作即可。 应用表格布局-网页设计制作 3.1.4 应用举例在网页中插入表格并添加网页元 素 n下面为“繁花似锦”网页进行表格的添加和网 页元素的添加。 应用表格布局-网页设计制作 最终效果图 应用表格布局-网页设计制作 3.2 表格的基本操作 n通常插入的表格并不符合要求，这时可根据实 际情况对表格进行一些基本操作，如合并及拆 分单元格、删除和添加行或列等。 应用表格布局-网页设计制作 3.2 表格的基本操作 n3.2.1 选中操作 n3.2.2 单元格的合并及拆分 n3.2.3 插入、删除行或列 应用表格布局-网页设计制作 3.2.1 选中操作 n在对表格进行操作之前需先将表格

5、选中。可以 选中整个表格，也可以只选中某行或某列甚至 某个单元格。 应用表格布局-网页设计制作 3.2.1 选中操作 n1整个表格的选中 n2行或列的选中 n3单元格的选中 应用表格布局-网页设计制作 1整个表格的选中 n选中整个表格有以下几种方法： n将光标移到表格边框线上，当边框线为红色且光标变 为 形状时，单击鼠标左键即可。 n将光标移到表格的边框上，当鼠标光标变为 或 的 形状时单击鼠标即可。 n将光标插入点定位到表格的任一单元格中，单击窗口 左下角标签选择器中的标签即可。 n将光标插入点定位到表格的任意单元格中，表格上端 或下端将弹出绿线的标志，单击最上端标有表格宽度的绿 线中的 按

6、钮，如这里单击 按钮，在弹出的快捷菜单中 选择“选择表格”命令即可。 应用表格布局-网页设计制作 应用表格布局-网页设计制作 2行或列的选中 n行、列的选中方法如下： n将光标移到所需行的左侧，当光标变为 形状且该行的边框线变为红色时单击鼠标即可 选中该行。 n将光标移到所需列的上端，当光标变为 形状且该列的边框线变为红色时单击鼠标左键 即可选中该列。 应用表格布局-网页设计制作 3单元格的选中 n单个单元格的选中与多个单元格的选中操作不 相同，下面将分别介绍。 n1）单个单元格的选中 n2）多个单元格的选中 应用表格布局-网页设计制作 应用表格布局-网页设计制作 3.2.2 单元格的合并及拆

7、分 n为了更好地对网页进行布局，在使用表格时常 常需要把单元格进行拆分或合并，特别是在页 面内容非常多的情况下，更加需要这些操作。 应用表格布局-网页设计制作 3.2.2 单元格的合并及拆分 n1单元格的拆分 n2单元格的合并 应用表格布局-网页设计制作 1单元格的拆分 n当表格中的单元格不够使用时，可将单元格拆 分。 应用表格布局-网页设计制作 2单元格的合并 n合并单元格的操作比较简单，选中要合并的单 元格区域并单击“属性”面板左下角的 按钮即 可。 应用表格布局-网页设计制作 3.2.3 插入、删除行或列 n在进行网页制作时，若插入表格的行、列不够 或行、列太多，则可根据实际情况进行插入

8、或 删除行、列的操作。 应用表格布局-网页设计制作 3.2.3 插入、删除行或列 n1行或列的插入 n2行或列的删除 应用表格布局-网页设计制作 1行或列的插入 n行或列的插入有单行、单列的插入和多行、多 列的插入两种情况。 n1）单行或单列的插入 n2）多行或多列的插入 应用表格布局-网页设计制作 插入单行或单列 应用表格布局-网页设计制作 插入多行或多列 “修改”“表格”“插入行或列” 应用表格布局-网页设计制作 2行或列的删除 n将光标插入点定位到所需单元格中，单击鼠标 右键，在弹出的快捷菜单中选择“表格/删除 行”命令可删除光标插入点所在的行；选择 “表格/删除列”命令可删除光标插入点

9、所在 的列。 应用表格布局-网页设计制作 3.3 表 格 属 性 n在“属性”面板中可对表格进行宽度、边框粗 细、对齐、背景颜色或背景图像等的属性设置。 应用表格布局-网页设计制作 3.3 表 格 属 性 n8.3.1 设置表格属性 n8.3.2 设置单元格属性 应用表格布局-网页设计制作 3.3.1 设置表格属性 n选中表格后，“属性”面板可在其中进行各项设置。 n “表格Id”下拉列表框 n“行”和“列”文本框 n“宽”和“高”文本框 n“填充”文本框 n“间距”文本框 n“对齐”下拉列表框 n“边框”文本框 n“边框颜色”文本框 应用表格布局-网页设计制作 3.3.1 设置表格属性 n“

10、背景颜色”文本框 n“背景图像”文本框 n单击 按钮可删除表格的列宽值。 n单击 按钮可删除表格的行高值。 n单击 按钮可将表格宽度单位从浏览器窗口的百分比 转换为像素。 n单击 按钮可将表格宽度单位从像素转换为百分比。 n设置完成后按Enter键即可使设置生效。 应用表格布局-网页设计制作 3.3.2 设置单元格属性 n除了可以设置整个表格的属性外，还可以对表格的单 元格、行或列的属性进行设置。选中要设置属性的单 元格、行或列，其中的设置与表格属性的设置大致相 同，这里就不再赘述。 n需要说明的是在“水平”下拉列表框中可选择单元格 中文本在水平方向上的对齐方式；在“垂直”下拉列 表框中可选择

11、单元格中的文本在垂直方向上的对齐方 式。设置完成后按Enter键即可使设置生效。 应用表格布局-网页设计制作 3.4 表格的高级操作 n对表格还可进行一些高级操作，如对表格内容 排序、导入/导出表格数据等。 应用表格布局-网页设计制作 3.4 表格的高级操作 n3.4.1 表格的排序 n3.4.2 表格中数据的导入与导出 应用表格布局-网页设计制作 n菜单“命令”|“排序表格” n表格是一种常见的处理数据的形式，在 Dreamweaver中可对其中的数据进行排序。 应用表格布局-网页设计制作 3.4.2 表格中数据的导入与导出 n在Dreamweaver中，可对表格的数据进行导 入和导出，这给网页制作提供了很大的 方便。 应用表格布局-网页设计制作 3.4.2 表格中数据的导入与导出 n1表格数据的导入 n2表格数据的导出 应用表格布局-网页设计制作 1表格数据的导入 n在页面中需添加表格时，如果预先有