图 7-1-4第 7 章时间轴和行为7.1 【案例 28】“中国欢迎您 1”网页相关知识1“时间轴”面板单击“窗口”“时间轴”命令或按【Alt+F9】组合键，可以弹出“时间轴”面板，如所示。该面板中的各个工具及其他选项的作用如下：（1）“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。右击“时间轴”面板内部，弹出“时间轴”快捷菜单，单击该菜单中的“添加时间轴”命令，即可在“时间轴”下拉列表框内添加一个新的时间轴动画（默认名称为“Timeline”+序号）。（2）回放头：播放动画时，它在时间标尺上移动，工作原理同放像机的磁头。拖动它在时间标尺上移动，当它移到某一时间单位处时，相应的画面就会出现在网页窗口内。（3）“播放”按钮 ：单击该按钮，可以使动画前进一个帧。按住该按钮不放，可以向正常方向播放动画。（4）“回放”按钮：单击该按钮，可以使动画回退一帧。按住该按钮不放，可以向相反方向播放动画。（5）“归位”按钮：将动画图像移到起始位置，同时回放头也移动到该位置处。（6）“回放头位置”（也是当前帧号码）文本框：用来输入显示和设置“回放头”所处的时间轴位置号，即当前帧号码。（7）“速率”文本框：用来输入每秒钟播放的帧数。（8）“自动播放”复选框：选中该复选框后，则在网上下载后会自动播放。不选中该复选框时，需要在使用行为事件时才可以播放。（9）“循环”复选框：选中该复选框后，则循环播放动画，否则只播放一次动画。（10）行为通道：它由许多图 AP Div 组成，表示可以在一个页面内加入多个时间轴动画，但最多可以加 32 个。它的左边标有图 AP Div 的编号，图 AP Div 编号大的动画在图 AP Div 编号小的动画之上。（11）动画条：表示一个动画所占的帧数，上面标有该动画所在 AP Div 的名称。它的起始处和终止处各有一个小圆，表示首帧和终止帧。关键帧都会有一个小圆。（12）行为通道左边标有字母“B”，可以在该通道的特定帧使用行为。（13）行为帧：加入了行为的帧，该帧在“行为通道”内。（14）时间标尺：给出了与时间对应的帧数码。2直线移动动画的制作下面使用“时间轴”面板制作一个沿直线移动的动画。动画的制作方法如下：（1）在页面内插入一个 AP Div 并命名，例如“ApDiv1”，然后在 AP Div 内插入一个图像、动画或文字等。此处插入的是图像，如图 7-1-6 所示。（2）将插有图像或文字的 AP Div 移到动画的起始位置。（3）单击“窗口”“时间轴”命令，调出“时间轴”面板。（4）将 AP Div 拖动到“时间轴”面板的动画通道内，或单击“修改”“时间轴”“增加对象到时间轴”命令。这时，“时间轴”面板的动画通道内会出现一个动画条。如果选中了“循环”复选框，则在动画通道中，会同时出现一个“动作帧” 。（5）单击选中动画条的终止帧。默认的动画帧数是 15 帧，如果要调整动画的帧数，可用鼠标拖动动画条终止帧的小圆。在改变了终止帧的位置之后，如果此时选中了“循环”复选框，还应用鼠标拖动行为通道的行为帧到终止帧的下一个位置处。用鼠标向右拖动第 15 帧小圆到第 45 帧处，将“动作帧” 拖动移到第 46 帧处，如图7-1-7 所示。图 7-1-6AP Div 中插入 GIF 动画图 7-1-7动画通道内出现一个动画条（6）拖动动画 AP Div 到目标处。当释放左键时，会看到一条直线，表示图像移动的路径，如图 7-1-8 所示。在选中“循环”复选框的情况下，如果先拖动动画 AP Div 到目标处，再调整“时间轴”面板中终止帧的位置，则还需要用鼠标拖动调整“动作帧” 到终止帧的下一帧位置处。（7）按住“播放”按钮 不放，即可在网页设计窗口内看到动画。图 7-1-8表示图像移动路径的一条直线7.2 【案例 29】“中国欢迎您 2”网页相关知识1添加关键帧“时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径不是直线的，中间有转折点，则转折点处的画面就是关键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移动的动画。添加关键帧的方法如下：（1）单击选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置，同时回放头回移到此处，用来指示选中的位置。例如，选择第 15 帧（将终止帧移到第 30 帧处）。（2）在动画条内右击，调出时间轴快捷菜单。再单击该菜单内的“增加关键帧”命令，即可在选中的位置处插入一个关键帧，如图 7-2-4 所示。按住【Ctrl】键，单击要加入关键帧的位置，也可以添加关键帧。如果对关键帧的位置不满意，可以用鼠标拖动关键帧上的小圆。如果要删除关键帧，可以单击选中要删除的关键帧并右击，调出时间轴快捷菜单，再单击该菜单中的“移除关键帧”命令即可。图 7-2-4加入关键帧后的“时间轴”面板图 7-2-5产生的曲线路径线2制作沿曲线路径移动的动画（1）方法一：按住【Ctrl】键，单击“时间轴”面板动画条内的一个帧，添加一个关键帧。拖动关键帧上的小圆，可以改变关键帧的位置。单击选中新增的关键帧，拖动 AP Div，改变其位置。此时，动画移动的路径线会变为一条曲线，如图 7-2-5 所示。路径线的起始位置与终止位置不变。按住“播放”按钮 不放，即可看到沿曲线移动的动画。（2）方法二：可以用鼠标拖动的方法来制作沿曲线路径移动的动画，设计过程如下： 在页面内插入一个 AP Div，并给该 AP Div 命名（例如，“apDiv1”）。然后，在 AP Div 内插入一个图像、动画或输入一些文字等，再将插有图像或文字的 AP Div 移到动画的起始位置。此处，AP Div 内插入的是图像。 单击选中该 AP Div，再单击“修改”“时间轴”“记录 AP 元素的路径”命令，或者单击时间轴快捷菜单中的“记录 AP 元素的路径”命令。 在网页设计窗口内，按照希望的曲线路径，用鼠标拖动 AP Div。随着鼠标拖动的进行，会产生一条曲线路径线，如图 7-2-6 所示。 释放左键，即可生成复杂曲线路径。此时，“时间轴”面板会自动产生动画条，如图 7-2-7 所示。由产生的动画条可以看出，用鼠标拖动所用的时间越长，组成动画的帧数也越多。鼠标拖动时的转折点越多，自动产生的关键帧也越多。图 7-2-6用鼠标拖动 AP Div 产生一条曲线路径线图 7-2-7 “时间轴”面板内的动画条3动画的更名、删除、复制和移动（1）动画的更名：可以直接在“时间轴”面板的列表框内更改动画的名字。另外，可以单击时间轴菜单中的“重命名时间轴”命令，弹出“重命名时间轴”对话框，如图 7-2-8 所示。在该对话框的“时间轴名称”文本框内输入新的名称，再单击“确定”按钮即可。（2）动画的删除：图 7-2-8 “重命名时间轴”对话框 删除动画条：单击选中要删除的动画条，按【Delete】键或单击“编辑”“剪切”命令。 删除所有动画条：单击时间轴菜单中的“移除时间轴”命令。（3）动画的复制：动画的复制方法如下： 单击选中要复制的动画条，再单击时间轴菜单中的“拷贝”命令。 调整回放头的位置，再单击时间轴菜单中的“粘贴”命令，即可在选中的动画条的右边复制一个动画条。也可以粘贴到其他页面的“时间轴”面板中。（4）动画的移动：动画的移动方法如下：方法一：单击选中要移动的动画条，再单击时间轴菜单中的“剪切”命令。调整回放头的位置，再单击时间轴菜单中的“粘贴”命令，即可将动画条移到回放头所处的位置处，而且可以移动到其他页面的“时间轴”面板中。方法二：可以用鼠标拖动一个动画条在整个动画通道内移动。按住【Shift】键，单击要移动的动画条，选中多个动画条，鼠标拖动选中的动画条，即可同时移动多个动画条。7.3 【案例 30】“中国名胜图像浏览 5”网页相关知识1动作名称及其作用行为是动作（actions）和事件（events）的组合。动作就是计算机系统执行的一个动作，例如，弹出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。动作通常是由预先编写好的 JavaScript 脚本程序实现的，Dreamweaver CS3 自带了一些动作的 JavaScript 脚本程序，可供用户直接调用。用户也可以自己用 JavaScript 语言编写 JavaScript 脚本程序，创建新的行为。事件是指引发动作产生的事情。例如，鼠标单击某对象、“时间轴”面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某几个动作可以被相同的事件触发，则需要指定动作发生的顺序。Dreamweaver CS3 采用了“行为”面板来完成行为中的动作和事件的设置，从而实现动态交互效果。单击“窗口”“行为”命令或按【Shift+F3】组合键，调出“行为”面板，如图 7-3-11 所示。单击“行为”面板中的“添加行为” 按钮，调出“动作名称”菜单，其作用如表 7-3-1 所示。再单击某一个动作名称，即可进行相应的动作设置。进行完动作的设置后，在“行为”面板的列表框内会显示出动作的名称与默认的事件名称。在选中动作名称后，“事件”栏中默认的事件名称右边会出现一个 按钮。2事件名称及其作用如果要重新设置事件，可单击“事件”栏中默认的事件名称右边的 按钮，调出事件名称菜单。菜单中列出了该对象可以使用的所有事件。各个事件的名称及其作用如表 7-3-2 所示。3设置行为的其他操作（1）选择行为的目标对象：要设置行为，必须先选中事件作用的对象。单击选中图像、用鼠标拖动选中文字等，都可以选择行为的目标对象。另外，也可以单击网页设计窗口左下角状态栏上的标记，来选中行为的目标对象。例如，要选中整个页面窗口，可单击标记。还可以单击页面空白处，再按【Ctrl+A】组合键。选中不同的对象后，“标签”面板的标题栏名称会随之发生变化。“标签”面板的标题栏的名称中将显示行为的对象名称，例如选择整个页面窗口后，“标签”面板的名称为“标签”。（2）显示所有事件：单击“行为”面板中的“显示所有事件”按钮 ，在“行为”面板中会显示出选中对象所能使用的所有事件，如图 7-3-12 所示。单击“显示设置事件”按钮 后，在“行为”面板中只显示已经使用的事件，如图 7-3-13 所示。（3）单击选中“行为”面板内的某一个行为项（即动作和事件）时，再单击 按钮，即可删除选中的行为项。（4）单击选中“行为”面板内的某一个行为项后，再单击 按钮，可以使选中的行为的执行次序提前，单击选中行为项后，再单击按钮，可使选中的行为执行次序下降。图 7-3-12显示所有事件的“行为”面板图 7-3-13只显示已经使用的事件4“显示隐藏 AP Div”动作选中 AP Div 以后，在“行为”面板中选择“显示隐藏 AP Div”命令，可以调出“显示隐藏元素”对话框，如图 7-3-6 和图 7-3-9 所示。（1）如果要设置 AP Div 为显示状态，则单击选中“命名的 AP Div”列表框内 AP Div 的名称，再单击“显示”按钮，此时“命名的 AP Div”列表框内选中的 AP Div 名称右边会出现“（显示）”文字。（2）如果要设置 AP Div 为不显示状态，则单击选中“命名的 AP Div”列表框内 AP Div 的名称，再单击“隐藏”按钮，此时“命名的 AP Div”列表框内选中的 AP Div 名称右边会出现“（隐藏）”文字。（3）单击“默认值”按钮后，可将 AP Div 的显示与否设置为默认状态。7.4 【案例 31】交替变化的图像相关知识1“弹出信息”动作选择整个页面，单击“行为”面板中的 按钮，调出“动作名称”菜单，单击“弹出信息”命令，弹出“弹出信息”对话框，如图 7-4-6 所示。在“消息”文本框内输入调出的对话框内要显示的文字，单击“确定”按钮，即