第14章 生成动态特效.pptVIP

* Dreamweaver 8中文版应用教程 Dreamweaver 8中文版应用教程 第14章 生成动态特效 重点内容： 了解行为 了解Dreamweaver的内置行为 应用行为 时间轴动画 一、动态特效技术 1.网页中的动态元素 网页中可以“动”起来的元素，都可以称之为动态元素。在网页中使用动画元素可以使网页更生动，常见的网页动态元素首当其冲就是动画。 除了动画外常见的动态元素还包括滚动字幕、悬停按钮、导航工具条（参看第12章）和广告横幅等。但是网页中的动态元素并不是只有这些，结合Dreamweaver中的行为还可以设计随指针移动改变对象属性、动态图像说明、状态栏文字跳动信息、打开网页时弹出窗口、打开网页时播放声音等动态特效。 如果用户精通编程语言，当然 可以在“设计”视图中直接插入HTML 代码，自行定义动态元素。 一、动态特效技术 2.使用Dreamweaver进行动态特效设计 Dreamweaver中提供了“行为”，用户只需简单地设置一下就可以产生动态特效了，无需动手编写动态特效。 Dreamweaver 8行为将JavaScript代码放置在文档中，以允许访问者与Web页进行交互，从而以多种方式更改页面或引起某些任务的执行。行为是事件和由该事件触发的动作的组合。在“行为”面板中，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。 事件是浏览器生成的消息，用于表明网页浏览者执行了某种操作。 动作是由预先编写的JavaScript代码组成的，这些代码能执行各种特定的任务。 二、应用行为和动作 1.认识“行为”面板 若要打开“行为”面板，可选择“窗口”|“行为”命令。单击行为列表中所选事件名称旁边的下拉按钮 时，显示事件下拉菜单，其中包含可以触发该动作的所有事件。 二、应用行为和动作 2.内置行为 Dreamweaver的“行为”面板中预设有21种行为。 3.为对象附加行为 行为可以附加到整个文档（即附加到body标签）， 也可以附加到链接、图像、表单元素或多种其他HTML元 素中的任何一种。 4.获得更多的行为 若要从Exchange站点下载和安装新行为，应单击“行为”面板中的“添加行为”按钮，然后从弹出的菜单中选择“获取更多行为”命令，系统自动打开主浏览器，连接至Exchange站点，浏览或搜索扩展包，并下载安装所需的扩展包。 三、时间轴动画 1.认识“时间轴”面板 “时间轴”面板可用于显示层和图像的属性在一段时间内如何更改。选择“窗口”|“时间轴”命令，或按Alt+F9组合键，可打开“时间轴”面板。为了方便 介绍笔者先向时 间轴中添加一个 对象。 2.创建时间轴动画 若要使用时间轴制作层动画，应将层移至它在动画开始时应处于的位置，使层保持选择状态，选择“修改”|“时间轴”|“在时间轴上添加对象”命令，打开提示对话框，单击“确定”按钮。一个时间条将出现在时间轴的第一个通道中，且层的名称将显示在该时间条中。选择位于 条末端的关键帧标记，在页面上将层移至它在动画结束 时应处于的位置。 三、时间轴动画 3.修改时间轴 加长动画的播放时间更长，将结束帧标记向右拖动。若要阻止其他关键帧移动，按住Ctrl键并拖动结束帧标记。 使层更早或更晚到达某一关键帧位置，在动画条中将关键帧向左/右移动。 若要更改动画的开始时间，选择一个或多个与该动画关联的动画条（按Shift可一次选择多个动画条），然后向左或向右移动。 若要移动整个动画轨迹的位置，选择整个动画条，然后在页面上拖动该对象。Dreamweaver会调整所有关键帧的位置。 若要在时间轴上添加或删除帧，选择“修改”|“时间轴”|“添加帧”命令或“修改”|“时间轴”|“删除帧”命令。 若要使时间轴于页在浏览器中打开时自动播放，选择“自动播放”复选框。“自动播放”会向页附加一个行为，该行为将在页加载时执行“播放时间轴”操作。 使时间轴连续循环，选择“循环”复选框。“循环”将“转到时间轴帧”操作插入到动画最后一帧后的“行为”通道。可以编辑此行为的参数以定义循环的次数。 三、时间轴动画 4.时间轴动画小技巧 显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。 扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动，请拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。尝试增加每秒帧数（