dreamweaver表格.ppt

第10章 表格 表格（Table）在网页制作中是一个非常重要的概念，是由不同的行、列、单元格组成的一种能够有效描述信息的组织方式。表格在网页中使用非常普遍，使用表格进行布局，规划网页中的各种元素，会得到非常好的效果。通过本章的学习，对表格有一个基本的认识，掌握用表格布局的方法。 10.1 表格的基本操作 本节主要介绍表格的基本组成部分以及一些基本操作，如插入表格、选择表格、添加或删除行和列、单元格的拆分与合并等。掌握这些基本用法，利用表格就可以实现对网页的布局，如清华大学的网站就是用了大量表格来进行布局的，如图10.1所示。 10.1.1 表格的组成 表格通常由标题、行、列、单元格、边框几部分组成，如图10.2所示，是一个3行3列的表格，边框粗细为2像素。其中，标题位于表格第一行，用来说明表格的主题。表格中的每一个格就是单元格；水平方向的一系列单元格组合在一起就是行；垂直方向的一系列单元格组合在一起就是列；边框是分隔单元格的线框。 10.1.2 插入表格 Dreamweaver CS4提供了多种插入表格的方法，下面来介绍如何插入表格，以及设置表格参数。具体操作步骤如下： 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 表格数据排序 利用Dreamweaver CS4的表格排序功能可以像Excel一样对表格中的数据进行排序。下面以刚导入的表格为例