第9章交互(行为,javascript,时间轴).ppt

《第9章交互(行为,javascript,时间轴).ppt》由会员分享，可在线阅读，更多相关《第9章交互(行为,javascript,时间轴).ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第9章交互章交互9.1利用行为制作动态页面利用行为制作动态页面9.3在网页中应用在网页中应用javascriptjavascript9.2层和层和时间轴的综合应用时间轴的综合应用9.1利用行为制作动态页面利用行为制作动态页面新课导入：新课导入：大家已经会在网页中制作一些简单效果（如：大家已经会在网页中制作一些简单效果（如：鼠标经过图鼠标经过图象、脚本链接、插入背景音乐象、脚本链接、插入背景音乐等），那具有特殊效果等），那具有特殊效果（如：（如：弹出消息、检查表单、设置导航文本、鼠标的花弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放瓣、棉花糖、下雪了、礼花绽放等）的动态

2、网页又是如等）的动态网页又是如何制作的呢？何制作的呢？使用行为就可以实现。使用行为就可以实现。教学目标：教学目标：熟练地应用行为、层和时间轴，能够随心所欲熟练地应用行为、层和时间轴，能够随心所欲地制作出具交互功能的网页；培养大家的动手操作能力。地制作出具交互功能的网页；培养大家的动手操作能力。情感目标：情感目标：通过对行为的学习应用，增加网页设计的特殊效果，通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣。提高学生对学习网页制作的兴趣。教学内容：教学内容：1.行为的概念和行为面板简介行为的概念和行为面板简介2.行为的创建行为的创建3.使用使用DW内置的行为（内置的行为

3、（教学重点难点教学重点难点）4.高级行为的应用（高级行为的应用（教学难点）教学难点）5.层、行为和时间轴的综合应用（层、行为和时间轴的综合应用（教学难点）教学难点）6.Javascript脚本的使用脚本的使用教学方法：教学方法：任务驱动、引导教学、理论与操作紧密结合。任务驱动、引导教学、理论与操作紧密结合。1 1、DWDW行为的引出行为的引出 动态网页是通过动态网页是通过JaveScriptJaveScript或基或基JaveScriptJaveScript的的DHTMLDHTML代码代码来实现的。包含来实现的。包含JaveScriptJaveScript脚本的网页，还能够实现用脚本的网页，还

4、能够实现用户与页面的简单交互；但是编写脚本既复杂又专业。户与页面的简单交互；但是编写脚本既复杂又专业。而而DWDW提供的提供的“行为行为”机制，在可视化环境中，通过指定一机制，在可视化环境中，通过指定一个动作并且指定触发这个动作的事件就可以实现丰富的个动作并且指定触发这个动作的事件就可以实现丰富的动态页面效果，实现人与页面的简单交互。动态页面效果，实现人与页面的简单交互。9.1.19.1.1初步认识行为初步认识行为2 2、行为的概念、行为的概念行为：行为就是一段预定义好的程序代码，通过浏览行为：行为就是一段预定义好的程序代码，通过浏览器的解释并响应用户操作的过程。器的解释并响应用户操作的过程。

5、它由事件和由该事件它由事件和由该事件触发的动作组成，被用来动态响应用户操作、改变当前触发的动作组成，被用来动态响应用户操作、改变当前页面效果、执行特定的任务。页面效果、执行特定的任务。例如：将鼠标移到一幅图例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化像上产生了一个事件，如果图像发生变化(前面介绍过的前面介绍过的鼠标经过图像鼠标经过图像)，就导致发生了一个动作。，就导致发生了一个动作。与行为相关的三个重要部分是与行为相关的三个重要部分是对象、事件和动作对象、事件和动作。对象对象(Object)(Object)对象是产生行为的主体，对象是产生行为的主体，很多网页元素都可以成为对象，很

6、多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。如图片、文字、多媒体文件等，甚至是整个页面。事件事件(Event)(Event)事件是浏览器生成的消息，指示该页的浏览者执行了某事件是浏览器生成的消息，指示该页的浏览者执行了某种操作；种操作；是在特定时间或用户在某时所发出的指令后紧是在特定时间或用户在某时所发出的指令后紧接着发生的，接着发生的，是触发动态效果的原因。是触发动态效果的原因。它可以被附加到它可以被附加到各种页面元素上，也可以被附加到各种页面元素上，也可以被附加到HTMLHTML标记中。标记中。一个事件总是针对页面元素或标记而言的。一个事件总是针对页面元素或标记而

