《《网页设计与制作》-邬锦霞-电子教案 第11章 行为》由会员分享，可在线阅读，更多相关《《网页设计与制作》-邬锦霞-电子教案 第11章 行为（79页珍藏版）》请在金锄头文库上搜索。
1、第11章,行 为,本章导读,本章主要介绍了行为的相关知识：第一节首先介绍了行为的基本组成部分（事件和动作）；第二节介绍如何通过行为面板使用编辑行为；第三节介绍了Dreamweaver内置的行为以及其应用实例。,本章要点,事件和动作 使用行为 编辑行为事件 内置行为的应用实例,11.1 行为的概述,行为是Macromedia预置的JavaScript程序库，它是事件和动作的组合。事件是动作被触发的结果，而动作是用于完成特殊任务的预先编好的JavaScript代码，如打开浏览器，点击按钮等。,11.1.1 认识事件,事实上，事件是浏览器生成的消息，用于指示该页的浏览者执行了某种操作，例如，当浏览者
2、将鼠标指针移到某个链接时，浏览器为该链接生成一个onMouseOver事件，然后浏览器查看是否存在为该链接生成事件时浏览器应该调用的JavaSript代码。不同的网页元素定义了不同的事件。,下面根据用途分类介绍Dreamweaver 8提供的常用的事件种类,有关窗口的事件 OnAbort在浏览器中停止了加载网页文档的操作时发生的事件 OnMove移动窗口或者帧时发生的事件 Onload选定的对象出现在浏览器上时发生的事件 OnResize访问者改变窗口大小时发生的事件OnUnload访问者退出网页文档时发生的事件,有关鼠标和键盘的事件,OnClick用鼠标单击选定元素的一瞬间发生的事件OnBl
3、ur鼠标指针移到窗口或帧外部，即在这种非激活状态下发生的事件 OnDragDrop拖动并放置选定元素的那一瞬间发生的事件 OnFocus鼠标指针移动到窗口或帧上，即激活之后发生的事件OnMouseOut鼠标指针经过选定元素之外时发生的事件OnMouseOver鼠标指针位于选定元素上方时发生的事件OnMouseUp单击鼠标右键，然后释放时发生的事件,OnScroll访问者在浏览器上移动滚动条的时候发生的事件OnKeyDown在键盘上按下任意键时发生的事件 OnKeyPress在键盘上按下并释放任意键时发生的事件 OnKeyUp在键盘上按下特定键并释放时发生的事件 OnMouseDown单击鼠标右
4、键的一瞬间发生的事件 OnMouseMove鼠标指针经过选定元素上方时发生的事件,有关表单的事件,OnAfterUpdate更新表单文档的内容时发生的事件 OnBeforeUpdate改变表单文档的项目时发生的事件 OnChange访问者修改表单文件的初始值时发生的事件 OnReset将表单文件重设置为初始值时发生的事件 OnSubnit访问者传送表单文档时发生的事件OnSelect访问者选定文件字段中的内容时发生的事件,其他事件,OnError在加载文档的过程中，发生错误时发生的事件 OnFilterChange运用于选定元素的字段发生变化时发生的事件 Onfinish Marquee用功能
5、来显示的内容结束时发生的事件 OnStart Marquee开始应用功能时发生的事件,11.1.2 动作类型,所谓动作就是设定更换图片、弹出警告信息框等特殊的JavaSript效果。动作在设定的事件发生时运行。,下面是Dreamweaver 8中默认提供的动作类型,调用JavaSript-发生指定事件时，调用特定的JavaSript函数 改变属性-更改选定的客体属性 检查浏览器-根据访问者的浏览器显示合适的网页文档检查插件-确认打开网页时需要的插件的安装情况 控制Shockwave或Flash-控制Flash动画的效果 拖动层-设定在浏览器中可以自由移动的层 转到URL-发生指定事件时，跳转到
6、指定的网站或者网页 隐藏弹出式菜单-隐藏Dreamweaver中制作的弹出菜单 跳转菜单-制作可以一次设定多个链接的跳转菜单 跳转菜单开始-在跳转菜单中选择要要跳转到的网站后，只有单击GO按钮时才会跳转到所链接的网站,打开浏览器窗口-显示新的弹出窗口 播放声音-发生指定事件时，播放链接的音乐 弹出信息-发生指定事件时，显示弹出信息 预先载入图像-为了在浏览器中快速显示图像，预先下载图像后再显示设置 导航栏图像-用图像制作构成菜单的导航条 设置框架文本-在选定的框架中显示指定的内容 设置层文本-在选定的图层中显示指定的内容,设置状态栏文本-在状态栏中显示指定的内容 设置文本域文本-在文本域中显示
7、指定的文字显示弹出式菜单-在Dreamweaver中制作所需样式的弹出菜单 显示隐藏层-根据指定的条件，显示或隐藏特定的层 交换图像-发生指定事件时，把选定的图像替换为其他图像 恢复交换图像-应用“交换图像”后，显示原图像 检查表单-检查表单文档的有效性,11.2 行为面板,在Dreamweaver 8中，用户可以通过使用【行为】面板来附加和编辑行为。选择菜单命令【窗口】行为】或者使用ShiftF4快捷键即可打开【行为】控制面板,图中各代号的名称和功能如下：,（1）显示设置事件按钮将显示当前元素已经附加到当前文档的事件 （2）显示所有事件按钮将显示当前元素所有可能事件，一般来说，浏览器的版本越
8、高，可支持的事件就越多 （3）添加行为按钮单击该按钮将弹出一个活动菜单 （4）删除事件按钮用于在行为列表中删除所选的事件和动作 （5）增加事件值按钮用于在行为列表中向上移动所选的事件 （6）降低事件值按钮用于在行为列表中向下移动所选的事件,11.2.1 使用行为,要使用行为功能，首先要打开【行为】面板，选择网页中要添加行为的元素（如果选择行为元素，系统一般会默认为整个网页文档），然后单击【行为】面板中“添加行为”按钮，在弹出的动作菜单中选择要使用的行为即可。,选择下图2所示菜单中的“显示事件”选项，在弹出的下一级菜单中可以选择浏览器的版本。不同的浏览器版本对应可以使用的行为的项目，以及该项目中
9、可以触发的事件的数目也不同，一般来说，版本越高，可以使用的功能就越多，但是相对的兼容性就越差。网页是要面向大多数浏览者的，所以作为一个设计者，必须考虑到浏览者之间可能存在的不同的上网条件，因此为了能够得到更好的兼容性，浏览器的版本不要设得太高。如下图3,图2：,图3：,11.2.2 编辑行为事件,在创建了行为以后，可以为行为选择一个合适的事件，或者直接删除动作。若要编辑事件，首先要选择一个有附加行为的对象，然后执行菜单栏中的【窗口行为】命令，打开【行为】面板，在【行为】面板中进行操作。 若要编辑行为事件，可以单击“事件”按钮，然后单击下三角按钮，在弹出的下拉列表中选取“事件”，如图4所示。,图
10、4,如果要编辑事件参数，可以双击事件后的参数，并在弹出的对话框中进行编辑后，单击“确定”按钮，如图5所示。,图5：,如果要删除某个事件，可以单击该事件后，在【行为】面板中单击【删除事件】按钮即可，如图6所示。,图6：,11.3 内置行为,在网页中选择某一个页面元素，即可通过【行为】面板添加行为，如果弹出的动画为灰色，说明当前的文档中不存在所需要的对象。对每一个行为所产生的动作，按要求进行相关设置，然后再进行调整，直至满意，下面结合实例说明主要行为的应用。,11.3.1 弹出信息,“弹出信息”动作显示一个带有读者指定消息的JavaScript警告，因为JavaScript警告只有一个“确定”按钮
11、，所以使用此动作可以提供信息，而不能为浏览者提供选择，并且读者无法控制JavaScript警告的外观，它取决于浏览者的浏览器，具体操作步骤如下： （1）在Dreamweaver 8中打开要附加“弹出信息”动作的网页，并且将光标放入到页面中。 （2）单击行为面板中的添加按钮，并从弹出菜单中选择“弹出信息”，弹出“弹出信息”对话框，并填入要显示的信息，如图7所示。,图7：,（3）单击【确定】按钮完成设置。因为光标是在页面上，而不是在页面的对象上，因此行为附加的对象是整个文档，行为面板列表中会出现一项对整个文档附加的行为，事件可以设置为onLoad，表示载入网页时触发弹出消息框，如图8所示。 （4）
12、保存网页并浏览，在网页打开的同时弹出的警告消息框，如图9所示。,图8：,图9：,11.3.2 打开浏览窗口,使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，同时用户还可以指定新窗口的属性，包括大小、特性和名称。如果不指定新窗口的任何属性，在打开时它的大小和属性将与启动它的窗口相同，为新窗口指定的任何属性都将自动关闭其他所有未加指定的属性。下面结合实例介绍该行为的使用。 （1）选中要附加行为的对象，这里选择元素，打开“行为”面板。 （2）单击“添加行为”按钮，并从弹出的菜单中选择命令“打开浏览器窗口”，即弹出如图10所示的对话框。,图10：,（3）单击“浏览”按钮选择一个文件，或
13、者输入要显示的URL。 （4）在“窗口宽度”和“窗口高度”文本框中输入新窗口的宽度和高度值，单位是像素。 （5）在“属性”区域中可以设置新窗口是否显示相应的元素，选中该复选框则显示该元素，清除该复选框则不显示该元素。各复选框具体含义如下：,导航工具栏：包括“前进”和“后退”等按钮的工具栏； 地址工具栏：帮助用户输入地址或进行链接的工具栏； 状态栏：位于浏览器窗口底部的区域，根据操作的不同，在该区域显示相应的提示信息； 菜单条：在浏览器窗口上显示菜单的区域。如果要让用户能够从新窗口导航，应该选中此项，否则在新窗口中，用户只能关闭或最小化窗口； 需要时使用滚动条：指定如果内容超出可视区域是否显示滚
14、动条，如果不选择此项，则不显示滚动条，如果“调整大小手柄”选项也关闭，则访问者将无法看到超出窗口原始大小以外的内容； 调整大小手柄：指定是否能够调整窗口的大小，如果未选定此项，则新窗口将无法改变大小，也无法拖动其边框改变大小； 窗口名称：指定新窗口的名称。如果想通过JavaScript使用链接指向新窗口或者控制新窗口，则应该对新窗口进行命名，此名称不能包含空格或特殊字符。,（6）单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。 （7）保存后并浏览页面，可以看到打开本网页时，同时打开一个新的浏览器窗口，如图11所示。,图11：,11.3.3 播放声音,使用“播放声音”动作可
15、以实现播放声音，例如当鼠标经过某个按钮时产生声音效果，或者在网页载入时播放音乐片段等，具体的操作步骤如下： （1）选中要附加行为的对象，这里选择元素，打开行为面板。 （2）单击“添加行为”按钮，并从弹出的菜单中选择菜单命令“播放声音”，弹出如图12所示的“播放声音”对话框。,图12：,（3）单击“浏览”按钮，从本地磁盘中选择要播放的声音文件，或者在“播放声音”文本框中输入要播放的声音文件的路径和名称。 （4）单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。 （5）保存后按F12浏览该网页，可以看到打开网页时，同时开始播放该音乐文件。,11.3.4 显示与隐藏层,使用“显示
16、隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。这个动作在显示用户与网页之间的交互信息时非常有用。例如，当用户将鼠标移到一张图片时，可以触发显示一个层，此层用来描述该图片的相关信息。当鼠标离开该对象时再次隐藏该层，从而实现非常生动的动态网页效果，具体操作步骤如下： （1）选择菜单命令【插入】图像】，在文档中插入一张图片，如图13所示。,图13：,（2）选择菜单命令【插入布局对象层】，在文档中通过拖动来绘制一个层，并在层内输入文字“桂林山水甲天下！”，如图14所示。,图14：,（3）单击插入的图像，并打开【行为】面板。 （4）单击“添加行为”按钮，并从动作弹出菜单中选择“显示隐藏层”，弹出如图15所示的对话框。,图15：,（5）在“命名的层”列表中选择要更改其可见性的层，这里选择“层Layer1”。 （6）单击“显示”按钮以显示该层；单击“隐藏”按钮以隐藏该层；单击“默认”按钮以恢复
