4 表格与布局.pptVIP

3.6 使用间隔图 由于在单元格中输入信息时，单元格会由于内容的长度超出单元格而被撑开，而相邻的单元格则会被挤小，甚至会在旁边的表格的挤压下完全不可见。 使用间隔图可以控制列的间隔，固定列宽，间隔图是透明的，在浏览器中不会显示出来。 创建间隔图的具体方法如下： （1）选中要插入间隔图的单元格，单击表头的下三角按钮，在弹出的下拉菜单中选择“添加间隔图像”命令，如图4-35 所示。 （2）弹出“选择占位图像”对话框，选中“创建占位图像文件”单选按钮，单击“确定”按钮，如图4-36所示。 图4-35 下拉菜单 图4-36 “选择占位图像”对话框 （3）按照弹出的对话框中的提示设置好文件名和保存路径后，单击“保存”按钮， Dreamweaver 8将自动产生一个透明的图片作为间隔图插入到单元格中，且将图片保存在指定的路径位置。 ZVTC软件工程系李廷锋 表格与布局 学习目标： 1、掌握表格的创建和设置 2、掌握如何在表格中插入网页元素 3、掌握使用表格布局网页的方法 知识目录： 1、表格基本操作 2、表格高级应用 3、布局应用 1 表格基本操作 1.3 单元格属性设置 1.4 表格的选取 1.1 插入表格 1.2 表格属性设置 1.5 添加删除行和列 1.6 合并拆分单元格 1.7 在表格中插入网页元素 1.1 插入表格 将鼠标光标定位至要插入表格的位置，选择主菜单“插入”→“表格”命令（快捷键为Ctrl＋Alt＋T），或者单击“常用”插入栏中的“表格”按钮，弹出“表格”对话框，在对话框中设置表格属性，如图4-1所示。 插入的表格如图4-2所示。 图4-1 “表格”对话框 图4-2 插入的表格 1.2 表格属性设置 可以在表格的“属性”面板中设置已插入的表格的更多属性，表格的“属性”面板如图4-3所示。 图4-3 表格的“属性”面板 “属性”面板中的主要属性功能如下： 1、表格ID：为表格设置一个唯一的名字。 2、行：设置表格的行数。 3、列：设置表格的列数。 4、宽：设置表格的宽度，可以以像素或者百分比为单位。 5、高：设置表格的高度，可以以像素或者百分比为单位。 6、填充：设置单元格内的内容与单元格边框的距离，即单元格边距。 7、间距：设置单元格之间的距离，即单元格间距。 8、对齐：设置表格在页面上的对齐方式，有“左对齐”、“居中对齐”和“右对齐”三种对齐方式。 9、边框：设置表格的边框的宽度，单位为像素。 10、背景颜色：设置表格的背景颜色。可以单击 按钮，在弹出的拾色器中选择需要的颜色，也可以直接在右侧的文本框中输入颜色的值。 11、背景图像：设置表格的背景图像。单击右侧的 按钮，在弹出的“选择图像源文件”对话框中选择需要的图片。 12、边框颜色：设置表格的边框的颜色。 在“对齐方式”下拉列表框中选择对齐方式为“居中对齐”，在“背景颜色”右侧的对话框中设置背景颜色为#669933，在“边框颜色”右侧的文本框中设置边框颜色为#FFCC00，效果如图4-4所示。 图4-4 设置属性后的表格 1.3 单元格属性设置 表格是由单元格组成的，如创建一个3行4列的表格，就有3×4共12个单元格。在设置好整个表格的属性后，多数的工作是在对一个个单独的单元格进行处理。 将鼠标光标置于单元格中，下方将出现单元格的“属性”面板，如图4-5所示。 图4-5 单元格的“属性”面板 单元格“属性”面板中的主要属性功能如下： 1、 按钮：用来合并选中的单元格或者将一个单元格拆分成几行或者几列。 2、水平：设置单元格中内容在水平方向上的对齐方式。共有“左对齐”、“居中对齐”和“右对齐”3种对齐方式。 3、垂直：设置单元格中内容在垂直方向上的对齐方式。共有“顶端”、“居中”、“底部”和“基线”4种对齐方式。 4、宽：设置单元格的宽度，单位为像素。 5、高：设置单元格的高度，单位为像素。 6、不换行：选中此复选框，单元格中的内容将不换行，单元格会被内容撑开。 7、标题：选中此复选框，将此单元格中的内容设置为表格的表头。 8、背景：为单元格设置背景图像。 9、背景颜色：设置单元格的背景颜色。 10、边框：设置单元格的边框颜色。 1.4 表格的选取 选择表格或者表格中的某些单元格，有以下方法： 1．选择整个表格 要选择整个表格有以下几种方法： 1、将鼠标光标移到表格的任意一个边框上，当鼠标光标变为 形状时，单