网页设计基础教程与上机指导使用行为

1、网页设计基础教程与上机指导使用行为n教学提示：行为由对象、事件和动作构成。行为是用来动态响教学提示：行为由对象、事件和动作构成。行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。应用户操作、改变当前页面效果或执行特定任务的一种方法。Dreamweaver 8中自带的行为多种多样、功能强大，它可以中自带的行为多种多样、功能强大，它可以让用户不用编写让用户不用编写JavaScript代码即可实现多种动态页面效果。代码即可实现多种动态页面效果。n教学目标：教学目标： 熟悉行为概述熟悉行为概述 熟悉行为的面板熟悉行为的面板 掌握行为动作和事件掌握行为动作和事件 掌握使用掌握使用Dr

2、eamweaver自带的行为自带的行为nDreamweaver 8中的行为是一系列中的行为是一系列JavaScript程程序的集成，通过行为使得网页制作人员不用编程而序的集成，通过行为使得网页制作人员不用编程而实现动态效果。行为包括两部分的内容，一个部分实现动态效果。行为包括两部分的内容，一个部分是事件，另一个部分是动作。动作是特定的是事件，另一个部分是动作。动作是特定的JavaScript程序，只要在事件发生后，该程序就会程序，只要在事件发生后，该程序就会自动运行；行为是事件和该事件所触发的动作的结自动运行；行为是事件和该事件所触发的动作的结合，在合，在Dreamweaver中主要通过【行为

3、】面板来中主要通过【行为】面板来控制行为的使用。控制行为的使用。 n11.1.1 行为面板行为面板n11.1.2 动作动作n11.1.3 事件事件nDreamweaver 8提供了丰富的内置行为，这些行为利提供了丰富的内置行为，这些行为利用简单直观的语句设置，无需需要编写任何代码就可以用简单直观的语句设置，无需需要编写任何代码就可以实现一些强大的交互性和控制功能。实现一些强大的交互性和控制功能。n【行为】面板的作用是为网页元素添加动作和事件，使【行为】面板的作用是为网页元素添加动作和事件，使网页具有互动的效果，在介绍【行为】面板前先了解一网页具有互动的效果，在介绍【行为】面板前先了解一下三个词

4、语：事件、动作和行为。下三个词语：事件、动作和行为。事件：是浏览器对每一个网页元素的响应途径，与具体的网页对事件：是浏览器对每一个网页元素的响应途径，与具体的网页对象相关。象相关。动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务。动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务。如播放声音、打开浏览器窗口、弹出菜单等。如播放声音、打开浏览器窗口、弹出菜单等。行为：实质上是事件和动作的合成体。行为：实质上是事件和动作的合成体。n选择【窗口】选择【窗口】|【行为】命令，打开【行为】面板，如【行为】命令，打开【行为】面板，如图图11.1所示。在该面板中包含以下四种按钮：所示。在该面板中包

5、含以下四种按钮：【添加行为】：在该下拉菜单中选择其中的命令，会弹出一个对【添加行为】：在该下拉菜单中选择其中的命令，会弹出一个对话框，在对话框中设置选定动作或事件的各个参数。如果弹出的话框，在对话框中设置选定动作或事件的各个参数。如果弹出的菜单中所有选项都为灰色，则表示不能对所选择的对象添加动作菜单中所有选项都为灰色，则表示不能对所选择的对象添加动作或事件。或事件。【删除事件】：删除列表中所选的事件和动作。【删除事件】：删除列表中所选的事件和动作。【增加事件值】按钮：向上移动所选的事件和动作。【增加事件值】按钮：向上移动所选的事件和动作。【降低事件值】按钮：向下移动所选的事件和动作。【降低事件

6、值】按钮：向下移动所选的事件和动作。 还可以按 Shift+F3 组合键，打开【行为】面板。 提 示 n动作是最终产生的动态效果，动态效果可以是播放声音、交换图像、弹出提示信息、自动关闭网页等。动作是最终产生的动态效果，动态效果可以是播放声音、交换图像、弹出提示信息、自动关闭网页等。下面是下面是Dreamweaver中默认提供的动作的种类。并且以实例为中心详细说明利用各种动作可以得到中默认提供的动作的种类。并且以实例为中心详细说明利用各种动作可以得到的实际效果。的实际效果。调用调用JavaScript：调用：调用JavaScript特定函数。特定函数。改变属性：改变选定客体的属性。改变属性：改

