使用AP-Div元素.pptx

掌握APDiv的基本知识 1 APDiv概述2 创建APDiv元素3 设置APDiv元素的属性4 AP元素面板5 APDiv元素的基本操作 1APDiv概述 APDiv是DIV标签中的一种定位技术 在Dreamweaver中也被叫做图层 用来控制浏览器窗口中元素的位置 层次 APDiv最主要的特性就是它是浮动在网页内容之上的 也就是说 可以在网页上任意改变其位置 实现对APDiv的准确定位 把页面元素放在APDiv中 可以控制APDiv堆叠次序 显示或隐藏等性质 2创建APDiv元素 创建APDiv元素有以下几种方法 使用主菜单插入APDiv元素 将光标置于文档窗口中要插入APDiv的位置 选择 插入 布局对象 APDiv 命令 在插入点的位置插入一个APDiv元素 绘制APDiv元素 在 插入 面板中选择 布局 标签 点击后 在文档窗口要插入APDiv的位置按下鼠标左按钮拖曳出一个APDiv元素 直接拖曳 绘制APDiv 按钮到文档窗口中插入APDiv元素 在 插入 面板的 布局 标签中 按下 绘制APDiv 按钮不放 将其拖曳到文档窗口中即可创建一个APDiv元素 提示 在 插入 面板中选择 布局 标签 点击后 在文档窗口中 按住 Ctrl 键的同时按住鼠标左键拖曳鼠标 可以绘制多个APDiv元素 在默认情况下 每当用户创建一个新的APDiv 都会使用DIV标志它 并将标记显示到网页左上角的位置 创建的APDiv元素如图7 1所示 若要在网页左上角显示出APDiv标记 首先选择 查看 可视化助理 不可见元素 命令 使 不可见元素 命令呈被选择状态 然后再选择 编辑 首选参数 命令 弹出 首选参数 对话框 选择 分类 选项框中的 不可见元素 选项 选择右侧的 AP元素的锚点 复选框 如图7 2所示 单击 确定 按钮完成设置 图7 1创建的APDiv元素 图7 2 首选参数 对话框 设置APDiv元素的属性 要正确地运用APDiv元素来设计网页 必须了解APDiv元素的属性和设置方法 设置APDiv元素的属性之前 必须选中APDiv元素 选中APDiv元素的方法一般有以下几种 在文档窗口中 单击要选择的APDiv元素左上角的APDiv元素标记 在APDiv元素的任意位置单击 激活APDiv元素 再单击APDiv左上角的矩形框标记 单击APDiv元素的边框 在APDiv元素未被选中或激活情况下 按住 Shift 键的同时再单击APDiv元素中的任意位置 在 APDiv元素 面板中 直接单击APDiv元素的名称 选中APDiv元素后 其对应的 属性 面板如图7 3所示 APDiv 属性 面板中各项含义 CSS P元素 为选中的APDiv元素设置名称 名称由数字或字母组成 不能用特殊字符 每个APDiv元素的名称是唯一的 左 上 分别设置APDiv元素左边界和上边界相对于页面左边界和上边界的距离 默认单位为像素 px 也可以指定为pc pica pt 点 in 英寸 mm 毫米 厘米 cm 或 百分比 图7 3 APDiv 的属性面板 宽 高 分别设置APDiv元素高度和宽度 单位设置同 左 上 属性 Z轴 设置APDiv元素的堆叠次序 该值越大 则表示其在越前端显示 可见性 设置APDiv元素的显示状态 可见性 右侧下拉列表框包括四个可选项 default 缺省 选中该项 则不明确指定其可见性属性 在大多数浏览器中 该APDiv会继承其父级APDiv的可见性 inherit 继承 选择该项 则继承其父级APDiv的可见性 visible 可见 选择该项 则显示APDiv及其中内容 而不管其父级APDiv是否可见 hidden 隐藏 选择该项 则隐藏APDiv及其中内容 而不管其父级APDiv是否可见 背景图像 设置APDiv元素的背景图像 可以通过单击 文件夹 按钮选择本地文件 也可以在文本框中直接输入背景图像文件的路径确定其位置 背景颜色 设置APDiv的背景颜色 值为空表示背景为透明 类 可以将CSS样式表应用于APDiv 溢出 设置APDiv中的内容超过其大小时的处理方法 溢出 右侧下拉列表框中包括四个可选项 visible 可见 选择该项 当APDiv中内容超过其大小时 APDiv会自动向右或者向下扩展 hidden 隐藏 选择该项 当APDiv中内容超过其大小时 APDiv的大小不变 也不会出现滚动条 超出APDiv内容不被显示 scroll 滚动 选择该项 无论APDiv中的内容是否超出APDiv的大小 APDiv右端和下端都会显示滚动条 auto 自动 选择该项 当APDiv内容超过其大小时 APDiv保持不变 在APDiv右端和下端都出现滚动条 以使其中的内容能通过拖动滚动条显示 剪辑 设置APDiv可见区域大小 在 上 下 左 右 文本框中 可以指定APDiv可见区域上 下 左 右端相对于APDiv边界距离 APDiv经过剪辑后 只有指定的矩形区域才是可见的 AP元素面板 通过 AP元素 面板可以方便地管理网页文档中APDiv元素 在Dreamweaver中 选择 窗口 AP元素 菜单命令或按 F2 键 均可打开 AP元素 面板 如图7 4所示 AP元素 面板各选项含义如下 防止重叠 选中此选项 可以防止APDiv元素之间发生重叠 不选中此复选框 AP元素则可以相互重叠 该选项主要用在APDiv和表格相互转换时 当将APDiv转换为表格 为防止浏览器不兼容 选中该选项 以防止AP元素相互重叠 图7 4 AP元素 面板 图标 如果某一个AP元素左侧有该图标 表示该AP元素可见 如果图标变成 则不可见 如果没有该图标 表示该层继承其父级APDiv元素的可见性 如果没有父级APDiv元素 则父级APDiv元素可以看成其本身 通常情况下 这意味着是可见的 可以通过单击图标控制该APDiv的可见属性 ID 该属性用来显示和更改APDiv元素的名称 通过双击ID下面对应的AP元素默认名称来更改AP元素的名称 Z 该属性见 属性 面板相关设置 可以通过双击APDiv元素的Z值属性来更改其值 APDiv元素的基本操作 1 调整APDiv的大小调整APDiv时 既可以单独调整一个APDiv 也可以同时调整多个APDiv 1 调整一个APDiv的大小选中一个APDiv后 执行下列操作之一 可调整一个APDiv的大小 应用鼠标拖曳方式 选中APDiv 拖动四周的任何调整手柄 应用键盘方式 选中APDiv 按住 Ctrl 方向键 每次调整一个像素大小 应用网络靠齐方式 选中APDiv 同时按住 Ctrl Shift 方向键 可按网格靠齐增量来调整大小 应用修改属性值方式 在 属性 面板中 修改 宽 和 高 选项值来调整APDiv的大小 2 同时调整多个APDiv的大小在 文档 窗口中按住 Shift 键 依次选中两个或多个APDiv 执行以下操作之一 可同时调整多个APDiv的大小 应用菜单命令 选择 修改 排列顺序 设成宽度 或高度 相同 命令 应用快捷键 按下组合键 Ctrl Shift 7 或者 Ctrl Shift 9 则以当前APDiv为标准同时调整多个层的宽度或高度 2 更改APDiv的堆叠顺序对网页进行排版时 常需要控制叠放在一起的不同网页元素的显示顺序 以实现特殊的效果 使用AP元素 属性 面板或 AP 面板可以改变AP元素的堆叠顺序 AP元素的显示顺序与Z轴值的顺序一致 Z值越大 AP元素的位置越靠上 在 AP元素 控制面板中按照堆叠顺序排列AP元素的名称 如图7 5所示 图7 5APAP元素的显示顺序与Z轴值的顺序一致 1 使用 AP 面板改变层的堆叠顺序打开 AP 面板 在 AP 面板中执行下列操作之一 改变AP元素的堆叠顺序 选中指定的AP元素名 将其拖动到所需的堆叠顺序处 然后释放鼠标 在 Z 列中单击需要修改的AP元素编号 如果要上移则输入一个比当前值更大的数值 如果要下移则输入一个比当前值更小的数值 2 使用AP元素 属性 面板改变层的堆叠顺序 在 AP元素 面板或文档窗口中选择一个AP元素 在其 属性 面板的 Z轴 文本框中输入一个更高或更低的编号 使当前AP元素沿着堆叠顺序向上或向下移动 3 嵌套AP元素所谓嵌套APDiv 是指在一个APDiv元素中创建子APDiv元素 使用嵌套APDiv的好处是能确保子APDiv永远定位于父级APDiv上方 嵌套通常用于将AP元素组织在一起 1 创建嵌套AP元素使用下列方法之一 创建嵌套AP元素 应用菜单命令 将插入点放在现有AP元素中 选择 插入 布局对象 APDiv 命令 应用按钮拖曳 拖曳 插入 面板 布局 选项卡中的 绘制APDiv 按钮 然后将其放在现有AP元素中 应用按钮绘制 选择 编辑 首选参数 命令 启用 首选参数 对话框 在 分类 选项列表中选择 AP元素 选项 在右侧选择 在APDiv中创建以后嵌套 复选框 单击 确定 按钮 单击 插入 面板 布局 标签中的 绘制APDiv 按钮 在现有AP元素中 按住 Ctrl 键的同时拖曳鼠标绘制一个嵌套AP元素 创建的嵌套AP元素如图7 6所示 2 将现有AP元素嵌套在另一个AP元素中使用 AP元素 控制面板 将现有AP元素嵌套在另一个AP元素中的具体操作步骤如下 1 选择 窗口 AP元素 命令 启用 AP元素 控制面板 2 在 AP元素 控制面板中选择一个AP元素 然后按住 Ctrl 键的同时拖曳鼠标 将其移动到 AP元素 控制面板的目标AP元素上 当目标AP元素的名称突出显示时 松开鼠标左健 即可完成操作 本例将apDiv1拖曳到目标apDiv2中 效果如图7 7所示 提示 如果已启用 AP元素 控制面板中的 防止重叠 选项 那么在移动AP元素时将无法使AP元素相互重叠 图7 6创建嵌套的AP元素图7 7将apDiv1嵌套在apDiv2中 4 对齐AP元素使用AP元素对齐操作可将一个或多个AP元素与最后一个被选中AP元素的边界对齐 当对选定AP元素进行对齐时 未选定的子层可能会因为其父层被选定并移动而随之移动 为了避免出现这种情况 不要用嵌套层 对齐两个或更多个AP元素有以下几种方法 1 应用菜单命令对齐AP元素在文档窗口中 按住 Shift 键 依次选中需要对齐的多个AP元素 然后选择 修改 排列顺序 命令 在其子菜单中选择一种对齐方式 左对齐 以最后一个被选中AP元素的左侧为基准对齐 右对齐 以最后一个被选中AP元素的右侧为基准对齐 上对齐 以最后一个被选中AP元素的顶部为基准对齐 对齐下缘 以最后一个被选中AP元素的底部为基准对齐 2 应用 属性 面板对齐层选中需要对齐的多个AP元素 在 属性 面板的 上 或 左 选项中输入具体数据 则以多个层的上边线或左边线相对于页面顶部或左侧的位置来对齐 提示 在移动网页元素时 可以让其自动靠齐到网格 还可以通过指定网格设置来更改网格或控制靠齐行为 将AP元素靠齐到网格的具体方法 选择 查看 网格设置 显示网格 命令 启用网格显示 选择 查看 网格设置 靠齐到网格 命令 选中AP元素并拖动 当AP元素靠近网格线一定距离时 该AP元素将自动靠齐到最近的网格 7 2案例1使用APDiv元素布局网页 利用APDiv制作的图文混排网页效果如图7 8所示 图7 8用APDiv元素布局网页效果图 本实例在文档中创建四个APDiv元素 为其中的一个元素添加图像 为其他三个元素添加文字 通过对两个嵌套的APDiv元素属性设置 实现文字的阴影特效 具体步骤如下 1 在DreamweaverCS4中新建一个空白HTML文档 并将其以 7 1 html 为文件名保存 2 创建APDiv元素 在 布局 选项卡下单击 绘制APDiv 按钮 在文档中绘制一个APDiv 选中绘制的APDiv 在其 属性 面板将其命名为image 设置其 左 上 宽 高 各为50px 10px 800px 600px 背景颜色 为 CCFFCC 3 根据步骤2 插入新的APDiv元素 并将其命名为bottom 设置其 上 宽 高 各为610px 800px 50px 背景颜色 为 FF9966 4 对齐AP元素 选中插入的两个AP元素 选择 修改 排列顺序 命令 在其子菜单中选择 左对齐 将两个AP元素左边缘对齐 5 创建嵌套AP元素 打开 AP元素 面板 在 防止重叠 复选框未被选中状态下 选中image元素 确保光标处于激活状态 选择 插入 布局对象 APDiv 命令 在image元素左上角插入一个嵌套APDiv 并将其命名为smallbox 其 宽 高 分别设置为200px和60px 6 用同样的方法 在image元素中创建嵌套的APDiv元素bgsmallbox 设置和smallbox元素相同的 宽 高 属性 并将其调整到合适位置 在 AP属性 面板中 将smallbox元素和bgsmallbox的 Z 轴属性分别设置为3和2 此时 AP元素 面板如图7 9所示 7 按住 Shift 键 同时选中被嵌套的两个元素 选择 修改 排列顺序 右对齐 命令 将这两个APDiv元素按照后选择的元素进行右对齐 设置后的4个APDiv元素布局如图7 10所示 8 激活image元素 将光标置于该元素的左上角 在该元素内部插入一幅图片 9 激活bottom元素 在bottom元素中输入文本 并设置文字的 字体 属性为宋体 大小 为18px 图7 9 AP元素 面板图7 10四个APDiv元素的布局 10 依次在smallbox bgsmallbox中输入 我爱我家 文字 并分别设置文字的 字体 属性为华文新魏 大小 为36px 颜色 分别为 FFBB00和 000000 效果如图7 11所示 11 调整smallbox和bgsmallbox元素到适当位置 使其产生阴影效果 12 保存网页文档 按下 F12 键打开浏览器预览效果 提示 在文档中有多个APDiv元素 在操作时 为避免其相互影响 可在 AP面板 中将目前没有激活的元素设置为隐藏 图7 11在APDiv元素中添加文字和图片 学习任务 APDiv与表格相互转换 将APDiv元素转换为表格将表格转换为APDiv元素 将APDiv元素转换为表格 使用APDiv可以方便的定位网页中的元素 从而实现网页的布局 与前面学过的表格相比 APDiv元素操作更加方便 实现更为灵活 功能更加强大 考虑到浏览器兼容性问题 有时候需要将APDiv转换为表格 以防止版本过低的浏览器 IE3 0及其以下版本浏览器 不支持APDiv 另外 可以通过APDiv和表格相互转换来充分发挥两种不同布局方式的优点 方便地布局页面 在Dreamweaver中打开已有的网页文件 如图7 12所示 该页面由两个APDiv元素构成 将页面中的APDiv元素转化为表格的具体操作如下 1 选择 修改 转换 将APDiv转换为表格 菜单命令 弹出 将APDiv转换为表格 对话框中 如图7 13所示 将APDiv转换为表格 对话框各选项含义如下 最精确 单选按钮 将所有APDiv转换为表格 若APDiv元素之间存在间隙 则通过插入单元格来填充这些间隙 图7 12用APDiv元素布局的网页 图7 13 将APDiv元素转换为表格 对话框 最小 合并空白单元 单选按钮 将一定距离以内的APDiv元素创建为相邻的单元格 即融合其间的间隙 选中该单选按钮 可在其下方的文本框中输入最小距离值 使用透明GIFs 复选框 将转换后表格的最后一行中填充为透明的GIF图像 这样可以确保在所有的浏览器中表格显示结果一致 如果取消此选项 则表格中不再放置透明GIF图像 这样的表格可能在不同浏览器中显示稍有差异 置于页面中央 复选框 选中此复选框 则生成的表格在页面居中位置 若取消此复选框 则生成的表格在页面中左对齐 防止重叠 复选框 选中此复选框 可以防止APDiv重叠 显示AP元素面板 复选框 选中此复选框 在转换完成后会显示 AP元素 面板 显示网格 复选框 选中此复选框 可以在转换后的文档中显示网格线 靠齐到网格 复选框 选中此复选框 可以将转换后的文档靠齐到网格 保持默认设置 单击 确定 按钮 将文档中的APDiv元素转换为表格 提示 如果文档有嵌套的APDiv