7、言的。例如：将例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标鼠标移到图片上、把鼠标放在图片之外、单击鼠标(onMouseOveronMouseOver、onClickonClick 、onMouseOutonMouseOut、)，是与鼠，是与鼠标有关的三个最常见的事件。标有关的三个最常见的事件。onClickonClick和和onMouseOveronMouseOver是与链接关联的事件，是与链接关联的事件，onloadonload是与图像和文档的是与图像和文档的bodybody部分关联的事件。部分关联的事件。不同的浏览器不同的浏览器 支持的事件种类和多少是不一样的，通支持的事件种类和多

8、少是不一样的，通常高版本的浏览器支持更多的事件。常高版本的浏览器支持更多的事件。DreamweaverDreamweaver提供了许多常用的能够触提供了许多常用的能够触发的动作的事件：发的动作的事件：onAbortonAbort：当浏览器用户中断浏览器：当浏览器用户中断浏览器正在载入图像的操作时产生。正在载入图像的操作时产生。onAfterUpdateonAfterUpdate：当网页中的数据元：当网页中的数据元素已经完成源数据的更新时产生该事素已经完成源数据的更新时产生该事件。件。onBeforeUpdateonBeforeUpdate：当网页中的数据元：当网页中的数据元素已经改变并且就要和

9、浏览器用户失素已经改变并且就要和浏览器用户失去交互时产生该事件。去交互时产生该事件。Dw中的常见事件参看课本中的常见事件参看课本P161-162。onBluronBlur：当指定元素不再被浏览器用户交互时产生。：当指定元素不再被浏览器用户交互时产生。onBounceonBounce：当字幕（：当字幕（MarqueeMarquee）中的内容移动到该字幕边）中的内容移动到该字幕边界时产生。界时产生。onChangeonChange：当浏览器用户改变网页中的某个值时产生。：当浏览器用户改变网页中的某个值时产生。onClickonClick：当浏览器用户在指定的元素上单击时产生。：当浏览器用户在指定的

10、元素上单击时产生。onDblClickonDblClick：当浏览器用户在指定的元素上双击时产生。：当浏览器用户在指定的元素上双击时产生。onErroronError：当浏览器在网页或图像载入产生错误时产生。：当浏览器在网页或图像载入产生错误时产生。onFinishonFinish：当字幕（：当字幕（MarqueeMarquee）中的内容完成一次循环时）中的内容完成一次循环时产生。产生。onFocusonFocus：当指定元素被浏览器用户交互时产生。：当指定元素被浏览器用户交互时产生。onHelponHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器：当浏览器用户单击浏览器帮助按钮或选择浏览

11、器菜单中的帮助菜单项时产生。菜单中的帮助菜单项时产生。onKeyDownonKeyDown：当按下任意键的同时产生。：当按下任意键的同时产生。onKeyPressonKeyPress：当按下和松开任意键时产生。：当按下和松开任意键时产生。onKeyUponKeyUp：当按下的键松开时产生。：当按下的键松开时产生。onLoadonLoad：当一图像或网页载入完成时产生。：当一图像或网页载入完成时产生。onMouseDownonMouseDown：当浏览器用户按下鼠标时产生。：当浏览器用户按下鼠标时产生。onMouseMoveonMouseMove：当浏览器用户将鼠标在指定元素上移动时：当浏览器用

12、户将鼠标在指定元素上移动时产生。产生。onMouseOutonMouseOut：当鼠标从指定元素上移开时产生。：当鼠标从指定元素上移开时产生。onMouseOveronMouseOver：当鼠标移动到指定元素时产生。：当鼠标移动到指定元素时产生。onMouseUponMouseUp：当鼠标弹起时产生。：当鼠标弹起时产生。onMoveonMove：当窗体或框架移动时产生。：当窗体或框架移动时产生。onReadyStateChangeonReadyStateChange：当指定元素的状态改变时产生。：当指定元素的状态改变时产生。onResetonReset：当表单内容被重新设置为缺省值时产生。：当

13、表单内容被重新设置为缺省值时产生。onResizeonResize：当浏览器用户调整浏览器或框架大小时产生。：当浏览器用户调整浏览器或框架大小时产生。onRowEnteronRowEnter：当数据源的当前记录指针已经改变时产生。：当数据源的当前记录指针已经改变时产生。onRowExitonRowExit：当数据源的当前记录指针将要改变时产生。：当数据源的当前记录指针将要改变时产生。onScrollonScroll：当浏览器用户使用滚动条向上或向下滚动时：当浏览器用户使用滚动条向上或向下滚动时产生。产生。onSelectonSelect：当浏览器用户选择文本框中的文本时产生。：当浏览器用户选择

