《第10章使用AP元素和时间轴》由会员分享，可在线阅读，更多相关《第10章使用AP元素和时间轴（39页珍藏版）》请在金锄头文库上搜索。
1、APAP元素是分配有绝对位置的元素是分配有绝对位置的HTMLHTML页面元页面元素，时间轴是素，时间轴是DreamweaverDreamweaver实现动画的关键功实现动画的关键功能。本章将介绍能。本章将介绍APAP元素和时间轴的基本知识元素和时间轴的基本知识以及使用它们创建动画的基本方法。以及使用它们创建动画的基本方法。第第1010章章 使用使用APAP元素和时间轴元素和时间轴学习目标了解了解APAP元素和元素和AP DivAP Div的概念。的概念。掌握掌握【APAP元素元素】面板的使用方法。面板的使用方法。掌握创建掌握创建AP DivAP Div的基本方法。的基本方法。掌握编辑掌握编辑A
2、P DivAP Div的基本作方法。的基本作方法。掌握掌握【时间轴时间轴】面板的使用方法。面板的使用方法。掌握使用掌握使用AP DivAP Div和时间轴创建动画的方法。和时间轴创建动画的方法。10.1 AP元素APAP元素和元素和AP DivAP Div【APAP元素元素】面板面板10.1.1AP元素和AP Div在在Dreamweaver CS3中，分配有绝对位置的中，分配有绝对位置的HTML页面元素页面元素统称为统称为AP元素。例如，具有绝对定位的元素。例如，具有绝对定位的div标签，习惯称标签，习惯称AP Div，可以是，可以是AP元素，同样具有绝对定位的元素，同样具有绝对定位的tab
3、le标也可以是标也可以是AP元素元素。10.1.1AP元素和AP DivAP Div主要有以下几方面的功能主要有以下几方面的功能。AP DivAP Div是绝对定位的，游离在文档之上，利用它可以是绝对定位的，游离在文档之上，利用它可以浮动定位网页元素浮动定位网页元素。AP DivAP Div的的z z轴属性使多个轴属性使多个AP DivAP Div可以发生堆叠，也就是可以发生堆叠，也就是多重叠加的效果多重叠加的效果。可以控制可以控制AP DivAP Div的显示和隐藏，使网页的内容变得更的显示和隐藏，使网页的内容变得更加丰富加丰富。10.1.2 【AP元素】面板所有具有绝对定位的所有具有绝对定
4、位的AP元素都会显示在元素都会显示在【AP元素元素】面板中。面板中。选择选择【窗口窗口】/【AP元素元素】命令，可以打开命令，可以打开【AP元素元素】面板。在面板。在对对AP Div进行各种操作和管理时，会经常用到进行各种操作和管理时，会经常用到【AP元素元素】面板，面板，它与它与【属性属性】面板配合使用，可以方便快捷地对面板配合使用，可以方便快捷地对AP Div进行各种进行各种操作。操作。10.1.2 【AP元素】面板在在【AP元素元素】面板中可以实现以下功能。面板中可以实现以下功能。可以对可以对AP DivAP Div进行重命名。进行重命名。可以修改可以修改AP DivAP Div的的z
5、z轴顺序。轴顺序。可以禁止可以禁止AP DivAP Div重叠。重叠。可以显示或隐藏可以显示或隐藏AP DivAP Div。可以选定可以选定AP DivAP Div，如果按住，如果按住ShiftShift键不放，依次单键不放，依次单击可以选中多个击可以选中多个AP DivAP Div。按住按住CtrlCtrl键不放，将某一个键不放，将某一个AP DivAP Div拖动到另一个拖动到另一个AP AP DivDiv上，形成嵌套的上，形成嵌套的AP DivAP Div。10.2 创建AP Div创建创建AP DivAP Div选定选定AP DivAP DivAP DivAP Div属属性性AP Di
6、vAP Div的默认设置的默认设置10.2.1 创建AP Div将鼠标光标置于文档窗口中欲插入将鼠标光标置于文档窗口中欲插入AP DivAP Div的位置，选的位置，选择择【插入记录插入记录】/ /【布局对象布局对象】/ /【AP DivAP Div】命令，插命令，插入一个默认的入一个默认的AP DivAP Div。将将【插入插入】/ /【布局布局】面板上的面板上的 （绘制绘制AP DivAP Div）按）按钮拖曳到文档窗口中，插入一个默认的钮拖曳到文档窗口中，插入一个默认的AP DivAP Div。10.2.1 创建基本的AP Div单击单击【插入插入】/ /【布局布局】面板上的面板上的 （
7、绘制绘制AP DivAP Div） 按钮，按钮，将鼠标光标移至文档窗口中，当鼠标光标变为将鼠标光标移至文档窗口中，当鼠标光标变为+ +形状时，拖形状时，拖曳鼠标光标，绘制一个自定义大小的曳鼠标光标，绘制一个自定义大小的AP DivAP Div。如果想一次绘。如果想一次绘制多个制多个AP DivAP Div，在单击，在单击 （绘制绘制AP DivAP Div） 按钮后，按住按钮后，按住CtrlCtrl键不放，连续进行绘制即可键不放，连续进行绘制即可。10.2.2选择AP Div单单击击文文档档中中的的 图图标标来来选选定定AP Div，如如果果该该图图标标没没有有显显示示，请请在在【首首选选参参
8、数数】/【不不可可见见元元素素】分分类类中中勾勾选选【AP元元素素的锚点的锚点】复选框。复选框。将将鼠鼠标标光光标标置置于于AP Div内内，然然后后在在文文档档窗窗口口底底边边的的标标签签条条中选择相应的中选择相应的HTML标签。标签。10.2.2选择AP Div单击单击AP Div的边框线。的边框线。在在【AP元素元素】面板中单击面板中单击AP Div的名称。的名称。如如果果要要选选定定两两个个以以上上的的AP Div，只只要要按按住住Shift键键，在在文文档档窗窗口口中中逐逐个个单单击击AP Div手手柄柄，或或在在【AP元元素素】面面板板中中逐逐个个单击单击AP Div的名称，就可将
9、的名称，就可将AP Div同时选定。同时选定。10.2.3AP Div属性当当在在文文档档中中插插入入一一个个默默认认大大小小的的AP Div后后，在在【属属性性】面板中可以查看其相关属性。面板中可以查看其相关属性。10.2.4 AP Div的默认设置选择【编辑】选择【编辑】/【首选参数】命令，打开【首选参数】对话框，在其【首选参数】命令，打开【首选参数】对话框，在其中的【分类】列表框中选择【中的【分类】列表框中选择【AP元素】分类元素】分类。10.3 编辑AP Div缩放缩放AP Div移动移动AP Div对齐对齐AP DivAP Div的可见性的可见性AP Div的的Z轴顺序轴顺序嵌套嵌套
10、AP Div10.3.110.3.1缩放缩放AP DivAP Div缩放单个缩放单个AP Div有以下几种方法。有以下几种方法。选选定定AP Div，然然后后拖拖动动缩缩放放手手柄柄（AP Div周周围围出出现现的的小小方方块块）来来改改变变AP Div的的尺尺寸寸。拖拖动动上上或或下下手手柄柄改改变变AP Div的的高高度度，拖拖动动左左或或右右手手柄柄改改变变AP Div的的宽宽度度，拖拖动动4个个角角的的任任意意一一个个缩缩放放点点同同时时改改变变AP Div的宽度和高度。的宽度和高度。选选定定AP Div，然然后后按按住住Ctrl键键，每每按按一一次次方方向向键键，AP Div就被改变
11、一个像素值。就被改变一个像素值。选选定定AP Div，然然后后同同时时按按住住ShiftCtrl键键，每每按按一一次方向键，次方向键，AP Div就被改变就被改变10个像素值。个像素值。10.3.110.3.1缩放缩放AP DivAP Div如如果果同同时时对对多多个个AP Div的的大大小小进进行行统统一一调调整整，方方法法是是，按按住住Shift键键，将将所所有有的的AP Div逐逐一一选选定定，然然后后在在【属属性性】面面板板的的【宽宽】文文本本框框内内输输入入数数值值，按按Enter键键确确认认。此此时时文文档档窗窗口口中中所所有有AP Div的的宽宽度度全全部部变变成成了了指指定定的
12、的宽宽度度。还还可可以以使使用用【修修改改】/【排排列列顺顺序序】/【设设成成宽宽度度相相同同】命命令令来来统统一一宽宽度度，利利用用这这种种方方法法将将以以最后选定的最后选定的AP Div的宽度为标准。的宽度为标准。10.3.210.3.2移动移动AP DivAP Div要要想想精精确确定定位位AP Div，许许多多时时候候要要根根据据需需要要移移动动AP Div。移移动动AP Div时时，首首先先要要确确定定AP Div是是可可以以重重叠叠的的，也也就就是是不不勾勾选选【AP元元素素】面面板板中中的的【防防止止重重叠叠】复复选选框框，这这样样AP Div可以不受限制地被移动。移动可以不受限
13、制地被移动。移动AP Div的方法主要有以下几种。的方法主要有以下几种。选选定定AP Div后后，当当鼠鼠标标光光标标靠靠近近缩缩放放手手柄柄出出现现 时时，按按住住鼠鼠标标左左键键拖拖动动鼠鼠标标，AP Div将将跟跟着着鼠鼠标标的的移移动动而而发发生生位移。位移。选选定定AP Div，然然后后按按4个个方方向向键键，向向4个个方方向向移移动动AP Div。每按一次方向键，将使每按一次方向键，将使AP Div移动移动1个像素值的距离。个像素值的距离。选选定定AP Div，按按住住Shift键键，然然后后按按4个个方方向向键键，向向4个个方方向向移移动动AP Div。每每按按一一次次方方向向键
14、键，将将使使AP Div移移动动10个个像素值的距离。像素值的距离。10.3.310.3.3对齐对齐AP DivAP Div 对对齐齐功功能能可可以以使使两两个个或或两两个个以以上上的的AP Div按按照照某某一一边边界界对对齐齐。对对齐齐AP Div的的方方法法是是，首首先先将将所所有有AP Div选选定定，然然后后选选择择【修修改改】/【排排列列顺顺序序】中中的的相相应应命命令令，如如选选择择【对对齐齐下下缘缘】命命令令，将将使使所所有有被被选选中中的的AP Div的的底底边边按按照照最最后后选选定定的的AP Div的的底底边边对对齐齐，即即所所有有AP Div的的底底边边都都排排列列在在
15、一一条水平线上条水平线上。在在【修改修改】/【排列顺序排列顺序】菜单中，共有以下菜单中，共有以下4种对齐方式。种对齐方式。【左左对对齐齐】：以以最最后后选选定定的的AP Div的的左左边边线线为为标标准准，对对齐排列齐排列AP Div。【右右对对齐齐】：以以最最后后选选定定的的AP Div的的右右边边线线为为标标准准，对对齐排列齐排列AP Div。【对对齐齐上上缘缘】：以以最最后后选选定定的的AP Div的的顶顶边边为为标标准准，对对齐排列齐排列AP Div。【对对齐齐下下缘缘】：以以最最后后选选定定的的AP Div的的底底边边为为标标准准，对对齐排列齐排列AP Div。10.3.410.3.
16、4AP DivAP Div的可见性的可见性AP Div内内可可以以包包含含所所有有的的网网页页元元素素，通通过过改改变变AP Div的的可可见见性性，可可以以控控制制AP Div内内元元素素的的显显示示与与隐隐藏藏。改改变变AP Div的可见性可以通过的可见性可以通过【AP元素元素】面板或面板或【属性属性】面板进行。面板进行。AP Div名名称称左左边边为为 状状态态时时，表表示示AP Div为为可可见见，这这时时【属性属性】面板中的面板中的【可见性可见性】选项为选项为“visible”（可见）。（可见）。10.3.410.3.4AP DivAP Div的可见性的可见性AP Div名名称称左左
17、边边为为 状状态态时时，表表示示AP Div为为不不可可见见，这这时时【属性】面板中的【可见性】选项为【属性】面板中的【可见性】选项为“hidden”（隐藏（隐藏）。10.3.410.3.4AP DivAP Div的可见性的可见性AP Div名名称称左左边边没没有有 或或 时时，表表示示可可见见性性为为默默认认，【属属性】面板中的【可见性】选项为性】面板中的【可见性】选项为“default”。10.3.510.3.5AP DivAP Div的的z z轴顺序轴顺序 AP Div的的 z轴轴的的含含义义是是，除除了了屏屏幕幕的的x、y坐坐标标之之外外，逻逻辑辑上上增增加加了了一一个个垂垂直直于于屏
18、屏幕幕的的z轴轴，z轴轴顺顺序序就就好好像像AP Div在在z轴轴上上的的坐坐标标值值。这这个个坐坐标标值值可可正正可可负负，也也可可以以是是0，数数值值大大的的在在上上层层。改改变变AP Div的的z轴轴顺顺序序的的方方法法很很简简单单，只只需需打打开开【AP元元素素】面面板板，用用鼠鼠标标指指向向需需要要改改变变序序号号的的AP Div，按按住住左左键键向向上上或或向向下下拖拖曳曳光光标标，当当拖拖曳曳到到将将要要插插入入的的两两个个AP Div之之间间时时，会会出出现现一一条条横横线线，此此时时释释放放鼠鼠标标左左键键，各各个个AP Div的的z轴轴顺顺序序会会做相应的改变做相应的改变。
19、10.3.610.3.6嵌套嵌套AP DivAP Div AP Div的的嵌嵌套套就就是是指指在在一一个个AP Div中中创创建建另另一一个个AP Div，且且包包含含另另一一个个AP Div。制制作作嵌嵌套套的的AP Div通通常常有有两两种种方方式式：一一种种是是在在AP Div内内部部新新建建嵌嵌套套AP Div；另另一一种种是是将将已已经经存存在在的的AP Div添添加加到到另另外外一一个个AP Div内内，从从而而使使其其成成为为嵌嵌套套的的AP Div。一、绘制嵌套一、绘制嵌套AP Div首首先先选选择择【编编辑辑】/【首首选选参参数数】命命令令，打打开开【首首选选参参数数】对对话
20、话框框，选选择择【分分类类】列列表表中中的的【AP元元素素】分分类类，勾勾选选右右侧侧面面板板中中的的【在在AP div中中创创建建以以后后嵌嵌套套】复复选选框框，然然后后在在【插插入入】/【布布局局】工工具具栏栏上上单单击击 按按钮钮，在在现现有有AP Div中中拖拖曳曳，则则绘制的绘制的AP Div就嵌套在现有就嵌套在现有AP Div中了中了。10.3.610.3.6嵌套嵌套AP DivAP Div二、插入嵌套二、插入嵌套AP Div将将光光标标置置于于所所要要嵌嵌套套的的AP Div中中，然然后后选选择择【插插入入记记录录】/【布局对象布局对象】/【AP Div】命令，插入一个嵌套的命令
21、，插入一个嵌套的AP Div。10.3.610.3.6嵌套嵌套AP DivAP Div三、使用【三、使用【AP元素】面板制作嵌套元素】面板制作嵌套AP Div在在【AP元元素素】面面板板中中选选择择一一个个AP Div，按按住住Ctrl键键，将将其其拖动到另一个拖动到另一个AP Div上面，形成嵌套上面，形成嵌套AP Div。AP Div的的嵌嵌套套和和重重叠叠不不一一样样。嵌嵌套套的的AP Div与与父父AP Div是是有有一一定定关关系系的的，而而重重叠叠的的AP Div除除视视觉觉上上会会有有一一些些联联系系外外，其其他根本没有什么关系。他根本没有什么关系。在在【AP元元素素】面面板板中
22、中可可以以看看到到，嵌嵌套套AP Div呈呈树树状状结结构构，而而且且子子AP Div与与父父AP Div的的z轴轴顺顺序序是是一一样样的的。不不过过嵌嵌套套AP Div与与嵌嵌套套表表格格不不一一样样，表表格格嵌嵌套套时时，子子表表格格是是完完全全包包含含在在父父表表格格里里的的，而而嵌嵌套套的的AP Div并并不不意意味味着着子子AP Div必必须须在在父父AP Div里里面面，它它不不受受父父AP Div的的限限制制。当当移移动动子子AP Div位位置置时时，父父AP Div并并不不发发生生任任何何变变化化，而而当当移移动动父父AP Div时时，子子AP Div也也会会随随着着父父AP
23、Div发发生生位位移移，并并且且位位移移量量都都一一样样，也也就就是是说二者的相对位置不发生变化。说二者的相对位置不发生变化。10.3.610.3.6嵌套嵌套AP DivAP Div嵌嵌套套AP Div之之间间还还存存在在着着继继承承关关系系。选选定定子子AP Div，打打开开其其【属属性性】面面板板，在在【可可见见性性】下下拉拉列列表表中中有有【default】（默默认认）、【inherit】（继继承承）、【visible】（可可见见）和和【hidden】（隐藏）】（隐藏）4个选项。个选项。继继承承的的作作用用就就是是可可以以使使子子AP Div的的可可见见性性永永远远和和父父AP Div保
24、保持持一一致致以以及及保保持持子子AP Div与与父父AP Div的的相相对对位位置置不不变变，这这在在动动态态网网页页制制作作中中有有很很大大作作用用，因因为为动动态态网网页页的的很很多多效效果果是是通通过过Javascript控控制制AP Div的的可可见见性性及及位位置置变变化化来来实实现现的的。对对于于嵌嵌套套AP Div而而言言，当当父父AP Div的的位位置置变变化化时时，子子AP Div的的位位置置也也会会随随之之变变化化；当当父父AP Div的的可可见见性性改改变变时时，子子AP Div的的可可见见性也随之改变。性也随之改变。10.4 时间轴【时间轴时间轴】面板面板增加对象到时
25、间轴增加对象到时间轴控制动画播放时间控制动画播放时间添加和移除帧添加和移除帧移动动画路径移动动画路径创建时间轴动画创建时间轴动画记录记录APAP元素的路径元素的路径1010. .4.4.1 1 【时间轴】面板时间轴】面板选择选择【窗口窗口】/ /【时间轴时间轴】命令，打开命令，打开【时间轴时间轴】面板。面板。动画的基本单位叫做帧，在动画中有些帧非常关键，可以影动画的基本单位叫做帧，在动画中有些帧非常关键，可以影响整个动画，这样的帧叫做关键帧。将很多帧按照时间先后响整个动画，这样的帧叫做关键帧。将很多帧按照时间先后顺序连接起来就形成了动画。时间轴可以用来排列帧顺序，顺序连接起来就形成了动画。时间
26、轴可以用来排列帧顺序，还可以设置在页面加载后执行的其他操作。还可以设置在页面加载后执行的其他操作。10.4.210.4.2增加对象到时间轴增加对象到时间轴创创建建时时间间轴轴动动画画的的一一个个重重要要环环节节就就是是将将对对象象添添加加到到【时时间间轴轴】面板中，主要有面板中，主要有3种基本方法。种基本方法。选择【修改】选择【修改】/ /【时间轴】【时间轴】/ /【增加对象到时间轴】命令【增加对象到时间轴】命令。将将AP DivAP Div直接拖曳到直接拖曳到【时间轴时间轴】面板中。面板中。单击单击【时间轴时间轴】面板右上角的控制按钮，在弹出的快捷菜单面板右上角的控制按钮，在弹出的快捷菜单中
27、选择中选择【添加对象添加对象】命令。命令。10.4.310.4.3控制动画播放时间控制动画播放时间修改时间轴动画播放时间的长短的方法。修改时间轴动画播放时间的长短的方法。在在【时时间间轴轴】面面板板中中拖拖动动第第1个个关关键键帧帧或或者者最最后后一一个个关关键键帧帧，以以改改变变整整个个动动画画的的播播放放时时间间。在在拖拖动动过过程程中中，动动画画中中的的所所有有关关键键帧帧都都将将按按比比例例发发生生位位移移，而彼此之间的相对位置不发生变化。而彼此之间的相对位置不发生变化。10.4.310.4.3控制动画播放时间控制动画播放时间如如果果不不想想让让各各关关键键帧帧随随着着总总长长度度的的
28、变变化化而而变变化化，只只要在拖动最后一个关键帧时按住要在拖动最后一个关键帧时按住Ctrl键即可。键即可。10.4.310.4.3控制动画播放时间控制动画播放时间选选中中一一个个或或者者所所有有与与该该动动画画关关联联的的动动画画条条（按按Shift键键来来同同时时选选中中多多个个动动画画条条），并并向向左左或或向向右右拖拖动动动动画画条条，就可以改变动画的开始时间。就可以改变动画的开始时间。10.4.410.4.4添加和移除帧添加和移除帧要在时间轴中添加或移除一帧，可以通过下列方法来实现。要在时间轴中添加或移除一帧，可以通过下列方法来实现。选选择择【修修改改】/【时时间间轴轴】菜菜单单中中的
29、的【添添加加帧帧】或或【删删除除帧帧】命命令令，在在播播放放头头右右边边加加入入或或删删除除1帧帧。也也可可以以使使用右键菜单命令进行操作。用右键菜单命令进行操作。选选择择【修修改改】/【时时间间轴轴】/【增增加加关关键键帧帧】命命令令，在在当当前前播播放放头头位位置置加加入入关关键键帧帧；选选定定关关键键帧帧，选选择择【修修改改】/【时时间间轴轴】/【删删除除关关键键帧帧】命命令令，将将当当前前关关键键帧帧删删除除。也可以使用右键菜单命令进行操作。也可以使用右键菜单命令进行操作。10.4.5 10.4.5 移动动画路径移动动画路径要要移移动动整整个个动动画画路路径径的的位位置置，首首先先应应
30、在在【时时间间轴轴】面面板板中中选选中中整整个个动动画画条条，然然后后在在页页面面上上拖拖动动对对象象。Dreamweaver可可以以调调整整所所有有关关键键帧帧的的位位置置，整整个个选选中中的的动动画画条条所所做做的的任任何何类型的改变都将改变所有的关键帧。类型的改变都将改变所有的关键帧。10.4.6 创建时间轴动画时间轴可以通过改变层的位置、大小、可见性及重叠次序时间轴可以通过改变层的位置、大小、可见性及重叠次序来创建动画，也可以改变图像的源文件，因此可以用它创建来创建动画，也可以改变图像的源文件，因此可以用它创建图片幻灯效果。虽然时间轴不能直接改变图像的位置、大小、图片幻灯效果。虽然时间
31、轴不能直接改变图像的位置、大小、可见性，但可以将图像添加到层中，然后通过改变层的位置、可见性，但可以将图像添加到层中，然后通过改变层的位置、大小、可见性来达到动画的效果。大小、可见性来达到动画的效果。10.4.7 10.4.7 记录记录APAP元素的路径元素的路径如果需要创建具有复杂运动路径的动画，逐个创建关键如果需要创建具有复杂运动路径的动画，逐个创建关键帧会花费许多时间。使用记录帧会花费许多时间。使用记录APAP元素的路径功能来创建复杂元素的路径功能来创建复杂运动轨迹的动画。运动轨迹的动画。10.510.5综合小实例综合小实例制作制作“飞机穿云飞机穿云”动动画画将本章素材文件将本章素材文件“实例素材实例素材第第11章章综合小实例综合小实例images”文件夹复制到站点根目录下，然后使用文件夹复制到站点根目录下，然后使用AP Div和时间轴制作和时间轴制作“飞机穿云飞机穿云”动画，要求飞机穿云时要隐藏。动画，要求飞机穿云时要隐藏。
