网页设计与制作(Dreamweaver)《行为：事件+动作》课件

1、行为：对象+事件+动作（Dreamweaver）行为：对象+事件+动作（Dreamweaver）认识行为行为：事件+动作行为的基本知识例：将鼠标移到一幅图像（对象）上，产生了一个事件，如果图像发生变化，就导致发生了一个动作。行为事实上是由预先编写好的Javascript代码构成，通过行为，制作网页不需要编写Javascript代码。网页中常见的脚本程序主要有两种，一种是微软推出的VBScript，另一种是Javascript，相对而言Javascript脚本程序应用更为广泛一些。行为是由事件和动作相结合而构成的，事件是触发动作的原因，而动作是事件的直接后果，两者缺一不可，它们组合起来就构成了一

2、个行为。认识行为行为：事件+动作行为的基本知识例：将鼠标移到一幅图像认识行为行为：事件+动作动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自己编写。事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支

3、持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。认识行为行为：事件+动作动作是指最终需完成的动态效果，如交换认识行为行为：事件+动作事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。onMouseOver：鼠标指针移动到对象上时触发。onMouseOut：鼠标指针从对象上移走时触发。onMouse

4、Down：按下鼠标键时触发。onMouseUp ：按键抬起时触发。onClick ：单击对象时触发。onDblClick ：双击对象时触发。onLoad ：装入指定对象时触发，通常用Body对象。onUnLoad ：卸载指定对象时触发。认识行为行为：事件+动作事件可以被附加到各种页面元素上，也可认识行为行为：事件+动作动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自己编写。认识行为行为：事件+动作动作是指最终需完成的

5、动态效果，如交换行为面板与菜单行为：事件+动作在Dreamweaver中，对行为的添加和管理主要通过“行为”面板来完成。在菜单栏中选择“窗口行为”命令或按Shift+F4组合键，可以展开“行为”面板，如图所示。右侧显示动作，左侧显示行为对应的事件类型。面板中各选项作用如下：显示设置事件：显示添加到当前文档的事件。显示所有事件：显示所有事件。添加行为：单击该按钮，从弹出菜单中选择需要添加的行为类别。删除事件：从行为列表中删除选中的行为。增加事件值：将当前选定的行为向前移动。降低事件值：将当前选定的行为向后移动。行为面板与菜单行为：事件+动作在Dreamweaver中，对行为的基本操作行为：事件+

6、动作对行为的基本操作包括：添加行为、删除行为和编辑行为等。1添加行为在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框，然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。2删除行为选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件”按钮，即可将其删除。3编辑行为若要编辑行为所对应的动作，将鼠标指向某个动作名称，单击鼠标右键，

7、在打开的快捷菜单中选择“编辑行为”命令，可打开对应的设置对话框。如果需要设置某个行为对应的事件，直接单击行为名称，在展开的事件列表中直接选择需要的事件即可。行为的基本操作行为：事件+动作对行为的基本操作包括：添加行为行为类型行为：事件+动作交换图像当鼠标移到设置了“交换图像”行为的图像时，用另一幅图像替代原图像，当鼠标离开时恢复原图像。（1）在“设计”窗口选择要设置交换行为的图像。选择“窗口行为”命令，在Dreamweaver右侧栏打开“行为”面板，单击面板中的“添加行为”按钮，在弹出的菜单中选择“交换图像”，弹出“交换图像”对话框。行为类型行为：事件+动作交换图像当鼠标移到设置了“交换图像”

8、行为类型行为：事件+动作交换图像提示：应该换入一个与原图像具有相同高度和宽度大小的图像，否则换入的图像显示时会被压缩或扩展。选中图像列表中要设置交换图像的原始图像，单击【浏览】按钮选择已经准备好的新图像文件。选中“预先载入图像”复选框，这样可以预先缓存图像，以防止因为交换图像下载缓慢而导致的延迟。选中“鼠标滑开时恢复图像”复选框，可以使鼠标移到图像外边时恢复初始图像。行为类型行为：事件+动作交换图像提示：应该换入一个与原图像具行为类型行为：事件+动作弹出消息方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从

