Dreamweaver应用之APDIV.ppt

网页设计与网站建设 第八章APDiv APDiv在DreamweaverCS4中仍等同于前期版本的层 又称为AP元素 绝对定位元素 或CSS P元素 本文以下简称AP层 什么是层 有什么作用 前面我们学习过了表格 知道了表格可以作为页面布局的容器 AP层也是作为网页布局的容器 AP层内可以包含文本 图形图像 动画 音频 视频 表格等一切可以放置到HTML中的元素 甚至可以在AP层内放置AP层 本章介绍一下AP层的相关内容 8 1AP层的创建与属性 8 1 1创建AP层8 1 2AP层的属性 8 1 1创建AP层 在DreamweaverCS4中 AP层的创建可以通过插入Div标签或直接创建AP层来实现 1 插入将插入点放置在 文档 窗口中 然后选择 插入 布局对象 APDiv Div标签2 连续绘制一个或多个APDiv在 插入 面板的 布局 类别中 单击 绘制APDiv 按钮 在 文档 窗口的 设计 视图中 执行下列操作之一 拖动以绘制一个APDiv 通过按住Ctrl拖动来连续绘制多个APDiv 只要不松开Ctrl 就可以继续绘制新的APDiv 如果两个层有交叉 它们有两种关系 重叠与嵌套 重叠就是位置上有重叠 但两个层是独立的 一个层发生变化时 不影响另外一个层 而嵌套时 子层会随着父层的某些属性的变化而变化 而父层不随子层发生变化 3 插入嵌套APDiv确保已取消选择 防止重叠 在 文档 窗口的 设计 视图中 将插入点放置在一个现有APDiv的内部 然后选择 插入 布局对象 APDiv 嵌套的APDiv是其代码包含在另一个APDiv的标签内的APDiv 例如 以下代码显示了两个未嵌套的APDiv和两个嵌套的APDiv 8 1 2AP层的属性 当选择一个AP元素时 属性检查器将显示AP元素的属性 1选择一个AP元素 2在属性检查器 窗口 属性 中 单击右下角的展开箭头查看所有属性 利用 属性检查器 对AP层属性进行设置 可以调整创建好的AP层 达到预期的网页布局效果 AP层的属性包括ID 位置 大小 Z轴 可见性 背景 类 溢出 剪辑等基本属性 如图所示 CSS P 元素为选定的AP元素指定一个ID 此ID用于在 AP元素 面板和JavaScript代码中标识AP元素 只应使用标准的字母数字字符 不要使用空格 连字符 斜杠或句号等特殊字符 每个AP元素都必须有各自的唯一ID 左和上 指定AP元素的左上角相对于页面 如果嵌套 则为父AP元素 左上角的位置 宽和高指定AP元素的宽度和高度 如果AP元素的内容超过指定大小 AP元素的底边 按照在Dreamweaver的 设计 视图中的显示 会延伸以容纳这些内容 如果 溢出 属性没有设置为 可见 那么当AP元素在浏览器中出现时 底边将不会延伸 位置和大小的默认单位为像素 px 您也可以指定以下单位 pc 派卡 pt 点 in 英寸 mm 毫米 cm 厘米 或 父AP元素对应值的百分比 Z轴 确定AP元素的Z轴或堆叠顺序 在浏览器中 编号较大的AP元素出现在编号较小的AP元素的前面 值可以为正 也可以为负 可见性 指定AP元素最初是否是可见 从以下选项选择 default 不指定可见性属性 当未指定可见性时 大多数浏览器都会默认为 继承 继承 将使用AP元素的父级的可见性属性 可见 将显示AP元素的内容 隐藏 将隐藏AP元素的内容 背景颜色 指定AP元素的背景颜色 将此选项留为空白意味着指定透明的背景 类 指定用于设置AP元素的样式的CSS类 溢出 控制当AP元素的内容超过AP元素的指定大小时如何在浏览器中显示AP元素 可见 指示在AP元素中显示额外的内容 实际上 AP元素会通过延伸来容纳额外的内容 隐藏 指定不在浏览器中显示额外的内容 滚动 指定浏览器应在AP元素上添加滚动条 而不管是否需要滚动条 自动 使浏览器仅在需要时 即当AP元素的内容超过其边界时 才显示AP元素的滚动条 剪辑定义AP元素的可见区域 指定左 上 右和下坐标以在AP元素的坐标空间中定义一个矩形 从AP元素的左上角开始计算 AP元素将经过 裁剪 以使得只有指定的矩形区域才是可见的 8 2AP层的基本操作 这一节介绍AP层的基本操作 包括AP层的激活与选择 插入内容 调整AP层的位置 大小 层叠顺序 可见性 背景 对齐方式等 8 2 1AP层的激活与选择 若要对层进行操作与编辑 首先得激活或选择AP层 激活AP层是为了编辑AP层内的内容 而选择AP层是为了对AP层的属性进行操作 1 激活AP层2 选择AP层 8 2 2在AP层内插入内容 激活AP层之后 就可以在AP层内输入或从其他文件中复制粘贴相应文本内容 也可单击 插入 工具栏 常用 类别中的各种按钮 插入图像 媒体 脚本等内容 8 2 3调整AP层的位置 很多情况下AP层的创建位置不是期望的位置 这时可以通过以下操作 精确调整AP层的位置 8 2 4调整AP层的大小 与AP层的位置一样 AP层的大小有时也不理想 就要对其进行精确调整 调整步骤如下 8 2 5改变AP层的层叠顺序 AP元素的堆叠顺序或z轴决定了AP元素在浏览器中的绘制顺序 AP元素的z轴值越高 该AP元素在堆叠顺序中的位置就越高 可以使用 AP元素 面板或属性检查器来更改每个AP元素的z轴 使用 AP元素 面板或使用 属性检查器 都改变AP层的层叠顺序 具体操作步骤如下 使用AP元素面板更改AP元素的堆叠顺序1选择 窗口 AP元素 打开 AP元素 面板 2将AP元素向上或向下拖至所需的堆叠顺序 移动AP元素时会出现一条线 它指示AP元素将出现的位置 当放置线出现在堆叠顺序中的所需位置时 松开鼠标按钮 使用属性检查器更改AP元素的堆叠顺序1选择 窗口 AP元素 打开 AP元素 面板以查看当前的堆叠顺序 2在 AP元素 面板或 文档 窗口中选择AP元素 3在属性检查器 窗口 属性 中 在 Z轴 文本框中键入一个数字 键入一个较大的数字可将AP元素在堆叠顺序中上移 键入一个较小的数字可将AP元素在堆叠顺序中下移 8 2 6改变AP层的可见性 AP层可见性的改变也可通过 AP元素 面板与 属性检查器 来实现 1 单击 窗口 AP元素 打开 AP元素 面板 如图所示 2 用鼠标单击要更改AP层名称前面的眼睛图标即可改变AP层的可见性 闭上的眼睛图标表示AP层被隐藏 处于不可见状态 睁开的眼睛图标表示AP层被显示 处于可见状态 没有眼睛图标表示该AP层继承其父AP层 即被嵌套AP层 的可见性属性 注意 若想统一更改所有AP层的可见性 可用鼠标单击列顶端的眼睛图标 3 在 属性检查器 中更改 选中要设置可见性的AP层 在 属性检查器 中 可见性 下拉列表框中选择相应可见性选项即可 如图所示 8 2 7设置AP层的背景 设置AP层的背景包括添加背景颜色和插入背景图片 8 2 8对齐AP层 当有多个AP层时 可以对它们进行对齐操作 包括左对齐 右对齐 上对齐与对齐下缘 以最后一个选定AP层的边框位置为标准对齐 具体操作步骤如下 1 选中创建好的多个AP层 如图所示 最右端的AP层为最后选中的AP层 2 单击 修改 排列顺序 对齐下缘 命令菜单 将所有选中的AP层以最后选中的AP层的下边框为标准对齐 效果如图所示 其他对齐操作与其类似 就不再重复讲解 8 2 9AP层与表格间的转换 在DreamweaverCS4中 可以实现AP层与表格之间的相互转换 将AP元素转换为表格1选择 修改 转换 将APDiv转换为表格 2指定下列任一选项 然后单击 确定 最精确 为每个AP元素创建一个单元格以及保留AP元素之间的空间所必需的任何附加单元格 最小 折叠空白单元格指定若AP元素位于指定的像素数内则应对齐AP元素的边缘 如果选择此选项 结果表将包含较少的空行和空列 但可能不与您的布局精确匹配 使用透明GIF 使用透明的GIF填充表格的最后一行 这将确保该表在所有浏览器中以相同的列宽显示 当启用此选项后 不能通过拖动表列来编辑结果表 当禁用此选项后 结果表将不包含透明GIF 但在不同的浏览器中可能会具有不同的列宽 置于页面中央 将结果表放置在页面的中央 如果禁用此选项 表将在页面的左边缘开始 将表格转换为APDiv1选择 修改 转换 将表格转换为APDiv 2指定下列任一选项 然后单击 确定 防止AP元素重叠在创建 移动和调整AP元素大小时约束AP元素的位置 使AP元素不会重叠 显示AP元素面板显示 AP元素 面板 显示网格和靠齐到网格可使用网格来帮助定位AP元素 由于表格单元格不能重叠 因此Dreamweaver无法基于重叠的AP元素创建表格 如果要将文档中的AP元素转换为表格 使用 防止重叠 选项来约束AP元素的移动和定位 使AP元素不会重叠 8 3AP层的常见布局 在本章开篇的时候曾提到 AP层是一种页面布局容器 在了解了AP层的基本属性及操作之后 本节为大家介绍一下如何使用AP层来为页面布局 8 3 1AP层常见布局形式 首先来了解几种常见的AP层布局形式 主