《Dreamweaver 8案例教程》课件第11章

本章学习目标行为和事件简介11.1使用Dreamweaver8内置行为11.211.1行为和事件简介

Dreamweaver8提供了一种称为“Behavior”（行为）的机制，帮助您构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互。利用Dreamweaver8的行为，您不需要书写一行代码，就可以实现丰富的动态页面效果，达到用户与页面的交互。11.1.1行为一个行为是由事件和动作组成的。事件是动作被触发的结果，而动作是用于完成特殊任务的预先编好的Javascript代码，诸如打开一个浏览器窗口，播放声音等。当对一个页面元素使用行为时，您可以指定动作和所触发的事件。在Dreamweaver8中已经提供了一些确定的动作，您可以把它们应用在页面元素中。11.1.2事件每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+)弹出式菜单中列出的动作相关联。当Web页的访问者与页进行交互时（例如单击某个图像），浏览器生成事件；这些事件可用于调用引起动作发生的JavaScript函数。没有用户交互也可以生成事件，例如设置页每10秒钟自动重新载入。Dreamweaver8提供许多可以使用这些事件触发的常用动作。返回11.2使用Dreamweaver8内置行为Dreamweaver8自带的行为动作是为在NetscapeNavigator4.0和更高版本以及InternetExplorer4.0和更高版本中使用而编写的。其中大多数行为动作也可用于NetscapeNavigator版本3.0和更高版本。（与层相关的行为在Navigator3.0中不起作用。）其中大多数行为动作在InternetExplorer3.0版本中运行时也会偶尔发生问题。注意：Dreamweaver8动作是经过精心编写的，以便在尽可能多的浏览器中发挥作用。如果您从Dreamweaver8动作中手工删除代码，或用您自己的代码将其替换，则可能会失去跨浏览器兼容性。11.2.1弹出消息“弹出消息”动作显示一个带有您指定的消息的JavaScript警告。因为JavaScript警告只有一个按钮（“确定”），所以使用此动作可以提供信息，而不能为用户提供选择。您可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号({})中。若要显示大括号，请在它前面加一个反斜杠(\{)。11.2.2设置文本1、设置框架文本“设置框架文本”动作允许您动态设置框架的文本，用您指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的HTML代码。使用此动作动态显示信息。虽然“设置框架文本”动作将替换框架的格式设置，但您可以选择“保留背景颜色”以保留页背景和文本颜色属性。您可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号({})中。若要显示大括号，请在它前面加一个反斜杠(\{)。11.2.2设置文本2、设置层文本“设置层文本”动作用您指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。虽然“设置层文本”将替换层的内容和格式设置，但保留层的属性，包括颜色。通过在“设置层文本”对话框的“新建HTML”文本框中包括HTML标签，可对内容进行格式设置。您可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号({})中。若要显示大括号，请在它前面加一个反斜杠(\{)。11.2.2设置文本3、设置状态栏文本“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示消息。例如，您可以使用此动作在状态栏中说明链接的目标而不是显示与之关联的URL。若要查看状态消息的示例，请将您的鼠标滑过“使用Dreamweaver”。访问者常常会忽略或注意不到状态栏中的消息（而且并不是所有的浏览器都提供设置状态栏文本的完全支持）；如果您的消息非常重要，请考虑将其显示为弹出式消息或层文本。您可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号({})中。若要显示大括号，请在它前面加一个反斜杠(\{)。11.2.2设置文本4、设置文本域文本“设置文本域文本”动作用您指定的内容替换表单文本域的内容。您可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其它表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号({})中。若要显示大括号，请在它前面加一个反斜杠(\{)。11.2.3改变属性使用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。您可以更改的属性是由浏览器决定的；在InternetExplorer4.0中可以通过此行为更改的属性比InternetExplorer3.0或NetscapeNavigator3.0或4.0多得多。例如，您可以动态设置层的背景颜色。注意：只有在您非常熟悉HTML和JavaScript的情况下才使用此动作。11.2.4检查浏览器使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。例如，您可能想要将使用NetscapeNavigator4.0或更高版本浏览器的访问者转到一页，而将使用InternetExplorer4.0或更高版本的访问者转到另一页，并让使用任何其它类型浏览器的访问者留在当前页上。将此行为附加到几乎与任何浏览器都兼容的页（该页不使用任何其它JavaScript）的body标签将十分有用；这样，已关闭JavaScript功能的访问者在访问此页时仍可以看到内容。另一个办法是将此行为附加到一个空链接（例如<ahref="javascript:;">）并让该动作根据访问者浏览器的类型和版本确定链接的目标。11.2.5调用JavaScript“调用JavaScript”动作允许您使用“行为”面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行。（您可以自己编写JavaScript或使用Web上多个免费的JavaScript库中提供的代码。）11.2案例1充满行为的页面（1）11.2.6打开浏览器窗口使用“打开浏览器窗口”动作在一个新的窗口中打开URL。您可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，您可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像；使用此行为，您可以使新窗口与该图像恰好一样大。如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未显式打开的属性。例如，如果您不为窗口设置任何属性，它将以640x480像素的大小打开并具有导航条、地址工具栏、状态栏和菜单栏。如果您将宽度显式设置为640、将高度设置为480并不设置其它属性，则该窗口将以640x480像素的大小打开，并且不具有任何导航条、地址工具栏、状态栏、菜单栏、调整大小手柄和滚动条。11.2.7播放声音使用“播放声音”动作来播放声音。例如，您可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。注意：浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同。很难准确地预测出站点的访问者对您提供的声音感受如何。11.2.8设置导航条图像使用“设置导航条图像”动作将某个图像变为导航条图像，或更改导航条中图像的显示和动作。使用“设置导航条图像”对话框的“基本”标签创建或更新导航条图像或图像组、更改当单击导航条按钮时显示的URL，以及选择在其中显示URL的其它窗口。使用“设置导航条图像”对话框的“高级”选项卡根据当前按钮的状态更改文档中其它图像的状态。默认情况下，单击导航条中的一个元素将使导航条中的所有其它元素自动返回到它们的一般状态；如果您想将某个图像在所选图像处于按下状态或滑过状态时设置为不同的状态，则使用“高级”标签。11.2.9预先载入图像“预先载入图像”动作将不会立即出现在页上的图像（例如那些将通过行为或JavaScript换入的图像）载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致延迟。注意：“交换图像”动作自动预先载入当您在“交换图像”对话框中选择“预先载入图像”选项时所有高亮显示的图像，因此当使用“交换图像”时您不需要手动添加预先载入图像。11.2案例2充满行为的页面（2）11.2.10控制Shockwave或Flash使用“控制Shockwave或Flash”动作来播放、停止、倒带或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧。11.2案例3动感网页11.2.11显示－隐藏层“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。例如，当用户将鼠标指针滑过一个植物的图像时，您可以显示一个层给出有关该植物的生长季节和地区、需要多少阳光、可以长到多大等详细信息。“显示－隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失。11.2.12转到时间轴帧“转到时间轴帧”动作将播放头移动到指定的帧。您可以在“时间轴”面板的“行为”通道中使用此动作让时间轴的某一部分循环一定的次数、创建“倒带”链接或按钮，或者让用户跳到动画中的其他部分。11.2案例4极酷车展11.2.13拖动层“拖动层”动作允许访问者拖动层。使用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。您可以指定访问者可以向哪个方向拖动层（水平、垂直或任意方向），访问者应该将层拖动到的目标、如果层在目标一定数目的像素范围内是否将层靠齐到目标，当层接触到目标时应该执行的操作和其它更多的选项。因为在访问者可以拖动层之前必须先调用“拖动层”动作，所以请确保触发该动作的事件发生在访问者试图拖动层之前。最佳的方法是（使用onLoad事件）将“拖动层”附加到body对象上，不过您也可以使用onMouseOver事件将它附加到填满整个层的链接上（例如图像周围的链接）。11.2案例5拼图游戏11.2.14显示弹出式菜单使用“显示弹出菜单”行为来创建或编辑Dreamweaver8弹出式菜单，或者打开并修改已插入Dreamweaver8文档的Fireworks弹出式菜单。通过在“显示弹出菜单”对话框中设置选项来创建水平或垂直弹出菜单。您可以使用此对话框来设置或修改弹出菜单的颜色、文本和位置。注意：您必须使用Dreamweaver8属性检查器中的“编辑”按钮来编辑Fireworks基于图像的弹出菜单中的图像。但是，您可以使用“显示弹出菜单”命令来更改基于图像的弹出菜单中的文本。11.2案例6：制作弹出式菜单11.2.15转到URL“转到URL”动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。11.2.16检查表单“检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用onBlur事件将此动作分别附加到各文本域，在用户填写表单时对域进行检查；或使用onSubmit事件将其附加到表单，在用户单击“提交”按钮时同时对多个文本域进行检查。将此动作附加到表单防止表单提交到服务器后任何指定的文本域包含无效的数据。11.2.17检查插件使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页。例如，您可能想让安装有Shockwave的访问者转到一页，让未安装该软件的访问者转到另一页。注意：不能使用JavaScript在InternetExplorer中检测特定的插件。但是，选择Flash或Director会将相应的VBScript代码添加到您的页上，以便在Windows上的InternetExplorer中检测这些插件。Macintosh上的InternetExplorer中不能实现插件检测。11.2.18跳转菜单和跳转菜单转到当您使用“插入”>“表单对象”>“跳转菜单”创建跳转菜单时，Dreamweaver8创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。通常不需要手动将“跳转菜单”动作附加到对象。您可以通过以下两种方式中的任意一种编辑