《第9章 层、行为与时间轴.ppt》由会员分享，可在线阅读，更多相关《第9章 层、行为与时间轴.ppt（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Dreamweaver Dreamweaver 网页设计网页设计u第第9章章层、时间轴与层、时间轴与行为行为【学习概述学习概述】层、时间轴、行为可以说是网页设计层、时间轴、行为可以说是网页设计中革命性的技术。搭配使用层、时间轴、中革命性的技术。搭配使用层、时间轴、行为可以制作出活泼多样的动态页面以行为可以制作出活泼多样的动态页面以及效果惊人的互动网页。及效果惊人的互动网页。通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.认识图层认识图层2.图层的基本操作图层的基本操作3.图层的管理图层的管理4.图层与表格的相互转换图层与表格的相互转换5.时间轴、行为等。时间轴、行为等。6.
2、重点是如何综合运用层、行为、时间轴。重点是如何综合运用层、行为、时间轴。9.1.1 9.1.1 认识层认识层 图图层层又又称称层层，是是Dreamweaver Dreamweaver MXMX中中最最有有价价值值的的对对象象之之一一，它它提提供供了了一一种种对对网网页页对对象象进进行行有有效效控控制制的的手手段段，层层可可以以包包含含文文本本、图图像像、表表单单、插插件件，甚甚至至层层内内还还可可以以包包含含其其它它层层。即即在在HTMLHTML文文档档的的正正文文部部分分可可以以放放置置的的元元素素都都可可以以放放入入层层内内。由由于于层层可可以以放放置置在在网网页页的的任任何何位位置置，从
3、而能有效地控制网页中的对象。从而能有效地控制网页中的对象。层是在制作网页中经常用到的对象，元素的定位就是一个简单的层是在制作网页中经常用到的对象，元素的定位就是一个简单的应用。用表格来对网页进行排版非常方便，但有时需要在文字上放一应用。用表格来对网页进行排版非常方便，但有时需要在文字上放一些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示或隐藏，实现交互技术。配合时间显的使用，还可以同时移动一个或或隐藏，实现交
4、互技术。配合时间显的使用，还可以同时移动一个或多个图层，轻松制作出动态效果。多个图层，轻松制作出动态效果。9.1 9.1 图层图层 在层属性面板中：在层属性面板中：u层编号：用于指定一个名称，用于识别不同的层。层编号：用于指定一个名称，用于识别不同的层。u左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。左上角的位置。u宽和高：指定层的宽度和高度。宽和高：指定层的宽度和高度。uZ 轴：确定层的轴：确定层的z轴顺序（即堆叠顺序）。轴顺序（即堆叠顺序）。图 9-1 层属性面板在默认情况下，在默认情况下，Dreamweaver使
5、用使用DIV标记创建层。选择层后，对应的属性面板标记创建层。选择层后，对应的属性面板如图如图9-1所示。所示。u可见性：指定该层最初是否是可见的，有可见性：指定该层最初是否是可见的，有4个选项：个选项：“默认默认”：不指定可见性属性，默认为：不指定可见性属性，默认为“继承继承”。“继承继承”：使用该层父级的可见性属性。：使用该层父级的可见性属性。“可见可见”：显示这些层的内容。：显示这些层的内容。“隐藏隐藏”：隐藏这些层的内容。：隐藏这些层的内容。u背景图像：指定层的背景图像。背景图像：指定层的背景图像。u背景颜色：指定层的背景颜色。背景颜色：指定层的背景颜色。u溢出：控制当层的内容超过层的指
6、定大小时如何在浏览器溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。中显示层。“可见可见”：指示在层中显示额外的内容。：指示在层中显示额外的内容。“隐藏隐藏”：指定不在浏览器中显示额外的内容。：指定不在浏览器中显示额外的内容。“滚动滚动”：指定浏览器应在层上添加滚动条，而不管是：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。否需要滚动条。“自动自动”：使浏览器仅在需要时才显示层的滚动条。：使浏览器仅在需要时才显示层的滚动条。层面板层面板 层面板是一个可视化管理层的工具。执行层面板是一个可视化管理层的工具。执行【窗口窗口】-【层层】命令命令打开层面板，如图打开层面板，如图9-2
7、所示。在所示。在Dreamweaver中使用层面板使得对层的中使用层面板使得对层的操作变得十分方便和简单。操作变得十分方便和简单。图 9-2 层面板1、新建层、新建层 可以使用插入、拖动等方法创建层或嵌套层。创建层步骤如下：可以使用插入、拖动等方法创建层或嵌套层。创建层步骤如下：（1）建立站点）建立站点“ceng”，创建新文档，创建新文档index.html，在，在“插入插入”栏的栏的“布局布局”类别中单击类别中单击“绘制层绘制层”按钮。按钮。（2）在文档中拖动以绘制一个层。如要要绘制多个层，可以按住）在文档中拖动以绘制一个层。如要要绘制多个层，可以按住【Ctrl】键并拖动。只要不松开键并拖动
8、。只要不松开【Ctrl】键，就可以继续绘制新的层。键，就可以继续绘制新的层。（3）定位光标后，执行）定位光标后，执行【插入插入】-【布局对象布局对象】-【层层】命令可命令可以在光标位置插入一个层。以在光标位置插入一个层。（4）插入层后，可以看到一个矩形框出现在文档中，如图）插入层后，可以看到一个矩形框出现在文档中，如图9-2所示。所示。图 9-2 插入层9.1.2 层的基本操作层的基本操作 2创建嵌套图层创建嵌套图层 图图层层嵌嵌套套指指的的是是在在一一个个图图层层的的内内部部创创建建另另一一个个图图层层，可可以以用用嵌嵌套套的的方方法法将将多多个个图图层层组组合合在在一一起起。使使用用嵌嵌套
9、套层层的的目目的的通通常常是是为为了了将将多多个个图图层层组组成成群群组组，这这样样一一来来，只只要要移移动动父父层层，其其中中的的子子层层也也会会一一起起移移动动，而而且且子子层层还还会会继继承承父父层层的的显显示示隐隐藏藏状状态态，其其可可见见性性与与父父层层保保持持一一致致。这这在在制制作作动动态网页是十分有用。态网页是十分有用。创建嵌套层通常有两种方法：创建嵌套层通常有两种方法：（1）直接创建嵌套层）直接创建嵌套层先先创创建建一一个个层层为为父父层层，后后在在父父层层内内创创建建的的层层成成为为子子层层，在图层面板中也可以看出层在图层面板中也可以看出层2是层是层1的子层。的子层。（2）
10、将已有的层变为嵌套层）将已有的层变为嵌套层 打打开开图图层层面面板板，在在层层列列表表中中将将需需要要作作为为子子层层的的层层选选中中，按住按住Ctrl键将该层拖动到父层上，释放鼠标即可。键将该层拖动到父层上，释放鼠标即可。层面板嵌套图层 要对层进行编辑，必须先选择层。可以选择一个或多个层进行操要对层进行编辑，必须先选择层。可以选择一个或多个层进行操作或更改它们的属性。作或更改它们的属性。步骤如下：步骤如下：（1）若要在）若要在“文档文档”窗口中选择一个层：移动鼠标到层的边框上，当鼠窗口中选择一个层：移动鼠标到层的边框上，当鼠标变成标变成 状时，同时层的边框变成红色，单击即可选择该层；或在层面
11、状时，同时层的边框变成红色，单击即可选择该层；或在层面板中单击需要选取的层名称，如图板中单击需要选取的层名称，如图9-10所示。此时文档中层就处于选所示。此时文档中层就处于选中状态。中状态。图 9-10选择层（2）若要在“文档”窗口中选择多个层：在文档中，在两个或多个层的边框内（或边框上）按快捷键【Shift】并单击，或在层面板中，按快捷键【Shift】并单击两个或更多的层名称。3、选择层、选择层若要更改层的可见性，可执行以下操作之一：若要更改层的可见性，可执行以下操作之一：（1 1）打打开开图图层层面面板板，单单击击图图层层面面板板中中一一个个层层的的眼眼睛睛图图标标以以更更改改其其可可见见
12、性性。眼眼睛睛睁睁开开表表示示该该层层是是可可见见的的。眼眼睛睛闭闭合合表表示示该该层是不可见的。层是不可见的。（2 2）选选择择图图层层，在在其其属属性性面面板板的的“可可见见性性”栏栏中中设设置置图图层层的可见性。的可见性。1、改变图层的可见性、改变图层的可见性 9.1.3 9.1.3 图层的管理图层的管理 2、改变图层的叠放次序、改变图层的叠放次序 方法一：方法一：利用层面板来调整层的叠放次序：利用层面板来调整层的叠放次序：打打开开层层面面板板。把把光光标标放放置置到到要要改改变变位位置置的的层层的的名名称称上上，向向上上或或向向下下拖拖至至所所需需的的堆堆叠叠顺顺序序，移移动动层层时时
13、会会出出现现一一条条线线，它它指指示示该该层层将将出出现现的的位位置置，当当放放置置线线出出现现在在堆堆叠叠顺顺序序中中的的所需位置时，松开鼠标按钮。所需位置时，松开鼠标按钮。方法二：利用层属性面板来调整图层的叠放次序方法二：利用层属性面板来调整图层的叠放次序 在在层层属属性性面面板板中中直直接接修修改改层层的的“Z轴轴”值值，可可以以改改变变层层的的叠叠放放次次序序。可可以以在在文文本本框框中中输输入入数数值值，当当输输入入的的数数值值比比当当前前值值大大时时，表表示示图图层层的的叠叠放放次次序序提提高高；当当输输入入的的数数值值比比当当前前值值小时，表示图层的叠放次序降低。小时，表示图层的
14、叠放次序降低。图图层层和和表表格格都都可可以以用用来来进进行行页页面面定定位位，但但图图层层是是可可以以随随意意移移动动的的，应应用用图图层层来来进进行行页页面面设设计计更更快快捷捷、方方便便、灵灵活活。但但图图层层只只有有在在较较高高版版本本的的浏浏览览器器中中才才能能够够正正确确显显示示，如如果果要要使使设设计计的的网网页页在在3.0版版本本的的浏浏览览器器中中也也正正确确显显示，则不能使用图层来控制版面。示，则不能使用图层来控制版面。为为了了避避免免显显示示错错误误，可可以以先先用用图图层层来来快快速速创创建建复复杂杂的的页页面面布布局局，然然后后再再把把图图层层布布局局转转换换为为表表
15、格格布布局局。需需要要时时，也也可可以以进进行行图图层层和和表表格格的的相相互互转转换换，以以调调整整布布局局和和优化页面设计。优化页面设计。9.1.4 9.1.4 图层与表格图层与表格 在在Dreamweaver MX中中，先先用用图图层层来来制制作作一一个个页页面面，选选择择“修修改改”|“转转换换”|“层层到到表表格格”命命令令，弹弹出出 “转转换换层层为为表表格格”对对话话框框，根根据据需需要要对对以以上上各各项项进进行设置，设置完毕单击行设置，设置完毕单击“确定确定”按钮。按钮。1、将图层转换为表格将图层转换为表格 注意：注意：1隐藏的图层不能转换为表格。隐藏的图层不能转换为表格。2
16、重重叠叠的的层层不不允允许许转转换换为为表表格格，因因为为表表格格的的单单元元格格是不能重叠的。是不能重叠的。3在在模模板板文文档档或或已已应应用用模模板板的的文文档档中中，不不能能将将层层转转换为表格或将表格转换为层。换为表格或将表格转换为层。将表格转换为图层的步骤如下：将表格转换为图层的步骤如下：选选择择需需要要转转换换的的表表格格，执执行行“修修改改”|“转转换换”|“表表格格到到层层”命命令令，弹弹出出 “转转换换表表格格为为层层”对对话话框框；在在对对话话框框中中选选择择所所需需要要的的选选项项，单单击击“确确定定”按按钮钮，文文档档中中的的表表格格转转换换为为层层，但但空空表表格格
17、单单元元不不转转换换，表表格格之之外外的的内内容容也也被被置置于于图图层层中。中。2、将表格转换为图层、将表格转换为图层 Dreamweaver中的时间轴是指通过随时间的变中的时间轴是指通过随时间的变化改变层的位置、大小、可见性等属性来创建动化改变层的位置、大小、可见性等属性来创建动画效果。时间轴只有配合层来使用才能发挥其强画效果。时间轴只有配合层来使用才能发挥其强大功能，因此想让大功能，因此想让flash、图像、文本等对象移动，、图像、文本等对象移动，就须先创建层，然后在层中插入对象。执行就须先创建层，然后在层中插入对象。执行【窗窗口口】-【时间轴时间轴】命令，打开时间轴面板如图命令，打开时
18、间轴面板如图9-7所示。所示。图 9-7 时间轴9.2 9.2 时间轴时间轴在时间轴面板中：在时间轴面板中：u时间轴选单：显示目前所编辑的时间轴名称。时间轴选单：显示目前所编辑的时间轴名称。u播放头：播放头：红色的播放头指示在网页中显示的是哪一帧。红色的播放头指示在网页中显示的是哪一帧。u动画条：即图中的动画条：即图中的Layer11，Layer12，可显示每个层对象，可显示每个层对象的持续时间。的持续时间。u关键帧：动画条中的小圆圈是关键帧。关键帧：动画条中的小圆圈是关键帧。u帧数：显示播放头的位置。帧数：显示播放头的位置。：回转，可将播放头移到时间轴的初始帧。：回转，可将播放头移到时间轴的
19、初始帧。：后退，将播放头往左移动一帧。：后退，将播放头往左移动一帧。：前进，将播放头往右移动一帧。：前进，将播放头往右移动一帧。FPS：播放速度。每秒种播放的帧数。：播放速度。每秒种播放的帧数。u自动播放：当网页载入到浏览器时使当前时间轴自动播放。自动播放：当网页载入到浏览器时使当前时间轴自动播放。u循环：当网页载入到浏览器时使当前时间轴循环播放。循环：当网页载入到浏览器时使当前时间轴循环播放。9.2.1创建时间轴动画创建时间轴动画由于时间轴只能移动层，因此如果要移动图像或文本，则要创建一个层，然由于时间轴只能移动层，因此如果要移动图像或文本，则要创建一个层，然后在该层中插入图像、文本或其它类
20、型的内容。后在该层中插入图像、文本或其它类型的内容。创建时间轴动画：创建时间轴动画：u1、在对象面板上选择、在对象面板上选择“绘制层绘制层”，在画面增加一个层（，在画面增加一个层（Layer1）。）。u2、在、在Layer1中插入中插入GIF动画。动画。u3、直接将选中的层拖动到时间轴检查器或选择、直接将选中的层拖动到时间轴检查器或选择“修改修改”“时间轴时间轴”“添添加对象对时间轴加对象对时间轴”。此时在时间轴的第一个通道中将出现一动画条。此时在时间轴的第一个通道中将出现一动画条。u4、在、在Timeline选中选中 Layer1，将最后一帧拖长至，将最后一帧拖长至30帧，点鼠标右键，在第帧
21、，点鼠标右键，在第15帧帧的位置插入关键帧。的位置插入关键帧。u5、选中第、选中第15帧，然后分别在显示区选中层，使鼠标变成帧，然后分别在显示区选中层，使鼠标变成，将层（包括图），将层（包括图）拖向右上角，然后再在拖向右上角，然后再在Timeline选中最后一帧，将层拖回起点位置。选中最后一帧，将层拖回起点位置。u6、如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，、如果希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置，按住按住Play（播放）按钮不放即可预览网页中的动画。（播放）按钮不放即可预览网页中的动画。u 7、按、按 F12预览动态效果。预览动态效果。9.2.
22、29.2.2 通过拖动途径创建动画通过拖动途径创建动画u要通过拖动途径创建时间轴：先在页要通过拖动途径创建时间轴：先在页面选中一层，然后选择面选中一层，然后选择“修改修改”“时间时间轴轴”“录制层路径录制层路径”，在网页中拖动层，在网页中拖动层以创建路径。此时，时间轴上添加了相应以创建路径。此时，时间轴上添加了相应的动画条。的动画条。实例：制作花瓣飘舞的效果实例：制作花瓣飘舞的效果9.3 行为行为9.3.1 9.3.1 行为概述行为概述1 1、行为、行为 行为是行为是Dreamweaver MX 2004的程序开发人预置的的程序开发人预置的JaveScript程序库。程序库。以前网页设计者要设
23、计互动效果的网页必须学习以前网页设计者要设计互动效果的网页必须学习JavaScript脚步语言。现在有了脚步语言。现在有了Dreamweaver这个强大的网页设这个强大的网页设计工具，不用写一句代码就可以创建互动式网页。计工具，不用写一句代码就可以创建互动式网页。那些不具那些不具备编程基础和经验的网站制作人员为网页添加动态特效。每备编程基础和经验的网站制作人员为网页添加动态特效。每个行为包括一个动作和一个事件。任何一个动作都需要一个个行为包括一个动作和一个事件。任何一个动作都需要一个事件激活，两者相辅相成。动作是一段已编辑好的事件激活，两者相辅相成。动作是一段已编辑好的JavaScript代码
24、，这些代码的特定事件被激发时执行。代码，这些代码的特定事件被激发时执行。行为是事件和动行为是事件和动作的组合，浏览器响应用户的动作产生事件。作的组合，浏览器响应用户的动作产生事件。图 9-3 行为面板2、行为面板 使用行为面板能够为对象添加行为或修改已有的行为。对同一个对象可以添加多个动作，如果同一事件有多个动作，动作将按执行的顺序进行排列。执行【窗口】【行为】命令打开行为面板，如图9-3所示。图 9-4 动作菜单3、动作 动作是由预先编写的JavaScript代码组成的，这些代码能够执行某种特定的任务，如弹出信息，打开浏览器窗口等。单击行为面板中的按钮，弹出如图9-4所示的内置动作（灰色显示
25、的动作表示作用对象不可用或所选的【显示事件】项中浏览器版本较低）。u交换图像：交换图像：“交换图像交换图像”动作通过更改动作通过更改img标签的标签的src属性将一个图像和另一个属性将一个图像和另一个图像进行交换。图像进行交换。u弹出消息：弹出消息：“弹出消息弹出消息”动作显示一个带有指定消息的动作显示一个带有指定消息的 JavaScript 警告。警告。u恢复图像交换：恢复图像交换：“恢复交换图像恢复交换图像”动作将最后一组交换的图像恢复为它们以前动作将最后一组交换的图像恢复为它们以前的源的源文件。文件。u打开浏览器窗口：使用打开浏览器窗口：使用“打开浏览器窗口打开浏览器窗口”动作在一个新的
26、窗口中打开动作在一个新的窗口中打开URL。u拖动层：拖动层：“拖动层拖动层”动作允许访问者拖动层。动作允许访问者拖动层。u控制控制 Shockwave 或或 Flash：使用：使用“控制控制 Shockwave 或或 Flash”动作来播放、停止、动作来播放、停止、倒带或转到倒带或转到 Macromedia Shockwave 或或 Macromedia Flash SWF 文件中的帧。文件中的帧。u播放声音：使用播放声音：使用“播放声音播放声音”动作来播放声音。动作来播放声音。u改变属性：使用改变属性：使用“改变属性改变属性”动作更改对象某个属性（例如层的背景颜色或表动作更改对象某个属性（例
27、如层的背景颜色或表单的动作）的值。单的动作）的值。u时间轴：使用时间轴：使用“时间轴时间轴”动作可以停止时间轴、播放时间轴、转到时间轴帧。动作可以停止时间轴、播放时间轴、转到时间轴帧。u显示隐藏层：显示隐藏层：“显示隐藏层显示隐藏层”动作显示、隐藏或恢复一个或多个层的默认动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。可见性。此动作用于在用户与页进行交互时显示信息。u显示弹出菜单：使用显示弹出菜单：使用“显示弹出菜单显示弹出菜单”行为来创建或编辑行为来创建或编辑 Dreamweaver 弹出式弹出式菜单，或者打开并修改已插入菜单，或者打开并修改已插入 Dr
28、eamweaver 文档的文档的 Fireworks 弹出式菜单。弹出式菜单。u检查插件：使用检查插件：使用“检查插件检查插件”动作根据访问者是否安装了指定的插件这一情况动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页。将他们转到不同的页。u检查浏览器：使用检查浏览器：使用“检查浏览器检查浏览器”动作可根据访问者不同类型和版本的浏览器动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。将他们转到不同的页。u检查表单：检查表单：“检查表单检查表单”动作检查指定文本域的内容以确保用户输入动作检查指定文本域的内容以确保用户输入了正确的数据类型。了正确的数据类型。u设置导航条图像：使
29、用设置导航条图像：使用“设置导航条图像设置导航条图像”动作将某个图像变为导航动作将某个图像变为导航条图像，或更改导航条中图像的显示和动作。条图像，或更改导航条中图像的显示和动作。u设置文本：包括以下几项：设置文本：包括以下几项：（1）设置框架文本：）设置框架文本：“设置框架文本设置框架文本”动作允许读者动态设置框架的文本，用动作允许读者动态设置框架的文本，用读者指定的内容替换框架的内容和格式设置。读者指定的内容替换框架的内容和格式设置。（2）设置层文本：）设置层文本：“设置层文本设置层文本”动作用读者指定的内容替换页上现有层的内动作用读者指定的内容替换页上现有层的内容和格式设置。该内容可以包括
30、任何有效的容和格式设置。该内容可以包括任何有效的 HTML 源代码。源代码。（3）设置状态栏文本：）设置状态栏文本：“设置状态栏文本设置状态栏文本”动作在浏览器窗口底部左侧的状态动作在浏览器窗口底部左侧的状态栏中显示消息。栏中显示消息。（4）设置文本域文本：）设置文本域文本：“设置文本域文本设置文本域文本”动作用读者指定的内容替换表单文动作用读者指定的内容替换表单文本域的内容。本域的内容。u调用调用 JavaScript：“调用调用 JavaScript”动作允许读者使用动作允许读者使用“行为行为”面板指定当发面板指定当发生某个事件时应该执行的自定义函数或生某个事件时应该执行的自定义函数或 J
31、avaScript 代码行。代码行。u跳转菜单：创建一个菜单对象并向其附加一个跳转菜单：创建一个菜单对象并向其附加一个“跳转菜单跳转菜单”（或（或“跳转菜单跳转菜单转到转到”）行为。）行为。u转到转到 URL：“转到转到 URL”动作在当前窗口或指定的框架中打开一个新页。动作在当前窗口或指定的框架中打开一个新页。u预先载入图像：预先载入图像：“预先载入图像预先载入图像”动作将不会立即出现在页上的图像载入浏动作将不会立即出现在页上的图像载入浏览器缓存中。览器缓存中。4 4、事件、事件事件是浏览器生成的消息，用于表明浏览器用户执行了某种操作。事件是浏览器生成的消息，用于表明浏览器用户执行了某种操作
32、。Dreamweaver提供了许多常用的能够触发的动作的事件：提供了许多常用的能够触发的动作的事件：uonAbort：当浏览器用户中断浏览器正在载入图像的操作时产生。：当浏览器用户中断浏览器正在载入图像的操作时产生。uonAfterUpdate：当网页中的数据元素已经完成源数据的更新时产生该事件。：当网页中的数据元素已经完成源数据的更新时产生该事件。uonBeforeUpdate：当网页中的数据元素已经改变并且就要和浏览器用户失去交互：当网页中的数据元素已经改变并且就要和浏览器用户失去交互时产生该事件。时产生该事件。uonBlur：当指定元素不再被浏览器用户交互时产生。：当指定元素不再被浏览器
33、用户交互时产生。uonBounce：当字幕（：当字幕（Marquee）中的内容移动到该字幕边界时产生。）中的内容移动到该字幕边界时产生。uonChange：当浏览器用户改变网页中的某个值时产生。：当浏览器用户改变网页中的某个值时产生。uonClick：当浏览器用户在指定的元素上单击时产生。：当浏览器用户在指定的元素上单击时产生。uonDblClick：当浏览器用户在指定的元素上双击时产生。：当浏览器用户在指定的元素上双击时产生。uonError：当浏览器在网页或图像载入产生错误时产生。：当浏览器在网页或图像载入产生错误时产生。uonFinish：当字幕（：当字幕（Marquee）中的内容完成一
34、次循环时产生。）中的内容完成一次循环时产生。onFocus：当指定：当指定元素被浏览器用户交互时产生。元素被浏览器用户交互时产生。uonHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时产生。产生。uonKeyDown：当按下任意键的同时产生。：当按下任意键的同时产生。uonKeyPress：当按下和松开任意键时产生。：当按下和松开任意键时产生。uonKeyUp：当按下的键松开时产生。：当按下的键松开时产生。uonLoad：当一图像或网页载入完成时产生。：当一图像或网页载入完成时产生。uonMouseDown
35、：当浏览器用户按下鼠标时产生。：当浏览器用户按下鼠标时产生。uonMouseMove：当浏览器用户将鼠标在指定元素上移动时产生。：当浏览器用户将鼠标在指定元素上移动时产生。uonMouseOut：当鼠标从指定元素上移开时产生。：当鼠标从指定元素上移开时产生。uonMouseOver：当鼠标移动到指定元素时产生。：当鼠标移动到指定元素时产生。uonMouseUp：当鼠标弹起时产生。：当鼠标弹起时产生。uonMove：当窗体或框架移动时产生。：当窗体或框架移动时产生。uonReadyStateChange：当指定元素的状态改变时产生。：当指定元素的状态改变时产生。uonReset：当表单内容被重新
36、设置为缺省值时产生。：当表单内容被重新设置为缺省值时产生。uonResize：当浏览器用户调整浏览器或框架大小时产生。：当浏览器用户调整浏览器或框架大小时产生。uonRowEnter：当数据源的当前记录指针已经改变时产生。：当数据源的当前记录指针已经改变时产生。uonRowExit：当数据源的当前记录指针将要改变时产生。：当数据源的当前记录指针将要改变时产生。uonScroll：当浏览器用户使用滚动条向上或向下滚动时产生。：当浏览器用户使用滚动条向上或向下滚动时产生。uonSelect：当浏览器用户选择文本框中的文本时产生。：当浏览器用户选择文本框中的文本时产生。uonStart：当字幕（：当
37、字幕（Marquee）内容开始循环时产生。）内容开始循环时产生。uonSubmit：当浏览器用户提交表格时产生。：当浏览器用户提交表格时产生。uonUnload：当浏览器用户离开网页时产生。：当浏览器用户离开网页时产生。9.3.2 Dreamweaver预定义行为预定义行为 Dreamweaver MX 2004默认安装有20多种预定义行为，适当地在网页种添加行为，可以起到事半功倍，锦上添花的效果。例如可以通过拖动层行为制作的网络拼图游戏，为网页插入背景音乐，制作具有弹出菜单功能的导航栏等等。用户还可以在Macromedia官方网站上下载Macromedia公司开发的行为插件，例如时间轴行为插
38、件。1、添加弹出信息、添加弹出信息 弹弹出出信信息息动动作作用用于于弹弹出出一一个个显显示示指指定定消消息息的的JavaScript警警告告框框。由由于于JavaScript警警告告框框只只有有一一个个按按钮钮，所所以以使使用用这这个个动动作作只只是是提提供供信信息息，而而不不允允许许用用户户选选择择。一一般般常常用用的的弹弹出出信信息息有有两两种种：一一种种是是打打开开网网页页就就自自动动弹弹出出信信息息对对话话框框，例例如如，打打开开商商业业网网站站时时弹弹出出的的广广告告或或者者公公告告信信息息，一一种种是是通通过过单单击击对对象象弹出信息对话框。弹出信息对话框。步步骤骤：选选择择对对象
39、象打打开开“行行为为”面面板板单单击击“添添加加行行为为”按按钮钮选选择择“弹弹出出信信息息”命命令令打打开开“弹弹出出信信息息”对对话话框框，在在“消消息息”文文本本框框中中所所要要提提示示信信息息单击单击“确定确定”按钮。按钮。操作例子如下：操作例子如下：（1）选择按钮，在弹出菜单中执行）选择按钮，在弹出菜单中执行【弹出信息弹出信息】命令，打开命令，打开“弹出信息弹出信息”对话框，如图对话框，如图9-5所示。所示。图 9-5“弹出信息”对话框（2）在“弹出信息”对话框的消息文本框中输入文字“欢迎光临本站！”。（3）在行为面板中把事件改为“onLoad”。（4）保存，按快捷键【F12】预览，
40、当加载网页时，触发“onLoad”事件，弹出一个信息框，如图9-6所示。图 9-6 弹出信息效果因为本例触发的是“onLoad”事件，所以省去了【选择对象】这个步骤。2、交换图像、交换图像 “交换图像交换图像”动作通过更改动作通过更改 img 标签的标签的 src 属性将一个属性将一个图像和另一个图像进行交换。使用此动作创建按钮鼠标经图像和另一个图像进行交换。使用此动作创建按钮鼠标经过图像和其它图像效果。插入鼠标经过图像会自动将一个过图像和其它图像效果。插入鼠标经过图像会自动将一个“交换图像交换图像”行为添加到您的页中。行为添加到您的页中。注意：应该换入一个与原图像具有相同尺寸（高度和宽注意：
41、应该换入一个与原图像具有相同尺寸（高度和宽度）的图像。否则，换入的图像显示时会被压缩或扩展，度）的图像。否则，换入的图像显示时会被压缩或扩展，以使其适应原图像的尺寸。以使其适应原图像的尺寸。步骤：步骤：u选择选择插入插入图像图像或单击或单击插入插入栏的栏的图像图像按钮来插入一个图像。按钮来插入一个图像。u选择一个对象（通常是您将交换的图像）并打开选择一个对象（通常是您将交换的图像）并打开行为行为面板。面板。u单击加号单击加号(+)按钮并从按钮并从动作动作弹出菜单中选择弹出菜单中选择交换图像交换图像。u从从图像图像列表中，选择要更改其源的图像。列表中，选择要更改其源的图像。u单击单击浏览浏览选择
42、新图像文件，或在选择新图像文件，或在设定源文件为设定源文件为文本框中输入新文本框中输入新图像的路径和文件名。图像的路径和文件名。u单击单击确定确定。3、打开浏览器窗口、打开浏览器窗口 通通常常在在制制作作网网页页时时链链接接的的目目标标需需要要有有另另弹弹窗窗口口的的效效果果，而而弹弹出出来来的的默默认认窗窗口口千千篇篇一一律律，很很难难吸吸引引浏浏览览者者。在在本本例例中中可可以以不不让让你你看看见见任任何何代代码码就就能能轻轻松松实实现现这这样样的的个个性性化化窗窗口。口。步骤：步骤：u选择一个对象，并打开选择一个对象，并打开行为行为面板。面板。u单击加号单击加号(+)按钮并从按钮并从“动
43、作动作”弹出菜单中选择弹出菜单中选择“打开浏览器窗口打开浏览器窗口。u单击单击“浏览浏览”选择新图像文件，选择打开的链接窗口文件。选择新图像文件，选择打开的链接窗口文件。u设置弹出窗口大小等属性。设置弹出窗口大小等属性。u单击单击确定确定。4、显示弹出式菜单、显示弹出式菜单 使用使用“显示弹出式菜单显示弹出式菜单”行为来创建或编辑行为来创建或编辑 Dreamweaver 弹出式菜单，弹出式菜单，或者打开并修改已插入或者打开并修改已插入 Dreamweaver 文档的文档的 Fireworks 弹出式菜单。通过在弹出式菜单。通过在“显示弹出式菜单显示弹出式菜单”对话框中设置选项来创建水平或垂直弹
44、出式菜单。您对话框中设置选项来创建水平或垂直弹出式菜单。您可以使用此对话框来设置或修改弹出式菜单的颜色、文本和位置。可以使用此对话框来设置或修改弹出式菜单的颜色、文本和位置。若要查看文档中的弹出式菜单，您必须在浏览器窗口中打开该文档，若要查看文档中的弹出式菜单，您必须在浏览器窗口中打开该文档，然后将鼠标指针滑过触发图像或链接。然后将鼠标指针滑过触发图像或链接。步骤：步骤：u选择要附加该行为的对象并打开选择要附加该行为的对象并打开“行为行为”面板面板 (Shift+F3)(Shift+F3)。u单击加号单击加号 (+)(+)按钮并从按钮并从“动作动作”弹出式菜单中选择弹出式菜单中选择“显示弹出式菜单显示弹出式菜单”。u在出现的在出现的“显示弹出式菜单显示弹出式菜单”对话框中，使用以下标签来设置弹出式菜单的选项：对话框中，使用以下标签来设置弹出式菜单的选项：内容内容允许您设置单个菜单项的名称、结构、允许您设置单个菜单项的名称、结构、URL URL 和目标。和目标。外观外观使您能够设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体使您能够设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体选择。选择。高级高级允许您设置菜单单元格的属性。允许您设置菜单单元格的属性。位置位置允许您设置菜单相对于触发图像或链接的放置位置。允许您设置菜单相对于触发图像或链接的放置位置。