dreamever中如何应用AP元素和时间轴

1、第第8章应用章应用AP元素和时间轴元素和时间轴 本章导读：本章导读：AP：Absolute Position，绝对位置。，绝对位置。AP元素：分配有绝对位置的元素。元素：分配有绝对位置的元素。AP元素主要应用于网页布局设计中，主要指元素主要应用于网页布局设计中，主要指AP Div，它们可以提供，它们可以提供最精确的布局定位最精确的布局定位方式，使网页方式，使网页呈现出呈现出层叠层叠的效果。的效果。AP元素和时间轴相结合可以制作出元素和时间轴相结合可以制作出动态效果动态效果。v教学目标：本章将学习使用教学目标：本章将学习使用AP元素精确定位网页的元素精确定位网页的页面元素，达到能够精确定位布局并

2、能使用他们使页面元素，达到能够精确定位布局并能使用他们使网页呈现层叠效果。学会将时间轴和网页呈现层叠效果。学会将时间轴和AP元素动画结元素动画结合使用，实现网页的动态效果。合使用，实现网页的动态效果。v重点和难点：重点和难点： 1AP元素精确定位网页的页面元素元素精确定位网页的页面元素 2时间轴和时间轴和AP元素动画结合使用，实现网页的动元素动画结合使用，实现网页的动态效果态效果8.1 Div标签简介标签简介vDiv标签又称为标签又称为区隔标记区隔标记，它的主要作用是可将页面，它的主要作用是可将页面分割成不同区域，设定文字、图像和表格等的排列位分割成不同区域，设定文字、图像和表格等的排列位置，

3、并对他们进行精确定位。置，并对他们进行精确定位。 v标准的工作流程：创建标准的工作流程：创建CSS规则规则创建创建Div标签标签8.1.1为为Div标签定义标签定义CSS规则规则v操作方法：操作方法：方法方法1：打开：打开【CSS】面板，单击面板，单击【CSS】|【属性属性】|【新建新建CSS规则规则】按钮，打开按钮，打开【新建新建CSS规则规则】对话框进行设置。对话框进行设置。方法方法2：也可以使用：也可以使用“文本文本”菜单进行操作。菜单进行操作。注意：一般使用注意：一般使用ID选择器选择器8.1.2 Div标签的创建标签的创建v创建的方法创建的方法【插入记录插入记录】|【布局对象布局对象

4、】|【Div标签标签】菜单命令来实现。菜单命令来实现。使用工具栏按钮创建使用工具栏按钮创建通过表格转换为通过表格转换为Div（“修改修改”菜单）菜单）v注意插入在代码中的位置注意插入在代码中的位置v结构的隐藏（可视化助理）结构的隐藏（可视化助理）8.2 AP 元素的应用元素的应用vAP元素元素(绝对定位元素绝对定位元素)是分配有绝对位置的是分配有绝对位置的HTML元素。元素。v特点：可以任意调整特点：可以任意调整AP元素的大小、位置、叠放顺元素的大小、位置、叠放顺序等，它提供了一种在网页上序等，它提供了一种在网页上比较自由地进行布局比较自由地进行布局和设计的途径。和设计的途径。vAP Div是

5、使用最多的是使用最多的AP元素。元素。8.2.1应用应用AP Div创建创建AP元素元素v方法方法1：切换到：切换到【布局布局】工具栏，单击工具栏，单击【标准标准】按按钮，然后单击钮，然后单击【绘制绘制AP Div】按钮在设计视图中拖按钮在设计视图中拖曳鼠标绘制曳鼠标绘制AP元素。元素。v方法方法2：执行：执行【插入记录插入记录】|【布局对象布局对象】|【AP Div】菜单命令，与菜单命令，与【绘制绘制AP Div】按钮同样能达到插入按钮同样能达到插入AP Div的目的。的目的。v举例：举例：绘制四个绘制四个150130的紧密排列为的紧密排列为“田田”字型字型的的AP元素元素8.2.2 为为A