14、文本框中的文本时产生。onStartonStart：当字幕（：当字幕（MarqueeMarquee）内容开始循环时产生。）内容开始循环时产生。onSubmitonSubmit：当浏览器用户提交表格时产生。：当浏览器用户提交表格时产生。onUnloadonUnload：当浏览器用户离开网页时产生。：当浏览器用户离开网页时产生。动作动作(Action)(Action)动作是由动作是由javascriptjavascript代码组成的，事件发生后，这些代代码组成的，事件发生后，这些代码执行特定的任务，使网页做出发应。码执行特定的任务，使网页做出发应。行为就是通过动行为就是通过动作来完成动态效果的作来

15、完成动态效果的，如：图片翻转、打开浏览器、播，如：图片翻转、打开浏览器、播放声音都是动作。放声音都是动作。当当web web 的浏览者与页进行交互时，浏览器生成事件，的浏览者与页进行交互时，浏览器生成事件，这些事件可用于调用引起动作发生的这些事件可用于调用引起动作发生的javascritjavascrit函数。函数。一个事件可以同多个动作相关联一个事件可以同多个动作相关联(1(1：n)n)，即发生事件时即发生事件时可以执行多个动作。可以执行多个动作。DWDW内置了内置了2020多个行为动作多个行为动作，好象是一个现成的，好象是一个现成的JaveScriptJaveScript库库。除此之外，第

16、三方厂商提。除此之外，第三方厂商提 供了更多的供了更多的行为库行为库，下载并在，下载并在DWDW中安装行为库中的文件，可以获得中安装行为库中的文件，可以获得更多的可操作行为。使用更多的可操作行为。使用DWDW内置的行为往页面中添加内置的行为往页面中添加JaveScriptJaveScript代码时，就不必自己编写代码了。若熟悉代码时，就不必自己编写代码了。若熟悉JaveScriptJaveScript语言，也可以语言，也可以自行设计新动作自行设计新动作，添加到，添加到DWDW中。中。3 3、认识行为面板、认识行为面板在在DWDW中，对行为的添加和控制主要通过中，对行为的添加和控制主要通过“行为

17、行为”面板来实面板来实现。现。选择选择窗口窗口 行为行为命令，或命令，或shift+f4shift+f4打开行为面板。打开行为面板。行为面板的使用行为面板的使用 在行为面板上可以进行如下操作：在行为面板上可以进行如下操作：单击单击“+”按钮，打开动作菜单，按钮，打开动作菜单，添加行为添加行为；单击单击“-”按钮按钮，删除行为。删除行为。添加行为时，从动作菜单中选择一个行为项，单击事件列添加行为时，从动作菜单中选择一个行为项，单击事件列右方的三角，打开事件菜单，可以选择事件。右方的三角，打开事件菜单，可以选择事件。单击单击 向上向上 箭头或向下箭头箭头或向下箭头，可将动作项向前移或向后移，可将动

18、作项向前移或向后移，改变动作执行的顺序改变动作执行的顺序。9.1.2行为的创建、修改和更新行为的创建、修改和更新对行为的添加和控制主要通过行为面板来实现。对行为的添加和控制主要通过行为面板来实现。创建行为创建行为创建行为一般有三个步骤：先在页面中选择创建行为一般有三个步骤：先在页面中选择要添加行为的对象要添加行为的对象,再在行为面板中为之添再在行为面板中为之添加所需的动作加所需的动作,最后调整触发动作的事件。最后调整触发动作的事件。注意：注意：一个对象可添加多个行为，多个行为一个对象可添加多个行为，多个行为以字母顺序显示在行为面板上。为了实现需以字母顺序显示在行为面板上。为了实现需要的效果，我

19、们还可以指定和修改动作发生要的效果，我们还可以指定和修改动作发生的顺序。的顺序。修改行为修改行为添加行为之后可以修改触发动作的事件、添加行为之后可以修改触发动作的事件、添加或删除动作、修改动作的参数。添加或删除动作、修改动作的参数。编辑动作的参数可双击行为名称或选编辑动作的参数可双击行为名称或选中后按中后按enter键键修改给定事件的多个动作顺序，可选修改给定事件的多个动作顺序，可选定动作后按上下箭头按钮，或剪切后定动作后按上下箭头按钮，或剪切后在所需顺序处粘贴。在所需顺序处粘贴。要删除行为，选定后按要删除行为，选定后按“-”按钮或按按钮或按del键键更新行为更新行为不同版本的不同版本的dw做

