项目09制作海洋观光动画

1、主 讲 ：主 讲 ：网页设计与制作Dreamweaver CS3项目九 制作海洋观光动画任务一 制作背景任务二 制作动画项目九：项目九： 制作海洋观光动画制作海洋观光动画网 页 设 计 与 制 作Dreamweaver CS3任务一小 结任务二实 训任务一 制作背景 本任务首先使用本任务首先使用AP DivAP Div布局页面中的海洋图及标题布局页面中的海洋图及标题内容。通过本任务的学习，应该掌握的内容主要有：内容。通过本任务的学习，应该掌握的内容主要有： Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一小 结任务二实 训1.AP

2、 Div的概念 AP Div是一种能够随意定位的页面元素，如同浮动在页面里是一种能够随意定位的页面元素，如同浮动在页面里的透明的透明AP Div，可以将，可以将AP Div放置在页面的任何位置。由于放置在页面的任何位置。由于AP Div中可以放置包含文本、图像或多媒体对象等其他内容，很多中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用网页设计者都会使用AP Div定位一些特殊的网页内容。定位一些特殊的网页内容。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训2.创建AP Di

3、v的方法 （1）选择）选择【插入记录插入记录】【布局对象布局对象】【AP Div】命令命令来创建一个来创建一个AP Div。 （2）将）将【插入插入】【布局布局】面板上的面板上的 绘制绘制AP Div】按钮按钮拖曳到文档窗口，松开鼠标后就在文档窗口中插入了一个拖曳到文档窗口，松开鼠标后就在文档窗口中插入了一个AP Div。 （3）在）在【插入插入】【布局布局】面板中单击面板中单击 【绘制绘制AP Div】按钮，在文档窗口中按住鼠标左键并拖曳，也可绘出一个自定义按钮，在文档窗口中按住鼠标左键并拖曳，也可绘出一个自定义大小的大小的AP Div。 （4）在）在【插入插入】【布局布局】面板中单击面板中

4、单击 【绘制绘制AP Div】按钮，然后按住按钮，然后按住Ctrl键不放，按住鼠标左键并拖曳可在文档窗口键不放，按住鼠标左键并拖曳可在文档窗口中连续绘制多个中连续绘制多个AP Div。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训3. 设置插入AP Div时的默认属性 选择选择【编辑编辑】【首选参数首选参数】命令，打开命令，打开【首选参数首选参数】对话框，对话框，在其中的在其中的【分类分类】列表框中选择列表框中选择【APAP元素元素】选项，根据需要对其选项，根据需要对其中的参数进行设置。如果勾选

5、中的参数进行设置。如果勾选【在在AP DivAP Div中创建以后嵌套中创建以后嵌套】复选复选框则指定从现有框则指定从现有AP DivAP Div边界内绘制的边界内绘制的AP DivAP Div是嵌套的。按住是嵌套的。按住Alt键可在取消与选择该复选框之间转换键可在取消与选择该复选框之间转换 。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训4.认识【AP元素】面板 【AP元素】面板的主体部分分为元素】面板的主体部分分为3列。第列。第1列为显示与隐藏列为显示与隐藏栏，在栏，在 图标的下方，用于设置

6、相应图标的下方，用于设置相应AP Div的显示和隐藏。第的显示和隐藏。第2列为列为ID名称栏，它与【属性】面板中【名称栏，它与【属性】面板中【CSS-P元素】选项的作用元素】选项的作用是相同的。第是相同的。第3列为列为z轴栏，它与【属性】面板中的轴栏，它与【属性】面板中的z轴选项是相轴选项是相同的。同的。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训 在【在【AP元素】面板中可以实现以下操作。元素】面板中可以实现以下操作。 双击双击AP Div的名称，可以对的名称，可以对AP Div进行重命名。

7、进行重命名。 单击单击AP Div后面的数字可以修改后面的数字可以修改AP Div的的z轴顺序，数字大轴顺序，数字大的将位于上层。的将位于上层。 勾选勾选【防止重叠防止重叠】复选框可以禁止复选框可以禁止AP Div重叠。重叠。 在在AP Div的名称前面有一个眼睛图标，单击眼睛图标可显示的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏或隐藏AP Div。 单击单击AP Div的名称可以选定该的名称可以选定该AP Div，按住，按住Shift键不放，单键不放，单击想选择的击想选择的AP Div可以将多个可以将多个AP Div选中。选中。 按住按住Ctrl键不放，将某一个键不放，将某一个AP D