6、P元素添加内容元素添加内容v方法：在方法：在AP元素内部任意位置单击鼠标元素内部任意位置单击鼠标左键，光标将会在左键，光标将会在AP元素中闪动，即可元素中闪动，即可以为以为AP元素添加内容了。元素添加内容了。v举例：为刚才的四个举例：为刚才的四个AP元素插入图片元素插入图片8.2.3操作和管理操作和管理AP元素元素1选择选择AP元素：当元素：当AP元素的四边出现元素的四边出现8个控制点个控制点则说明已被选中。则说明已被选中。（1）选定单个）选定单个AP元素（三种方法）元素（三种方法）单击单击AP元素的选择柄元素的选择柄单击单击AP元素的边框元素的边框“AP元素元素”面板中单击面板中单击AP元素

7、的名称元素的名称（2）选定多个）选定多个AP元素元素+单击单击2、调整大小、调整大小v在按在按【Ctrl】键的同时按键的同时按键盘键盘上的方向键，每上的方向键，每次可调整次可调整1像素。像素。v鼠标鼠标拖动拖动v属性面板属性面板中输入数值中输入数值3、移动、定位、移动、定位v在按在按【shift】键的同时按键盘上的方向键，每键的同时按键盘上的方向键，每次可调整次可调整10像素像素;移动键盘上的方向键，每次移动键盘上的方向键，每次可调整可调整1像素。像素。v鼠标拖动鼠标拖动v属性面板中输入数值属性面板中输入数值4AP元素的隐藏与重叠元素的隐藏与重叠（1）显示和隐藏）显示和隐藏v选择选择AP元素后

8、，进入元素后，进入【属性属性】面板操作。面板操作。vAP元素面板中操作元素面板中操作（2）重叠）重叠5对齐对齐AP元素元素v使用对齐使用对齐AP元素命令就可按最后一个选定元素命令就可按最后一个选定AP元素的边框来对齐一个或多个元素的边框来对齐一个或多个AP元素。元素。v方法：执行方法：执行【修改修改】|【排列顺序排列顺序】命令命令6AP元素的属性面板元素的属性面板v单个单个AP元素的属性面板元素的属性面板v多个多个AP元素的属性面板元素的属性面板要求：掌握各个属性的含义。要求：掌握各个属性的含义。各个选项的功能（单个）：各个选项的功能（单个）：（1）CSS-P元素：元素：AP Div的名称，用

9、来识别不同的的名称，用来识别不同的AP Div，此处为此处为apDiv4。（2）左：）左：AP Div距离距离容器容器左边界的距离。左边界的距离。（3）上：）上：AP Div距离距离容器容器上边界的距离。上边界的距离。（4）宽：）宽：AP Div的宽度。的宽度。（5）高：）高：AP Div的高度。的高度。（6）Z轴：轴：AP Div的的Z轴顺序，或者说叠加顺序。数值高的轴顺序，或者说叠加顺序。数值高的AP元素会显示在数值低的上面。数值可以是正也可以是负。元素会显示在数值低的上面。数值可以是正也可以是负。（7）可见性：设置）可见性：设置AP Div的可见性，的可见性，AP Div的显示状态包括：

10、的显示状态包括：default（默认）：不指定可视性属性。当未指定可见性（默认）：不指定可视性属性。当未指定可见性时，大多数浏览器会默认为时，大多数浏览器会默认为inherit。inherit（继承）：使用该（继承）：使用该AP Div元素父级的可见属性。元素父级的可见属性。visible（可视）：显示（可视）：显示AP元素的内容，不管其父元素的内容，不管其父AP元素元素的值。的值。hidden（隐藏）：不显示（隐藏）：不显示AP元素内容，不管其父元素内容，不管其父AP元元素的值。素的值。（8）背景图像：为）背景图像：为AP Div设置一个背景图像，单击其文件夹设置一个背景图像，单击其文件夹图

11、标可浏览到一个图像文件并将其选定。图标可浏览到一个图像文件并将其选定。（9）背景颜色：设置）背景颜色：设置AP Div的背景颜色，如果将此选项留为的背景颜色，如果将此选项留为空白，则表示指定透明的背景。空白，则表示指定透明的背景。（10）类：选择）类：选择AP Div的样式的样式(如在页面中对如在页面中对AP Div进行了进行了CSS样式设置样式设置)。（11）溢出：设置当）溢出：设置当AP Div 元素超出了元素超出了AP Div范围后显示内范围后显示内容的方式。它包括容的方式。它包括visible (可视可视)：当：当AP元素内的内容超出了元素内的内容超出了AP元素的大小元素的大小则增大则

