第4讲 页面布局设计.pptVIP

第4章 页面布局设计 主要内容 表格、层、框架的有关概念 使用表格布局网页 使用层布局网页 使用框架布局网页 4.1使用表格进行页面布局 表格是进行页面布局最常用的工具，它既可以用可见表的形式在网页中呈现表格式数据，也可以仅起布局作用，准确定位文本及图形元素。但二者在本质上是一致的，都是通过设计编辑表格，将页面元素在单元格中呈现出来。前者通常有表格线，后者通常会把表格线隐藏起来，作用都是在布局页面元素。 使用表格进行页面布局主要包括三方面的操作，即设计创建表格、编辑表格、在表格中插入管理网页元素。通常，在一个Web页面中有多个表格，甚至在表格的单元格中还会嵌入另外的表格。 4.1使用表格进行页面布局—创建表格 1．插入表格 Dreamweaver使用插入栏或插入菜单来创建一个新表格。具体步骤如下： ⑴ 在文档窗口的“设计”视图中，将插入点放在需要表格的位置。 ⑵ 单击插入栏“常用”类别中的“表格”按钮，或选择“插入/表格”菜单，出现 “表格”对话框。 ⑶ 按需要设置表格参数，单击“确定”按钮后完成表格的创建。 4.1使用表格进行页面布局—创建表格 关于“表格”对话框参数的说明： ⑴ “表格大小”参数 行数：确定表格具有的行的数目。 列数：确定表格具有的列的数目。 表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 单元格边距：单元格边框和单元格内容之间的像素数。 单元格间距：相邻的单元格之间的像素数。 边框粗细：以像素为单位指定表格边框的宽度。 ⑵ “页眉”参数 ⑶ “辅助功能”参数 4.1使用表格进行页面布局—创建表格 2．导入Excel表格 Dreamweaver能够将Excel表格到当前文档中，并自动设置为Dreamweaver表格的格式。操作步骤如下： ⑴ 去定要导入表格的位置。 ⑵ 选择“文件/导入/Excel文档”菜单，显示 “导入Excel文档”对话框。 ⑶ 浏览选择要导入的文件，按“打开”按钮，即导入到当前Dreamweaver文档中。 4.1使用表格进行页面布局—表格的编辑 1．选择表格元素 ⑴ 选择整个表格：单击表格的左上角或者单击右边或底部边缘的任意位置。 ⑵ 选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边缘，当鼠标指针变为选择箭头时，单击选择行或列，当拖动时将选择多个行或列。 ⑶ 选择一个单元格：在单元格中单击鼠标，将选中该单元格。 ⑷ 选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 ⑸ 选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、行或列，将选中多个单元格。如果它已经被选中，则再次单击会将其从选择中删除。 4.1使用表格进行页面布局—表格的编辑 2. 设置表格和单元格的格式 通过设置表格及表格单元格的属性，可以方便的设置表格和单元格的格式。 选中整个表格时属性检查器显示当前表格的属性；只选中单元格时，属性检查器显示选中单元格的属性。对属性检查器的修改，只适用于当前选定的元素。 若要设置表格中文本的格式，可以对所选的文本应用格式设置或使用样式。 4.1使用表格进行页面布局—表格的编辑 3. 调整表格的大小 ⑴ 通过拖动选择控制点可以调整整个表格或单个行和列的大小，当调整整个表格的大小时，表格中的所有单元格按比例更改大小。 如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改“文档”窗口中单元格的可视大小，但不更改这些单元格的指定宽度和高度。 ⑵ 通过更改属性检查器的高度和宽度值，也可以调整表格元素的大小。 4.1使用表格进行页面布局—表格的编辑 4. 更改列宽和行高 ⑴ 拖动列或行的边框，更改表格列宽或行高。 当鼠标移动到边框线上变成十字箭头形状“”时，按下鼠标拖动边框线，即可更改相应的列宽和行高。 ⑵ 使用属性检查器更改列宽和行高。 选中表格的行或列，在属性检查器中修改行高和列宽的值，相应的行高和列宽将会调整。 4.1使用表格进行页面布局—表格的编辑 5．插入、删除行或列 ⑴ 通过选定行或列来确定操作的位置。 ⑵ 然后使用“修改/表格”菜单，进行插入删除操作。 若要删除完整的行或列，在选择后直接按 Delete 键，整个行或列将从表格中删除。 4.1使用表格进行页面布局—表格的编辑 6．和并拆分单元格 ⑴ 合并单元格 选定合并单元格后，使用属性检查器左下角的工具，或选择“修改/表格/合并单元格”，则选定的单元格合并为一个单元格。 ⑵ 拆分单元格 单元格可以拆分行或拆分为列。步骤如下： ① 选定要拆分的单元格。 ② 使用属性检查器左下角的工具，或选择“修改/表格/拆分单元格”，在出现的“拆分单元格”对话框确定拆方式，并进一步给定拆分个数。 4.1使用表格进行页面布局—表格的编辑 7．嵌套表格 嵌