7、变选定客体的属性。检查浏览器：根据访问者的浏览器版本，显示适当的页面。检查浏览器：根据访问者的浏览器版本，显示适当的页面。检查插件：确认是否设有运行网页的插件。检查插件：确认是否设有运行网页的插件。控制控制Shockwave或或Flash：控制影片的指定帧。：控制影片的指定帧。拖动层：允许在浏览器中自由拖动层。拖动层：允许在浏览器中自由拖动层。转到转到URL：可以转到特定的站点或者网页文档上。：可以转到特定的站点或者网页文档上。隐藏弹出式菜单：隐藏在隐藏弹出式菜单：隐藏在Dreamweaver上制作的弹出窗口。上制作的弹出窗口。跳转菜单：可以建立若干个链接的跳转菜单。跳转菜单：可以建立若干个链

8、接的跳转菜单。跳转菜单开始：在跳转菜单中选定要移动的站点之后，只有单击跳转菜单开始：在跳转菜单中选定要移动的站点之后，只有单击GO按钮才可以移动到链接的站点上。按钮才可以移动到链接的站点上。打开浏览器窗口：在新窗口中打开打开浏览器窗口：在新窗口中打开URL。播放声音：在设置的事件发生之后，播放链接的音乐。播放声音：在设置的事件发生之后，播放链接的音乐。弹出消息：在设置的事件发生之后，显示警告信息。弹出消息：在设置的事件发生之后，显示警告信息。预先载入图像：为了在浏览器中快速显示图片，事先下载图片之后显示出来。预先载入图像：为了在浏览器中快速显示图片，事先下载图片之后显示出来。设置导航栏图像：制

9、作由图片组成的菜单的导航条。设置导航栏图像：制作由图片组成的菜单的导航条。设置框架文本：在选定帧上显示指定内容。设置框架文本：在选定帧上显示指定内容。设置层文本：在选定层上显示指定内容。设置层文本：在选定层上显示指定内容。设置状态栏文本：在状态栏中显示指定内容。设置状态栏文本：在状态栏中显示指定内容。设置文本域文字：在文本字段区域显示指定内容。设置文本域文字：在文本字段区域显示指定内容。显示弹出式菜单：显示弹出菜单。显示弹出式菜单：显示弹出菜单。显示显示-隐藏层：显示或隐藏特定层。隐藏层：显示或隐藏特定层。交换图像：发生设置的事件后，用其他图片来取代选定图片。交换图像：发生设置的事件后，用其他

10、图片来取代选定图片。恢复交换图像：在运用交换图像动作之后，显示原来的图片。恢复交换图像：在运用交换图像动作之后，显示原来的图片。时间轴：用来控制时间轴，可以播放、停止动画。时间轴：用来控制时间轴，可以播放、停止动画。检查表单：检查表单文档在有效性的时候才能使用。检查表单：检查表单文档在有效性的时候才能使用。 n事件用于指定选定行为动作在何种情况下的发生。例如想应用单击图像时跳转到制定网站的行为，则事件用于指定选定行为动作在何种情况下的发生。例如想应用单击图像时跳转到制定网站的行为，则需要把事件指定为单击事件需要把事件指定为单击事件onClick。下面根据使用用途分类介绍。下面根据使用用途分类介

11、绍Dreamweaver中提供的事件种类。中提供的事件种类。onAbort：在浏览器中停止加载网页文档的操作时发生的事件：在浏览器中停止加载网页文档的操作时发生的事件onMOVE：移动窗口或框架时发生的事件：移动窗口或框架时发生的事件onLoad：选定的对象出现在浏览器上时发生的事件：选定的对象出现在浏览器上时发生的事件onResize：访问者改变窗口或框架的大小时发生的事件：访问者改变窗口或框架的大小时发生的事件onUnLoad：访问者退出网页文档时发生的事件：访问者退出网页文档时发生的事件onClick：用鼠标单击选定要素时发生的事件：用鼠标单击选定要素时发生的事件onBlur：鼠标移动到

