《Dreamweaver网页设计案例教程 教学课件 ppt 作者 沈大林 等 第6章 时间轴和行为》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计案例教程 教学课件 ppt 作者 沈大林 等 第6章 时间轴和行为（53页珍藏版）》请在金锄头文库上搜索。
1、第6章 时间轴和行为,6.1 【案例33】“体育世界”网页 6.2 【案例34】添加游动广告的“体育世界”网页 6.3 【案例35】“跟我学计算机”网页调出式菜单 6.4 【案例36】“北京名胜1”网页交替变化图像 6.5 【案例37】“北京名胜2”网页弹出窗口 6.6 【案例38】“图像链接翻转”网页 6.7 【案例39】“跟我学制作表单”网页（二）,6.8 【案例40】“控制播放Flash动画和MIDI音乐”网页 6.9 【案例41】“活动菜单”网页 6.10 【案例42】“拼图”网页,6.1 【案例33】“体育世界”网页,1“时间轴”面板 单击“窗口”“时间轴”菜单命令或按【Alt+F9
2、】组合键，即可调出“时间轴”面板，如图6-1-4所示。该面板中的各个工具及其他选项的作用如下。 （1）“时间轴”下拉列表框：其内列出了当前页面内所有时间轴动画的名字，选中其中一个选项后，相应的动画就会在“时间轴”面板中显示出来。右击“时间轴”面板内部，调出“时间轴”快捷菜单，单击该菜单中的“添加时间轴”菜单命令，即可在“时间轴”下拉列表框内添加一个新的时间轴动画（默认名称为“Timeline”+序号）。 （2）回放头：播放动画时，它在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳它在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面就会出现在网页窗口内。 （3）【播放】按钮：单击它，可
3、以使动画前进一个帧。按住该按钮不放，可以向正常方向播放动画。 （4）【回放】按钮：单击它，可以使动画回退一帧。单击按下该按钮不放，可以向相反方向播放动画。,（5）【归位】按钮：将动画图像移到起始位置，同时回放头也移动到该位置处。 （6）“回放头位置”（也是当前帧号码）文本框：用来输入显示和设置“回放头”所处的时间轴位置号，即当前帧号码。 （7）“速率”文本框：用来输入每秒钟播放的帧数。 （8）“自动播放”复选框：选中它后，则在网上下载后会自动播放。不选中它时，需要在使用行为事件时才可以播放。 （9）“循环”复选框：选中它后，则循环播放动画，否则只播放一次动画。 （10）动画通道：它由许多图层组
4、成，表示可以在一个页面内加入多个时间轴动画，但最多可以加32个。它的左边标有图层的编号，图层编号大的动画在图层编号小的动画之上。 （11）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名字。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。 （12）行为通道左边标有字母“B”，可以在该通道的特定帧使用行为。 （13）行为帧：加入了行为的帧，它在“行为通道”内。,（14）时间标尺：给出了与时间对应的帧数码。 2直线移动动画的制作 下面来使用“时间轴”面板制作一个简单的、沿直线移动的动画。该动画的制作方法如下所述。 （1）在页面内插入一个层，给该层
5、起一个名字，例如“Layer1”。然后在层内插入一个图像、动画或输入一些文字等。此处层中插入的是GIF动画，如图6-1-6所示。 （2）将插有图像或文字的层移到动画的起始位置。 （3）单击“窗口”“时间轴”菜单命令，调出“时间轴”面板。 （4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或单击“修改”“时间轴”“增加对象到时间轴”菜单命令。这时，“时间轴”面板的动画通道内会出现一个动画条。如果选中了“循环”复选框，则在动画通道中，会同时出现一个“动作帧” 。 （5）单击选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的帧数，可用鼠标拖曳动画条终止帧的小圆。在改变了终止帧的位置之后，,
6、如果此时选中了“循环”复选框，还应用鼠标拖曳行为通道的行为帧到终止帧的下一个位置处。用鼠标向右拖曳第15帧小圆到第30帧处，如图所示。 （6）用鼠标拖曳动画层到目标处。当松开鼠标左键时，会看到一条直线，表示图像移动的路径。 在选中“循环”复选框的情况下，如果先用鼠标拖曳动画层到目标处，再调整“时间轴”面板中终止帧的位置，则还需要用鼠标拖曳调整“动作帧”到终止帧的下一帧位置处。 （7）按住【播放】按钮不放，即可在网页设计窗口内看到动画。,6.2 【案例34】添加游动广告的“体育世界”网页,“时间轴”面板可以在用户给出起始帧和终止帧后自动产生中间过程的各帧。如果动画的移动路径不是直线的，中间有转折
7、点，则转折点处的画面就是关键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移动的动画，添加关键帧的方法如下。 （1）单击选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置，同时回放头回移到此处，用来指示选中的位置。例如，选择第15帧（将终止帧移到第30帧处）。 （2）在动画条内，单击鼠标右键，调出时间轴快捷菜单。再单击该菜单内的“增加关键帧”菜单命令，即可在选中的位置处插入一个关键帧，如图所示。按住【Ctrl】键，单击要加入关键帧的位置，也可以添加关键帧。,如果对关键帧的位置不满意，可以用鼠标拖曳关键帧上的小圆到满意的位置。 如果要删除关键帧，可以单击选中要删除的关键帧
8、，单击鼠标右键，调出时间轴快捷菜单，再单击该菜单中的“移除关键帧”菜单命令即可。 2制作沿曲线路径移动的动画 方法1：单击选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图像的位置。此时，动画移动的路径线会变为一条曲线。可以看出，路径线的起始位置与终止位置不变。如果要改变关键帧图像的位置，可以再用鼠标拖曳动画层到新的位置。 按住【播放】按钮不放，即可在网页设计窗口内看到沿曲线路径移动的动画了。 方法2：可以用鼠标拖曳的方法来制作沿曲线路径移动的动画，设计过程如下。 在页面内插入一个层，并给该层起一个名字。然后，在层内插入一个图像或输入一些文字等，再将插有图像或文字的层移到动画的起始位置。
9、此处，层中插入的是图像。 单击选中该层，再单击“修改”“时间轴”“录制层路径”菜单命令，或者单击时间轴快捷菜单中的“录制层路径”菜单命令。,在网页设计窗口内，按照希望的曲线路径，用鼠标拖曳层。随着鼠标拖曳的进行，会产生一条曲线路径线。 松开鼠标左键，即可生成复杂曲线路径。此时，“时间轴”面板会自动产生动画条，如图所示。由产生的动画条可以看出，用鼠标拖曳所用的时间越长，组成动画的帧数也越多。鼠标拖曳时的转折点越多，自动产生的关键帧也越多。 按住【播放】按钮不放，即可在网页设计窗口内看到沿曲线路径移动的动画 3动画的更名、删除、复制和移动 （1）动画的更名：可以直接在“时间轴”面板的列表框内更改动
10、画的名字。 另外，可以单击时间轴菜单中的“重命名时间轴”菜单命令，调出“重命名时间,轴”对话框。在该对话框的“时间轴名称”文本框内输入新的名字，再单击【确定】按钮即可。 （2）动画的删除：动画的删除方法如下。 删除动画条：单击选中要删除的动画条，按【Delete】键或单击“编辑”“剪切”菜单命令。 删除所有动画条：单击时间轴菜单中的“移除时间轴”菜单命令。 （3）动画的复制：动画的复制方法如下。 单击选中要复制的动画条，再单击时间轴菜单中的“拷贝”菜单命令。 调整回放头的位置，再单击时间轴菜单中的“粘贴”菜单命令，即可在选中的动画条的右边复制一个动画条。而且可以粘贴到其他页面的“时间轴”面板中
11、。 （4）动画的移动：动画的移动方法如下。 方法一：单击选中要移动的动画条，再单击时间轴菜单中的“剪切”菜单命令。调整回放头的位置，再单击时间轴菜单中的“粘贴”菜单命令，即可将动画条移到回放头所处的位置处，而且可以移动到其他页面的“时间轴”面板中。,方法二：可以用鼠标拖曳一个动画条在整个动画通道内移动。按住【Shift】键，单击要移动的动画条，选中多个动画条，鼠标拖曳选中的动画条，即可同时移动多个动画条。,6.3 【案例35】“跟我学计算机”网页调出式菜单,1动作名称及其作用 行为是动作（Actions）和事件（Events）的组合。动作就是计算机系统执行的一个动作，例如，调出一个提示框、执行
12、一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中的动画等。动作通常是由预先编写好的JavaScript程序脚本实现的，Dreamweaver 8自带了一些动作的JavaScript程序脚本，可供用户直接调用。用户也可以自己用JavaScript语言编写JavaScript程序脚本，创建新的行为。 事件是指引发动作产生的事情，例如，鼠标移到某对象之上、鼠标单击某对象、“时间轴”面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某几个动作可以被相同的事件触发，则须要指定动作发生的顺序。 Dreamweaver 8采用了“行为”面板（也叫“
13、行为控制器”）来完成行为中的动作和事件的设置，从而实现动态交互效果。 单击“窗口”“行为”菜单命令或按【Shift+F3】组合键，即可调出“行为”面板。 单击“行为”面板中的“添加行为 ”按钮，调出“动作名称”菜单，其作用如,表所示 。再单击某 一个动作名称，即可进行相应的动作设置。 动作名称及动作的作用,注意：对于选择不同的浏览器，可以使用的动作也不一样，版本低的浏览器可以使用的动作较少。当选定的对象不一样时，动作名称菜单中可以使用的动作也不一样。 进行完动作的设置后，在“行为”面板的列表框内会显示出动作的名称与默认的事件名称。可以看出，在选中动作名称后，“事件”栏中默认的事件名称右边会出现
14、一个按钮。 2事件名称及其作用 如果要重新设置事件，可单击“事件”栏中默认的事件名称右边的按钮，调出事件名称菜单。菜单中列出了该对象可以使用的所有事件。 各个事件的名称及其作用如表所示。,注意：如果出现带括号的事件，则该事件是链接对象的。使用它们时，系统会自动在行为控制器下拉列表框内显示的事件名称前面增加一个“#”号，表示空链接。 3设置行为的其他操作 （1）选择行为的目标对象：要设置行为，必须先选中事件作用的对象。单击选中图像、用鼠标拖曳选中文字等，都可以选择行为的目标对象。另外，也可以单击网页设计窗口左下角状态栏上的标记，来选中行为的目标对象。例如，要选中整个页面窗口，可单击标记。还可以单
15、击页面空白处，再按【Ctrl+A】组合键。 选中不同的对象后，“标签”面板的标题栏名称会随之发生变化。“标签”面板的标题栏的名称中将显示行为的对象名称，例如，选择整个页面窗口后，“标签”面板的名称为“标签”。 （2）显示所有事件：单击“行为”面板中的【显示所有事件】按钮 ，在“行为”面板中会显示出选中对象所能使用的所有事件。单击【显示设置事件】按钮 后，在“行为”面板中只显示已经使用的事件。 （3）单击选中“行为”面板内的某一个行为项（即动作和事件）时，再单击按钮 ，即可删除选中的行为项。,（4）单击选中“行为”面板内的某一个行为项后，再单击 按钮，可以使选中的行为的执行次序提前，单击选中行为
16、项后，再单击 按钮，可以使选中的行为，执行次序下降。 4“显示隐藏层”动作 选中层以后，在“行为”面板中选择“显示隐藏层”菜单命令，可以调出“显示隐藏层”对话框。 （1）如果要设置层为显示状态，则单击选中“命名的层”列表框内层的名称，再单击【显示】按钮，此时“命名的层”列表框内选中的层名称右边会出现“（显示）”文字。 （2）如果要设置层为不显示状态，则单击选中“命名的层”列表框内层的名称，再单击【隐藏】按钮，此时“命名的层”列表框内选中的层名称右边会出现“（隐藏）”文字。 （3）单击【默认值】按钮后，可将层的显示与否设置为默认状态。,6.4 【案例36】“北京名胜1”网页交替变化图像,1“调出信息”动作 选择整个页面，单击“行为”面板中的 按钮，调出“动作名称”菜单，单击选择“调出信息”菜单命令，调出“调出信息”对话框。在“消息”文本框内输入调出的对话框内要显示的文字，单击【确定】按钮，即可完成动作设置。 2“设置文本”动作 选择一个页面对象，单击“行为”面板中的 按钮，调出“动作名称”菜单，单击选择“设置文本”
