第10章 表格1.ppt

第10章表格 表格 Table 在网页制作中是一个非常重要的概念 是由不同的行 列 单元格组成的一种能够有效描述信息的组织方式 表格在网页中使用非常普遍 使用表格进行布局 规划网页中的各种元素 会得到非常好的效果 通过本章的学习 对表格有一个基本的认识 掌握用表格布局的方法 10 1表格的基本操作 本节主要介绍表格的基本组成部分以及一些基本操作 如插入表格 选择表格 添加或删除行和列 单元格的拆分与合并等 掌握这些基本用法 利用表格就可以实现对网页的布局 如清华大学的网站就是用了大量表格来进行布局的 如图10 1所示 10 1 1表格的组成 表格通常由标题 行 列 单元格 边框几部分组成 如图10 2所示 是一个3行3列的表格 边框粗细为2像素 其中 标题位于表格第一行 用来说明表格的主题 表格中的每一个格就是单元格 水平方向的一系列单元格组合在一起就是行 垂直方向的一系列单元格组合在一起就是列 边框是分隔单元格的线框 10 1 2插入表格 DreamweaverCS4提供了多种插入表格的方法 下面来介绍如何插入表格 以及设置表格参数 具体操作步骤如下 10 1 3选择表格 对插入的表格进行编辑之前 首先选择表格要编辑的区域 可以选择整个表格 一行 一列 连续或不连续的多个单元格 具体操作步骤如下 10 1 4添加或删除表格的行和列 在表格中添加行或列是表格经常用到的基本操作之一 下面以网页 电子简历 为例 来学习如果在表格中添加行和列 具体操作步骤如下 10 1 5单元格的拆分与合并 在应用表格时 有时需要对单元格进行拆分与合并 实际上 不规则的表格是由规则的表格拆分合并而成 拆分是指将一个单元格拆分为多个单元格 合并是指将多个连续的单元格合并成一个单元格 具体操作步骤如下 10 2在表格中添加内容 表格建立后 可以在表格中添加内容 这一节主要来学习如何在表格中添加表格 文本 图像等网页元素 下面以网页中的 站点搜索 栏目为例 10 2 1在表格中插入图像 1 在 编辑区 中 将光标移至要插入图像的单元格中 如图10 24所示 2 在 插入 工具栏的 常用 类别中 单击 图像 按钮 在弹出的 选择图像源文件 对话框中 浏览并选中要插入的图像 单击 确定 按钮 表格中即会出现插入的图像 如图10 25所示 10 2 2在表格中插入表格 在表格中插入新的表格 称为表格的嵌套 用这种方式可以创建出复杂的表格 是网页布局常用的方法之一 具体操作步骤如下 1 在 编辑区 中 将光标移到要插入表格的单元格中 如图10 26所示 2 在 插入 工具栏的 常用 类别中 单击 表格 按钮 与插入新表格操作相同 在弹出的 表格 对话框中 行数 文本框中输入表格的行数 2 列数 文本框中输入表格的列数 2 表格宽度 选择 90 单位是 像素 边框粗细 为 0 像素 单击 确定 按钮 此时 在单元格中插入了一个2行2列的表格 如图10 27所示 10 2 3在表格中添加文本 将光标移至新插入表格的单元格中 通过键盘直接在单元格中输入文字 或通过其他文档采用 复制 粘贴 的方法将文字输入到单元格中 如图10 28所示 10 3表格属性 利用属性检查器对表格属性进行设置 可以美化表格 实现网页布局所需要的效果 属性设置包括两部分 一是整个表格的属性设置 如表格的大小 边框 对齐方式 背景等 二是单元格的属性设置 如单元格的大小 对齐方式 边框 背景等 10 3 1设置表格属性 本小节主要介绍设置表格外观 背景图像 表格宽度转换等内容 1 设置表格外观2 设置背景图像3 表格宽度转换 10 3 2设置单元格属性 1 设置对齐方式 标题 换行2 设置单元格颜色 10 3 3实例应用 制作细线框表格 表格的边框最小为1像素 如果希望表格的边框比1像素更细 下面就来学习制作细线框表格 细线框表格在网页制作时经常用到 如图10 42所示 10 4表格数据的导入与导出 在网页制作时 有时需要输入大量的表格数据 Dreamweaver可以实现把表格数据导入到网页中或把网页中的表格数据导出 另外 使用Dreamweaver还可以对表格中的数据进行排序操作 10 4 1表格数据的导入 在第6章6 1 4导入数据文档一节中 介绍了如何将Excel表格导入到Dreamweaver中 下面来学习如何将保存为文本文档的表格数据导入到Dreamweaver中 双击打开要导入的文档如图10 49所示 10 4 2表格数据排序 利用DreamweaverCS4的表格排序功能可以像Excel一样对表格中的数据进行排序 下面以刚导入的表