12、窗口或框架外侧时等非激活状态时发生的事件：鼠标移动到窗口或框架外侧时等非激活状态时发生的事件onDragDrop：拖动选定要素后放开时发生的事件：拖动选定要素后放开时发生的事件onDragStart：拖动选定要素时发生的事件：拖动选定要素时发生的事件onFocus：鼠标到窗口或框架中处于激活状态时发生的事件：鼠标到窗口或框架中处于激活状态时发生的事件on MouseDown：单击鼠标左键时发生的事件：单击鼠标左键时发生的事件onMouseMove：鼠标经过选定要素上面时发生的事件：鼠标经过选定要素上面时发生的事件onMouseOut：鼠标离开选定要素上面时发生的事件：鼠标离开选定要素上面时发生

13、的事件onMouseOver：鼠标在选定要素上面时发生的事件：鼠标在选定要素上面时发生的事件onMouseUp：放开按住的鼠标左键时发生的事件：放开按住的鼠标左键时发生的事件onScroll：访问者在浏览器中移动了滚动条时发生的事件：访问者在浏览器中移动了滚动条时发生的事件onKeyDown：键盘上某个按键被按下时触发事件：键盘上某个按键被按下时触发事件onKeyPress：键盘上的某个按键被按下又释放时触发事件：键盘上的某个按键被按下又释放时触发事件onKeyUp：放开按下的键盘中的指定键时发生的事件：放开按下的键盘中的指定键时发生的事件onAfterUpdate：表单文档的内容被更新时发生

14、的事件：表单文档的内容被更新时发生的事件onBeforeUpdate：表单文档的项目发生变化时发生的事件：表单文档的项目发生变化时发生的事件onChange：访问者更改表单文档的初始设定值时发生的事件：访问者更改表单文档的初始设定值时发生的事件onReset：把表单文档重新设定为初始值时发生的事件：把表单文档重新设定为初始值时发生的事件onSubmit：访问者传送表单文档时发生的事件：访问者传送表单文档时发生的事件onSelect：访问者选择文本区域中的内容时发生的事件：访问者选择文本区域中的内容时发生的事件onError：加载网页文档的过程中发生错误时发生的事件：加载网页文档的过程中发生错误

15、时发生的事件onFilterChange：应用到选定要素上的滤镜被更改时发生的事件：应用到选定要素上的滤镜被更改时发生的事件onFinish：结束移动文字：结束移动文字(Marquee)时发生的事件时发生的事件onStart：开始移动文字：开始移动文字(Marquee)时发生的事件时发生的事件n行为是指能够简单运用制作动态网页的行为是指能够简单运用制作动态网页的JavaScript的功能，的功能，它提高了网站的可交互性。它提高了网站的可交互性。Dreamweaver 8插入客户端行插入客户端行为，实际上是为，实际上是Dreamweaver 8自动给网页添加了一些自动给网页添加了一些JavaSc

16、ript代码，这些代码能实现动感网页效果。代码，这些代码能实现动感网页效果。 n11.2.1 弹出信息弹出信息n11.2.2 显示弹出式菜单显示弹出式菜单n11.2.3 打开浏览器窗口打开浏览器窗口n11.2.4 检查浏览器检查浏览器n11.2.5 设置状态栏文本设置状态栏文本n11.2.6 检查表单检查表单n11.2.7 控制控制Shockwave或或Flashn11.2.8 转到转到URLn【弹出消息】显示一个带有指定消息的【弹出消息】显示一个带有指定消息的JavaScript警告，因为警告，因为JavaScript警告只有一个按钮，所以使用此动作可以提供信息，而不能警告只有一个按钮，所以

17、使用此动作可以提供信息，而不能为用户提供选择，具体操作步骤如下。为用户提供选择，具体操作步骤如下。 (1)打开网页文档。打开网页文档。 (2)选择【窗口】选择【窗口】|【行为】命令，打开【行为】面板。【行为】命令，打开【行为】面板。 (3)在【行为】面板中单击【添加】按钮，在弹出菜单中选择【弹出在【行为】面板中单击【添加】按钮，在弹出菜单中选择【弹出信息】命令，打开【弹出信息】对话框，在对话框中的【消息】文信息】命令，打开【弹出信息】对话框，在对话框中的【消息】文本框中输入本框中输入“欢迎光临我们的网站欢迎光临我们的网站”，单击【确定】按钮即可添加，单击【确定】按钮即可添加行为，如图行为，如图

