第9章创建和使用AP元素

1、Dreamweaver CS3中文版应用教程第9章 创建和使用AP元素重点内容： 创建AP元素 设置AP元素属性 编辑AP元素 AP元素和表格的转换Dreamweaver CS3中文版应用教程一、 AP元素的概念与作用 AP元素又称为绝对定位元素，是被分配有绝对位置的HTML页面元素。AP元素可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。 AP元素的主要功能是设计页面布局和制作动态效果。在Dreamweaver中，通过AP元素可以对文档内容实现精确定位。由于AP元素具有允许重叠的特性，用户可以控制隐藏或显示其中的任何一个，并通过设置行为使其交替出现产生动态效果。Dreamwea

2、ver CS3中文版应用教程二、 创建AP元素1.创建重叠式AP元素（1）单击“布局”工具栏中的“绘制AP div”按钮 ，然后在文档窗口中拖动绘制AP元素。（2）若要在文档中的特定位置插入AP元素的代码，可将插入点置于文档窗口中，然后选择“插入记录”|“布局对象”|“AP div”命令。Dreamweaver CS3中文版应用教程二、 创建AP元素2.创建平铺式AP元素 要创建平铺式AP元素，须在绘制AP元素之前在“AP元素”面板中选中“防止重叠”复选框。选中“防止重叠”复选框后，在绘制AP元素时若将指针移到了原有AP元素上，鼠标指针会变为禁用状态。Dreamweaver CS3中文版应用教

3、程二、 创建AP元素3.创建嵌入式AP元素 在已存在的AP元素中单击，然后选择“插入记录”|“布局对象”|“AP div”命令，或者将“布局”工具栏中的“绘制AP div”按钮直接拖动到已创建的AP元素中。插入嵌入式AP元素后，在“AP元素”面板中可以看到，子AP元素位于父AP元素的下方。Dreamweaver CS3中文版应用教程三、 设置AP元素的属性1.设置单个AP元素属性 选择一个AP元素后，属性检查器中即显示该AP元素当前的属性设置，可设置AP元素的各种属性。Dreamweaver CS3中文版应用教程三、 设置AP元素的属性2.同时设置多个AP元素属性 在页面中绘制了多个AP元素后

4、，当选择两个或更多AP元素时，AP元素的属性检查器中会显示文本属性及部分AP元素属性，用户可在此设置各AP元素的共同属性。Dreamweaver CS3中文版应用教程四、 编辑AP元素1.选择AP元素 选择一个AP元素：（1）在“AP元素”面板中单击AP元素的名称。（2）单击AP元素的标签。（3）单击AP元素的边框。 同时选择多个AP元素：（1）按住Shift键的同时单击“AP元素”面板上的多个AP元素名称。（2）按住Shift键的同时单击所需各AP元素的边框。Dreamweaver CS3中文版应用教程四、 编辑AP元素2.移动AP元素 将指针移到最后选定的AP元素的边框上，当光标变为 形状

5、时拖动。 按箭头键。使用该方法可一次移动一个像素。若在按箭头键的同时按住Shift键，可按当前网格靠齐增量来移动AP元素。Dreamweaver CS3中文版应用教程四、 编辑AP元素3.防止AP元素重叠 选中“AP元素”面板上的“防止重叠”复选框，或者选择“修改”|“排列顺序”|“防止AP元素重叠”命令。当启用防止AP元素重叠功能后，用户可以在现有AP元素上移动AP元素、调整AP元素大小，或者将某个AP元素嵌套在现有AP元素中。但是，Dreamweaver不会自动修正页面上现有的重叠AP元素，用户必须手动更改AP元素的位置，分离重叠的AP元素。Dreamweaver CS3中文版应用教程四、

6、 编辑AP元素4.改变AP元素的堆叠次序 选择一个AP元素，将该AP元素向上或向下拖动至所需的堆叠位置。在移动AP元素时，会出现一条指示线来表示该AP元素将出现的位置。当指示线出现在AP元素堆叠顺序中的所需位置时，松开鼠标左键。 在Z列中单击要更改的AP元素的编号，使其进入编辑状态，输入一个新的编号。输入比现有编号大的数值可使该AP元素的堆叠顺序上移；输入较小的编号则可使该AP元素的堆叠顺序下移。Dreamweaver CS3中文版应用教程四、 编辑AP元素5.显示/隐藏AP元素 AP元素的显示与隐藏是通过“AP元素”面板中的眼睛图标 来设置的，单击一个AP元素名称前面的眼睛图标可以更改其可见

7、性。当AP元素前面的眼睛图标为睁开状态时，表示处于显示状态；反之，当一个AP元素前面的眼睛图标为闭合状态时，表示处于隐藏状态。如果AP元素名称前没有任何图标，则其通常会继承其父级AP元素的可见性。Dreamweaver CS3中文版应用教程四、 编辑AP元素6.创建预先载入AP元素 在文档窗口中绘制一个能够覆盖文档中所有内容的AP元素，为其命名，并将其设置为位于堆叠顺序的最前面、背景颜色与页面背景相同。再在AP元素中输入如“请稍候，正在载入页”或“正在载入”等的提示信息。然后单击文档窗口左下角标记选择器中的标记选择页面全部内容，再在“行为”面板中单击“添加行为”按钮，从弹出的菜单中选择“显示-

8、隐藏元素”命令，打开“显示-隐藏元素”对话框，从“元素”列表框中选择该AP元素，单击“隐藏”按钮。完成设置后，用户可在“行为”面板中查看，以确保“显示-隐藏元 素”行为的事件为onLoad。Dreamweaver CS3中文版应用教程四、 编辑AP元素7.调整AP元素的大小 拖动AP元素选择框上的任一尺寸控制柄。 按下Ctrl+箭头键，每次可调整一个像素的大小。使用该方法只能移动AP元素的右边框和下边框，而不能使用上边框和左边框来调整大小。 按下Shift+Ctrl+箭头键，可按网格靠齐增量来调整所选AP元素的大小。 在AP元素的属性检查器中输入宽度和高度值。调整AP元素的大小并不定义该AP元素的多少内容是可见的。Dreamweaver CS3中文版应用教程四、 编辑AP元素8.对齐AP元素 AP元素的对齐方式包括左对齐、右对齐、上对齐和对齐下缘4种，选择“修改”|“排列顺序”子菜单中的相关命令即可。Dreamweaver CS3中文版应用教程五、 AP元素和表格的转换1.将AP元素转换成表格 先将各AP元素放置到所需的位置，并选中所有要转换成表格的AP元素，然后选择“修改”|“转换”|“将AP Div转换为表格”命令，