《第8章交互(行为,javascript,时间轴).ppt》由会员分享，可在线阅读，更多相关《第8章交互(行为,javascript,时间轴).ppt（50页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第8章交互章交互8.18.1利用行为制作动态页面利用行为制作动态页面8.28.2层和时间轴的综合应用层和时间轴的综合应用8.38.3在网页中应用在网页中应用javascriptjavascript8.1利用行为制作动态页面利用行为制作动态页面新课导入：新课导入：大家已经会在网页中制作一些简单效果（如：大家已经会在网页中制作一些简单效果（如：鼠标经过鼠标经过图象、脚本链接、插入背景音乐图象、脚本链接、插入背景音乐等），那具有特殊效果等），那具有特殊效果（如：（如：弹出消息、检查表单、设置导航文本、鼠标的花弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放瓣、棉花糖、下雪了、
2、礼花绽放等）的动态网页又是如等）的动态网页又是如何制作的呢？何制作的呢？使用行为就可以实现。使用行为就可以实现。教学目标：教学目标：熟练地应用行为、层和时间轴，能够随心所欲熟练地应用行为、层和时间轴，能够随心所欲地制作出具交互功能的网页；培养大家的动手操作能力。地制作出具交互功能的网页；培养大家的动手操作能力。情感目标：情感目标：通过对行为的学习应用，增加网页设计的特殊效果，通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣。提高学生对学习网页制作的兴趣。教学内容：教学内容：1.1.行为的概念和行为面板简介行为的概念和行为面板简介2.2.行为的创建行为的创建 3.3.使
3、用使用DWDW内置的行为（内置的行为（教学重点难点教学重点难点）4.4.高级行为的应用（高级行为的应用（教学难点）教学难点）5.5.层、行为和时间轴的综合应用（层、行为和时间轴的综合应用（教学难点）教学难点）6.Javascript6.Javascript脚本的使用脚本的使用教学方法：教学方法：任务驱动、引导教学、理论与操作紧密结合。任务驱动、引导教学、理论与操作紧密结合。1 1、DWDW行为的引出行为的引出 动态网页是通过动态网页是通过JaveScriptJaveScript或基或基JaveScriptJaveScript的的DHTMLDHTML代码代码来实现的。包含来实现的。包含JaveS
4、criptJaveScript脚本的网页，还能够实现用脚本的网页，还能够实现用户与页面的简单交互；但是编写脚本既复杂又专业。户与页面的简单交互；但是编写脚本既复杂又专业。而而DWDW提供的提供的“行为行为”机制，在可视化环境中，通过指定一机制，在可视化环境中，通过指定一个动作并且指定触发这个动作的事件就可以实现丰富的个动作并且指定触发这个动作的事件就可以实现丰富的动态页面效果，实现人与页面的简单交互。动态页面效果，实现人与页面的简单交互。8.1.18.1.1初步认识行为初步认识行为2 2、行为的概念、行为的概念行为：行为就是一段预定义好的程序代码，通过浏览行为：行为就是一段预定义好的程序代码，
5、通过浏览器的解释并响应用户操作的过程。器的解释并响应用户操作的过程。它由事件和由该事件它由事件和由该事件触发的动作组成，被用来动态响应用户操作、改变当前触发的动作组成，被用来动态响应用户操作、改变当前页面效果、执行特定的任务。页面效果、执行特定的任务。例如：将鼠标移到一幅图例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化像上产生了一个事件，如果图像发生变化(前面介绍过的前面介绍过的鼠标经过图像鼠标经过图像)，就导致发生了一个动作。，就导致发生了一个动作。与行为相关的三个重要部分是与行为相关的三个重要部分是对象、事件和动作对象、事件和动作。对象对象(Object)(Object)对象是
6、产生行为的主体，对象是产生行为的主体，很多网页元素都可以成为对象，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。如图片、文字、多媒体文件等，甚至是整个页面。事件事件(Event)(Event)事件是浏览器生成的消息，指示该页的浏览者执行了某事件是浏览器生成的消息，指示该页的浏览者执行了某种操作；种操作；是在特定时间或用户在某时所发出的指令后紧是在特定时间或用户在某时所发出的指令后紧接着发生的，接着发生的，是触发动态效果的原因。是触发动态效果的原因。它可以被附加到它可以被附加到各种页面元素上，也可以被附加到各种页面元素上，也可以被附加到HTMLHTML标记中。标记中。一
7、个事件总是针对页面元素或标记而言的。一个事件总是针对页面元素或标记而言的。例如：将例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标鼠标移到图片上、把鼠标放在图片之外、单击鼠标(onMouseOver(onMouseOver、onClick onClick、onMouseOutonMouseOut、)，是与鼠，是与鼠标有关的三个最常见的事件。标有关的三个最常见的事件。onClickonClick和和onMouseOveronMouseOver是与链接关联的事件，是与链接关联的事件，onloadonload是与图像和文档的是与图像和文档的bodybody部分关联的事件。部分关联的事件。不同的浏
8、览器不同的浏览器 支持的事件种类和多少是不一样的，通支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。常高版本的浏览器支持更多的事件。DreamweaverDreamweaver提供了许多常用的能够触提供了许多常用的能够触发的动作的事件：发的动作的事件：onAbortonAbort：当浏览器用户中断浏览器：当浏览器用户中断浏览器正在载入图像的操作时产生。正在载入图像的操作时产生。onAfterUpdateonAfterUpdate：当网页中的数据元：当网页中的数据元素已经完成源数据的更新时产生该事素已经完成源数据的更新时产生该事件。件。onBeforeUpdateonBefor
9、eUpdate：当网页中的数据元：当网页中的数据元素已经改变并且就要和浏览器用户失素已经改变并且就要和浏览器用户失去交互时产生该事件。去交互时产生该事件。Dw中的常见事件参看课本中的常见事件参看课本P161-162。onBluronBlur：当指定元素不再被浏览器用户交互时产生。：当指定元素不再被浏览器用户交互时产生。onBounceonBounce：当字幕（：当字幕（MarqueeMarquee）中的内容移动到该字幕边）中的内容移动到该字幕边界时产生。界时产生。onChangeonChange：当浏览器用户改变网页中的某个值时产生。：当浏览器用户改变网页中的某个值时产生。onClickonC
10、lick：当浏览器用户在指定的元素上单击时产生。：当浏览器用户在指定的元素上单击时产生。onDblClickonDblClick：当浏览器用户在指定的元素上双击时产生。：当浏览器用户在指定的元素上双击时产生。onErroronError：当浏览器在网页或图像载入产生错误时产生。：当浏览器在网页或图像载入产生错误时产生。onFinishonFinish：当字幕（：当字幕（MarqueeMarquee）中的内容完成一次循环时）中的内容完成一次循环时产生。产生。onFocusonFocus：当指定元素被浏览器用户交互时产生。：当指定元素被浏览器用户交互时产生。onHelponHelp：当浏览器用户单
11、击浏览器帮助按钮或选择浏览器：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时产生。菜单中的帮助菜单项时产生。onKeyDownonKeyDown：当按下任意键的同时产生。：当按下任意键的同时产生。onKeyPressonKeyPress：当按下和松开任意键时产生。：当按下和松开任意键时产生。onKeyUponKeyUp：当按下的键松开时产生。：当按下的键松开时产生。onLoadonLoad：当一图像或网页载入完成时产生。：当一图像或网页载入完成时产生。onMouseDownonMouseDown：当浏览器用户按下鼠标时产生。：当浏览器用户按下鼠标时产生。onMouseMoveo
12、nMouseMove：当浏览器用户将鼠标在指定元素上移动时：当浏览器用户将鼠标在指定元素上移动时产生。产生。onMouseOutonMouseOut：当鼠标从指定元素上移开时产生。：当鼠标从指定元素上移开时产生。onMouseOveronMouseOver：当鼠标移动到指定元素时产生。：当鼠标移动到指定元素时产生。onMouseUponMouseUp：当鼠标弹起时产生。：当鼠标弹起时产生。onMoveonMove：当窗体或框架移动时产生。：当窗体或框架移动时产生。onReadyStateChangeonReadyStateChange：当指定元素的状态改变时产生。：当指定元素的状态改变时产生。
13、onResetonReset：当表单内容被重新设置为缺省值时产生。：当表单内容被重新设置为缺省值时产生。onResizeonResize：当浏览器用户调整浏览器或框架大小时产生。：当浏览器用户调整浏览器或框架大小时产生。onRowEnteronRowEnter：当数据源的当前记录指针已经改变时产生。：当数据源的当前记录指针已经改变时产生。onRowExitonRowExit：当数据源的当前记录指针将要改变时产生。：当数据源的当前记录指针将要改变时产生。onScrollonScroll：当浏览器用户使用滚动条向上或向下滚动时：当浏览器用户使用滚动条向上或向下滚动时产生。产生。onSelecton
14、Select：当浏览器用户选择文本框中的文本时产生。：当浏览器用户选择文本框中的文本时产生。onStartonStart：当字幕（：当字幕（MarqueeMarquee）内容开始循环时产生。）内容开始循环时产生。onSubmitonSubmit：当浏览器用户提交表格时产生。：当浏览器用户提交表格时产生。onUnloadonUnload：当浏览器用户离开网页时产生。：当浏览器用户离开网页时产生。动作动作(Action)(Action)动作是由动作是由javascriptjavascript代码组成的，事件发生后，这些代代码组成的，事件发生后，这些代码执行特定的任务，使网页做出发应。码执行特定的任
15、务，使网页做出发应。行为就是通过动行为就是通过动作来完成动态效果的作来完成动态效果的，如：图片翻转、打开浏览器、播，如：图片翻转、打开浏览器、播放声音都是动作。放声音都是动作。当当web web 的浏览者与页进行交互时，浏览器生成事件，的浏览者与页进行交互时，浏览器生成事件，这些事件可用于调用引起动作发生的这些事件可用于调用引起动作发生的javascritjavascrit函数。函数。一个事件可以同多个动作相关联一个事件可以同多个动作相关联(1(1：n)n)，即发生事件时，即发生事件时可以执行多个动作。可以执行多个动作。DWDW内置了内置了2020多个行为动作多个行为动作，好象是一个现成的，好
16、象是一个现成的JaveScriptJaveScript库库。除此之外，第三方厂商提。除此之外，第三方厂商提 供了更多的供了更多的行为库行为库，下载并在，下载并在DWDW中安装行为库中的文件，可以获得中安装行为库中的文件，可以获得更多的可操作行为。使用更多的可操作行为。使用DWDW内置的行为往页面中添加内置的行为往页面中添加JaveScriptJaveScript代码时，就不必自己编写代码了。若熟悉代码时，就不必自己编写代码了。若熟悉JaveScriptJaveScript语言，也可以语言，也可以自行设计新动作自行设计新动作，添加到，添加到DWDW中。中。3 3、认识行为面板、认识行为面板在在D
17、WDW中，对行为的添加和控制主要通过中，对行为的添加和控制主要通过“行为行为”面板来实面板来实现。现。选择选择窗口窗口 行为行为命令，或命令，或shift+f4shift+f4打开行为面板。打开行为面板。行为面板的使用行为面板的使用 在行为面板上可以进行如下操作：在行为面板上可以进行如下操作：单击单击“+”按钮，打开动作菜单，按钮，打开动作菜单，添加行为添加行为；单击单击“-”按钮按钮，删除行为。删除行为。添加行为时，从动作菜单中选择一个行为项，单击事件列添加行为时，从动作菜单中选择一个行为项，单击事件列右方的三角，打开事件菜单，可以选择事件。右方的三角，打开事件菜单，可以选择事件。单击单击
18、向上向上 箭头或向下箭头箭头或向下箭头，可将动作项向前移或向后移，可将动作项向前移或向后移，改变动作执行的顺序改变动作执行的顺序。8.1.28.1.2行为的创建、修改和更新行为的创建、修改和更新对行为的添加和控制主要通过行为面板来实现。对行为的添加和控制主要通过行为面板来实现。创建行为创建行为创建行为一般有三个步骤：先在页面中选择要添加行为的创建行为一般有三个步骤：先在页面中选择要添加行为的对象对象,再在行为面板中为之添加所需的动作再在行为面板中为之添加所需的动作,最后调整触发最后调整触发动作的事件。动作的事件。注意：注意：一个对象可添加多个行为，多个行为以字母顺序显一个对象可添加多个行为，多
19、个行为以字母顺序显示在行为面板上。为了实现需要的效果，我们还可以指定示在行为面板上。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。和修改动作发生的顺序。修改行为修改行为 添加行为之后可以修改触发动作的事件、添加或删除动作、添加行为之后可以修改触发动作的事件、添加或删除动作、修改动作的参数。修改动作的参数。编辑动作的参数可双击行为名称或选中后按编辑动作的参数可双击行为名称或选中后按enterenter键键修改给定事件的多个动作顺序，可选定动作后按上下修改给定事件的多个动作顺序，可选定动作后按上下箭头按钮，或剪切后在所需顺序处粘贴。箭头按钮，或剪切后在所需顺序处粘贴。要删除行为，选定后按
20、要删除行为，选定后按“-”按钮或按按钮或按deldel键键更新行为更新行为 不同版本的不同版本的dwdw做好的网页中如有行为，在另一低版本中打做好的网页中如有行为，在另一低版本中打开时一般不会自动更新。开时一般不会自动更新。实现行为更新的步骤：选定一实现行为更新的步骤：选定一个对象，打开行为面板，双击行为后确定。个对象，打开行为面板，双击行为后确定。8.1.3使用使用DW内置的行为内置的行为 dw8.0 dw8.0自带的行为动作，使用于自带的行为动作，使用于4.04.0以上版本的以上版本的浏览器，同一动作在不同的浏览器中支持的程度浏览器，同一动作在不同的浏览器中支持的程度不同。不同。dw8.0
21、dw8.0自带的行为主要有自带的行为主要有:1.1.弹出消息弹出消息 其动作回显示一个带有指定消息的只有其动作回显示一个带有指定消息的只有“确定确定”按钮的按钮的javascriptjavascript警告窗口，警告窗口的外观取警告窗口，警告窗口的外观取决于浏览者的浏览器。功能类似于脚本链接决于浏览者的浏览器。功能类似于脚本链接.2 2、“播放声音播放声音”实例实例:制作音乐下载页面。制作音乐下载页面。用播放声音的动作，可以在网页中播放声音文件，如用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按钮背景音乐，或单击某个按钮(文字或图片文字或图片)播放一段声播放一段声音。音。（
22、1 1）给网页添加背景音乐）给网页添加背景音乐打开一个网页，单击编辑窗口状态栏上的打开一个网页，单击编辑窗口状态栏上的 body标记，标记，选中整个网页。选中整个网页。打开行为面板，单击打开行为面板，单击“+”按钮，在菜单中选择按钮，在菜单中选择“播放声播放声音音”。在弹出的菜单中输入音乐文件的路径，单击在弹出的菜单中输入音乐文件的路径，单击“确定确定”。把事件调整为把事件调整为onLoad(onLoad(载入页面后载入页面后)。（2 2）给图片添加声音，方法同上。）给图片添加声音，方法同上。3 3、跳转菜单和跳转菜单开始、跳转菜单和跳转菜单开始 创建一个菜单对象并向其附加一个创建一个菜单对象
23、并向其附加一个“跳转菜单跳转菜单”（或（或“跳转菜单转到跳转菜单转到”）行为。）行为。4 4、网页中的变色按钮、网页中的变色按钮（改变属性）（改变属性）5 5、打开浏览器窗口：用于制作网站的公告通告或者广告、打开浏览器窗口：用于制作网站的公告通告或者广告宣传、单击缩略图可以弹出一个放大图像、规定链接目宣传、单击缩略图可以弹出一个放大图像、规定链接目标网页的大小和外观等。标网页的大小和外观等。在一个新的窗口中打开在一个新的窗口中打开URLURL。6 6、调用、调用javascriptjavascript“调用调用 JavaScriptJavaScript”动作允许读者使用动作允许读者使用“行为行
24、为”面板指定面板指定当发生某个事件时应该执行的自定义函数或当发生某个事件时应该执行的自定义函数或 JavaScript JavaScript 代码行。代码行。熟悉熟悉htmlhtml和和javascriptjavascript的情况下的情况下使用。使用。7、检查表单、检查表单该动作主要是检查指定文本域的内容以确保用户输入了正该动作主要是检查指定文本域的内容以确保用户输入了正确的数据类型。确的数据类型。Onblur事件分别将动作添加给各个文本事件分别将动作添加给各个文本域，在用户提交表单时分别对各个域进行检查；域，在用户提交表单时分别对各个域进行检查；onsubmit事件将动作添加给表单，在用户
25、提交表单时同事件将动作添加给表单，在用户提交表单时同时对多个域进行检查。时对多个域进行检查。选定单个域或选定单个域或form进行添加检查表单动作。进行添加检查表单动作。8、检查插件、检查插件 根据浏览者是否安装了指定的插件，转到不同的页。根据浏览者是否安装了指定的插件，转到不同的页。9、检查浏览器、检查浏览器 使用该动作可以获得用户浏览网页所使用的浏览器类型，使用该动作可以获得用户浏览网页所使用的浏览器类型，可根据浏览者不同的类型和版本的浏览器，可以给浏览者可根据浏览者不同的类型和版本的浏览器，可以给浏览者显示不的网页。显示不的网页。10、交换图象与恢复交换图象、交换图象与恢复交换图象 只要一
26、个对象添加交换图象，恢复交换图象也添加给它只要一个对象添加交换图象，恢复交换图象也添加给它1111、预先载入图象：、预先载入图象：“预先载入图像预先载入图像”动作将不会立即出现动作将不会立即出现在页上的图像载入浏览器缓存中。在页上的图像载入浏览器缓存中。1212、控制、控制shockshaveshockshave或或flashflash 使用该动作可以播放、停止、后退或转到使用该动作可以播放、停止、后退或转到shockshaveshockshave或或flashswf flashswf 文件中帧文件中帧1313、设置导航栏图像、设置导航栏图像 设置该动作可以将某个图像变为导航栏图像，或修改导航
27、设置该动作可以将某个图像变为导航栏图像，或修改导航条中图像的显示和动作。条中图像的显示和动作。1414、设置文本、设置文本 A A：设置框架文本：设置框架文本 B B：设置层文本：设置层文本 C C：设置状态栏文本：设置状态栏文本浏览器下端的状态行通常显示当前状态的提示信息，利浏览器下端的状态行通常显示当前状态的提示信息，利用用“设置状态栏文本设置状态栏文本”行为，可行为，可 以重新设置状态行信息。以重新设置状态行信息。选中要附加行为的对象，如网页的选中要附加行为的对象，如网页的 body标记，或一个标记，或一个链接。链接。单击行为面板上的单击行为面板上的“+”按钮，在打开的动作菜按钮，在打开
28、的动作菜单。单。选择选择“设置文本设置文本”“设置状态文本设置状态文本”命令，在打命令，在打开的开的“信息信息”对话框中输入需要的文本。按对话框中输入需要的文本。按F12F12键，可以键，可以看到打开网页后，浏览器下端的状态行上有了新输入的看到打开网页后，浏览器下端的状态行上有了新输入的信息。信息。D D：设置文本域文本：设置文本域文本1515、显示弹出菜单（下拉菜单）显示弹出菜单（下拉菜单）（参看课本（参看课本p228-232p228-232页，效果见实例站点中页，效果见实例站点中dianzixiangce.html ）使用使用“显示弹出菜单显示弹出菜单”行为来创建或编辑行为来创建或编辑 D
29、reamweaver Dreamweaver 弹出式菜单，或者打开并修改已插入弹出式菜单，或者打开并修改已插入 Dreamweaver Dreamweaver 文文档的档的 Fireworks Fireworks 弹出式菜单。弹出式菜单。1616、显示和隐藏层显示和隐藏层（效果见实例站点中效果见实例站点中guodu2.html 中中“娱乐娱乐”和和qqshiyishi.htmlqqshiyishi.html中的中的qqqq虚拟试衣室）虚拟试衣室）显示隐藏层：显示隐藏层：“显示隐藏层显示隐藏层”动作显示、隐藏或恢复一动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互个或多
30、个层的默认可见性。此动作用于在用户与页进行交互时显示信息。时显示信息。1717、拖动层、拖动层1818、转到、转到urlurl “转到转到 URLURL”动作在当前窗口或指定的框架中打开一个动作在当前窗口或指定的框架中打开一个新页。新页。1919、滚动链接的层滚动链接的层8.1.4高级行为的应用高级行为的应用 1 1、插入滚动字幕插入滚动字幕 浏览网页时，有时会看到网页中有些文字会循环往浏览网页时，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢？当然我复的移动。这种动画效果是如何制作的呢？当然我们可以采用们可以采用GifGif动画或者利用动画或者利用flashflash来
31、实现，但是这来实现，但是这种方式往往占用的空间比较大，而且不如种方式往往占用的空间比较大，而且不如HTMLHTML标记标记来得那么简单。这个标记就是来得那么简单。这个标记就是MarqueeMarquee标记，中文翻标记，中文翻译为译为“跑马灯跑马灯”。IE3.0IE3.0以上版本的浏览器中支持这以上版本的浏览器中支持这个个HTMLHTML标记，而标记，而NetScapeNetScape则不支持。因此我们在设则不支持。因此我们在设计网页的时候需要考虑这个问题计网页的时候需要考虑这个问题。选择选择“常用插入栏常用插入栏”的的“标签选择器标签选择器”命令按钮，打开命令按钮，打开标签选择器窗口从中选择
32、标签选择器窗口从中选择“htmlhtml标签标签”下的下的marqueemarquee标签，标签，单击单击“插入插入”就在页面的代码视图中插入一个就在页面的代码视图中插入一个marqueemarquee标标签，在行为面板中设置标签检查器中的标签。签，在行为面板中设置标签检查器中的标签。Marquee标记的基本语法结构MarqueeMarquee标记的基本语法结构如下所示标记的基本语法结构如下所示 ：MARQUEE ALIGN=alignment BEHAVIOR=type VSPACE=y夜鹰电脑教学网，电脑爱好者的乐园夜鹰电脑教学网，电脑爱好者的乐园其中其中ALIGNALIGN可以用来指定滚
33、动字幕与左右文字的对齐可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有方式，它的值可以有toptop、middlemiddle、bottombottom等；等；behaviorbehavior用来指定滚动字幕的滚动方式，它的属性用来指定滚动字幕的滚动方式，它的属性值有值有scrollscroll、slideslide和和alternatealternate三个，三个，scrollscroll表示表示滚动字幕内容向同一方向重复滚动，滚动字幕内容向同一方向重复滚动，slideslide表示滚动表示滚动字幕内容从一端向另一端滚动并在另一端停止，字幕内容从一端向另一端滚动并在另一端停止，alte
34、rnatealternate表示滚动字幕内容在两端之间来回往复滚表示滚动字幕内容在两端之间来回往复滚动；动；directiondirection指定滚动字幕的滚动方向，它的属性值有指定滚动字幕的滚动方向，它的属性值有leftleft和和rightright两个，分别表示滚两个，分别表示滚 动字幕由右向左和由左动字幕由右向左和由左向右滚动；向右滚动；SCROLLAMOUNTSCROLLAMOUNT用来设置多次滚动之间的间隔用来设置多次滚动之间的间隔距离，其距离，其 单位是单位是pixelspixels（像素）；（像素）；scrollingscrolling用来指定滚动字幕滚动一次所需要的时间，用
35、来指定滚动字幕滚动一次所需要的时间，单位是单位是msms（千分之一秒），（千分之一秒），其值的大小将直接影响滚其值的大小将直接影响滚动字幕的滚动速度；动字幕的滚动速度；LOOPLOOP属性是用来指定滚动字幕的滚动次数属性是用来指定滚动字幕的滚动次数 的，当它的，当它的值为的值为“1 1”时，滚动字幕将连续滚动直到浏览器载时，滚动字幕将连续滚动直到浏览器载入下一个页面；入下一个页面；HSPACEHSPACE和和 VSPACEVSPACE则分别用来指定滚动字幕与其上则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。一级页面在水平方向和竖直方向上的距离。示例：示例：文本自动向上循环滚
36、动，鼠标放到上面还会暂停文本自动向上循环滚动，鼠标放到上面还会暂停2 2、下载安装扩展插件、下载安装扩展插件3 3、下载网页特效，适当修改相关代码，再把代码放、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。到代码视图的具体位置。举例：举例：飘落的花瓣飘落的花瓣 鼠标棉花糖鼠标棉花糖8.2时间轴 时间轴是flash制作的关键，dw中的时间轴式根基flash制作动画的原理演化出来的。1.时间轴面板动画条动画通道，圆圈标识的为关键帧 行为通道在时间轴面板中：在时间轴面板中：时间轴选单：显示目前所编辑的时间轴名称。时间轴选单：显示目前所编辑的时间轴名称。播放头：播放头：红色的播放头指
37、示在网页中显示的是哪一帧。红色的播放头指示在网页中显示的是哪一帧。动画条：即图中的动画条：即图中的Layer11Layer11，Layer12Layer12，可显示每个层对，可显示每个层对象的持续时间。象的持续时间。关键帧：动画条中的小圆圈是关键帧。关键帧：动画条中的小圆圈是关键帧。帧数：显示播放头的位置。帧数：显示播放头的位置。：回转，可将播放头移到时间轴的初始帧。：回转，可将播放头移到时间轴的初始帧。：后退，将播放头往左移动一帧。：后退，将播放头往左移动一帧。：前进，将播放头往右移动一帧。：前进，将播放头往右移动一帧。FPSFPS：播放速度。每秒种播放的帧数。：播放速度。每秒种播放的帧数。
38、自动播放：当网页载入到浏览器时使当前时间轴自动播自动播放：当网页载入到浏览器时使当前时间轴自动播放。放。循环：当网页载入到浏览器时使当前时间轴循环播放。循环：当网页载入到浏览器时使当前时间轴循环播放。说明：说明：一个网页中可以创建多个时间轴，每个时间轴上可以一个网页中可以创建多个时间轴，每个时间轴上可以创建多个动画对象，每个对象对于一个动画条。同一个创建多个动画对象，每个对象对于一个动画条。同一个时间轴内的动画对象同时开始，同时结束，并且播放速时间轴内的动画对象同时开始，同时结束，并且播放速度也一样。度也一样。关键帧在时间轴上以小圆圈标识；一个动画可以设计关键帧在时间轴上以小圆圈标识；一个动画
39、可以设计多个关键帧；起始帧和结束帧规定了动画的起始状态和多个关键帧；起始帧和结束帧规定了动画的起始状态和结束状态。结束状态。动画的制作是以层位基础的，要创建的动画的元素都必动画的制作是以层位基础的，要创建的动画的元素都必须放在一个层上，然后对层制作动画。须放在一个层上，然后对层制作动画。2 2、时间轴和图层的综合运用、时间轴和图层的综合运用（1 1）滚动字幕滚动字幕 （见实例站点中（见实例站点中guodu2.htmlguodu2.html中欢迎光临！滚动文字字幕）中欢迎光临！滚动文字字幕）添加层，并在层上输入文字，然后设置层的滚动轨迹，即添加层，并在层上输入文字，然后设置层的滚动轨迹，即可得到
40、滚动文字效果。可得到滚动文字效果。（2 2）网页浮动动画，网页浮动动画，类似与（类似与（1 1）中的滚动文字，无非是把）中的滚动文字，无非是把文字换成图片，多增加几个关键帧，使运动轨迹更复杂化。文字换成图片，多增加几个关键帧，使运动轨迹更复杂化。（见实例站点中（见实例站点中guodu2.htmlguodu2.html）（3 3）设置文字的阴影效果设置文字的阴影效果 插入父层和子层，都输入相同的文字，设置不同的颜色，插入父层和子层，都输入相同的文字，设置不同的颜色，在设计视图中调整二者的重叠程度以显示阴影的效果。在设计视图中调整二者的重叠程度以显示阴影的效果。（4 4）幻灯片效果，幻灯片效果，单
41、击换图。单击换图。简要操作步骤：简要操作步骤：插入三个层插入三个层，并分别插入三个图片，调整大小一样，把它，并分别插入三个图片，调整大小一样，把它们在设计视图中的左上边距都设成一样；分别拖放到同一们在设计视图中的左上边距都设成一样；分别拖放到同一个时间轴上的个时间轴上的3 3个动画条上，使三者首尾相接；最后分别个动画条上，使三者首尾相接；最后分别为为3 3个动画条上对应的第一关键帧添加显示隐藏行为即可。个动画条上对应的第一关键帧添加显示隐藏行为即可。给每一个动画条的第一关键帧添加显示（下一个图像所在给每一个动画条的第一关键帧添加显示（下一个图像所在的）层，而隐藏其他层，行为面板中的相关事件改成
42、的）层，而隐藏其他层，行为面板中的相关事件改成onclickonclick。（见实例站点中（见实例站点中guodu2.htmlguodu2.html中幻灯片播放效果）中幻灯片播放效果）（5 5）控制图像播放动画控制图像播放动画 （见实例站点中（见实例站点中guodu2.htmlguodu2.html中展开图像和闭合图像）中展开图像和闭合图像）（a a）.在设计视图中插入一个层，并插入图片在设计视图中插入一个层，并插入图片,并将层并将层的可见性和溢出属性都设为的可见性和溢出属性都设为“hiddenhidden”；然后将该层拖；然后将该层拖放到两个时间轴上，第一个时间轴上起始帧和结尾帧对放到两个时
43、间轴上，第一个时间轴上起始帧和结尾帧对应的层的大小分别为最小值（应的层的大小分别为最小值（0 0，0 0）和最大值（图片实）和最大值（图片实际大小），第二个时间轴上起始帧和结尾帧对应的层的际大小），第二个时间轴上起始帧和结尾帧对应的层的大小分别为最大值（图片实际大小）和最小值（大小分别为最大值（图片实际大小）和最小值（0 0，0 0）；不勾选；不勾选“自动播放自动播放”和和“循环循环”复选框。复选框。（6 6）制作滚动的折叠菜单制作滚动的折叠菜单：和（：和（5 5）的操作类似。）的操作类似。（相关操（相关操作可参看相关作可参看相关flashflash视频）视频）（7 7）具有预览功能的电子相册
44、效果，自动换图。）具有预览功能的电子相册效果，自动换图。（相关操（相关操作可参看课本作可参看课本p237-243p237-243页，效果见实例站点中页，效果见实例站点中dianzixiangce.htmldianzixiangce.html）8.3在网页中应用javascript认识代码片段面板认识代码片段面板应用代码片段应用代码片段在在页面中插入在在页面中插入htmlhtml代码片段（在设计视图中即代码片段（在设计视图中即可完成）可完成）在网页代码视图中插入在网页代码视图中插入javascriptjavascript代码片段代码片段 在在htmlhtml文档的头部插入如下代码：文档的头部插入
45、如下代码：script language=，然后把光标放在这个标签之间，选，然后把光标放在这个标签之间，选择择“代码片段代码片段”面板中的面板中的“javascriptjavascript”选项，选项，从中选择所需的代码，单击插入即可。从中选择所需的代码，单击插入即可。所有的脚本程序必须封装在所有的脚本程序必须封装在 这这对标签之间，这对标签可以放在对标签之间，这对标签可以放在htmlhtml中的任何地方中的任何地方（或者或者部分中）。大多数部分中）。大多数scriptscript代码被代码被定义成过程函数（定义成过程函数（fuctionfuction），放在），放在部分，在部分，在部分调用函
46、数时执行它。部分调用函数时执行它。应用举例：应用举例：1.1.在代码片段面板中选择有关导航条的代码片段，在网在代码片段面板中选择有关导航条的代码片段，在网页中插入合适的导航条；页中插入合适的导航条；2.2.将把光标放在将把光标放在script language=这对标签之间，选择这对标签之间，选择“代码片段代码片段”面板中面板中的选择的选择javascript|javascript|浏览函数浏览函数|禁止右键单击禁止右键单击（disablerightclickdisablerightclick（）单击插入即可实现禁止右（）单击插入即可实现禁止右击的操作。（实例网站中的击的操作。（实例网站中的g
47、uodu1.htmlguodu1.html）3.利用利用JavaScript实现全屏显示网页窗口实现全屏显示网页窗口（实例网站中（实例网站中的的guodu3.htmlguodu3.html）。本章小结：本章小结：本节主要讲解了本节主要讲解了dwdw内置的行为和时间轴，通过举内置的行为和时间轴，通过举例，详细讲解了层、时间轴和行为的综合运用。例，详细讲解了层、时间轴和行为的综合运用。学完本章，大家应该能灵活的制作出较为简单的学完本章，大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。具有特殊效果的动态网页。随堂作业：随堂作业：下列关于行为的说法不正确的一项是下列关于行为的说法不正确的一项是
48、（）A行为即是事件，事件即是行为行为即是事件，事件即是行为B行为是事件和动作的组合行为是事件和动作的组合C行为是行为是dw预置的程序代码预置的程序代码D通过行为可以改变对象属性、打开浏览器和通过行为可以改变对象属性、打开浏览器和播放音乐播放音乐作业布置：作业布置：1.简述行为、对象、事件和动作的概念。简述行为、对象、事件和动作的概念。2.要实现控制要实现控制flash或或shockwave的行为：当在的行为：当在页面中单击文字页面中单击文字“播放播放”时，时，flash动画开始动画开始正常播放，当在页面中单击文字正常播放，当在页面中单击文字“停止停止”时，时，flash动画即停止播放。动画即停
49、止播放。Flash的名字自己定的名字自己定义，请写出实现控制义，请写出实现控制flash功能的详细操作步功能的详细操作步骤。骤。3.课后所有习题。课后所有习题。练习练习1QQ虚拟试衣室虚拟试衣室用“显示-隐藏层”行为制作一个仿QQ秀的虚拟试衣室实例，效果如图9-71所示。单击衣服图片可以给人物形象穿上衣服，双击衣服图片可以将衣服从人物形象上脱下。在练习制作这个实例时，要把人物形象分成头、上身、下身3部分，并且放在3个不同的层中，另外穿上衣服的人物形象图片也要分别放在不同的层中。最后，分别定义衣服图片的行为，实现单击时显示层，双击时隐藏层的效果。图9-71 QQ虚拟试衣室练习练习2滚动字幕滚动字幕利用层和时间轴制作一个文字左右滚动的字幕效果，如图9-72所示。在制作这个实例时，先把要滚动的文字放在一个层中，然后将层添加到时间轴面板，定义左右滚动的动画效果。左右来回滚动的字幕图9-72 滚动字幕练习练习3利用利用JavaScript实现全屏显示网页窗口实现全屏显示网页窗口 利用JavaScript制作一个全屏显示网页窗口的实例，全屏显示的网页效果如图9-73所示。图9-73 全屏显示的网页这个实例效果对应的JavaScript代码如下：winopen()这里提醒注意的是，这段JavaScript代码必须放在之间。