DreamweaverCS3中文版实例教程 11 使用行为.ppt

第11章使用行为本章简介：本章简介：Dreamweaver Dreamweaver CS3CS3的的行行为为是是将将内内置置的的 JavaScript JavaScript 代代码码放放置置在在文文档档中中，以以实实现现Web Web 页页的的动动态态效效果果。下下面面从从如如何何使使用用行行为为并并为为其其应应用用相相应应的的事事件件来来讨讨论论如如何何实实现现网页动态的、交互的效果。网页动态的、交互的效果。课堂学习目标行为行为动作动作11.1行为行为行为事件事件“行为行为”控制面板控制面板应用行为应用行为11.1.1行为 无论是直接编写代码还是添加无论是直接编写代码还是添加Dreamweaver CS3Dreamweaver CS3行为，行为，都要求用户了解行为、事件驱动和都要求用户了解行为、事件驱动和VbscriptVbscript的基础知识。只的基础知识。只有掌握了这些基本知识和原理，才能随心所欲地设计、制作有掌握了这些基本知识和原理，才能随心所欲地设计、制作出具有友好的交互界面和吸引用户的网页。出具有友好的交互界面和吸引用户的网页。行为可理解成在网页中选择的一系列动作，以实现用行为可理解成在网页中选择的一系列动作，以实现用户与网页间的交互。行为代码是户与网页间的交互。行为代码是Dreamweaver CS3Dreamweaver CS3提供的内提供的内置代码，运行于客户端的浏览器中。置代码，运行于客户端的浏览器中。11.1.2事件 事件是附加在浏览器中元素上的特殊过程，每个浏览器都事件是附加在浏览器中元素上的特殊过程，每个浏览器都提供一组事件。事件可以与单击提供一组事件。事件可以与单击“行为行为”控制面板的控制面板的“添加行为添加行为”按钮后弹出的菜单中列出的动作相关联。实际上，事件是浏览按钮后弹出的菜单中列出的动作相关联。实际上，事件是浏览器生成的消息，以通知计算机该网页的访问者选择了某种操作。器生成的消息，以通知计算机该网页的访问者选择了某种操作。当某个事情发生时，系统有一个事件处理机制会自动选择事件过当某个事情发生时，系统有一个事件处理机制会自动选择事件过程中的行为代码。程中的行为代码。11.1.3“行为”控制面板 用户习惯于使用用户习惯于使用“行为行为”控制面板为网页元素指定动作控制面板为网页元素指定动作和事件。在文档窗口中，选择和事件。在文档窗口中，选择“窗口窗口 行为行为”命令，启用命令，启用“行为行为”控制面板。控制面板。“行为行为”控制面板的组成控制面板的组成修改浏览器版本修改浏览器版本“行为”控制面板11.1.4应用行为 通常情况下，选择某网页元素，然后在通常情况下，选择某网页元素，然后在“行为行为”控制面板中控制面板中选择一个动作，再将它与一个事件关联，行为便附加到页面元素选择一个动作，再将它与一个事件关联，行为便附加到页面元素上。行为运行于浏览器中，而不是服务器上。一个事件可以选择上。行为运行于浏览器中，而不是服务器上。一个事件可以选择多个动作，在实际运作中，系统根据设置的次序逐次选择动作。多个动作，在实际运作中，系统根据设置的次序逐次选择动作。将行为附加到网页元素上将行为附加到网页元素上将行为附加到文本上将行为附加到文本上11.2动作课堂案例课堂案例快乐儿童玩具网快乐儿童玩具网调用调用 JavaScriptJavaScript打开浏览器窗口打开浏览器窗口转到转到 URLURL播放声音播放声音课堂案例课堂案例魅力前沿魅力前沿控制控制ShockwaveShockwave或或FlashFlash检查浏览器检查浏览器检查插件检查插件检查表单检查表单设置导航栏图像设置导航栏图像交换图像交换图像课堂案例课堂案例公告栏界面公告栏界面显示隐藏层显示隐藏层拖动层拖动层设置容器的文本设置容器的文本设置状态栏文本设置状态栏文本设置文本域文字设置文本域文字设置框架文本设置框架文本跳转菜单跳转菜单跳转菜单开始跳转菜单开始11.2.1课堂案例快乐儿童玩具网使用使用“打开浏览器窗口打开浏览器窗口”命令制作在网页中显示指定大小的弹出命令制作在网页中显示指定大小的弹出窗口。窗口。效果图11.2.2调用 JavaScript “调用调用 JavaScriptJavaScript”动作的功能是当发生某个事件时选择自动作的功能是当发生某个事件时选择自定义函数或定义函数或 JavaScriptJavaScript代码行。代码行。使用使用“调用调用 JavaScriptJavaScript”动作的具体操作步骤如下。动作的具体操作步骤如下。（1 1）选择一个网页元素对象，如）选择一个网页元素对象，如“刷新刷新”按钮。启用按钮。启用“行为行为”控制面板。控制面板。（2 2）在）在“行为行为”控制面板中，单击控制面板中，单击“添加行为添加行为”按钮按钮 ，从，从弹出的菜单中选择弹出的菜单中选择“调用调用 JavaScriptJavaScript”动作，弹出动作，弹出“调用调用 JavaScriptJavaScript”对话框，在文本框中输入对话框，在文本框中输入JavaScript JavaScript 代码或用户想代码或用户想要触发的函数名，单击要触发的函数名，单击“确定确定”按钮完成设置。按钮完成设置。（3 3）如果不是默认事件，则单击该事件，会出现箭头按钮，）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件选择相应的事件（4 4）按）按键浏览网页，当单击键浏览网页，当单击“关闭关闭”按钮时，用户可以按钮时，用户可以看到效果。看到效果。11.2.3打开浏览器窗口 “打开浏览器窗口打开浏览器窗口”动作的功能是在一个新的窗口中打开指动作的功能是在一个新的窗口中打开指定网页。此行为可以指定新窗口的属性、特性和名称，是否可以定网页。此行为可以指定新窗口的属性、特性和名称，是否可以调整窗口大小、是否具有菜单栏等。调整窗口大小、是否具有菜单栏等。11.2.4转到 URL “转到转到URLURL”动作的功能是在当前窗口或指定的框架中打开一动作的功能是在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击操作更改两个或多个框个新页。此操作尤其适用于通过一次单击操作更改两个或多个框架的内容。架的内容。使用使用“转到转到URLURL”动作的具体操作步骤如下。动作的具体操作步骤如下。（1 1）选择一个网页元素对象并启用）选择一个网页元素对象并启用“行为行为”控制面板。控制面板。（2 2）单击）单击“添加行为添加行为”按钮，并从弹出的菜单中选择按钮，并从弹出的菜单中选择“转到转到URLURL”动作，弹出动作，弹出“转到转到URLURL”对话框，在对话框中根据需要设置对话框，在对话框中根据需要设置相应选项，单击相应选项，单击“确定确定”按钮完成设置。按钮完成设置。（3 3）如果不是默认事件，则单击该事件，会出现箭头按钮，）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。选择相应的事件。（4 4）按）按键浏览网页。键浏览网页。11.2.5播放声音 “播放声音播放声音”动作的功能是在完全加载网页后播放声音或当动作的功能是在完全加载网页后播放声音或当鼠标指针对某个网页元素操作时播放声音。鼠标指针对某个网页元素操作时播放声音。使用使用“播放声音播放声音”动作的具体操作步骤如下。动作的具体操作步骤如下。（1 1）选择一个网页元素对象并启用）选择一个网页元素对象并启用“行为行为”控制面板。控制面板。（2 2）在）在“行为行为”控制面板中单击控制面板中单击“添加行为添加行为”按钮，并从弹按钮，并从弹出的菜单中选择出的菜单中选择“播放声音播放声音”动作，弹出动作，弹出“播放声音播放声音”对话框，对话框，在对话框的在对话框的“播放声音播放声音”选项中设置声音文件的路径和文件名，选项中设置声音文件的路径和文件名，单击单击“确定确定”按钮完成设置。按钮完成设置。（3 3）如果不是默认事件，则单击该事件，会出现箭头按钮，）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。选择相应的事件。（4 4）按）按键浏览网页。键浏览网页。11.2.6课堂案例魅力前沿应用行为设置浏览器并设置图像的预先载入。应用行为设置浏览器并设置图像的预先载入。效果图11.2.7控制Shockwave或Flash ShockwaveShockwave电影是电影是AdobeAdobe公司开发的网上交互多媒体的标准，是公司开发的网上交互多媒体的标准，是用用DirectorDirector软件创建的交互式多媒体文件，能快速地下载并能被大软件创建的交互式多媒体文件，能快速地下载并能被大多流行浏览器播放。当用户插入一个多流行浏览器播放。当用户插入一个ShockwaveShockwave电影时，电影时，Dreamweaver CS3Dreamweaver CS3将同时使用将同时使用objectobject标签和标签和embedembed标签，以便在所有标签，以便在所有的浏览器类型中获得最佳的效果。的浏览器类型中获得最佳的效果。“控制控制 Shockwave Shockwave 或或 FlashFlash”动作的功能是播放、停止、后退动作的功能是播放、停止、后退或转到或转到 Adobe Shockwave Adobe Shockwave 或或 Adobe Flash SWF Adobe Flash SWF 文件中的帧。文件中的帧。11.2.8检查浏览器 “检查浏览器检查浏览器”动作的功能是根据访问者浏览器类型和版本的动作的功能是根据访问者浏览器类型和版本的不同将它们转到不同的页。例如，使用不同将它们转到不同的页。例如，使用IE 4.0IE 4.0浏览器浏览的用户访浏览器浏览的用户访问一个网页，使用问一个网页，使用Netscape Navigator 4.0Netscape Navigator 4.0浏览器浏览的用户访问浏览器浏览的用户访问另一个网页。另一个网页。11.2.9检查插件 “检查插件检查插件”动作的功能是根据用户是否安装了指定的插件动作的功能是根据用户是否安装了指定的插件这一情况，将它们转到不同的页。这一情况，将它们转到不同的页。（1 1）选择一个网页元素对象并启用）选择一个网页元素对象并启用“行为行为”控制面板。控制面板。（2 2）在）在“行为行为”控制面板中单击控制面板中单击“添加行为添加行为”按钮，并从弹按钮，并从弹出的菜单中选择出的菜单中选择“检查插件检查插件”动作，弹出动作，弹出“检查插件检查插件”对话框，对话框，在对话框中根据需要设置相应选项，单击在对话框中根据需要设置相应选项，单击“确定确定”按钮完成设置。按钮完成设置。（3 3）如果不是默认事件，则单击该事件，会出现箭头按钮，）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。选择相应的事件。（4 4）按）按键浏览网页。键浏览网页。11.2.10检查表单 “检查表单检查表单”动作的功能是检查指定文本域的内容以确保用动作的功能是检查指定文本域的内容以确保用户输入了正确的数据类型。若使用户输入了正确的数据类型。若使用 onBluronBlur 事件将事件将“检查表单检查表单”动作分别附加到各文本域，则在用户填写表单时对域进行检查。动作分别附加到各文本域，则在用户填写表单时对域进行检查。若使用若使用 onSubmitonSubmit 事件将事件将“检查表单检查表单”动作附加到表单，则在用动作附加到表单，则在用户单击户单击“提交提交”按钮时，同时对多个文本域进行检查。将按钮时，同时对多个文本域进行检查。将“检查检查表单表单”动作附加到表单，能防止将表单中任何指定文本域内的无动作附加到表单，能防止将表单中任何指定文本域内的无效数据提交到服务器。效数据提交到服务器。11.2.11设置导航栏图像 “设置导航栏图像设置导航栏图像”动作的功能是将某个图像设置为导航栏动作的功能是将某个图像设置为导航栏图像，当单击导航栏按钮时显示的图像，当单击导航栏按钮时显示的 URLURL所指网页。所指网页。使用使用“设置导航栏图像设置导航栏图像”动作的具体操作步骤如下。动作的具体操作步骤如下。（1 1）在文档窗口选择图像并启用）在文档窗口选择图像并启用“行为行为”控制面板。控制面板。（2 2）在）在“行为行为”控制面板中单击控制面板中单击“添加行为添加行为”按钮，并从弹按钮，并从弹出的菜单中选择出的菜单中选择“设置导航栏图像设置导航栏图像”动作，弹出动作，弹出“设置导航栏图设置导航栏图像像”对话框，在对话框中根据需要设置相应选项，单击对话框，在对话框中根据需要设置相应选项，单击“确定确定”按钮完成设置。按钮完成设置。（3 3）如果不是默认事件，则单击该事件，会出现箭头按钮，）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要单击箭头按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。选择相应的事件。（4 4）按）按键浏览网页。键浏览网页。11.2.12交换图像 “交换图像交换图像”动作通过更改动作通过更改 标签的标签的 srcsrc 属性将一个图属性将一个图像和另一个图像进行交换。像和另一个图像进行交换。“交换图像交换图像”动作主要用于创建当鼠动作主要用于创建当鼠标指针经过时产生动态变化的按钮。标指针经过时产生动态变化的按钮。11.2.13课堂案例公告栏界面 使用使用“设置容器的文本设置容器的文本”命令制作把图层的内容更改为其他内容命令制作把图层的内容更改为其他内容效果。使用效果。使用“设置状态栏文本设置状态栏文本”命令设置状态栏文本效果。命令设置状态栏文本效果。效果图11.2.14显示隐藏层 “显示显示-隐藏层隐藏层”动作的功能是显示、隐藏或恢复一个或多个动作的功能是显示、隐藏或恢复一个或多个层的默认可见性。利用此动作可制作下拉菜单等特殊效果。层的默认可见性。利用此动作可制作下拉菜单等特殊效果。11.2.15拖动层 “拖动层拖动层”动作的功能是允许访问者的拖曳层操作，使用此动作的功能是允许访问者的拖曳层操作，使用此动作可以创建拼板游戏、滑块控件和其他可移动的界面元素。此动作可以创建拼板游戏、滑块控件和其他可移动的界面元素。此动作可以指定浏览者拖曳层的方向（水平、垂直或任意方向），动作可以指定浏览者拖曳层的方向（水平、垂直或任意方向），将层拖曳到的目标，层在距目标一定数目的像素范围内是否靠齐将层拖曳到的目标，层在距目标一定数目的像素范围内是否靠齐到目标，当层接触到目标时应该选择的操作等。到目标，当层接触到目标时应该选择的操作等。11.2.16设置容器的文本 “设置容器的文本设置容器的文本”动作的功能是用指定的内容替换网页上现动作的功能是用指定的内容替换网页上现有层的内容和格式。该内容可以包括任何有效的有层的内容和格式。该内容可以包括任何有效的HTMLHTML源代码。源代码。虽然虽然“设置容器的文本设置容器的文本”将替换层的内容和格式设置，但保留将替换层的内容和格式设置，但保留层的属性，包括颜色。通过在层的属性，包括颜色。通过在“设置容器的文本设置容器的文本”对话框的对话框的“新建新建 HTMLHTML”选项的文本框中包括选项的文本框中包括 HTML HTML 标签，可对内容进行格式设置。标签，可对内容进行格式设置。11.2.17设置状态栏文本 “设置状态栏文本设置状态栏文本”动作的功能是设置在浏览器窗口底部左侧动作的功能是设置在浏览器窗口底部左侧的状态栏中显示的消息。访问者常常会忽略或注意不到状态栏中的的状态栏中显示的消息。访问者常常会忽略或注意不到状态栏中的消息，如果消息非常重要，还是考虑将其显示为弹出式消息或层文消息，如果消息非常重要，还是考虑将其显示为弹出式消息或层文本。可以在文本中嵌入任何有效的本。可以在文本中嵌入任何有效的 JavaScript JavaScript 函数调用、属性、函数调用、属性、全局变量或其他表达式。若要嵌入一个全局变量或其他表达式。若要嵌入一个 JavaScript JavaScript 表达式，需将表达式，需将其放置在大括号其放置在大括号 ()()中。中。11.2.18设置文本域文字 “设置文本域文字设置文本域文字”动作的功能是用指定的内容替换表单文本动作的功能是用指定的内容替换表单文本域的内容。可以在文本中嵌入任何有效的域的内容。可以在文本中嵌入任何有效的 JavaScript JavaScript 函数调用、函数调用、属性、全局变量或其他表达式。若要嵌入一个属性、全局变量或其他表达式。若要嵌入一个 JavaScript JavaScript 表达式，表达式，将其放置在大括号将其放置在大括号 ()()中。若要显示大括号，在它前面加一个反中。若要显示大括号，在它前面加一个反斜杠（斜杠（）。）。11.2.19设置框架文本 “设置框架文本设置框架文本”动作的功能是用指定的内容替换框架的内容动作的功能是用指定的内容替换框架的内容和格式设置。该内容可以是文本，也可以是嵌入任何有效的放置在和格式设置。该内容可以是文本，也可以是嵌入任何有效的放置在大括号大括号 ()()中的中的JavaScript JavaScript 表达式，如表达式，如JavaScript JavaScript 函数调用、函数调用、属性、全局变量或其他表达式。属性、全局变量或其他表达式。11.2.20跳转菜单当使用当使用“插入插入 表单表单 跳转菜单跳转菜单”命令创建跳转菜单时，命令创建跳转菜单时，Dreamweaver CS3Dreamweaver CS3会创建一个菜单对象并向其附加一个会创建一个菜单对象并向其附加一个“跳转菜单跳转菜单”或或“跳转菜单转到跳转菜单转到”行为。通常不需要手动将行为。通常不需要手动将“跳转菜单跳转菜单”动作附动作附加到对象上，但若要修改现有的跳转菜单，则需要使用加到对象上，但若要修改现有的跳转菜单，则需要使用“跳转菜单跳转菜单”行为。因此，行为。因此，“行为行为”控制面板中的控制面板中的“跳转菜单跳转菜单”行为的作用是行为的作用是修改现有的跳转菜单，即编辑和重新排列菜单项、更改要跳转到的修改现有的跳转菜单，即编辑和重新排列菜单项、更改要跳转到的文件、以及更改这些文件打开的窗口。文件、以及更改这些文件打开的窗口。11.2.21跳转菜单开始“跳转菜单开始跳转菜单开始”动作与动作与“跳转菜单跳转菜单”动作密切关联。动作密切关联。“跳转跳转菜单开始菜单开始”将一个将一个“前往前往”按钮和一个跳转菜单关联起来，单击按钮和一个跳转菜单关联起来，单击“前往前往”按钮打开在该跳转菜单中选择的链接。通常情况下，跳转菜按钮打开在该跳转菜单中选择的链接。通常情况下，跳转菜单不需要一个单不需要一个“前往前往”按钮。但是如果跳转菜单出现在一个框架中，按钮。但是如果跳转菜单出现在一个框架中，而跳转菜单项链接到其他框架中的页，则通常需要使用而跳转菜单项链接到其他框架中的页，则通常需要使用“前往前往”按按钮，以允许访问者重新选择已在跳转菜单中选择的项。钮，以允许访问者重新选择已在跳转菜单中选择的项。11.3课堂练习健康饮食网页 使用使用“设置状态栏文本设置状态栏文本”命令制作在浏览器窗口左下角的状态命令制作在浏览器窗口左下角的状态栏中显示的消息。栏中显示的消息。效果图11.4课堂练习相机宝贝世界使用使用“显示显示-隐藏元素隐藏元素”命令制作鼠标指针经过图像显示图像命令制作鼠标指针经过图像显示图像效果。效果。效果图11.5课后习题结界社区 使用使用“拖动拖动AP DivAP Div”命令移动图像效果。使用命令移动图像效果。使用“检果表单检果表单”命命令制作检查表单。令制作检查表单。效果图