使用层APDiv搭建页面.ppt

项目三 布局技术 任务七 布局技术之三—层AP Div 技能目标 熟练运用层AP Div进行页面布局技术。 熟练运用层的嵌套和定位技术改变页面的布局。 知识目标 熟练掌握如何描绘层和层的插入。 掌握层的属性设置及调整。 掌握在层中输入文字、插入图像的方法。 掌握嵌套层的创建方法。 了解层与表格之间的相互转换方法。 任务七 布局技术之三—层AP Div 3.3.1 使用层AP Div搭建页面 3.3.2 问题探究—认识层AP Div 3.3.3 知识拓展—AP元素与表格的转换 3.3.3 知识拓展—拖动AP元素行为 3.3.3 知识拓展—显示-隐藏元素行为 任务七 AP Div —构建任务 工作任务 层是网页制作时经常用到的对象，也是重要的网页布局工具之一。由于层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。 任务七 AP Div —构建任务 工作流程 在站点中新建一个页面并保存。 在网页中插入一个层作为整个页面的限制范围。 插入嵌套子层。 在层中插入文字和图片元素。 在层中插入表格等复杂网页元素。 通过属性设置精确调整层的位置和大小。 任务七 AP Div —构建任务 任务七 AP Div —问题探究 在Dreamweaver CS3以下版本AP Div被称为层。AP Div又称绝对定位元素（AP元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的HTML页面构成元素。AP Div可以通过层的重叠和次序的改变，实现一组包含着文字或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过层子层遗传父层的嵌套特征，实现内容的可见及位置移动等。AP Div的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。 任务七 AP Div —问题探究 AP Div的创建 在Dreamweaver CS3中，可以在页面上轻松地创建和定位层AP Div。创建步骤如下： 选择菜单“插入记录/布局对象/AP Div”命令，在设计窗口创建一个预设大小的AP Div。 直接将“绘制AP Div”按钮拖动到设计窗口松开左键，就可在编辑区创建一个预设大小的AP Div。 单击“插入”面板中“布局”选项下的“绘制AP Div”按钮，这时鼠标形状变成了“+”形，按下鼠标左键并向右下拖动，画出大小合适的一个矩形，释放鼠标左键，就可以绘制AP Div。 任务七 AP Div —问题探究 属性设置 选中页面上的某个层后，在属性检查器上对应显示该层的所有属性，可查看或修改对应的属性值，如图所示。 任务七 AP Div —问题探究 AP元素面板 在AP元素比较多的情况下，AP元素面板提供了一种快速管理方法。利用AP元素面板可准确指定AP元素、防止重叠、更改可见性、嵌套或堆叠AP元素，大大简化了操作方法。 AP元素按照Z轴的顺序显示为一列名称。默认情况下，第一个创建的AP元素（Z轴为1）显示在列表底部，必威体育精装版创建的AP元素显示在列表顶部。不过，可以通过更改AP元素在堆叠顺序中的位置来更改它的Z轴。 任务七 AP Div —问题探究 AP元素面板 改变AP元素的可见性 AP元素面板中的眼睛图标表示其可见性，单击面板上眼睛图标就可以显示或隐藏对应APDiv。如果图标是睁开的眼睛，表示该AP元素是可见的；如果图标是闭上的眼睛，表示该AP元素是不可见的。如果没有眼睛图标，那么继承其父APDiv的可见性，没有嵌套的APDiv总是可见的。 改变层的堆叠顺序 在HTML代码中，AP元素的堆叠顺序或Z轴决定了AP元素在浏览器中绘制的顺序。AP元素的Z轴值越高，该AP元素在堆叠顺序中的位置就越高。 任务七 AP Div —问题探究 AP元素面板 AP Div的重叠与嵌套 如果页面上有两个交叉的AP Div，存在重叠与嵌套两种关系。重叠的两个AP Div是相互独立的，任何一个AP Div的改变不影响另外一个AP Div。 嵌套通常用于将AP Div组合在一起。嵌套AP Div和表格的嵌套有些类似，就是在层AP Div里面再建一个层AP Div。嵌套AP Div总是随其父AP Div一起被移动，并继承其父AP Div的所有特征，包括可视性和背景颜色等。与表格嵌套不同的是，父表格一定是大于子表