行为和时间线概述

1、行为和时间线概述1.行为(behaviors)：就是网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过这些动作使某个任务完成。行为是浏览器执行的动作。2.组成：一般来讲，一个行为应该由一个事件（event）动作(action)所组成。3. 行为行为=事件事件+动作动作认识事件事件：指特定时间或者由用户发出的特定的指令，是浏览器能够识别的一些操作。如:单击鼠标,鼠标经过等认识动作动作：是事先编好的一段JawaScript脚本代码，利用这些代码完成特定的任务，如：播放声音，打开浏览器，显示层，视频等行为面板删除行为添加行为用于修改事件的事件列表事件列动作列 行 为 名 称

2、功 能 Call Java 调用脚本语言 允许使用 Behavior 检查指定当某些事件发生时，调用相应的 Javascript 脚本代码 Change Property 改变属性 改变某个对象的属性值 Check Browse 检查浏览器 根据用户使用的浏览器类型和版本发送不同的页面 Check Plugin 检查插件 根据用户是否安装指定插件决定是否将其引导到相应的页 Control ShockwaveOr Flash 控制动画 控制动画播放、停止或跳转到动画中的帧 Drag Layer 拖动层 五许用户进行拖动层的操作 Go tO URL 转到 URL 跳转到 URL 所设置的位置 Ju

3、mp Menu 跳转菜单 通过行为面板编辑跳转菜单 Jump Menu Go 跳转菜单 Go 通过行为面板编辑跳转菜单 Open Browse Window 打开浏览器窗口 在新窗口中载入 URL 指定的文档，同时设置新窗口的属性 Plav Sound 播放声音 在网页中播放声音 Popup Message 弹出信息对话框 弹出一个对话框，起到提示信息作用 Preload lmages 预载图像 将那些不会立即显示但有可能显示的图像下载到浏览器缓冲区 Set Nav Bar lmage 设置导航条图像 允许对导航条的图像进行编辑和控制 Set Text 设置文本 允许向一些对象设置文本 Sho

4、w-Hide Layers 显示隐藏层 设置层的显示或隐藏操作 Swap lmages 变换图像 根据图像属性面板中的 scr 的内容变换图像 Swap lmage Restore 变换图像还原 将变换的图像还原为初始图像 Timeline 时间线 控制时间线的播放、停止等 Validate Form 验证表单 检缸表单中的数据，确保用户输入数据类型的准确 Dreamweaver的内置行为基本的事件类型1OnAbort NS3、NS4、IE4、IE5 当网页下载中断 OnAfterUpdate IE4、IE5 当网页更新完毕 OnBeforeUpdate IE4、IE5 当一个数据元素变化或将

5、失去焦点 OnBlur NS3、NS4、IE3、IE4、IE5 当指定元素失去焦点 OnBounce IE4、IE5 当一个选取框元素的内容已经到了选取框边缘时 OnChange NS3、NS4、IE3、IE4、IE5 当网页元素改变 OnClick NS3、NS4、IE3、IE4、IE5 当鼠标单击 OnDblClick NS4、IE4、IE5 当鼠标双击 OnError NS3、NS4、IE4、IE5 当网页下载错误 OnFocus NS3、NS4、IE3、IE4、IE5 当特定元素成为用户焦点 OnHelp IE4、IE5 当用户单击浏览器帮助按钮 OnKeyDown NS4、IE4、I

6、E5 当按键时 OnKeyPress NS4、IE4、IE5 当按键并且释放键时 OnKeyUp NS4、IE4、IE5 当释放按键时 OnLoad NS3、NS4、IE3、IE4、IE5 当图像或页面完全载入后 基本的事件类型2 事 件 支持的浏览器 说 明 OnMouseDown NS4、IE4、IE5 当按下鼠标左键些犟放时 OnMOuseMove IE3、IE4、IE5 当鼠标移动到一个元素上时 OnMouseOut NS3、NS4、IE4、IE5 当鼠标琶些苎声的元素时一 OnMouseOver NS3、NS4、IE3、IE4、IE5 当刚移到节定元素时 OnMOuseUp NS4、