8、iv拖动到另一个拖动到另一个AP Div上，上，形成嵌套的形成嵌套的AP Div。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训5.选定AP Div 在【在【AP元素】面板中单击元素】面板中单击AP Div的名称来选定该的名称来选定该AP Div。 单击文档中的单击文档中的 图标来选定图标来选定AP Div。如果没有显示该图标，。如果没有显示该图标，可以在可以在【首选参数首选参数】对话框的对话框的【不可见元素不可见元素】分类中勾选分类中勾选【AP元素的锚点元素的锚点】复选框。复选框。 将光标置于

9、将光标置于AP Div内，然后在文档窗口底边标签条中选择内，然后在文档窗口底边标签条中选择“”标签。标签。 单击单击AP Div的边框线。的边框线。 如果要选定两个以上的如果要选定两个以上的AP Div，只要按住，只要按住Shift键，然后逐个键，然后逐个单击单击AP Div手柄或手柄或 在在【AP元素元素】面板中逐个单击面板中逐个单击AP Div的名的名称即可。称即可。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训6.设置AP Div的属性 选定选定AP Div后，可以在其后，可以在其【属性属

10、性】面板中设置面板中设置AP Div和大和大小和位置等属性。小和位置等属性。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训7.AP Div的嵌套 在某个在某个AP Div内部创建的内部创建的AP Div称为嵌套称为嵌套AP Div或子或子AP Div，嵌套，嵌套AP Div外部的外部的AP Div称为父称为父AP Div。子。子AP Div的大小的大小和位置不受父和位置不受父AP Div的限制，子的限制，子AP Div可以比父可以比父AP Div大，位大，位置也可以在父置也可以在父AP Div

11、之外，只是在移动父之外，只是在移动父AP Div时，子时，子AP Div会随着一起移动，同时父会随着一起移动，同时父AP Div的显示属性会影响子的显示属性会影响子AP Div的的显示属性。显示属性。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训8.移动AP Div Div最大的优点就是具有很强的灵活性，可以随意移动到页最大的优点就是具有很强的灵活性，可以随意移动到页面中的任何位置。移动面中的任何位置。移动AP Div的方法通常有：的方法通常有：（1）使用鼠标进行拖曳。）使用鼠标进行拖曳。（2

12、）先选中）先选中AP Div，然后按键盘上的方向键进行移动（每按然后按键盘上的方向键进行移动（每按1次次方向键移动方向键移动1个像素，如果按住个像素，如果按住Shift键键1次移动次移动10个像素。个像素。（3）在）在【属性属性】面板的面板的【左左】和和【上上】文本框中输入数值进行文本框中输入数值进行精确定位。精确定位。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训9.调整AP Div的大小（1）采用鼠标直接拖曳。）采用鼠标直接拖曳。（2）在）在【属性属性】面板的面板的【宽宽】和和【高高】文本

13、框中输入精确数值。文本框中输入精确数值。（3）还可以将所有选择的）还可以将所有选择的AP Div的宽度和高度变为最后选择的的宽度和高度变为最后选择的AP Div的宽度和高度。当选择多个的宽度和高度。当选择多个AP Div时，最后选择的时，最后选择的AP Div四周的控制点将以实心显示，其他的四周的控制点将以实心显示，其他的AP Div四周的控制点将四周的控制点将以空心显示。以空心显示。 10.AP Div的对齐方法 首先选择需要对齐的首先选择需要对齐的AP Div，然后在主菜单的，然后在主菜单的【修改修改】【排列顺序排列顺序】中选择中选择【左对齐左对齐】、【右对齐右对齐】、【对齐上缘对齐上缘】

14、或或【对齐下缘对齐下缘】命令，即可将所有选择的命令，即可将所有选择的AP Div以最后选择的以最后选择的AP Div为标准进行对齐操作。为标准进行对齐操作。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务一 制作背景任务一小 结任务二实 训11.AP Div和Div标签 在源代码中，在源代码中，AP Div与与Div标签使用的是同一个标签标签使用的是同一个标签。在绘制在绘制AP Div时，时，AP Div同时被赋予了同时被赋予了CSS样式，而插入样式，而插入Div标标签时，需要再单独创建签时，需要再单独创建CSS样式对它进行控制。

