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