7、IE4、IE5 当按下鼠标廷放时 OnMove NS4 窗口和框架移动时 OnReset NS3、NS4、IE3、IE4、IE5 当表单被重置为缺省状态时 OnResize NS4、IE4、IE5 当调整浏览器窗口和框架尺寸时 OnRowEnter IE4、IE5 当捆绑的数据源的记录指针改变时 OnRowEx让 IE4、IE5 当捆绑的数据源的记录指针将要改变时 OnScr011 1E4、IE5 当用户使用滚动条或箭头上下滚动文档时 OnSelect NS3、NS4、IE3、IE4、IE5 当在文本框中选中文本时 OnSubm让 NS3、NS4、IE3、IE4、IE5 当用户提交一份表单时

8、OnUnlOad NS3、NS4、IE3、IE4、IE5 当用户离开页面时 常用事件列表On abortIe4,5当网页下载中断On click当鼠标单击On dbl clickIe345当鼠标双击On loadie45当图象或页面完全载入后On mouse downie45当按下鼠标左键尚未释放时On mouse overie345当鼠标刚移动到特定的元素上时On mouse outie45当鼠标刚移出特定元素时创建行为可以将行为附加给整个文件,也可以附加给文本图像链接层等，对象可以接受什么样的行为取决于浏览器。浏览器的版本越高，接受的事件就越多步骤:1选中要附加行为的对象2打开行为面板3单

9、击 ，点击“显示事件属”-选一个浏览器版本4再单击 ，选一个动作，弹出相应对话框，设置相应的参数。5单击“确定”按钮例如：创建显示隐藏层行为效果（图片旁边的说明文字为隐藏的，当鼠标经过图像时才显示）步骤如下：1、插入图象2、插入层 插入面板 / 层按钮3、设置层属性 属性面板 / 相应选项/并设置层属性为隐藏4、选种图像，对图象设置行为:显示隐藏图层5、添加事件OnMouseOver6、保存创建显示隐藏层行为的图示什么是时间轴(时间线)时间线：它是一条贯穿时间的轴,用于表示网页存活时间中发生的各种状态。作用：通过往这个时间线的不同部位放置不同的内容,或是绑定相应的行为,就可以让对应的时间发生对

10、应的事件,从而实现网页元素的动态效果优点：它纯粹是往文档中添加javascript代码来实现网页的动态效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有极好的兼容性。时间轴面板1回放头回放头所在的帧每秒播放帧数关键帧附加的行为动画通道（帧控制区）动画条行为通道返回后退时间线下拉菜单帧数时间轴面板2时间下拉菜单 ：一个文档中可以包含多条时间线，时间线下拉菜单主要用于控制哪条时间线显示在时间线面板上。打开该菜单，并选择不同的时间线。就可以在时间线面板上显示不同的时间设置。行为通道：在该通道上，显示时间线上相应时间中所绑定的行为。浅蓝色的方块表示存在行为。帧数：在该通道

11、上显示在时间线上不同时间对应的动画帧时间轴面板3回放头:回放头是位于帧数行上的红色方块，它表明当前的动画放映到哪个位置，通过在时间线面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在时间线面板上方前进箭头按钮和后退箭头按钮之间的文本框中。动画通道：在时间线面板上有33个动画通道，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条.动画条：动画条表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道行上可以包含多个动画条，用于表示多个不同的对象不同的

12、动画条在同一帧内不能控制相同的对象。时间轴面板4时间轴面板5关键帧：如果你进行过动画设计，就很容易理解什么是关键帧，简单地说，关键帧就是由你为对象所指定的在某一确定时刻(帧)上的状态。 Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要设计对象直线移动，只需要定义开始和结束的位置，这两个位置就是关键帧，dreamweaver会根据直线的开始和结束位置自动计算中间移动状态。在动画条上，“关键帧”以一个圆圈的形式表示。时间轴面板6返回：单击该按钮，可以回放头返回到动画的开始位置。后退：单击该按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放动画。播放：单击该按钮，