20、好的网页中如有行为，在做好的网页中如有行为，在另一低版本中打开时一般不会自动更新。另一低版本中打开时一般不会自动更新。实现行为更新的步骤：选定一个对象，打实现行为更新的步骤：选定一个对象，打开行为面板，双击行为后确定。开行为面板，双击行为后确定。9.1.3使用使用DW内置的行为内置的行为dw8.0自带的行为动作，使用于自带的行为动作，使用于4.0以上版本的浏以上版本的浏览器，同一动作在不同的浏览器中支持的程度不览器，同一动作在不同的浏览器中支持的程度不同。同。dw8.0自带的行为主要有自带的行为主要有:1.弹出消息弹出消息其动作回显示一个带有指定消息的只有其动作回显示一个带有指定消息的只有“确

21、定确定”按钮的按钮的javascript警告窗口，警告窗口的外观取警告窗口，警告窗口的外观取决于浏览者的浏览器。功能类似于脚本链接决于浏览者的浏览器。功能类似于脚本链接.2、“播放声音播放声音”实例实例用播放声音的动作，可以在网页中播放用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按声音文件，如背景音乐，或单击某个按钮钮(文字或图片文字或图片)播放一段声音。播放一段声音。（1）给网页添加背景音乐）给网页添加背景音乐打开一个网页，单击编辑窗口状态栏上的打开一个网页，单击编辑窗口状态栏上的标记，选中整个网页。标记，选中整个网页。打开行为面板，单击打开行为面板，单击“+”按钮，在

22、菜单中按钮，在菜单中选择选择“播放声音播放声音”。在弹出的菜单中输入音乐文件的路径，单在弹出的菜单中输入音乐文件的路径，单击击“确定确定”。把事件调整为把事件调整为onLoad(载载入页面后入页面后)。（2）给图片添加声音，方法同上。）给图片添加声音，方法同上。3、跳转菜单和跳转菜单开始、跳转菜单和跳转菜单开始创建一个菜单对象并向其附加一个创建一个菜单对象并向其附加一个“跳转菜跳转菜单单”（或（或“跳转菜单转到跳转菜单转到”）行为。）行为。4、网页中的变色按钮网页中的变色按钮（改变属性）（改变属性）新建新建11.html文件，插入一个文件，插入一个1行行2列的表格，列的表格，做如下设置：做如下

23、设置：选中全部单元格，在属性面板中做如下设选中全部单元格，在属性面板中做如下设置：置：在两个单元格中分别输入文字在两个单元格中分别输入文字“变色按钮变色按钮”、“应用行为应用行为”，并将它们居中对齐，并将它们居中对齐，产生一个产生一个DIV标签，在代码区找到第一个标签，在代码区找到第一个div标签，在标签，在代码代码中设置一个中设置一个id值，这段代码改为值，这段代码改为，同样的同样的方法，在第方法，在第2二个二个div标签中设置一个标签中设置一个id=“button2”，即分别给两个单元格内的即分别给两个单元格内的div标签命名。标签命名。选择窗口选择窗口行为，打开行为面板，鼠标在第行为，打

24、开行为面板，鼠标在第一个单元格中点击一下，在状态栏选中一个单元格中点击一下，在状态栏选中div标签，单击行为面板上的按钮，从弹出标签，单击行为面板上的按钮，从弹出菜单中选择菜单中选择“改变属性改变属性”菜单项，在弹出菜单项，在弹出的对话框中做如下选择：的对话框中做如下选择：单击单击“确定确定”，回到行为面板中，将其，回到行为面板中，将其鼠标响应行为改为鼠标响应行为改为onMouseOver。用同用同样的方法在该样的方法在该div标签上再设置一个行为，标签上再设置一个行为，将其鼠标响应行为改为将其鼠标响应行为改为onMouseOut，并将对话框中的并将对话框中的“新的值新的值”设为原来的设为原来

25、的背景色背景色#CCCC00。对第二个单元格中的对第二个单元格中的id=button2的的div标签，我们也做同样的标签，我们也做同样的设置。保存文件，按设置。保存文件，按F12浏览效果。浏览效果。5 5、打开浏览器窗口：用于制作网站的公告通告或者广告、打开浏览器窗口：用于制作网站的公告通告或者广告宣传、单击缩略图可以弹出一个放大图像、规定链接目宣传、单击缩略图可以弹出一个放大图像、规定链接目标网页的大小和外观等。标网页的大小和外观等。在一个新的窗口中打开在一个新的窗口中打开URLURL。6 6、调用、调用javascriptjavascript“调用调用 JavaScript”JavaScr