12、增大AP元素的尺寸。元素的尺寸。AP元素的扩展方向为下方和右方。元素的扩展方向为下方和右方。hidden (隐藏隐藏)：保持：保持AP元素的大小并裁掉容纳不下的东元素的大小并裁掉容纳不下的东西，并且不会出现滚动。西，并且不会出现滚动。scroll(滚动滚动)：无论：无论AP元素内的内容是否超出了，元素内的内容是否超出了，AP元元素的大小都为素的大小都为AP元素添加滚动条。元素添加滚动条。auto(自动自动)：只有当：只有当AP元素内的内容超出了它的边界才元素内的内容超出了它的边界才出现滚动条出现滚动条。（12）剪辑：定义）剪辑：定义AP Div的可见区域。指定左侧、顶部、右侧的可见区域。指定左

13、侧、顶部、右侧和底边坐标可在和底边坐标可在AP Div的坐标空间中定义一个矩形，一般的坐标空间中定义一个矩形，一般从从AP Div的左上角开始计算。的左上角开始计算。AP Div经过剪辑后，只有指经过剪辑后，只有指定的矩形区域才是可见的。定的矩形区域才是可见的。v文本属性部分在前面的学习中己经讲过，这里就不再重复了。文本属性部分在前面的学习中己经讲过，这里就不再重复了。这里只简单介绍下半部分的设置。这里只简单介绍下半部分的设置。（1）左、上：指定）左、上：指定AP元素相对页面或者其父元素相对页面或者其父AP元素左上角元素左上角的位置。的位置。（2）宽、高：指定）宽、高：指定AP元素的宽和高。当

14、元素的宽和高。当AP元素中的内容超元素中的内容超出设定值时这些值将失效。出设定值时这些值将失效。（3）显示：指定）显示：指定AP元素显示的初始情况元素显示的初始情况(显示与否显示与否)。（4）标签：指定所用的）标签：指定所用的HTML标签。标签。（5）背景图象：为）背景图象：为AP元素指定背景图像。元素指定背景图像。（6）背景颜色：为）背景颜色：为AP元素指定背景颜色。当这个选项空着即元素指定背景颜色。当这个选项空着即为指定透明背景。为指定透明背景。各个选项的功能（多个）：各个选项的功能（多个）：8.2.4嵌套嵌套AP元素元素v嵌套嵌套AP元素是指在元素是指在AP元素内部的子元素内部的子AP元

15、素。当移动元素。当移动AP元素的时候，其内部的嵌套元素的时候，其内部的嵌套AP元素也会随之移动。元素也会随之移动。1、执行、执行【编辑编辑】|【首选参数首选参数】命令，打开命令，打开“首选参数首选参数”对话框，选择对话框，选择【分类分类】，列表中的，列表中的【AP元素元素】，勾选，勾选【在在AP div中创建以后嵌套中创建以后嵌套】复选框。然后直接绘制。复选框。然后直接绘制。2、在、在AP元素内部使用插入菜单新建嵌套元素内部使用插入菜单新建嵌套AP元素。元素。3、将已经存在的、将已经存在的AP元素添加为另外一个元素添加为另外一个AP元素的嵌套元素的嵌套AP元素。（元素。（+拖动）拖动）讲讲CS

16、S中的定位属性中的定位属性8.2.5合并分割图像合并分割图像1、为什么要分割图像？、为什么要分割图像？在网页设计中，经常将较大的图像分割成若干个小图在网页设计中，经常将较大的图像分割成若干个小图像插入到网页中，防止长时间空白页面的出现。像插入到网页中，防止长时间空白页面的出现。2、合并的方法、合并的方法v步骤步骤1：选择需要显示的素材图像。：选择需要显示的素材图像。v步骤步骤2：根据图像的个数和位置创建若干：根据图像的个数和位置创建若干AP div，调整其，调整其大小和位置。大小和位置。注意要紧密排列、防止重叠。注意要紧密排列、防止重叠。v步骤步骤3：在其中放入图片。：在其中放入图片。注意注意

