项目十一行为-完善个人网页功能.ppt

网页设计与制作 老虎工作室 2012年12月 项目十一 行为完善个人网页功能 任务一 设置页眉中的行为 任务二 设置主体中的行为 实 训 制作弹出式菜单 行为是Dreamweaver中内置的脚本程序，这 些行为能够为网页添加许多功能，如弹出式菜单 、弹出信息、打开浏览器新窗口等。本项目以个 人网页为例，介绍使用行为完善网页功能的基本 方法。在项目中，首先设置页眉部分的状态栏文 本、弹出式菜单行为，然后设置主体部分的打开 浏览器窗口、交换图像、弹出信息以及控制 Shockwave或Flash等行为。 任务一 设置页眉中的行为 （一）设置状态栏文本 （二）制作弹出式菜单 （一）设置状态栏文本 需要掌握的内容主要有： 1、行为的概念 2、 【行为】面板 3、设置状态栏文本的方法 一个行为是由一个事件所触发的动作组成的 ，因此行为的基本元素有两个：事件和动作。事 件是浏览器产生的有效信息，也就是访问者对网 页所做的事情。例如，当访问者将鼠标光标移到 一个链接上，浏览器就会为这个链接产生一个 “onMouseOver”（鼠标经过）事件。然后，浏览 器会检查当事件为这个链接产生时，是否有一些 代码需要执行，如果有就执行这段代码，这就是 动作。 1、 行为的概念 在【行为】面板中添加了一个动作，也就有 了一个事件。当单击【行为】面板中事件名右边 的的向下箭头按钮时，会弹出所有可以触发动作 的【事件】菜单。这个菜单只有在一个事件被选 中的时候才可见。选择不同的动作，【事件】菜 单中会罗列出可以触发该动作的所有事件。不同 的动作，所支持的事件也不同。 2、【行为】面板 在【行为】面板中单击 按钮，打开行为 菜单，从中选择【设置文本】【设置状态栏文 本】命令，打开【设置状态栏文本】对话框，在 【消息】文本框中输入文本即可。 3、 设置状态栏文本的方法 （二）制作弹出式菜单 需要掌握的内容主要有： 1、常用事件 2、制作弹出式菜单的方法 【onFocus】：当指定的元素成为访问者交互的中心时 产生。例如，在一个文本区域中点击将产生一个【 onFocus】事件。 【onBlur】：【onFocus】事件的相反事件，该事件是指 当前指定元素不再是访问者交互的中心。例如，当访问者 在文本区域内点击后再在文本区域外点击，浏览器将为这 个文本区域产生一个【onBlur】事件。 【onChange】：当访问者改变页面的一个数值时产生。 例如，当访问者从菜单中选择一条内容或改变一个文本区 域的值，然后在页面的其他地方点击时，会产生一个【 OnChange】事件。 1、 常用事件 【onClick】：当访问者单击指定的元素时产生。单击直 到访问者释放鼠标按键时才完成，只要按下鼠标按键便会 令某些现象发生。 【onLoad】：当图像或页面结束载入时产生。 【onUnload】：当访问者离开页面时产生。 【onMouseMove】：当访问者指向一个特定元素并移动 鼠标时产生（指针停留在元素的边界以内）。 【onMouseDown】：当鼠标在特定元素上按下时产生该 事件。 【onMouseOut】：当指针从特定的元素（该特定元素 通常是一个图像或一个附加于图像的链接）移走时产生。 这个事件经常被用来和【恢复交换图像】（Swap Image Restore）动作关联，当访问者不再指向一个图像时，将 它返回到其初始状态。 【onMouseOver】：当鼠标首次指向特定元素时产生（ 指针从没有指向元素向指向元素移动），该特定元素通常 是一个链接。 【onSelect】：当访问者在一个文本区域内选择文本时产 生。 【onSubmit】：当访问者提交表格时产生。 （1）选中文本或图像，并为其添加空链接“#”。 （2）在【行为】面板中单击 按钮，在弹出的行为菜 单中选择【显示弹出式菜单】命令，打开【显示弹出式 菜单】对话框。 （3）设置【内容】选项卡。 2、制作弹出式菜单的方法 （4）设置【外观】选项卡。 （5）设置【高级】选项卡。 （6）设置【位置】选项卡。 任务二 设置主体中的行为 （一）打开浏览器窗口 （二）交换图像 （三）控制Shockwave或Flash （四）弹出信息 （一）打开浏览器窗口 需要掌握的内容主要有： 1、打开浏览器窗口的概念 2、设置打开浏览器窗口的方法 1、打开浏览器窗口的概念 使用【打开浏览器窗口】动作将打 开一个新的浏览器窗口，在其中显示所 指定的网页文档。 用户可以指定这个新窗口的属性， 包括尺寸、是否可以调节大小、是否有 菜单栏等。 2、设置打开浏览器窗口的方法 用鼠标选中文本或图像，然后在【行为】面板中单 击 按钮，从行为菜单中选择【打开浏览器窗口】命令 ，打开【打开浏览器窗口】对话框进行设置即可，最后 在【行为】面板中将事件设置为“onClick”。 需要掌握的内容主要有： 1、交换图像的概念 2、设置交换图像的方法 （二）交换图像 交换图像行为可以将一个图像替换为 另一个图像，这是通过改变图像的“src”属 性实现的。 可以使用交换图像行为来创建翻转的 按钮或其他图像效果。 1、交换图像的概念 在文档中选定图像，在【属性】面板中设置图像名 称。在【行为】面板中单击 按钮，从行为菜单中选择 【交换图像】命令，打开【交换图像】对话框进行设置 。 2、设置交换图像的方法 需要掌握的内容主要有： 1、控制Shockwave或Flash的概念 2、设置控制Shockwave或Flash的方法 （三）控制Shockwave或Flash 控制Shockwave或Flash行为可以 控制Shockwave动画或Flash动画的播 放、停止、重放或跳转到某一帧。 1、控制Shockwave或Flash的概念 （1）选定Flash动画，在【属性】面板为 其命名，并取消对【循环】和【自动播放 】两个复选框的勾选。 2、设置控制Shockwave或Flash的方法 （2）选定文本“播放”，并为其添加空链接。 （3）在行为菜单中选择【控制Shockwave或 Flash】命令，打开【控制Shockwave或Flash】 对话框。在【影片】列表中选择命名的影片，在 【操作】选项组中选择【播放】选项。 （4）在【行为】面板中确认事件为“onClick” 。 需要掌握的内容主要有： 1、弹出信息的概念 2、设置弹出信息的方法 3、播放声音 4、调用JavaScript （四）弹出信息 在浏览网页时，用户可以在预下载的 图像上单击鼠标右键，在弹出的快捷菜单 中选择【图片另存为】命令，从而将网页 中的图像下载到自己的计算机当中。 而当添加了这个行为动作以后，当访 问者单击鼠标右键时，就只能看到提示框 ，而看不到快捷菜单，这样就限制了用户 使用鼠标右键来将图片下载至自己的计算 机中。 1、弹出信息的概念 在文档中选定图像，然后在行为菜单 中选择【弹出信息】命令打开【弹出信息 】对话框进行设置，最后在【行为】面板 中选择【onMouseDown】事件 。 2、设置弹出信息的方法 播放声音即用来播放声音和音乐文件。例如 ，在页面载入时自动播放一段音乐，或者当鼠标 点击按钮时发出不同的声响。方法是从行为菜单 中选择【播放声音】命令，打开【播放声音】对 话框进行设置即可。 3、播放声音 让用户通过【行为】面板指定一个自定义功 能，或者当一个事件发生时执行一段JavaScript 代码。 例如，在文档窗口中输入文本“关闭窗口” ，并为其添加空链接，然后在【行为】面板中打 开【调用JavaScript】对话框，输入要执行的代 码或函数名，如“window.close()”，在【行为】面 板中设置事件为“onClick”，在浏览器窗口中单击 “关闭窗口”文本将关闭浏览器窗口。 4、调用JavaScript 实训 制作弹出式菜单 本项目介绍了行为在网页中的具体应 用，本实训将让读者进一步