15、实际上，样式对它进行控制。实际上，AP Div与与Div标签是同一个网页元素不同的表现形态，通过标签是同一个网页元素不同的表现形态，通过CSS样式可样式可使两者间相互转换。例如，在使两者间相互转换。例如，在【CSS规则定义规则定义】对话框的对话框的【定位定位】分类中，将分类中，将【类型类型】选项设置为选项设置为“绝对绝对”，即表示，即表示AP Div，否则，否则即为即为Div标签，这是标签，这是AP Div与与Div标签转换的关键因素。标签转换的关键因素。 本任务主要是利用时间轴制作小船围着海洋中的岛屿运行的本任务主要是利用时间轴制作小船围着海洋中的岛屿运行的动画效果。通过本任务的学习，应该掌

16、握的内容有：动画效果。通过本任务的学习，应该掌握的内容有： Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训1.时间轴的概念 时间轴是与时间轴是与AP Div密切相关的一项功能，它可以在密切相关的一项功能，它可以在Dreamweaver中实现动画的效果。通过时间轴，可以让中实现动画的效果。通过时间轴，可以让AP Div的的位置、尺寸、可视性和重叠次序随着时间的变化而改变，从而创位置、尺寸、可视性和重叠次序随着时间的变化而改变，从而创建出具有建出具有Flash效果的动画。效果的动画。 选择选择【窗口

17、窗口】【时间轴时间轴】命令打开命令打开【时间轴时间轴】面板。面板。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训2. 认识【时间轴】面板Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训3.添加对象到时间轴 选中对象，然后选择【修改】【时间轴】【添加对象到选中对象，然后选择【修改】【时间轴】【添加对象到时间轴】命令将对象添加到【时间轴】面板或者将对象直接拖曳时间轴】命令将对象添加到【时间轴】面板或者

18、将对象直接拖曳到【时间轴】面板。到【时间轴】面板。 Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训3.调整动画播放时间 在【时间轴】面板中拖动最后一个关键帧可以改变整个动画在【时间轴】面板中拖动最后一个关键帧可以改变整个动画的播放时间，往右拖动是延长播放时间，往左拖动是缩短播放时的播放时间，往右拖动是延长播放时间，往左拖动是缩短播放时间间。在拖动过程中动画条里的所有关键帧都将按比例发生位移。在拖动过程中动画条里的所有关键帧都将按比例发生位移。如果不想让各关键帧随着总长度的变化而变化，只要在拖动最

19、后如果不想让各关键帧随着总长度的变化而变化，只要在拖动最后一个关键帧时按住一个关键帧时按住Ctrl键就行了。键就行了。4.增加关键帧 在主菜单中选择【修改】【时间轴】【增加关键帧】命在主菜单中选择【修改】【时间轴】【增加关键帧】命令（或者单击鼠标右键，在快捷菜单中选择【增加关键帧】命令）令（或者单击鼠标右键，在快捷菜单中选择【增加关键帧】命令）增加一个关键帧。增加一个关键帧。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训6.移动动画条5.移动关键帧 在【时间轴】面板中单击某一关键帧，在【时间轴】

20、面板中单击某一关键帧，并拖动可将其向右移并拖动可将其向右移或者向左移，在移动过程中其他关键帧并不发生改变，这样可以或者向左移，在移动过程中其他关键帧并不发生改变，这样可以改变该关键帧的发生时间。改变该关键帧的发生时间。 要移动整个动画路径的位置，首先应选择整个动画条，然后要移动整个动画路径的位置，首先应选择整个动画条，然后在页面上拖动对象。在页面上拖动对象。Dreamweaver可以调整所有关键帧的位置，可以调整所有关键帧的位置，对整个选中的动画条所做的任何类型的改变都将改变所有的关键对整个选中的动画条所做的任何类型的改变都将改变所有的关键帧。帧。 如果需要创建具有复杂运动路径的动画，可以使用

21、录制如果需要创建具有复杂运动路径的动画，可以使用录制AP Div路径功能。首先在主菜单中选择路径功能。首先在主菜单中选择【修改修改】【时间轴时间轴】【录制录制AP Div路径路径】命令，然后在文档中拖动命令，然后在文档中拖动AP Div来录制路径，来录制路径，最后在动画要停止的地方释放鼠标左键，最后在动画要停止的地方释放鼠标左键， 这时将自动在这时将自动在【时间时间轴轴】面板中添加对象，并且较为合理地创建了一定数目的关键帧。面板中添加对象，并且较为合理地创建了一定数目的关键帧。也可以根据实际情况对各关键帧的位置适当进行调整使其更为合也可以根据实际情况对各关键帧的位置适当进行调整使其更为合理。理。Dreamweaver CS3网 页 设 计 与 制 作项目九：项目九： 制作海洋观光动画制作海洋观光动画任务二 制作动画任务一小 结任务二实 训7.录制AP Div路径实训 制作飞行表演动画 本项目着重介