网页制作PPT-ch5

第5章时间轴和行为•5.1案例13“校园风貌——10”网页•5.2案例14“校园风貌——11”网页•5.3案例15“校园风貌——12”网页•5.4案例16“校园风貌——13”网页•5.5案例17“校园风貌——14”网页•5.6案例18“跳转菜单”网页5.1案例13“校园风貌——10”网页•案例效果•利用Dreamweaver软件提供的时间轴功能可以实现动画效果，即随着时间的变化通过改变层的位置、尺寸、可视性以及叠放顺序等来实现更多的动画效果。5.1案例13“校园风貌——10”网页•设计过程•略5.1案例13“校园风貌——10”网页•相关知识•1．时间轴面板•Dreamweaver的精华之一就是时间轴（Timeline）功能。执行“窗口”→“时间轴”命令或者使用功能组合键“Alt+F9”即可打开“时间轴”面板。所谓时间轴是指可以用其制作网页页面上的动画。5.1案例13“校园风貌——10”网页•相关知识•1．时间轴面板•相关概念介绍：•（1）时间轴：用来排列画面的顺序，由通道组成，每一个通道里面放一个要运动的物体。还有一个播放头，播放头所指的位置就是动画当前所在的帧。•（2）帧：动画的实现原理就是利用人的视觉差缺陷将画面连起来播放，从而产生运动的错觉。所以动画的基本单位就是一个画面，也叫做帧。•（3）关键帧：在动画中有些画面是关键的，可以影响整个动画的，这样的帧叫做关键帧。关键帧用圆点表示。•（4）帧频：每秒钟播放的帧数，但超过用户浏览器可处理的速率则会被忽略掉，15Fps是平均较好的速率。•（5）动画条：动画的持续时间。5.1案例13“校园风貌——10”网页•相关知识•2.制作沿曲线路径移动的动画•实例中已初步介绍了制作沿曲线路径移动的动画。而通过曲线运动则大大美观了动画的效果。在曲线运动中最主要的就是关键帧的设置。方法如下：•（1）在时间轴面板动画通道上添加一个关键帧:选择动画通道想要添加关键帧的地方，按住“Ctrl”键单击鼠标左键，即刻在插入点位置添加一个关键帧；或者右击选择“添加关键帧”，也可以加入关键帧。•（2）在添加的关键帧处移动层至所需要的地方，此时直线变化成了曲线。另外，读者可以多添加几个关键帧，再移动层，使产生的曲线更加光滑。•（3）任意曲线路径的快捷实现：插入一个层以后，保持该层一直被选中状态，移动层到动画起始位置，再执行“修改”→“时间轴”→“录制层路径”命令或直接在层的鼠标右键菜单中选择“记录路径”。•（4）然后在页面上拖动层，创建想要的曲线运动路径，最后在动画结束处松开鼠标，即可在时间轴内自动生成一个动画栏，并且已经自动定义了一定数目的关键帧。如图5-13所示。5.1案例13“校园风貌——10”网页•相关知识•3.动画的更名、删除、复制和移动•利用时间轴制作完动画的基本组成部分后，可以进行一些更改，如重命名、删除动画、复制和移动动画等。•（1）可以发现层Layer1显淡蓝色底纹，层Layer2显深蓝色底纹，这表明Layer2为当前层，可通过在某层的动画条任意处单击鼠标来确定当前层，而在此基础上进行的操作都是针对当前层的。在某层的动画条处右击，出现的功能菜单中包含有可进行的操作。•1）动画更名：选择“重命名时间轴”，在弹出的对话框中输入需要定义的动画名称即完成动画更名。•2）动画删除：单击“删除”或选中层后直接按“delete”键即将Layer2从时间轴上删除了，而这只是将动画效果去除，页面上的层依然存在并变成了静态。5.1案例13“校园风貌——10”网页•相关知识•3.动画的更名、删除、复制和移动•3）动画复制：当有偏爱的动画序列，可以将其拷贝并粘贴到当前时间轴的另一区域、同一文档中的另一时间轴或者另一文档中的时间轴，而且可以同时拷贝并粘贴多个序列，操作如下：•①单击选中一个动画条。若要选择多个动画条，可以按住Shift键并单击多个动画条；若要选择所有动画条，按“Ctrl+A”组合键即可。•②在鼠标右键菜单中选择“拷贝”（或“剪切”）选定内容。•③然后执行下面的定位操作之一：•将播放头移至当前时间轴中的另一处；•从时间轴的右键弹出式菜单中选择“添加时间轴”；•打开另一个文档或新建文档，然后在时间轴面板中单击。•④将选定内容粘贴到时间轴中。5.1案例13“校园风貌——10”网页•3.动画的更名、删除、复制和移动•（2）动画的移动。如图5-15所示，要使动画的播放时间更长，单击选中层的结束帧，按住左键向右拖动，则动画中的所有关键帧都会等比例移动，如果要阻止其他关键帧移动，可按住“Ctrl”键并拖动结束帧。如果要移动整个动画轨迹的位置，可选中整个动画条，也就是当动画条变成深蓝色底纹时，直接在页面上拖动该对象即可。5.2案例14“校园风貌——11”网页•案例效果•通过添加行为来实现的部分网页特效，在案例13的基础上，单击右图时播放音乐，在左图上按下鼠标按键时弹出内容为“WelcometoSuzhouVocationalUniversity!”的信息窗口。5.2案例14“校园风貌——11”网页•设计过程•略5.2案例14“校园风貌——11”网页•相关知识•1．动作名称及其作用•行为包含有三要素：对象、事件和动作。其中，对象是产生行为的主体，网页中众多的元素都可以成为对象，如图像、文字、多媒体文件等；事件是触发动态效果的条件，如onClick、onMouseMove等；动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如弹出信息、显示或隐藏层、播放声音等。•在将行为附加到页面以后，只要对该对象发生了所指定的事件，浏览器就会调用与该事件关联的动作（即JavaScript代码）。（可以用来触发给定动作的事件随浏览器的不同而有所不同。）例如，如果将“弹出消息”动作附加到某个链接并指定它将由onMousedown事件触发，那么只要某人在浏览器中在该链接上按下按键，就会在对话框中弹出消息窗口。5.2案例14“校园风貌——11”网页动作名称作用交换图像使用此动作创建鼠标事件实现图像和其它一个或多个图像交换的效果弹出信息显示一个带有指定的消息内容的JavaScript警告窗口恢复交换图像实现将最后一组交换的图像恢复为它们以前的源文件打开浏览器窗口在一个新的窗口中打开URL拖动层允许访问者拖动层控制Shockwave或Flash播放、停止、倒带或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧，针对多媒体文件的动作播放声音播放指定的声音文件改变属性更改对象的某个属性值显示-隐藏层显示、隐藏或恢复一个或多个层的默认可见性显示、隐藏弹出式菜单创建或编辑Dreamweaver弹出式菜单，或者打开（隐藏）并修改已插入Dreamweaver文档的Fireworks弹出式菜单检查插件根据访问者是否安装了指定的插件这一情况将他们转到不同的页检查浏览器根据访问者不同类型和版本的浏览器将他们转到不同的页检查表单检查指定文本域的内容以确保用户输入了正确的数据类型设置导航栏图像将某个图像变为导航条图像，或更改导航条中图像的显示和动作设置层文本用指定的内容替换页上现有层的内容和格式设置设置文本域文字用指定的内容替换表单文本域的内容设置框架文本允许动态设置框架文本，即用指定的内容替换框架的内容和格式设置设置状态栏文本在浏览器窗口底部左侧的状态栏中显示消息调用JavaScript允许使用“行为”面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行转到URL在当前窗口或指定的框架中打开一个新页预先载入图像配合“交换图像”使用，可以在载入页时将新图像载入到浏览器的缓存中，防止当图像该出现时由于下载而导致的延迟。5.2案例14“校园风貌——11”网页•相关知识•2.事件名称及其作用事件名称作用onAbort当访问者中断浏览器正在载入图像的操作时发生onBlur当指定对象不再被访问者交互时发生onClick当访问者在指定的对象上单击时发生onDblclick当访问者在指定的对象上双击时发生onError当浏览器在网页或图像载入产生错位时发生onFocus当指定对象被访问者交互时发生onHelp当访问者单击浏览器的Help（帮助）按钮或选择浏览器菜单中的Help（帮助）菜单项时发生onKeyDown当按下任意键的同时发生onKeyPress当按下和松开任意键时发生。相当于把onKeyDown和onKeyUp两事件合在一起onKeyUp当按下的键松开时发生onLoad当图像或网页载入完成时发生5.2案例14“校园风貌——11”网页•相关知识•2.事件名称及其作用onMouseDown当访问者按下鼠标时发生onMouseMove当访问者将鼠标在指定对象上移动时发生onMouseOut当鼠标从指定对象移开时发生onMouseOver当鼠标第一次移动到指定对象时发生onMouseUp当鼠标弹起时发生onMove当窗体或框架移动时发生onReset当表单内容被重新设置为缺省值时发生onResize当访问者调整浏览器或框架大小时发生onScroll当访问者使用滚动条向上或向下滚动时发生onSelect当访问者选择文本框中的文本时发生onSubmit当访问者提交表格时发生onUnload当访问者离开网页时发生5.2案例14“校园风貌——11”网页•相关知识•3.行为的其他操作•（1）上移、下移事件：对于单个事件可以触发多个不同的动作，通过上移、下移操作指定这些动作发生的顺序。•（2）删除事件：选择不需要的事件，单击“－”符号即删除该事件。•（3）编辑动作：选择需要修改的行为动作右击，在弹出的菜单中选择“编辑行为”或双击即可打开动作设置窗口。•（4）显示所有事件：想看看某动作所能设置的所有事件，可单击图标。•（5）显示当前事件：想了解当前对象设置了哪些事件，可单击图标。5.2案例14“校园风貌——11”网页•相关知识•4.显示隐藏层动作•这里我们通过一个简单的案例来说明行为动作“显示隐藏层”。步骤如下：•（1）新建页面，命名为“显示隐藏层.html”。在页面中输入文字“校园风景”，对字体进行必要的设置。•（2）插入层：执行“插入”→“布局对象”→“层”命令。选中层，插入事先做好的校园风景动画：“插入”→“图像”，选择源文件“校园风景.gif”。•（3）在层面板中将层隐藏。•（4）选中文字“校园风景”，为其添加行为动作“显示-隐藏层”，在弹出的对话框中选择层Layer1，单击“隐藏”按钮，再单击“确定”按钮。•（5）确定事件：为隐藏层动作选择“onMouseOut”事件，即表示当鼠标移出文字对象时隐藏层。•（6）再选中文字“校园风景”，为其添加行为动作“显示-隐藏层”，在弹出的对话框中选择层Layer1，单击“显示”按钮，再单击“确定”按钮。•（7）确定事件：为显示层动作选择“onMouseMove”事件，即表示当鼠标移入文字对象时显示层。•（8）保存文件，按F12预览效果。5.3案例15“校园风貌——12”网页•案例效果•如图是设计的一个框架网页，上框架通过设置文本域文字动作使得两篇文字完成替换，左下方框架通过设置框架文本动作实现的滚动文字，右下方框架通过设置层文本动作实现图像替换文字效果，状态栏处通过设置状态栏文本动作显示相关的信息。在本节中需要读者掌握一定的html源代码知识，以便更好地利用行为。5.3案例15“校园风貌——12”网页•设计过程•1.设置状态栏文本•2.设置层文本•3.设置文本域文字•4.设置框架文本5.3案例15“校园风貌——12”网页•相关知识•1.设置状态栏文本动作•该动作是在浏览器窗口底部左侧的状态栏中显示消息。我们可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。•2.设置层文本动作•“设置层文本”动作是用指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。通过在“设置层文本”对话框的“新建HTML”文本框中输入HTML标签，可对内容进行格式设置。5.3案例15“校园风貌——12”网页•相