18、11.3所示所示 。 (4)保存文档，按保存文档，按F12键在浏览器中预览效果。键在浏览器中预览效果。n可以通过【显示弹出式菜单】对话框中的设置来创可以通过【显示弹出式菜单】对话框中的设置来创建水平或垂直弹出式菜单，还可以使用此对话框来建水平或垂直弹出式菜单，还可以使用此对话框来设置或修改弹出式菜单的颜色、文本和位置等各种设置或修改弹出式菜单的颜色、文本和位置等各种属性。属性。 n使用打开浏览器窗口动作在打开当前网页的同时，还可以再打开一个新窗口，同时还可以使用打开浏览器窗口动作在打开当前网页的同时，还可以再打开一个新窗口，同时还可以根据动作来编辑浏览窗口的大小、名称、状态栏和菜单栏等属性。根

19、据动作来编辑浏览窗口的大小、名称、状态栏和菜单栏等属性。n在【打开浏览器窗口】对话框中可以进行如下设置。在【打开浏览器窗口】对话框中可以进行如下设置。【要显示的【要显示的URL】：单击【浏览】选择一个文件，或输入要显示的】：单击【浏览】选择一个文件，或输入要显示的 URL。【窗口宽度】：指定窗口的宽度【窗口宽度】：指定窗口的宽度(以像素为单位以像素为单位)。【窗口高度】：指定窗口的高度【窗口高度】：指定窗口的高度(以像素为单位以像素为单位)。【导航工具栏】：是一行浏览器按钮【导航工具栏】：是一行浏览器按钮(包括【后退】、【前进】、【主页】和【新载入】包括【后退】、【前进】、【主页】和【新载入】

20、)。【地址工具栏】：是一行浏览器选项【地址工具栏】：是一行浏览器选项(包括地址文本框包括地址文本框)。【状态栏】：是位于浏览器窗口底部的区域，在该区域中显示消息。【状态栏】：是位于浏览器窗口底部的区域，在该区域中显示消息。【菜单条】：是浏览器窗口上显示菜单。如果要让访问者能够从新窗口导航，应该显式设置此选【菜单条】：是浏览器窗口上显示菜单。如果要让访问者能够从新窗口导航，应该显式设置此选项。如果不设置此选项，则在新窗口中用户只能关闭或最小化窗口。项。如果不设置此选项，则在新窗口中用户只能关闭或最小化窗口。【需要时显示滚动条】：指定如果内容超出可视区域应该显示滚动条。如果不显示设置此选项，【需要

21、时显示滚动条】：指定如果内容超出可视区域应该显示滚动条。如果不显示设置此选项，则不显示滚动条。如果【调整大小手柄】选项也关闭，则访问者将不容易看到超出窗口原始大小则不显示滚动条。如果【调整大小手柄】选项也关闭，则访问者将不容易看到超出窗口原始大小以外的内容。以外的内容。【调整大小手柄】：指定用户应该能够调整窗口的大小，方法是拖动窗口的右下角或单击右上角【调整大小手柄】：指定用户应该能够调整窗口的大小，方法是拖动窗口的右下角或单击右上角的最大化按钮。如果未显式设置此选项，则调整大小控件将不可用，右下角也不能拖动。的最大化按钮。如果未显式设置此选项，则调整大小控件将不可用，右下角也不能拖动。【窗口

22、名称】：输入窗口的名称，此名称不能包含空格或特殊字符。【窗口名称】：输入窗口的名称，此名称不能包含空格或特殊字符。n使用【检查浏览器】行为可根据访问者不同类型和版本的浏览器将它们转到不同的页面。使用【检查浏览器】行为可根据访问者不同类型和版本的浏览器将它们转到不同的页面。例如，可能想要将使用例如，可能想要将使用Netscape Navigator 4.0或更高版本浏览器的访问者转到一页，或更高版本浏览器的访问者转到一页，而将使用而将使用Internet Explorer 4.0或更高版本的访问者转到另一页，并让使用任何其他类或更高版本的访问者转到另一页，并让使用任何其他类型浏览器的访问者留在当

