网页设计中如何添行为和时间线.ppt

行为和时间线 什么是行为 行为(behaviors)：就是网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过这些动作使某个任务完成。行为是浏览器执行的动作。 组成：一般来讲，一个行为应该由一个事件（event）和一个动作(action)所组成。 行为=事件+动作 认识事件 事件：指特定时间或者由用户发出的特定的指令，是浏览器能够识别的一些操作。如:单击鼠标,鼠标经过等 认识动作 动作：是事先编好的一段JawaScript脚本代码，利用这些代码完成特定的任务，如：播放声音，打开浏览器，显示层，视频等 行为面板 基本的事件类型1 基本的事件类型2 常用事件列表 创建行为 可以将行为附加给整个文件,也可以附加给\文本\图像\链接\层\等，对象可以接受什么样的行为取决于浏览器。浏览器的版本越高，接受的事件就越多 步骤:1选中要附加行为的对象2打开行为面板3单击 ，点击“显示事件属”----选一个浏览器版本4再单击 ，选一个动作，弹出相应对话框，设置相应的参数。5单击“确定”按钮 例如：创建显示隐藏层行为 效果（图片旁边的说明文字为隐藏的，当鼠标经过图像时才显示） 步骤如下： 1、插入图象 2、插入层 插入面板 / 层按钮 3、设置层属性 属性面板 / 相应选项/并设置层属性为隐藏 4、选种图像，对图象设置行为:显示隐藏图层 5、添加事件OnMouseOver 6、保存 创建显示隐藏层行为的图示 什么是时间轴(时间线) 时间线：它是一条贯穿时间的轴,用于表示网页存活时间中发生的各种状态。 作用：通过往这个时间线的不同部位放置不同的内容,或是绑定相应的行为,就可以让对应的时间发生对应的事件,从而实现网页元素的动态效果 优点：它纯粹是往文档中添加javascript代码来实现网页的动态效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有极好的兼容性。 时间轴面板1 时间轴面板2 时间下拉菜单 ：一个文档中可以包含多条时间线，时间线下拉菜单主要用于控制哪条时间线显示在时间线面板上。打开该菜单，并选择不同的时间线。就可以在时间线面板上显示不同的时间设置。 行为通道：在该通道上，显示时间线上相应时间中所绑定的行为。浅蓝色的方块表示存在行为。 帧数：在该通道上显示在时间线上不同时间对应的动画帧 时间轴面板3 回放头:回放头是位于帧数行上的红色方块，它表明当前的动画放映到哪个位置，通过在时间线面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在时间线面板上方前进箭头按钮和后退箭头按钮之间的文本框中。 时间轴面板4 动画通道：在时间线面板上有33个动画通道，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条. 动画条：动画条表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道行上可以包含多个动画条，用于表示多个不同的对象·／不同的动画条在同一帧内不能控制相同的对象。 时间轴面板5 关键帧：如果你进行过动画设计，就很容易理解什么是关键帧，简单地说，关键帧就是由你为对象所指定的在某一确定时刻(帧)上的状态。 Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要设计对象直线移动，只需要定义开始和结束的位置，这两个位置就是关键帧，dreamweaver会根据直线的开始和结束位置自动计算中间移动状态。在动画条上，“关键帧”以一个圆圈的形式表示。 时间轴面板6 返回：单击该按钮，可以回放头返回到动画的开始位置。 后退：单击该按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放动画。 播放：单击该按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。 时间轴面板7 每秒帧数：在该文本框中，可以设置动画播放的速度。你可以直接输入每秒帧数值。 自动播放：选中该复选框，则当网页被载人之后自动播放动画。如果清除该复选框，则网页载人之后，动画并不播放，你可以利用为对象绑定行为的方法，提供播放动画的命令。 时间轴面板8 循环：选中该复选框，则动画播放完毕后自动重新播放，也即动画不断循环播放，直至用户离开页面。清除该复选框，则动画只播放一次。 什么叫创建时间线动画 创建时间线动画，简而言之，就是首先往动画通道上添加对象来构建动画条，然后构建动画条上的关键帧，最后在文档窗口中设置对象在关键帧上的位置，然后播放，从而实现动画的创作。 创建动画的注意事项 利用时间线，你可以在页面上构建分层的动画效果。要注意的是，时间线只能移动分层对象，