13、可以将动画播放一帧，连续单击播放按钮，可以播放动画。时间轴面板7每秒帧数：在该文本框中，可以设置动画播放的速度。你可以直接输入每秒帧数值。自动播放：选中该复选框，则当网页被载人之后自动播放动画。如果清除该复选框，则网页载人之后，动画并不播放，你可以利用为对象绑定行为的方法，提供播放动画的命令。时间轴面板8循环：选中该复选框，则动画播放完毕后自动重新播放，也即动画不断循环播放，直至用户离开页面。清除该复选框，则动画只播放一次。什么叫创建时间线动画创建时间线动画，简而言之，就是首先往动画通道上添加对象来构建动画条，然后构建动画条上的关键帧，最后在文档窗口中设置对象在关键帧上的位置，然后播放，从而实

14、现动画的创作。创建动画的注意事项利用时间线，你可以在页面上构建分层的动画效果。要注意的是，时间线只能移动分层对象，如果你希望移动诸如文本或图像之类的对象，可以将之放人分层中。利用时间线构建分层动画的基本方法如下： 1首先指定起始的关键帧。首先指定起始的关键帧。操作方法：将分层移动到动画的起始位置。 2选中该要制作动画的分层。选中该要制作动画的分层。 3添加动画条。添加动画条。方法(1)：打开时间线面板菜单，选择Add object(添加对象)命令，即可在动画通道中添加一个对应该分层的动画条。方法(2)：也可以直接将分层拖动到时间线面板上相应位置来构建动画条。在动画条上可以看到分层名称。利用时间

15、线构建分层动画的基本方法如下：4改变该对象参与动画的时间。改变该对象参与动画的时间。拖动动画条上最右端的关键帧标记，可以改变动画条的长度，也即改变该对象参与动画的时间。5构建了动画结束位置的关键帧。构建了动画结束位置的关键帧。单击动画条最右端的关键帧标记，然后在文档窗口中将分层移动到动画结束的位置，这实际上是构建了动画结束位置的关键帧。利用时间线构建分层动画的基本方法如下：6在动画条中间位置添加关键帧在动画条中间位置添加关键帧.如果希望在动画条中间位置添加关键帧，可以按住Ctrl键，然后在动画条上相应帧位置单击鼠标，这时会出现新的关键帧标记；另外，也可以通过打开面板菜单，选择Add Keyam

16、es(添加关键帧)命令来添加关键帧。选中关键帧标记，然后从文档窗口中拖动分层，将之移动到该帧对应的位置上。重复该操作，直至所有的关键帧被创建。利用时间线构建分层动画的基本方法如下：7预览动画效果。预览动画效果。在Play(播放)按钮上按住鼠标左键，可以在文档窗口中预览动画效果。8选择播放方式选择播放方式.根据需要，选中或清除相应的Autoplay(自动播放)和Loop(循巧)复选框。二、录制分层路径1 对于简单的直线路径，采用前一节介绍的方法，可以很好地构建动画。然而如果动画路径较为复杂，例如是曲线或圆形，则无法通过先设置关键帧，再拖动分层到指定位置的方法构建动画。录制分层路径2在Dreamw

17、eaver中提供了以供记录路径的方法，允许你直接在文档窗口中拖动分层，Dreamweaver在后台记录你拖动分层的路径，然后将之应用到时间线上，利用这种方法，可以很容易地构建各种移动方式的分层动画。 录制分层路径操作方法3： 1在文档窗口中选择要创建分层动画的分层。 2将分层移动到动画的起始位置。 3在时间线面板上，打开面板菜单，选择RecordPathofLayer(录制分层路径)命令。这时就可以开始录制分层的移动路径。录制分层路径44在文档窗口中，按照需要的路径拖动分层。5当希望动画停止时，可以释放鼠标，停止移动分层。6在时间线面板上，按住Play(播放)按钮，就可以预览动画效果。例如假设