26、ipt”动作允许读者使用动作允许读者使用“行为行为”面板指面板指定当发生某个事件时应该执行的自定义函数或定当发生某个事件时应该执行的自定义函数或 JavaScript JavaScript 代码行。代码行。熟悉熟悉htmlhtml和和javascriptjavascript的情况下的情况下使用。使用。7、检查表单、检查表单该动作主要是检查指定文本域的内容以确保用户该动作主要是检查指定文本域的内容以确保用户输入了正确的数据类型。输入了正确的数据类型。Onblur事件分别将动作事件分别将动作添加给各个文本域，在用户提交表单时分别对各添加给各个文本域，在用户提交表单时分别对各个域进行检查；个域进行检

27、查；onsubmit事件将动作添加给表单，事件将动作添加给表单，在用户提交表单时同时对多个域进行检查。在用户提交表单时同时对多个域进行检查。选定单个域或选定单个域或form进行添加检查表单动作。进行添加检查表单动作。8、检查插件、检查插件根据浏览者是否安装了指定的插件，转到根据浏览者是否安装了指定的插件，转到不同的页。不同的页。9、检查浏览器、检查浏览器使用该动作可以获得用户浏览网页所使用使用该动作可以获得用户浏览网页所使用的浏览器类型，可根据浏览者不同的类型的浏览器类型，可根据浏览者不同的类型和版本的浏览器，可以给浏览者显示不的和版本的浏览器，可以给浏览者显示不的网页。网页。10、交换图象与

28、恢复交换图象、交换图象与恢复交换图象只要一个对象添加交换图象，恢复交换图只要一个对象添加交换图象，恢复交换图象也添加给它象也添加给它1111、预先载入图象：、预先载入图象：“预先载入图像预先载入图像”动作将不会动作将不会立即出现在页上的图像载入浏览器缓存中。立即出现在页上的图像载入浏览器缓存中。1212、控制、控制shockshaveshockshave或或flashflash 使用该动作可以播放、停止、后退或转到使用该动作可以播放、停止、后退或转到shockshaveshockshave或或flashswfflashswf 文件中帧文件中帧1313、设置导航栏图像、设置导航栏图像 设置该动作

29、可以将某个图像变为导航栏图像，或设置该动作可以将某个图像变为导航栏图像，或修改导航条中图像的显示和动作。修改导航条中图像的显示和动作。1414、设置文本、设置文本 A A：设置框架文本设置框架文本 B B：设置层文本设置层文本 C：设置状态栏文本设置状态栏文本浏览器下端的状态行通常显示当前状态的提示信浏览器下端的状态行通常显示当前状态的提示信息，利用息，利用“设置状态栏文本设置状态栏文本”行为，可行为，可以重新以重新设置状态行信息。设置状态行信息。选中要附加行为的对象，如选中要附加行为的对象，如网页的网页的标记，或一个链接。标记，或一个链接。单击行为面单击行为面板上的板上的“+”按钮，在打开的

30、动作菜单。按钮，在打开的动作菜单。选择选择“设置文本设置文本”“设置状态文本设置状态文本”命令，在打开的命令，在打开的“信息信息”对话框中输入需要的文本。按对话框中输入需要的文本。按F12键，键，可以看到打开网页后，浏览器下端的状态行上有可以看到打开网页后，浏览器下端的状态行上有了新输入的信息。了新输入的信息。D：设置文本域文本设置文本域文本1515、显示弹出菜单（下拉菜单）显示弹出菜单（下拉菜单）（参看课本（参看课本p228-232p228-232页，效果见实例站点中页，效果见实例站点中dianzixiangce.html ）使用使用“显示弹出菜单显示弹出菜单”行为来创建或编辑行为来创建或编

31、辑 Dreamweaver Dreamweaver 弹出式菜单，或者打开并修改已插入弹出式菜单，或者打开并修改已插入 Dreamweaver Dreamweaver 文文档的档的 Fireworks Fireworks 弹出式菜单。弹出式菜单。1616、显示和隐藏层显示和隐藏层（效果见实例站点中效果见实例站点中guodu2.html 中中“娱乐娱乐”和和qqshiyishi.htmlqqshiyishi.html中的中的qqqq虚拟试衣室）虚拟试衣室）显示隐藏层：显示隐藏层：“显示隐藏层显示隐藏层”动作显示、隐藏或恢复一动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互

32、个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。时显示信息。1717、拖动层、拖动层1818、转到、转到urlurl“转到转到 URL”URL”动作在当前窗口或指定的框架中动作在当前窗口或指定的框架中打开一个新页。打开一个新页。1919、滚动链接的层滚动链接的层9.1.4高级行为的应用高级行为的应用1、插入滚动字幕插入滚动字幕浏览网页时，有时会看到网页中有些文字会循浏览网页时，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的环往复的移动。这种动画效果是如何制作的呢？当然我们可以采用呢？当然我们可以采用Gif动画或者利用动画或者利用flash来实现，但是这种方式

