网页设计中如何添加行为和时间线（PPT50页)

行为和时间线什么是行为1.行为(behaviors)：就是网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过这些动作使某个任务完成。行为是浏览器执行的动作。2.组成：一般来讲，一个行为应该由一个事件（event）和一个动作(action)所组成。行为=事件+动作认识事件事件：指特定时间或者由用户发出的特定的指令，是浏览器能够识别的一些操作。如:单击鼠标,鼠标经过等认识动作动作：是事先编好的一段JawaScript脚本代码，利用这些代码完成特定的任务，如：播放声音，打开浏览器，显示层，视频等行为面板删除行为添加行为用于修改事件的事件列表事件列动作列行为名称功能CallJava调用脚本语言允许使用Behavior检查指定当某些事件发生时，调用相应的Javascript脚本代码．ChangeProperty改变属性改变某个对象的属性值CheckBrowse检查浏览器根据用户使用的浏览器类型和版本发送不同的页面CheckPlugin检查插件根据用户是否安装指定插件决定是否将其引导到相应的页ControlShockwaveOrFlash控制动画控制动画播放、停止或跳转到动画中的帧DragLayer拖动层五许用户进行拖动层的操作GotOURL转到URL跳转到URL所设置的位置JumpMenu跳转菜单通过行为面板编辑跳转菜单JumpMenuGo跳转菜单Go通过行为面板编辑跳转菜单OpenBrowseWindow打开浏览器窗口在新窗口中载入URL指定的文档，同时设置新窗口的属性PlavSound播放声音在网页中播放声音PopupMessage弹出信息对话框弹出一个对话框，起到提示信息作用Preloadlmages预载图像将那些不会立即显示但有可能显示的图像下载到浏览器缓冲区SetNavBarlmage设置导航条图像允许对导航条的图像进行编辑和控制SetText设置文本允许向一些对象设置文本Show-HideLayers显示隐藏层设置层的显示或隐藏操作Swaplmages变换图像根据图像属性面板中的scr的内容变换图像SwaplmageRestore变换图像还原将变换的图像还原为初始图像Timeline时间线控制时间线的播放、停止等ValidateForm验证表单检缸表单中的数据，确保用户输入数据类型的准确Dreamweaver的内置行为基本的事件类型1OnAbortNS3、NS4、IE4、IE5当网页下载中断OnAfterUpdateIE4、IE5当网页更新完毕OnBeforeUpdateIE4、IE5当一个数据元素变化或将失去焦点OnBlurNS3、NS4、IE3、IE4、IE5当指定元素失去焦点OnBounceIE4、IE5当一个选取框元素的内容已经到了选取框边缘时OnChangeNS3、NS4、IE3、IE4、IE5当网页元素改变OnClickNS3、NS4、IE3、IE4、IE5当鼠标单击OnDblClickNS4、IE4、IE5当鼠标双击OnErrorNS3、NS4、IE4、IE5当网页下载错误OnFocusNS3、NS4、IE3、IE4、IE5当特定元素成为用户焦点OnHelpIE4、IE5当用户单击浏览器帮助按钮OnKeyDownNS4、IE4、IE5当按键时OnKeyPressNS4、IE4、IE5当按键并且释放键时OnKeyUpNS4、IE4、IE5当释放按键时OnLoadNS3、NS4、IE3、IE4、IE5当图像或页面完全载入后基本的事件类型2事件支持的浏览器说明OnMouseDownNS4、IE4、IE5当按下鼠标左键些犟放时OnMOuseMoveIE3、IE4、IE5当鼠标移动到一个元素上时OnMouseOutNS3、NS4、IE4、IE5当鼠标琶些苎声的元素时一OnMouseOverNS3、NS4、IE3、IE4、IE5当刚移到节定元素时OnMOuseUpNS4、IE4、IE5当按下鼠标廷放时OnMoveNS4窗口和框架移动时OnResetNS3、NS4、IE3、IE4、IE5当表单被重置为缺省状态时OnResizeNS4、IE4、IE5当调整浏览器窗口和框架尺寸时OnRowEnterIE4、IE5当捆绑的数据源的记录指针改变时OnRowEx让IE4、IE5当捆绑的数据源的记录指针将要改变时OnScr0111E4、IE5当用户使用滚动条或箭头上下滚动文档时OnSelectNS3、NS4、IE3、IE4、IE5当在文本框中选中文本时．OnSubm让NS3、NS4、IE3、IE4、IE5当用户提交一份表单时OnUnlOadNS3、NS4、IE3、IE4、IE5当用户离开页面时常用事件列表OnabortIe4,5当网页下载中断Onclick当鼠标单击OndblclickIe345当鼠标双击Onloadie45当图象或页面完全载入后Onmousedownie45当按下鼠标左键尚未释放时Onmouseoverie345当鼠标刚移动到特定的元素上时Onmouseoutie45当鼠标刚移出特定元素时创建行为可以将行为附加给整个文件,也可以附加给\文本\图像\链接\层\等，对象可以接受什么样的行为取决于浏览器。浏览器的版本越高，接受的事件就越多步骤:1选中要附加行为的对象2打开行为面板3单击，点击“显示事件属”----选一个浏览器版本4再单击，选一个动作，弹出相应对话框，设置相应的参数。5单击“确定”按钮例如：创建显示隐藏层行为效果（图片旁边的说明文字为隐藏的，当鼠标经过图像时才显示）步骤如下：1、插入图象2、插入层插入面板/层按钮3、设置层属性属性面板/相应选项/并设置层属性为隐藏4、选种图像，对图象设置行为:显示隐藏图层5、添加事件OnMouseOver6、保存创建显示隐藏层行为的图示什么是时间轴(时间线)时间线：它是一条贯穿时间的轴,用于表示网页存活时间中发生的各种状态。作用：通过往这个时间线的不同部位放置不同的内容,或是绑定相应的行为,就可以让对应的时间发生对应的事件,从而实现网页元素的动态效果优点：它纯粹是往文档中添加javascript代码来实现网页的动态效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有极好的兼容性。时间轴面板1回放头回放头所在的帧每秒播放帧数关键帧附加的行为动画通道（帧控制区）动画条行为通道返回后退时间线下拉菜单帧数时间轴面板2时间下拉菜单：一个文档中可以包含多条时间线，时间线下拉菜单主要用于控制哪条时间线显示在时间线面板上。打开该菜单，并选择不同的时间线。就可以在时间线面板上显示不同的时间设置。行为通道：在该通道上，显示时间线上相应时间中所绑定的行为。浅蓝色的方块表示存在行为。帧数：在该通道上显示在时间线上不同时间对应的动画帧时间轴面板3回放头:回放头是位于帧数行上的红色方块，它表明当前的动画放映到哪个位置，通过在时间线面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映的状态。同时，当前回放头所在的帧位置会显示在时间线面板上方前进箭头按钮和后退箭头按钮之间的文本框中。动画通道：在时间线面板上有33个动画通道，分别从1排列至33，表示可以在同一时间进行33路动画设置。一旦某个动画通道上存在动画，就会显示动画条.动画条：动画条表明某个对象在某段时间内的持续状态，动画条是真正的动画实体。其中一些空白圆圈表明关键帧。在一个动画通道行上可以包含多个动画条，用于表示多个不同的对象·／不同的动画条在同一帧内不能控制相同的对象。时间轴面板4时间轴面板5关键帧：如果你进行过动画设计，就很容易理解什么是关键帧，简单地说，关键帧就是由你为对象所指定的在某一确定时刻(帧)上的状态。Dreamweaver会自动根据两个关键帧的位置计算对象在其间的动作。例如，要设计对象直线移动，只需要定义开始和结束的位置，这两个位置就是关键帧，dreamweaver会根据直线的开始和结束位置自动计算中间移动状态。在动画条上，“关键帧”以一个圆圈的形式表示。时间轴面板6返回：单击该按钮，可以回放头返回到动画的开始位置。后退：单击该按钮，可以将动画后退一帧，连续单击后退按钮，可以向后播放动画。播放：单击该按钮，可以将动画播放一帧，连续单击播放按钮，可以播放动画。时间轴面板7每秒帧数：在该文本框中，可以设置动画播放的速度。你可以直接输入每秒帧数值。自动播放：选中该复选框，则当网页被载人之后自动播放动画。如果清除该复选框，则网页载人之后，动画并不播放，你可以利用为对象绑定行为的方法，提供播放动画的命令。时间轴面板8循环：选中该复选框，则动画播放完毕后自动重新播放，也即动画不断循环播放，直至用户离开页面。清除该复选框，则动画只播放一次。什么叫创建时间线动画创建时间线动画，简而言之，就是首先往动画通道上添加对象来构建动画条，然后构建动画条上的关键帧，最后在文档窗口中设置对象在关键帧上的位置，然后播放，从而实现动画的创作。创建动画的注意事项利用时间线，你可以在页面上构建分层的动画效果。要注意的是，时间线只能移动分层对象，如果你希望移动诸如文本或图像之类的对象，可以将之放人分层中。利用时间线构建分层动画的基本方法如下：1．首先指定起始的关键帧。操作方法：将分层移动到动画的起始位置。2．选中该要制作动画的分层。3．添加动画条。方法(1)：打开时间线面板菜单，选择Addobject(添加对象)命令，即可在动画通道中添加一个对应该分层的动画条。方法(2)：也可以直接将分层拖动到时间线面板上相应位置来构建动画条。在动画条上可以看到分层名称。利用时间线构建分层动画的基本方法如下：4．改变该对象参与动画的时间。拖动动画条上最右端的关键帧标记，可以改变动画条的长度，也即改变该对象参与动画的时间。5．构建了动画结束位置的关键帧。单击动画条最右端的关键帧标记，然后在文档窗口中将分层移动到动画结束的位置，这实际上是构建了动画结束位置的关键帧。利用时间线构建分层动画的基本方法如下：6．在动画条中间位置添加关键帧.如果希望在动画条中间位置添加关键帧，可以按住Ctrl键，然后在动画条上相应帧位置单击鼠标，这时会出现新的关键帧标记；另外，也可以通过打开面板菜单，选择AddKey~ames(添加关键帧)命令来添加关键帧。选中关键帧标记，然后从文档窗口中拖动分层，将之移动到该帧对应的位置上。重复该操作，直至所有的关键帧被创建。’’利用时间线构建分层动画的基本方法如下：7．预览动画效果。在Play(播放)按钮上按住鼠标左键，可以在文档窗口中预览动画效果。8．选择播放方式.根据需要，选中或清除相应的Autoplay(自动播放)和Loop(循巧)复选框。二、录制分层路径1对于简单的直线路径，采用前一节介绍的方法，可以很好地构建动画。然而如果动画路径较为复杂，例如是曲线或圆形，则无法通过先设置关键帧，再拖动分层到指定位置的方法构建动画。录制分层路径2在Dreamweaver中提供了以供记录路径的方法，允许你直接在文档窗口中拖动分层，Dreamweaver在后台记录你拖动分层的路径，然后将之应用到时间线上，利用这种方法，可以很容易地构建各种移动方式的分层动画。录制分层路径操作方法3：1．在文档窗口中选择要创建分层动画的分层。2．将分层移动到动画的起始位置。3．在时间线面板上，打开面板菜单，选择RecordPathofLayer(录制分层路径)命令。这时就可以开始录制分层的移动路径。录制分层路径44．在文档窗口中，按照需要的路径拖动分层。5．当希望动画停止时，可以释放鼠标，停止移动分层。6．在时间线面板上，按住Play(播放)按钮，就可以预览动画效果。例如假设我们希望构建一个地球围绕太阳旋转的动画，可以分别将太阳图像和地球图像放人不同的分层，然后选中地球所在分层，启动RecordPathofLayer命令，再将地球分层围绕太阳分层拖动一圈，释放鼠标，即可构建相应的动画。Dreamweaver会自动将地球分层添加到时间线上，构建一个动画条，并按照拖动的路径构建关键帧数据。三、利用时间线