资源描述
Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,行为：对象,+,事件,+,动作（,Dreamweaver,）,行为：对象+事件+动作（Dreamweaver）,认识行为,行为：事件,+,动作,行为的基本知识,例：将,鼠标移到一幅,图像,（对象）,上,，产生了一个,事件,，如果图像发生变化，就导致发生了一个,动作,。,行为事实上是由预先编写好的,Javascript,代码构成,，通过,行为,，制作,网页,不,需要编写,Javascript,代码。网页,中常见的脚本程序主要有两种，一种是微软推出的,VBScript,，另一种是,Javascript,，相对而言,Javascript,脚本程序应用更为广泛,一些。,行为是由,事件,和,动作,相结合而构成的，事件是触发动作的原因，而动作是事件的直接后果，两者缺一不可，它们,组合起来,就构成了一个行为。,认识行为行为：事件+动作行为的基本知识例：将鼠标移到一幅图像,认识行为,行为：事件,+,动作,动作,是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段,JavaScript,代码,。,在,Dreamweaver,中使用内置行为时，系统会自动向页面中添加,JavaScript,代码，用户不必自己编写。,事件,可以被附加到各种页面元素上，也可以被附加到,HTML,标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的,3,个最常见的事件,(onMouseOver,、,onMouseOut,、,onClick),。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。,认识行为行为：事件+动作动作是指最终需完成的动态效果，如交换,认识行为,行为：事件,+,动作,事件,可以被附加到各种页面元素上，也可以被附加到,HTML,标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的,3,个最常见的事件,(onMouseOver,、,onMouseOut,、,onClick),。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。,onMouseOver：,鼠标指针移动到对象上时触发。,onMouseOut：,鼠标指针从对象上移走时触发。,onMouseDown：,按下鼠标键时触发。,onMouseUp：,按键抬起时触发。,onClick：,单击对象时触发。,onDblClick：,双击对象时触发。,onLoad：,装入指定对象时触发，通常用,Body,对象。,onUnLoad：,卸载指定对象时触发。,认识行为行为：事件+动作事件可以被附加到各种页面元素上，也可,认识行为,行为：事件,+,动作,动作,是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段,JavaScript,代码,。,在,Dreamweaver,中使用内置行为时，系统会自动向页面中添加,JavaScript,代码，用户不必自己编写。,认识行为行为：事件+动作动作是指最终需完成的动态效果，如交换,行为面板与菜单,行为：事件,+,动作,在,Dreamweaver,中，对行为的添加和管理主要通过“行为”面板来完成。,在菜单栏中选择“窗口行为”命令或按,Shift+F4,组合键，可以展开“行为”面板，如,图所,示,。右侧,显示动作，左侧显示行为对应的事件类型。面板中各选项作用如下：,显示设置事件：显示添加到当前文档的事件。,显示所有事件：显示所有事件。,添加行为：单击该按钮，从弹出菜单中选择需要添加的行为类别。,删除事件：从行为列表中删除选中的行为,。,增加事件值：将当前选定的行为向前移动。,降低事件值：将当前选定的行为向后移动,。,行为面板与菜单行为：事件+动作在Dreamweaver中，对,行为的基本操作,行为：事件,+,动作,对,行为的基本操作包括：添加行为、删除行为和编辑行为等。,1,添加行为,在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的,HTML,元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框，然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件,类型。,2,删除行为,选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件”按钮，即可将其删除,。,3,编辑行为,若要,编辑行为所对应的动作,，将,鼠标指向某个动作名称，单击鼠标右键，在打开的快捷菜单中选择“编辑行为”命令,，可,打开对应的设置,对话框。,如果需要设置某个行为对应的事件，直接单击行为名称，在展开的事件列表中直接选择需要的事件即可,。,行为的基本操作行为：事件+动作对行为的基本操作包括：添加行为,行为类型,行为：事件,+,动作,交换图像,当,鼠标移到设置了“交换图像”行为的图像时，用另一幅图像替代原图像，当鼠标离开时恢复原图像。,（,1,）在,“设计”窗口选择要设置交换行为的图像。选择“窗口行为”命令，在,Dreamweaver,右侧栏打开“行为”面板，单击面板中的“添加行为”按钮，在弹出的菜单中选择“交换图像”，弹出“交换图像”,对话框。,行为类型行为：事件+动作交换图像当鼠标移到设置了“交换图像”,行为类型,行为：事件,+,动作,交换图像,提示：应该换入一个与原图像具有相同高度和宽度大小的图像，否则换入的图像显示时会被压缩或扩展,。,选中图像列表中要设置交换图像的原始图像，单击,【,浏览,】,按钮选择已经准备好的新图像文件。选中“预先载入图像”复选框，这样可以预先缓存图像，以防止因为交换图像下载缓慢而导致的延迟,。,选中“鼠标滑开时恢复图像”复选框，可以使鼠标移到图像外边时恢复初始图像,。,行为类型行为：事件+动作交换图像提示：应该换入一个与原图像具,行为类型,行为：事件,+,动作,弹出消息,方法：,应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整个文档“,Body”,）并打开“行为”面板。单击加号（,+,）按钮并从“动作”弹出菜单中选择“弹出消息”,。,选择,一弹出信息设置对话框，在“消息”域中输入要显示的信息，如“欢迎光临”等。单击“确定”按钮，关闭设置对话框。,通常显示如：浏览器的分辨率要求，购卖信息。,行为类型行为：事件+动作弹出消息方法：应用“弹出消息”行为的,行为类型,行为：事件,+,动作,打开浏览器窗口,打开,浏览器窗口即在打开当前网页的同时，另外打开一个新的窗口显示一个指定的网页,，可,根据需要对它的菜单、页面尺寸、滚动条等进行设置。,方法：,选择一个事件对象（图像、超链接或,body,等）并打开“行为”面板。单击加号（,+,）按钮并从“动作”列表中选择“打开浏览器窗口”,。,例：制作网页加载时弹出公告页（,Body,的,load,事件中添加打开浏览器,行为）,行为类型行为：事件+动作打开浏览器窗口打开浏览器窗口即在打开,行为类型,行为：事件,+,动作,打开浏览器窗口,窗口,宽度：指定窗口的宽度（以像素为单位）。,窗口高度：指定窗口的高度（以像素为单位）。,属性：选择是否在新的浏览器窗口中包含：导航工具栏、地址工具栏、状态栏、菜单条、滚动条、调整大小手柄等内容。,窗口名称是新窗口的名称。,单击“,要显示的,URL”,域中输入要显示网页的,URL,或通过“浏览”按钮选择一个要显示的网页文件,。,单击,【,确定,】,按钮，在“行为”面板中添加了行为，并设置左侧“事件”为,onLoad,，即在加载网页时，触发该行为,。,行为类型行为：事件+动作打开浏览器窗口窗口宽度：指定窗口的宽,行为类型,行为：事件,+,动作,拖动,AP,元素,方法,：,选择对象，在行为面板上单击“,+”,，在行为的动作列表中选择“拖动层”。,例：,制作拼图,页面,。,新添加层之后，将,光标放在在,之间,，在,行为控制面板,中选择,添加按钮,，,为,Onload,事件选择,拖动,AP,元素：,“层”,列表中选择被拖动的对象,层；取得,当前位置使得当对象被置于该位置并在靠近距离范围内时，会自动归位,。,按,F12,按钮在,IE,中预览，,在,QQ,浏览器,中预览没有效果。预览时可以点击左键任意拖动,行为类型行为：事件+动作拖动AP元素方法：选择对象，在行为面,行为类型,行为：事件,+,动作,显示隐藏层,选择,显示,-,隐藏层可以对页面中所有的层进行设置，使其可显示或隐藏,。,方法：,选择对象，在行为面板上单击“,+”,，在行为的动作列表中选择“显示隐藏层”。,例,：,可通过显示,-,隐藏层的功能制作一个网页中常见的导航下拉菜单。其实质是网页中共有多个菜单，分别对应有多个层，每一层即一个下拉菜单，网页加载时，这多个层全部隐藏，当鼠标移动到某菜单上时，对应层显示，并可单击其中的超链接，而其它层隐藏。,先在,Body,的,load,事件中，隐藏所有层。,每一个菜单项的文字须是虚链接方可添加“显示,隐藏层”行为,。在菜单,项的,单击事件,中选择显示相应的层,菜单，隐藏其它,。,行为类型行为：事件+动作显示隐藏层选择显示-隐藏层可以对页,行为类型,行为：事件,+,动作,改变,属性,改变属性可以动态改变某一对象的属性值。,方法：,选择对象，在行为面板上单击“,+”,，在行为的动作列表中选择“改变属性”。,可,通在对话框中确定欲改变的对象类型和对象的属性。,行为类型行为：事件+动作改变属性改变属性可以动态改变某一对象,行为类型,行为：事件,+,动作,使用改变属性制作图片阴影效果,大多数行为的属性都可以修改，而且这些行为的显示效果取决于所使用的浏览器，本实例将实现图片阴影效果的功能，当鼠标移至图片上时，阴影效果显示，当鼠标离开图片时，阴影效果消失。,行为类型行为：事件+动作使用改变属性制作图片阴影效果大多数行,行为类型,行为：事件,+,动作,（,1,）新建网页，保存页面，在该页面中插入一个层，将图片,flower.jpg,插入到该层中，调整图层大小，使图层比图像略大一点所示。,（,2,）选择图像后，在行为选择菜单中选择“改变属性”命令。,使用改变属性制作图片阴影效果,行为类型行为：事件+动作（1）新建网页，保存页面，在该页面中,行为类型,行为：事件,+,动作,（,3,）在弹出的对话框中作如图所示的选择，从中可以看出，图层属性的操作选择很多，虽然只有精通,HTML,语言才可选择，但比直接编写,HTML,代码方便得多，因为这里我们可以不关心语法格式。本例效果是改变“,Layer1”,的背景色彩。,（,4,）为了得到阴影效果，在“新的值”框中输入“,black”,，当然你也可以输入其他色彩名称或代码。,使用改变属性制作图片阴影效果,（,5,）默认的事件是“,onload”,，在这里用鼠标单击其右方的黑三角，在弹出的下拉选项中选择“,onMouseOver”,（鼠标经过,),。,行为类型行为：事件+动作（3）在弹出的对话框中作如图所示的选,行为类型,行为：事件,+,动作,设置文本,1,设置框架文本,“设置框架文本”动作允许动态设置框架的文本，用指定的内容替换框架的内容和格式设置,。,2,设置层文本,“设置层文本”行为可用指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的,HTML,源代码。,3,设置状态栏文本,“设置状态栏文本”动作可在浏览器窗口底部左侧的状态栏中显示消息,。,4,设置文本
展开阅读全文