18、我们希望构建一个地球围绕太阳旋转的动画，可以分别将太阳图像和地球图像放人不同的分层，然后选中地球所在分层，启动RecordPathofLayer命令，再将地球分层围绕太阳分层拖动一圈，释放鼠标，即可构建相应的动画。Dreamweaver会自动将地球分层添加到时间线上，构建一个动画条，并按照拖动的路径构建关键帧数据。三、利用时间线改变图像和分层属性 利用时间线，不仅可以改变分层的位置，还可以改变分层的某些属性利用时间线，还可以改变图像的源文件，实现某些特殊效果。 例如：改变分层的大小和可见性改变分层的大小和可见性等可以按照如下方法进行操作： 步骤1从时间线面板上，单击选中相应的关键帧，这时文档窗

19、口中相应的对象也被选中。 步骤2根据需要改变对象的属性步骤2,根据需要改变对象的属性：可以在图像属性面板上的Src(源)文本框中输入新文件的URL地址， 或是单击文件夹按钮，从磁盘上选择新图像文件。，可以从分层的属性面板上的Vis(可见性)下拉列表中选择需要的 可见性设置。根据需要改变对象的属性可以通过拖动分层的边框控点来改变大小，也可以直接在分层的属性面板上输入需要的宽度和高度值。只有InternetExplorer 40和50才支持对分层大小的改变。根据需要改变对象的属性：可以直接在分层属性面板上的Z-Index区域输入新值。设置完毕预览效果设置完毕, 可以从时间线面板上，按住Play(播

20、放)按钮，预览效果。控制时间线 设计好动画之后，可以在时间线面板中对时间线进行各种控制，从而实现对动画的编辑和修改。例如：一、选中动画条二、改变对象参与动画的时间三、改变动画局部的播放速度四、改变动画起始时间五、改变动画完整路径六、添加帧和删除帧七、对象的添加、删除和修改八、自动播放和循环播放九、使用多条时间线一、选中动画条一个动画条表示个对象在某段时间内的动画序列。要选中动画条，你可以按照如下方法进行:二、改变对象参与动画的时间如果希望使某个对象在动画中参与的动画时间变长或变短；，将之左右拖动，这时动画条长度会发生变化，同时上面所有的关键帧标记也按照比例移动相应的位置。如果希望保持所有中间位

21、置的关键帧不动，可以按住Ctrl键，再拖动结束帧标记。三、改变动画局部的播放速度要改变某两个关键帧之间动画的播放时间，也即改变关键帧之间的动画播放速度，在图1635中，我们改变了起始帧和第二个关键帧之间的距离，也即改变了相应序列的播放时间。四、改变动画起始时间要改变动画的起始时间，1.可以单击动画条选中它，2.然后将之在动画通道上左右拖动。按住Shift键，可以一次选中多个动画条。 图1636显示了改变动画起始时间的情形。改变后，动画从原先动画的第10帧对应的时间开始播放。五、改变动画完整路径要将完整的动画路径移动位置，1.可以选中整个动画条，2.然后拖动页面上的对象。这时Dreamweave

22、r会自动调整所有关键帧的位置。六、添加帧和删除帧 要往时间线上，可以打开面板菜单，再选择AddFrame(添加帧)命令。 要往时间线上，可以打开面板菜单，再选择RemoveFrame(删除帧)、命令。 要往时间线上，可以打开面板菜单，再选择AddKeyffame(添加关键帧)命令，也可以按住Ctrl键，然后单击要添加关键帧的位置。 要往时间线上，可以打开面板菜单，再选择Remove Keyffame(删除关键帧)命令。七、对象的添加、删除和修改1首先在文档窗口中选中对象，然后打开时间线面板菜单，选择AddOject(添加对象)命令，可以，也即创建新的动画条。如果希望从时间线中，可以首先选中该动画条，然后打开时间线面板菜单，再选择Remov