9、“动作”弹出菜单中选择“弹出消息”。选择一弹出信息设置对话框，在“消息”域中输入要显示的信息，如“欢迎光临”等。单击“确定”按钮，关闭设置对话框。通常显示如：浏览器的分辨率要求，购卖信息。行为类型行为：事件+动作弹出消息方法：应用“弹出消息”行为的行为类型行为：事件+动作打开浏览器窗口打开浏览器窗口即在打开当前网页的同时，另外打开一个新的窗口显示一个指定的网页，可根据需要对它的菜单、页面尺寸、滚动条等进行设置。方法：选择一个事件对象（图像、超链接或body等）并打开“行为”面板。单击加号（+）按钮并从“动作”列表中选择“打开浏览器窗口”。例：制作网页加载时弹出公告页（Body 的load事件中

10、添加打开浏览器行为）行为类型行为：事件+动作打开浏览器窗口打开浏览器窗口即在打开行为类型行为：事件+动作打开浏览器窗口窗口宽度：指定窗口的宽度（以像素为单位）。窗口高度：指定窗口的高度（以像素为单位）。属性：选择是否在新的浏览器窗口中包含：导航工具栏、地址工具栏、状态栏、菜单条、滚动条、调整大小手柄等内容。窗口名称是新窗口的名称。单击“要显示的URL”域中输入要显示网页的URL或通过“浏览”按钮选择一个要显示的网页文件。单击【确定】按钮，在“行为”面板中添加了行为，并设置左侧“事件”为onLoad，即在加载网页时，触发该行为。行为类型行为：事件+动作打开浏览器窗口窗口宽度：指定窗口的宽行为类型

11、行为：事件+动作拖动AP元素方法：选择对象，在行为面板上单击“+”，在行为的动作列表中选择“拖动层”。例：制作拼图页面。新添加层之后，将光标放在在之间，在行为控制面板中选择添加按钮，为Onload事件选择拖动AP元素：“层”列表中选择被拖动的对象层；取得当前位置使得当对象被置于该位置并在靠近距离范围内时，会自动归位。按F12按钮在IE中预览，在QQ浏览器中预览没有效果。预览时可以点击左键任意拖动行为类型行为：事件+动作拖动AP元素方法：选择对象，在行为面行为类型行为：事件+动作显示隐藏层选择显示-隐藏层可以对页面中所有的层进行设置，使其可显示或隐藏。方法：选择对象，在行为面板上单击“+”，在行

12、为的动作列表中选择“显示隐藏层”。例：可通过显示-隐藏层的功能制作一个网页中常见的导航下拉菜单。其实质是网页中共有多个菜单，分别对应有多个层，每一层即一个下拉菜单，网页加载时，这多个层全部隐藏，当鼠标移动到某菜单上时，对应层显示，并可单击其中的超链接，而其它层隐藏。先在Body的load事件中，隐藏所有层。每一个菜单项的文字须是虚链接方可添加“显示隐藏层”行为。在菜单项的单击事件中选择显示相应的层菜单，隐藏其它。行为类型行为：事件+动作显示隐藏层选择显示-隐藏层可以对页行为类型行为：事件+动作改变属性改变属性可以动态改变某一对象的属性值。方法：选择对象，在行为面板上单击“+”，在行为的动作列表

13、中选择“改变属性”。可通在对话框中确定欲改变的对象类型和对象的属性。行为类型行为：事件+动作改变属性改变属性可以动态改变某一对象行为类型行为：事件+动作使用改变属性制作图片阴影效果大多数行为的属性都可以修改，而且这些行为的显示效果取决于所使用的浏览器，本实例将实现图片阴影效果的功能，当鼠标移至图片上时，阴影效果显示，当鼠标离开图片时，阴影效果消失。 行为类型行为：事件+动作使用改变属性制作图片阴影效果大多数行行为类型行为：事件+动作（1）新建网页，保存页面，在该页面中插入一个层，将图片flower.jpg插入到该层中，调整图层大小，使图层比图像略大一点所示。 （2）选择图像后，在行为选择菜单中