17、AP div大小和图片大小相同，防止空隙产生。大小和图片大小相同，防止空隙产生。v步骤步骤4（可选可选）（）转换为表格固定效转换为表格固定效果。果。“修改修改”菜单菜单3、举例说明、举例说明8.3 制作制作AP元素动画元素动画动画的原理：动画的原理： 画面的连续播放，产生的一种运画面的连续播放，产生的一种运动的错觉。动的错觉。实现方法：实现方法： 时间轴时间轴8.3.1.认识认识“时间轴时间轴”面板面板（1）“时间轴时间轴”下拉列表框：指定当前在下拉列表框：指定当前在【时间轴时间轴】面板中显面板中显示文档的哪些时间轴。示文档的哪些时间轴。（2）播放栏：播放栏所处位置就是动画当前所在时间轴的帧。

18、）播放栏：播放栏所处位置就是动画当前所在时间轴的帧。（3）动画条：显示每个对象的动画的持续时间。一个行可以包）动画条：显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。一对象。（4）关键帧）关键帧: 是动画条中已经为对象指定属性是动画条中已经为对象指定属性(如位置如位置)的帧。的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示会计算关键帧之间帧的中间值。小圆标记表示关键帧。关键帧。（5）帧编号：指示帧的序号。）帧编号：指示帧的序号。【后退后退】和和【播放播放】按钮之间的按钮

19、之间的数字数字8是当前帧编号。可以通过设置帧的总数和每秒帧数来控是当前帧编号。可以通过设置帧的总数和每秒帧数来控制动画的持续时间。每秒制动画的持续时间。每秒15帧这一默认设置是比较适当的平帧这一默认设置是比较适当的平均速率，可用于在通常的均速率，可用于在通常的Windows和和Macintosh系统上运行系统上运行的大多数浏览器。的大多数浏览器。（6）“行为行为”通道：是应该在时间轴中特定帧处执行的行为的通道：是应该在时间轴中特定帧处执行的行为的通道。通道。（7）“动画动画”通道：显示用于制作通道：显示用于制作AP元素和图像动画的条。元素和图像动画的条。（8）前进按钮将播放栏移至时间轴中的第一

20、帧。）前进按钮将播放栏移至时间轴中的第一帧。（9）后退按钮将播放栏向左移动一帧。单击）后退按钮将播放栏向左移动一帧。单击【后退后退】按钮并按按钮并按住鼠标可向后播放时间轴。住鼠标可向后播放时间轴。（10）播放按钮将播放栏向右移动一帧。单击）播放按钮将播放栏向右移动一帧。单击【播放播放】按钮并按钮并按住鼠标可向前播放时间轴。按住鼠标可向前播放时间轴。（11）自动播放：勾选自动播放选项可以使时间轴在浏览器中）自动播放：勾选自动播放选项可以使时间轴在浏览器中加载时自动开始播放。加载时自动开始播放。“自动播放自动播放”将一个行为附加到页的将一个行为附加到页的body标签，它在页加载时执行标签，它在页加

21、载时执行“播放时间轴播放时间轴”操作。操作。（12）循环：勾选循环选项可以使时间轴于当前页在浏览器中）循环：勾选循环选项可以使时间轴于当前页在浏览器中打开时无限地循环。打开时无限地循环。“循环循环”在动画的最后一帧之后将在动画的最后一帧之后将“转转到时间轴帧到时间轴帧”行为插入到行为插入到“行为行为”通道中。在通道中。在“行为行为”面板面板中双击该行为的标记可编辑此行为的参数并更改循环的次数。中双击该行为的标记可编辑此行为的参数并更改循环的次数。8.3.2创建时间轴动画创建时间轴动画注意：时间轴只能移动注意：时间轴只能移动AP元素，所以待移动的元素应放元素，所以待移动的元素应放AP元元素中。素中。举例说明以下步骤举例说明以下步骤步骤步骤1：制作：制作AP元素元素步骤步骤2：将：将AP元素拖动到元素拖动到“时间轴时间轴”面板或面板或使用使用“修改修改”菜单菜单步骤步骤3 ：拖动最后一帧到需要的帧数：拖动最后一帧到需要的帧数步骤步骤4 ：增加关键帧，并修改其属性：增加关键帧，并修改其属性步骤步骤5 ：选定：选定“自动播放自动播放”和和“循环循环”选项选项8.3.3使用多个时间轴使用多个时间轴