第8章 面页布局.ppt

第8章 页面布局 主要内容 使用表格布局网页 利用AP元素布局网页 使用框架布局网页 8.1 使用表格布局网页 在创建HTML页面的过程中，表格不仅可以有序地排列数据，还可以精确地定位网页元素。 在网页排版布局时，表格是一种很重要的工具。 8.1.1 插入表格 操作方法： 将插入点放在要插入表格的位置。 单击插入面板“常用”类的“表格”按钮, 或选择“插入→表格”命令。 在“表格”对话框，按需要设置参数。 8.1.2 选择表格 选择整个表格：单击表格的左上角，或单击右边框或底边框。 选择行或列：将鼠标指针指向行的左边缘或列的上边缘，当鼠标指针变为选择箭头时，单击选择行或列，此时拖动鼠标可选择多行或多列。 选择单元格：按住[CTRL]键，单击单元格。 8.1.3 设置表格和单元格属性 1．设置表格属性 选中表格，在属性面板修改表格的属性。 2．设置单元格属性 选中单元格,在属性面板设置单元格的属性。 8.1.4 编辑表格 1. 调整表格的大小 拖动控制点调整表格的大小，表格中的所有单元格按比例更改大小。 选中表格，在属性面板设置表格的宽度。 2. 更改列宽和行高 拖动列或行的边框，可更改表格列宽或行高。 在属性面板修改行高和列宽值。 3．插入、删除行或列 选定行或列。 然后执行菜单“修改→表格”，选择插入或删除操作。 4．合并拆分单元格 ⑴ 合并单元格 选定要合并的单元格，单击属性面板左下角的工具 ， 或执行菜单“修改→表格→合并单元格”。 ⑵ 拆分单元格 选定要拆分的单元格，单击属性检查器左下角的工具 ， 或执行菜单“修改→表格→拆分单元格”。 8.1.5 嵌套表格 在单元格内插入表格，常用于控制表格内文本或图像的位置。 创建嵌套表格的方法： 将插入点置于要插入嵌套表格的单元格，执行“插入→表格”命令，设置表格相应参数。 8.1.6 应用表格布局网页举例 创建“广州动物园”网页。 网页的布局，如下图所示。 操作方法： 1．插入表格 新建网页并保存为“index.htm”。 执行“插入→表格”，设置表格行数为4，列为1，表格宽度800像素，其余为0像素。 设置表格对齐：居中对齐。 设置1～4行，水平：居中对齐，垂直：居中。 设置1～4行的高度分别为187、50、360、50像素。 2．向表格添加元素 设置页面顶部 将光标置于第1行。插入banner.jpg。 设置导航栏 将光标置于第2行，设置单元格的背景颜色为#3487B9，再在第2行中插入一个1行9列的表格，表格宽度为100%。 设置奇数列的宽为150，然后输入文本。 3．设置主体部分 在第3行，插入1个2行1列的表格，表格宽度为100%，边框粗细为0。 在新插入的表格中设置： 第1行：水平：左对齐，高：40。 第2行：垂直：居中，高：320。 将第2行拆分为2列，左边列宽为380，右边列宽为420。 输入文本，插入图片，效果如下图所示。 8.2 利用AP元素布局 AP元素是一种网页元素定位技术，使用AP元素可以精确定位页面元素，设计网页布局。 AP元素可以作为容器，可以放置文本、图像等对象。 8.2.1 创建AP元素 有绘制AP Div和插入AP Div两种。 选择“插入面板→布局类→绘制AP Div”。 在文档窗口中拖动鼠标可绘制出一个AP元素。 按住[Ctrl]键不放，拖动鼠标可连续绘制多个AP元素。 选择“插入→布局对象→AP Div”命令。 8.2.2 AP元素面板 选择“窗口→AP元素”命令，可显示或隐藏AP元素面板。 更改堆叠次序：双击，更改Z轴值改变叠放顺序。 设置可见性：在AP元素的眼睛图标列单击可显示或隐藏AP元素。 改名：双击AP元素名，可重命名。 防止重叠：选中“防止重叠”，表示在创建AP元素时不可重叠。 8.2.3 编辑AP元素 可对AP元素的位置、大小、对齐方式等属性进行设置。 1. 选择AP元素 在文档窗口中，单击AP元素的任何边框。 在AP元素面板单击AP元素名称。 按住[Shift]键，可以选择多个AP元素。 2. 移动AP元素 选择要移动的AP元素，把鼠标移至AP元素边框，鼠标变为十字箭头形状，拖动鼠标。 3.设置AP元素的属性 选择AP元素，属性面板中显示当前的属性，可重新设置。 4. 调整AP元素的大小 拖动AP元素的调整柄。 在属性面板中输入宽和高的值。 5. 对齐AP元素 利用最后选定的AP元素的边框对齐多个AP元素。 操作步骤如下： 选择多个AP元素。 选择“修改→排列顺序”菜单，选择一种对齐选项。 8.2.4 AP元素和表格的转换 1．AP元素转换为表格 选择“修改→转换→将AP Div转换为表格”