33、往往占用的空间来实现，但是这种方式往往占用的空间比较大，而且不如比较大，而且不如HTML标记来得那么简单。标记来得那么简单。这个标记就是这个标记就是Marquee标记，中文翻译为标记，中文翻译为“跑马灯跑马灯”。IE3.0以上版本的浏览器中支持这以上版本的浏览器中支持这个个HTML标记，而标记，而NetScape则不支持。因此则不支持。因此我们在设计网页的时候需要考虑这个问题我们在设计网页的时候需要考虑这个问题。选择选择“常用插入栏常用插入栏”的的“标签选择器标签选择器”命命令按钮，打开标签选择器窗口从中选择令按钮，打开标签选择器窗口从中选择“html标签标签”下的下的marquee标签，单击

34、标签，单击“插入插入”就在页面的代码视图中插入一个就在页面的代码视图中插入一个marquee标签，在行为面板中设置标签检标签，在行为面板中设置标签检查器中的标签。查器中的标签。Marquee标记的基本语法结构Marquee标记的基本语法结构如下所示标记的基本语法结构如下所示：夜鹰电脑教学网，电脑爱好者的乐园夜鹰电脑教学网，电脑爱好者的乐园其中其中ALIGN可以用来指定滚动字幕与可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有左右文字的对齐方式，它的值可以有top、middle、bottom等；等；behavior用来指定滚动字幕的滚动方用来指定滚动字幕的滚动方式，它的属性值有式，它的属性

35、值有scroll、slide和和alternate三个，三个，scroll表示滚动字幕表示滚动字幕内容向同一方向重复滚动，内容向同一方向重复滚动，slide表示表示滚动字幕内容从一端向另一端滚动并滚动字幕内容从一端向另一端滚动并在另一端停止，在另一端停止，alternate表示滚动字表示滚动字幕内容在两端之间来回往复滚动；幕内容在两端之间来回往复滚动；direction指定滚动字幕的滚动方向，指定滚动字幕的滚动方向，它的属性值有它的属性值有left和和right两个，分别表示两个，分别表示滚滚动字幕由右向左和由左向右滚动；动字幕由右向左和由左向右滚动；SCROLLAMOUNT用来设置多次滚动之

36、用来设置多次滚动之间的间隔距离，其间的间隔距离，其单位是单位是pixels（像素）；像素）；scrolling用来指定滚动字幕滚动一次用来指定滚动字幕滚动一次所需要的时间，单位是所需要的时间，单位是ms（千分之一秒）千分之一秒），其值的大小将直接影响滚动字幕的滚其值的大小将直接影响滚动字幕的滚动速度；动速度；LOOP属性是用来指定滚动字幕的滚动属性是用来指定滚动字幕的滚动次数次数的，当它的值为的，当它的值为“1”时，滚动字时，滚动字幕将连续滚动直到浏览器载入下一个页幕将连续滚动直到浏览器载入下一个页面；面；HSPACE和和VSPACE则分别用来指则分别用来指定滚动字幕与其上一级页面在水平方向定

37、滚动字幕与其上一级页面在水平方向和竖直方向上的距离。和竖直方向上的距离。示例：示例：文本自动向上循环滚动，鼠标放到文本自动向上循环滚动，鼠标放到上面还会暂停上面还会暂停2、下载安装扩展插件、下载安装扩展插件3、下载网页特效，适当修改相关代码，再、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。把代码放到代码视图的具体位置。举例：举例：花瓣花瓣棉花糖棉花糖9.2时间轴 时间轴是flash制作的关键，dw中的时间轴式根基flash制作动画的原理演化出来的。1.时间轴面板动画条动画通道，圆圈标识的为关键帧 行为通道在时间轴面板中：在时间轴面板中：时间轴选单：显示目前所编辑的时间轴名称

38、。时间轴选单：显示目前所编辑的时间轴名称。播放头：播放头：红色的播放头指示在网页中显示的是哪一帧。红色的播放头指示在网页中显示的是哪一帧。动画条：即图中的动画条：即图中的Layer11Layer11，Layer12Layer12，可显示每个层对，可显示每个层对象的持续时间。象的持续时间。关键帧：动画条中的小圆圈是关键帧。关键帧：动画条中的小圆圈是关键帧。帧数：显示播放头的位置。帧数：显示播放头的位置。：回转，可将播放头移到时间轴的初始帧。：回转，可将播放头移到时间轴的初始帧。：后退，将播放头往左移动一帧。：后退，将播放头往左移动一帧。：前进，将播放头往右移动一帧。：前进，将播放头往右移动一帧。