14、选择“改变属性”命令。 使用改变属性制作图片阴影效果行为类型行为：事件+动作（1）新建网页，保存页面，在该页面中行为类型行为：事件+动作（3）在弹出的对话框中作如图所示的选择，从中可以看出，图层属性的操作选择很多，虽然只有精通HTML语言才可选择，但比直接编写HTML代码方便得多，因为这里我们可以不关心语法格式。本例效果是改变“Layer1”的背景色彩。 （4）为了得到阴影效果，在“新的值”框中输入“black” ，当然你也可以输入其他色彩名称或代码。 使用改变属性制作图片阴影效果（5）默认的事件是“onload”，在这里用鼠标单击其右方的黑三角，在弹出的下拉选项中选择“onMouseOver

15、”（鼠标经过)。 行为类型行为：事件+动作（3）在弹出的对话框中作如图所示的选行为类型行为：事件+动作设置文本1设置框架文本“设置框架文本”动作允许动态设置框架的文本，用指定的内容替换框架的内容和格式设置。2设置层文本“设置层文本”行为可用指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。 3设置状态栏文本“设置状态栏文本”动作可在浏览器窗口底部左侧的状态栏中显示消息。4设置文本域文本“设置文本域文本”行为可用指定的内容替换表单文本域的内容。 行为类型行为：事件+动作设置文本1设置框架文本行为类型行为：事件+动作设置文本1设置状态栏文本“设置状态栏文本”动作可在

16、浏览器窗口底部左侧的状态栏中显示消息。行为类型行为：事件+动作设置文本1设置状态栏文本行为类型行为：事件+动作设置文本1设置框架文本选中整个文档，或在“代码”视图中选中标签，选择“窗口行为”命令打开“行为”面板，单击面板中的按钮，在弹出的菜单中选择“设置文本设置状态栏文本”命令，打开“设置状态栏文本”对话框，在文本框中输入“欢迎来到我的书屋！”，单击【确定】按钮。行为类型行为：事件+动作设置文本1设置框架文本行为类型行为：事件+动作设置文本2设置层文本“设置层文本”行为可用指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。 行为类型行为：事件+动作设置文本2设置

17、层文本行为类型行为：事件+动作设置文本2设置层文本（1）单击“窗口插入”命令打开“插入”面板，在该面板的“布局”标签中选择“绘制AP Div”，在“设计”窗口绘制一个AP Div元素，并将其调整到适当的位置。（2）选中AP Div元素，在“属性”面板中设置其“宽”和“高”分别为120px、110px，“背景颜色”为#CCFFBB，并在AP Div元素中插入一幅图片。（3）选中AP Div元素“apDiv1”，打开“行为”面板，单击面板中的“添加行为”按钮，在弹出的菜单中选择“设置文本设置容器的文本”，打开“设置容器的文本”对话框。行为类型行为：事件+动作设置文本2设置层文本行为类型行为：事件+

18、动作（4）在“容器”后面的列表中选择div“apDiv1”，在“新建HTML”文本框输入“泰山”。设置完毕后，单击【确定】按钮。（5）在“行为”面板中，设置添加的“设置容器的文本”的事件为“onMouseOver”，当鼠标滑过后触发该事件。（6）继续选中“apDiv1”，单击“行为”面板中的“添加行为”按钮，在弹出的菜单中选择“设置文本设置容器的文本”，再次打开“设置容器的文本”对话框。（7）在“新建HTML”文本框中输入“”，单击【确定】按钮。（8）设置该行为的事件为“onMouseOut”，表示当鼠标移开时，恢复原图像。行为类型行为：事件+动作（4）在“容器”后面的列表中选择di行为类型行为：事件+动作检查插件使用“检查插件”行为根据访问者是否安装了指定的插件这一情况将他们发送到不同的页。方法：选择一个事件对象（链接、图片、body等）并打开“行为”面板。单击加