第16章 网页布局.pptVIP

第16章 网页布局 主要内容 表格布局 层布局 框架布局 16.1 使用表格进行页面布局 表格是进行页面布局最常用的工具，它既可以用可见表的形式在网页中呈现表格式数据，也可以仅起布局作用，准确定位文本及图形元素。 二者在本质上是一致的，都是通过设计编辑表格，将页面元素在单元格中呈现出来。 前者通常有表格线，后者通常会把表格线隐藏起来，作用都是在布局页面元素。 使用表格进行页面布局主要包括三方面的操作，即设计创建表格、编辑表格、在表格中插入管理网页元素。 16.1.1 插入表格 使用插入栏或插入菜单来创建一个新表格。具体步骤如下： ⑴ 将插入点放在需要表格的位置。 ⑵ 单击插入栏“常用”类别中的“表格”按钮，或执行菜单“插入→表格”菜单，出现 “表格”对话框。 ⑶ 按需要设置表格参数。 关于 “插入表格”对话框参数的说明： 行数：确定表格具有的行的数目。 列数：确定表格具有的列的数目。 表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 单元格边距：单元格边框和单元格内容之间的像素数。 单元格间距：相邻的单元格之间的像素数。 边框粗细：以像素为单位指定表格边框的宽度 16.1.2 向表格单元格添加内容 1.向表格添加文本 (1)单击需要添加文本的单元格，在表格中输入文本，表格单元格会随输入的内容自动扩展大小。也可以把从其他文档中复制的文本粘贴过来。 2.向表格添加图像 (1)单击需要添加图像的单元格。 (2)单击“常用”工具栏中的图像按钮 进行图像的插入，或从右边“文件”面板把图像拖入单元格。 16.1.3 表格的编辑 1．选择表格元素 ⑴ 选择整个表格：单击表格的左上角或单击右边或底部。 ⑵ 选择行或列：定位鼠标指针使其指向行的左边缘或列的上边缘，当鼠标指针变为选择箭头时，单击选择行或列，当拖动时将选择多个行或列。 ⑶ 选择一个单元格：在单元格中单击鼠标 ⑷ 选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 ⑸ 选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、行或列。 2. 设置表格和单元格的格式 选中整个表格时属性检查器显示当前表格的属性； 只选中单元格时，属性检查器显示选中单元格的属性。 对属性检查器的修改，只适用于当前选定的元素。 3. 调整表格的大小 ⑴ 通过拖动选择控制点可以调整整个表格或单个行和列的大小，当调整整个表格的大小时，表格中的所有单元格按比例更改大小。 ⑵ 通过更改属性检查器的高度和宽度值，也可以调整表格元素的大小。 4. 更改列宽和行高 ⑴ 拖动列或行的边框，更改表格列宽或行高 当鼠标移动到边框线上变成十字箭头形状时，按下鼠标拖动边框线，即可更改相应的列宽和行高 ⑵ 使用属性检查器更改列宽和行高 选中表格的行或列，在属性检查器中修改行高和列宽的值，相应的行高和列宽将会调整 5．插入、删除行或列 ⑴ 通过选定行或列来确定操作的位置。 ⑵ 然后执行菜单“修改→表格” ，进行插入删除操作。 若要删除完整的行或列，在选择后直接按 [Delete] 键，整个行或列将从表格中删除。 6．合并拆分单元格 ⑴ 合并单元格 选定合并单元格后，使用属性检查器左下角的工具，或执行菜单“修改→表格→合并单元格”。 ⑵ 拆分单元格 单元格可以拆分行或拆分为列。步骤如下： ① 选定要拆分的单元格 ② 使用属性检查器左下角的工具，或执行菜单“修改→表格→拆分单元格” 7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格。 可以象对其他任何表格一样对嵌套表格进行格式设置。 16.1.4 布局表格 进行页面布局的一种常用的方法是使用HTML表格对元素进行定位。但是，有的页面使用HTML表格进行布局时不太方便，会使布局过程复杂化。为了简化使用表格进行页布局的过程，Dreamweaver提供了布局视图。 1．绘制布局表格 步骤如下： ⑴ 在布局视图中，单击插入栏“布局”分类中的“布局表格”按钮,鼠标指针变为加号“+”。 ⑵ 在页上拖动鼠标指针即创建布局表格。 2. 绘制布局单元格 ⑴ 在布局视图中，单击插入栏“布局”分类中的“绘制布局单元格”按钮。鼠标指针变为加号“+”。 ⑵ 将鼠标指针放置在开始绘制单元格的位置上，然后拖动指针创建布局单元格。若要创建多个单元格，请按住 [Ctrl] 键并拖动指针来创建每个布局单元格。 3．向布局单元格中添加内容 在布局视图中可以将文本、图像和其他内容添加到布局单元格中，就象在标准视图中一样。 但在布局视图中不能向布局表格的空白（灰色）区域插入内容，因此在添加内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展。 4．布局表格和布局单元格的格式设置 ⑴ 布局表格的格式设