39、FPSFPS：播放速度。每秒种播放的帧数。：播放速度。每秒种播放的帧数。自动播放：当网页载入到浏览器时使当前时间轴自动播自动播放：当网页载入到浏览器时使当前时间轴自动播放。放。循环：当网页载入到浏览器时使当前时间轴循环播放。循环：当网页载入到浏览器时使当前时间轴循环播放。说明：说明：一个网页中可以创建多个时间轴，每个时间轴一个网页中可以创建多个时间轴，每个时间轴上可以创建多个动画对象，每个对象对于一个上可以创建多个动画对象，每个对象对于一个动画条。同一个时间轴内的动画对象同时开始，动画条。同一个时间轴内的动画对象同时开始，同时结束，并且播放速度也一样。同时结束，并且播放速度也一样。关键帧在时间

40、轴上以小圆圈标识；一个动画可关键帧在时间轴上以小圆圈标识；一个动画可以设计多个关键帧；起始帧和结束帧规定了动以设计多个关键帧；起始帧和结束帧规定了动画的起始状态和结束状态。画的起始状态和结束状态。动画的制作是以层位基础的，要创建的动画的动画的制作是以层位基础的，要创建的动画的元素都必须放在一个层上，然后对层制作动画。元素都必须放在一个层上，然后对层制作动画。2 2、时间轴和图层的综合运用、时间轴和图层的综合运用（1 1）滚动字幕滚动字幕 （见实例站点中（见实例站点中guodu2.htmlguodu2.html中中欢迎光临！滚动文字字幕）欢迎光临！滚动文字字幕）添加层，并在层上输入文字，然后设置

41、层的滚添加层，并在层上输入文字，然后设置层的滚动轨迹，即可得到滚动文字效果。动轨迹，即可得到滚动文字效果。（2 2）网页浮动动画，网页浮动动画，类似与（类似与（1 1）中的滚动文字，）中的滚动文字，无非是把文字换成图片，多增加几个关键帧，无非是把文字换成图片，多增加几个关键帧，使运动轨迹更复杂化。使运动轨迹更复杂化。（见实例站点中见实例站点中guodu2.htmlguodu2.html中（我送给你了图片）中（我送给你了图片）（3 3）设置文字的阴影效果设置文字的阴影效果 插入父层和子层，都输入相同的文字，设置插入父层和子层，都输入相同的文字，设置不同的颜色，在设计视图中调整二者的重叠程不同的颜

42、色，在设计视图中调整二者的重叠程度以显示阴影的效果。度以显示阴影的效果。（4 4）幻灯片效果，幻灯片效果，单击换图。单击换图。简要操作步骤：简要操作步骤：插入三个层插入三个层，并分别插入三个图片，调整大小，并分别插入三个图片，调整大小一样，把它们在设计视图中的左上边距都设成一样，把它们在设计视图中的左上边距都设成一样；分别拖放到同一个时间轴上的一样；分别拖放到同一个时间轴上的3 3个动画条个动画条上，使三者首尾相接；最后分别为上，使三者首尾相接；最后分别为3 3个动画条上个动画条上对应的第一关键帧添加显示隐藏行为即可。给对应的第一关键帧添加显示隐藏行为即可。给每一个动画条的第一关键帧添加显示（

43、下一个每一个动画条的第一关键帧添加显示（下一个图像所在的）层，而隐藏其他层，行为面板中图像所在的）层，而隐藏其他层，行为面板中的相关事件改成的相关事件改成onclickonclick。（见实例站点中（见实例站点中guodu2.htmlguodu2.html中幻灯片播放效果）中幻灯片播放效果）（5 5）控制图像播放动画控制图像播放动画 （见实例站点中（见实例站点中guodu2.htmlguodu2.html中展开图像和闭合图像）中展开图像和闭合图像）（a a）.在设计视图中插入一个层，并插入图片在设计视图中插入一个层，并插入图片,并将层的可见性和溢出属性都设为并将层的可见性和溢出属性都设为“hi

44、dden”hidden”；然后将该层拖放到两个时间轴上，第一个时间轴然后将该层拖放到两个时间轴上，第一个时间轴上起始帧和结尾帧对应的层的大小分别为最小值上起始帧和结尾帧对应的层的大小分别为最小值（0 0，0 0）和最大值（图片实际大小），第二个时）和最大值（图片实际大小），第二个时间轴上起始帧和结尾帧对应的层的大小分别为最间轴上起始帧和结尾帧对应的层的大小分别为最大值（图片实际大小）和最小值（大值（图片实际大小）和最小值（0 0，0 0）；不；不勾选勾选“自动播放自动播放”和和“循环循环”复选框。复选框。（6 6）制作滚动的折叠菜单制作滚动的折叠菜单：和（：和（5 5）的操作类似。）的操作类似

