第11章 AP元素11.24 - 图文

第1章 应用AP元素和时间轴

本章导读：AP元素主要应用于网页布局设计中，主要包括AP Div和Div标签，它们可以提供最精确的布局定位方式，使网页呈现出层叠的效果和动态效果。

教学目标：本章将学习使用AP元素精确定位网页的页面元素，达到能够精确定位布局并能使用他们使网页呈现层叠效果。学会将时间轴和AP元素动画结合使用，实现网页的动态效果。

重点和难点：

1．AP元素精确定位网页的页面元素

2．时间轴和AP元素动画结合使用，实现网页的动态效果

8.1 Div标签简介

Div标签又称为区隔标记，它的主要作用是可将页面分割成不同区域，设定文字、图像和表格等的排列位置，并对他们进行精确定位。

8.1.1为Div标签定义CSS规则

使用Div标签对象时，标准的工作流程是先创建所需的CSS规则。具体的操作步骤如下所示：

步骤1：执行【窗口】|【CSS样式】菜单命令，打开【CSS】面板，如图8-1所示。 步骤2：单击【CSS】|【属性】|【新建CSS规则】按钮，打开【新建CSS规则】对话框。

步骤3：在【新建CSS规则】|【选择器类型】选项设定为【高级】，在【选择器】文本框中输入想要创建的样式名。建议按照ID来创建用于Div标签的样式。要创建ID，在样式名添加一个磅符，例如“#mainweb”，单击【确定】按钮。如图8-2所示。

步骤4：自动弹出【保存样式表文件为】对话框，设置好后单击【保存】按钮。

步骤5：自动弹出【CSS规则定义】对话框，在【分类】列表中选择【定位】选项，设置内部或外部样式表的AP Div属性，如图8-3所示。

图8-1 打开【CSS】面板 图8-2 【新建CSS规则】对话框

步骤6：选择其他分类并输入样式表属性，单击【确定】按钮，完成为Div标签定义CSS规则。

图8-3 【CSS规则定义】对话框

定义Div标签有助于我们后期的操作更便捷。

8.1.2 Div标签的创建

在Dreamweaver CS3中创建Div标签可以通过执行【插入记录】|【布局对象】|【Div标签】菜单命令来实现，也可以通过对表格中的对象进行格式操作来实现Div标签的创建。效果如图8-4所示。

图8-4 插入Div标签

Div标签是一种结构化元素，在运行时，通过浏览器浏览的时候不会显示出来。而设计时却需要显示出来，使设计师能够看到底层结构来对布局进行操作，进行设计时同时还需要能够随时隐藏结构以便能够看到类似浏览器的视图。

定义了Div标签的CSS规则之后，添加Div标签的具体步骤如下所示： 步骤1：将光标定位到希望放置Div标签的地方。

步骤2：执行【插入记录】|【布局对象】|【Div标签】菜单命令，打开【插入Div标签】对话框，如图8-5所示。

步骤3：从【类】或【ID】下拉菜单中选择CSS规则。 步骤4：单击【确定】按钮，完成插入Div标签。

图8-5 【插入Div标签】对话框

8.2 AP 元素的应用

AP元素(绝对定位元素)是分配有绝对位置的HTML页面，它提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整AP元素的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。

AP Div是使用最多的AP元素，下面将分别介绍AP元素的创建、设置属性和大小以及嵌套的知识。

8.2.1应用AP Div创建AP元素

Dreamweaver软件让用户可以在不必使用代码的情况下创造性地、精确地添加嵌入的AP Div。我们对AP Div可以进行拖动操作，可以通过视觉判断放置位置或者改变它的大小，也可以通过数值进行精确操作。设计师可以通过组合的方法，即先快速地目测，大致完成AP元素的布局，然后使边缘精确对齐。对于习惯了传统页面布局的网页设计人员而言，Dreamweaver CS3可以使用标尺和网格，以便用户使各个层精确对齐。

下面我们来一起绘制四个AP元素

步骤1：新建一个网页文档。切换到【布局】工具栏，单击【标准】按钮，然后单击【绘制AP Div】按钮在设计视图中拖曳鼠标绘制AP元素，如图8-6所示。

步骤2：执行【插入记录】|【布局对象】|【AP Div】菜单命令，与【绘制AP Div】按钮同样能达到插入AP Div的目的，在第一个AP Div右边绘制第二个AP元素，如图8-7所示。

图8-6 【绘制AP Div】按钮 图8-7 【AP Div】菜单命令

注意：插入AP Div后，处于选中状态时周围有蓝色的粗线边框，左上角有个标志图标，单击该图标，可以选择AP Div；在图标上按鼠标左键并拖曳可以将AP元素放置在任何位置；单击该图标，可以查看AP Div的属性。

步骤3：绘制第一个AP元素，设置“左”和“上”分别为空，“宽”和“高”分别为“150px”和“130px”， 设置“左”和“上”分别为“0px”和“0px”，如图8-8所示。

步骤4：再次单击【绘制AP Div】，设置第二个AP元素的“宽”和“高”分别为“150px”和“130px”，设置“左”和“上”分别为“150px”和“0px”，设置二个元素紧密排列在一起，如图8-9所示。

图8-8设置第一个AP元素属性 图8-9设置第二个AP元素元素属性

步骤5：按照同样的方法，再绘制两个同样大小的AP元素，并设置四个元素紧密排列在一起，最后效果如图8-10所示。

图8-10 绘制4个AP元素 图8-11 为AP元素添加内容

8.2.2 为AP元素添加内容

步骤1：在第一个AP元素内部任意位置单击鼠标左键，光标将会在AP元素中闪动，现在就可以为AP元素添加内容了，如图8-11所示。

步骤2：切换到【常用】工具栏，单击【图像】按钮，从弹出的【选择图像源文件】对话框中选择需要得图片文件，如图8-12所示

图8-12 插入图像 图8-13修改图片的【属性】面板

步骤3：按照同样方法在其他3个元素中也插入图像。

步骤4：如果图片的大小超过了AP元素大小，点击图片，修改图片的【属性】面板，宽和高的设置为AP元素的大小，如图8-13所示。

8.2.3操作和管理AP元素

在页面中插入AP元素以后，还必须根据页面布局需要对所插入的AP元素进行操作和管理。如选择AP元素并对AP元素进行移动位置、调整大小，对齐、更改AP元素的堆叠顺序和可见性等。下面介绍一下操作和管理AP元素的方法。

1．选择AP元素并调整大小

要对已插入的AP元素进行修改和操作，首先选择AP元素，当此AP元素的四边出现8个控制点则说明已被选中。

步骤1：选择一个AP元素并调整大小。在文档设计视图中单击第一个元素的选择柄，选择AP元素。如果选择柄不可见，请在该AP元素中的任意位置单击以显示该选择柄。把鼠标放在8个控制点的任意一个点上，光标即变成双箭头状，这时就可以根据自己的需要拖曳鼠标，随意调整AP元素的大小，如图8-14所示。

本文来源：https://www.bwwdw.com/article/r3ph.html