第11章应用AP元素和时间轴.pptVIP

应用AP元素和时间轴 本章导读：AP元素主要应用于网页布局设计中，主要包括AP Div和Div标签，它们可以提供最精确的布局定位方式，使网页呈现出层叠的效果和动态效果。 教学目标：本章将学习使用AP元素精确定位网页的页面元素，达到能够精确定位布局并能使用他们使网页呈现层叠效果。学会将时间轴和AP元素动画结合使用，实现网页的动态效果。 重点和难点： 1．AP元素精确定位网页的页面元素 2．时间轴和AP元素动画结合使用，实现网页的动态效果 8.1 Div标签简介 8.2 AP 元素的应用 8.3 制作AP元素动画 8.4综合实训 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”，单击【确定】按钮。 步骤4：自动弹出【保存样式表文件为】对话框，设置好后单击【保存】按钮。 步骤5：自动弹出【CSS规则定义】对话框，在【分类】列表中选择【定位】选项，设置内部或外部样式表的AP Div属性。 步骤6：选择其他分类并输入样式表属性，单击【确定】按钮，完成为Div标签定义CSS规则。 8.1.2 Div标签的创建 在Dreamweaver CS3中创建Div标签可以通过执行【插入记录】|【布局对象】|【Div标签】菜单命令来实现，也可以通过对表格中的对象进行格式操作来实现Div标签的创建。 添加Div标签的具体步骤如下所示：  步骤1：将光标定位到希望放置Div标签的地方。 步骤2：执行【插入记录】|【布局对象】|【Div标签】菜单命令，打开【插入Div标签】对话框。 步骤3：从【类】或【ID】下拉菜单中选择CSS规则。 步骤4：单击【确定】按钮，完成插入Div标签。 8.2 AP 元素的应用 AP元素(绝对定位元素)是分配有绝对位置的HTML页面，它提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整AP元素的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。 AP Div是使用最多的AP元素，下面将分别介绍AP元素的创建、设置属性和大小以及嵌套的知识。 8.2.1应用AP Div创建AP元素 下面我们来一起绘制四个AP元素 步骤1：新建一个网页文档。切换到【布局】工具栏，单击【标准】按钮，然后单击【绘制AP Div】按钮在设计视图中拖曳鼠标绘制AP元素。 步骤2：执行【插入记录】|【布局对象】|【AP Div】菜单命令，与【绘制AP Div】按钮同样能达到插入AP Div的目的，在第一个AP Div右边绘制第二个AP元素。 步骤3：绘制第一个AP元素，设置“左”和“上”分别为空，“宽”和“高”分别为“150px”和“130px”， 设置“左”和“上”分别为“0px”和“0px” 。 步骤4：再次单击【绘制AP Div】，设置第二个AP元素的“宽”和“高”分别为“150px”和“130px”，设置“左”和“上”分别为“150px”和“0px”，设置二个元素紧密排列在一起。 8.2.2 为AP元素添加内容 步骤1：在第一个AP元素内部任意位置单击鼠标左键，光标将会在AP元素中闪动，现在就可以为AP元素添加内容了。 步骤2：切换到【常用】工具栏，单击【图像】按钮，从弹出的【选择图像源文件】对话框中选择需要得图片文件。 步骤3：按照同样方法在其他3个元素中也插入图像。 步骤4：如果图片的大小超过了AP元素大小，点击图片，修改图片的【属性】面板，宽和高的设置为AP元素的大小。 8.2.3操作和管理AP元素 在页面中插入AP元素以后，还必须根据页面布局需要对所插入的AP元素进行操作和管理。如选择AP元素并对AP元素进行移动位置、调整大小，对齐、更改AP元素的堆叠顺序和可见性等。下面介绍一下操作和管理AP元素的方法。 1．选择AP元素并调整大小 要对已插入的AP元素进行修改和操作，首先选择AP元素，当此AP元素的四边出现8个控制点则说明已被选中。 步骤1：选择一个AP元素并调整大小。在文档设计视图中单击第