45、。（相关操作可参看相关（相关操作可参看相关flashflash视频）视频）（7 7）具有预览功能的电子相册效果，自动换图。）具有预览功能的电子相册效果，自动换图。（相关操作可参看课本相关操作可参看课本p237-243p237-243页，效果见实例站点中页，效果见实例站点中dianzixiangce.html）9.3在网页中应用javascript认识代码片段面板认识代码片段面板应用代码片段应用代码片段在在页面中插入在在页面中插入htmlhtml代码片段（在设计视图中即代码片段（在设计视图中即可完成）可完成）在网页代码视图中插入在网页代码视图中插入javascriptjavascript代码片段

46、代码片段 在在htmlhtml文档的头部插入如下代码：文档的头部插入如下代码：script language=“”，然后把光标放在这个标签之间，选然后把光标放在这个标签之间，选择择“代码片段代码片段”面板中的面板中的“javascriptjavascript”选项，选项，从中选择所需的代码，单击插入即可。从中选择所需的代码，单击插入即可。所有的脚本程序必须封装在所有的脚本程序必须封装在 这对标签之间，这对标签可以放在这对标签之间，这对标签可以放在htmlhtml中的任何地方中的任何地方（或者或者部分中）。大多数部分中）。大多数scriptscript代码被代码被定义成过程函数（定义成过程函数（

47、fuctionfuction），放在），放在部分，在部分，在部分调用函数时执行它。部分调用函数时执行它。应用举例：应用举例：1.1.在代码片段面板中选择有关导航条的代码片段，在在代码片段面板中选择有关导航条的代码片段，在网页中插入合适的导航条；网页中插入合适的导航条；2.2.将把光标放在将把光标放在script language=“”这对标签之间，选择这对标签之间，选择“代码片段代码片段”面板中面板中的选择的选择javascriptjavascript|浏览函数浏览函数|禁止右键单击禁止右键单击（disablerightclickdisablerightclick（）单击插入即可实现禁止（）单

48、击插入即可实现禁止右击的操作。（实例网站中的右击的操作。（实例网站中的guodu1.htmlguodu1.html）3.利用利用JavaScript实现全屏显示网页窗口实现全屏显示网页窗口（实例网站（实例网站中的中的guodu3.htmlguodu3.html）。本章小结：本章小结：本节主要讲解了本节主要讲解了dwdw内置的行为和时间轴，通过举内置的行为和时间轴，通过举例，详细讲解了层、时间轴和行为的综合运用。例，详细讲解了层、时间轴和行为的综合运用。学完本章，大家应该能灵活的制作出较为简单的学完本章，大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。具有特殊效果的动态网页。随堂作业：随

49、堂作业：下列关于行为的说法不正确的一项是下列关于行为的说法不正确的一项是（）A行为即是事件，事件即是行为行为即是事件，事件即是行为B行为是事件和动作的组合行为是事件和动作的组合C行为是行为是dw预置的程序代码预置的程序代码D通过行为可以改变对象属性、打开浏览器和通过行为可以改变对象属性、打开浏览器和播放音乐播放音乐作业布置：作业布置：1.简述行为、对象、事件和动作的概念。简述行为、对象、事件和动作的概念。2.要实现控制要实现控制flash或或shockwave的行为：当在的行为：当在页面中单击文字页面中单击文字“播放播放”时，时，flash动画开始动画开始正常播放，当在页面中单击文字正常播放，

50、当在页面中单击文字“停止停止”时，时，flash动画即停止播放。动画即停止播放。Flash的名字自己定的名字自己定义，请写出实现控制义，请写出实现控制flash功能的详细操作步功能的详细操作步骤。骤。3.课后所有习题。课后所有习题。练习练习1QQ虚拟试衣室虚拟试衣室用“显示-隐藏层”行为制作一个仿QQ秀的虚拟试衣室实例，效果如图9-71所示。单击衣服图片可以给人物形象穿上衣服，双击衣服图片可以将衣服从人物形象上脱下。在练习制作这个实例时，要把人物形象分成头、上身、下身3部分，并且放在3个不同的层中，另外穿上衣服的人物形象图片也要分别放在不同的层中。最后，分别定义衣服图片的行为，实现单击时显示层