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