23、前网页上。型浏览器的访问者留在当前网页上。n在【检查浏览器】对话框中可以进行如下设置。在【检查浏览器】对话框中可以进行如下设置。n指定一个指定一个Netscape Navigator版本。在右边的下拉列表中，选择选项以指定如果浏览器版本。在右边的下拉列表中，选择选项以指定如果浏览器是指定的是指定的Netscape Navigator版本或更高版本时应该进行何种操作，如果是其他情况时版本或更高版本时应该进行何种操作，如果是其他情况时又应该进行何种操作。又应该进行何种操作。n指定一个指定一个Internet Explorer版本。在右边的下拉列表中，选择选项以指定如果浏览器是版本。在右边的下拉列表

24、中，选择选项以指定如果浏览器是指定的指定的Internet Explorer版本或更高版本时应该进行何种操作，如果是其他情况时又应版本或更高版本时应该进行何种操作，如果是其他情况时又应该进行何种操作。该进行何种操作。n从【其他浏览器】下拉列表中选择一个选项，以指定如果浏览器既不是从【其他浏览器】下拉列表中选择一个选项，以指定如果浏览器既不是Netscape Navigator也不是也不是Internet Explorer时应该进行何种操作。时应该进行何种操作。n在对话框底部的文本框中输入在对话框底部的文本框中输入URL和替代和替代URL的路径和文件名。如果输入一个远程的路径和文件名。如果输入一

25、个远程URL，除了输入除了输入WWW地址之外还必须输入地址之外还必须输入 :/前缀。前缀。 n设置状态栏文本用于设置状态栏显示的信息，设置状态栏文本用于设置状态栏显示的信息，当适当的触发事件触发后在状态栏中显示信当适当的触发事件触发后在状态栏中显示信息，设置状态栏文本动作作用与弹出信息动息，设置状态栏文本动作作用与弹出信息动作很相似，不同的是如果使用消息框来显示作很相似，不同的是如果使用消息框来显示文本，访问者必须单击【确定】按钮才可以文本，访问者必须单击【确定】按钮才可以继续浏览网页中的内容。而在状态栏中显示继续浏览网页中的内容。而在状态栏中显示的文本信息不会影响访问者的浏览速度。的文本信息

26、不会影响访问者的浏览速度。 n【可接受】选项组内共有以下几【可接受】选项组内共有以下几类参数。类参数。 【任何东西】：如果该文本域是【任何东西】：如果该文本域是必需的但不需要包含任何特定类必需的但不需要包含任何特定类型的数据，则使用【任何东西】。型的数据，则使用【任何东西】。 【电子邮件地址】：使用【电子【电子邮件地址】：使用【电子邮件地址】检查该域是否包含一邮件地址】检查该域是否包含一个个符号。符号。 【数字】：使用【数字】检查该【数字】：使用【数字】检查该文本域是否只包含数字。文本域是否只包含数字。 【数字从】：使用【数字从】检【数字从】：使用【数字从】检查该文本域是否包含特定范围内查该文

27、本域是否包含特定范围内的数字。的数字。n使用控制【使用控制【Shockwave或或Flash】动作来播放、停止、倒带或转到】动作来播放、停止、倒带或转到Macromedia Shockwave或或Macromedia Flash影片中的帧，具体操作步骤如下。影片中的帧，具体操作步骤如下。(1) 打开网页文档，选择【插入】打开网页文档，选择【插入】|【媒体】【媒体】|【Flash】命令，插入】命令，插入Flash影片。影片。(2) 选择插入的选择插入的Flash影片，选择【窗口】影片，选择【窗口】|【属性】命令，打开【属性】面板，在最【属性】命令，打开【属性】面板，在最左边的文本框中输入影片的名称左边的文本框中输入影片的名称baihe，若要用【控制，若要用【控制Flash】动作对影片进行控制，】动作对影片进行控制，必须对该影片进行命名。必须对该影片进行命名。(3) 单击【行为】面板中的按钮，在弹出菜单中选择【控制单击【行为】面板中的按钮，在弹出菜单中选择【控制Shockwave或或Flash】选】选项，弹出【控制项，弹出【控制Shockwave