《网页设计与制作（第二版）》13 行为

网页设计与制作（第二版）目录DIRECTORY01DreamweaverCS5入门05插入图像02创建站点06插入多媒体03设置首页07建立网页链接04DreamweaverCS5编辑文本08表格目录DIRECTORY09使用Div标签和APDiv10框架11表单12CSS样式13行为14资源15模板和库16站点上传和维护13行为1.能够理解行为的概念。2.能够利用“行为面板”添加简单的交互行为。3.引导学生在遇到问题时，需要自己用积极、乐观的心态去努力克服困难、解决问题，终将获得成就感和幸福感。任务目标1任务实施一般说来，动态网页是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweaver提供了“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。行为是一种运行在浏览器中的JavaScript代码，是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件与浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。一、行为的概念一、行为的概念（一）对象（Object）对象是产生行为的主体，很多网页元素都可以成为对象。（二）事件（Event）事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。（三）动作（Action）行为通过动作来完成动态效果，例如，图片翻转、打开浏览器、播放声音都是动作。（四）事件与动作将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码（动作）。3214二、了解行为面板（一）行为面板在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口”→“行为”命令，打开行为面板，如图13-1所示。在行为面板上可以进行如下操作：●单击“+”按钮，打开动作菜单，添加行为。添加行为时，从动作菜单中选择一个行为项。●单击“-”按钮，删除行为。●单击事件列右方的三角，打开事件菜单，可以选择事件。●单击“向上”箭头或“向下”箭头，可将动作项向前移或向后移，改变动作执行的顺序。二、了解行为面板（二）创建行为一般创建行为有3个步骤：选择对象、添加动作、调整事件。我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。（1）打开“打开浏览器窗口.html”，选中图片。（2）单击行为面板上的“+”按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。●在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址（可以是网页也可以是图像）。●窗口宽度设为400px，窗口高度设为300px。●窗口名称为“放大图片”。三、使用内置行为（一）弹出菜单【操作步骤】步骤1：打开“弹出菜单.html”。步骤2：选中页面中的链接文本打开行为面板，单击按钮，选择行为菜单中的“显示弹出式菜单”，弹出“显示弹出式菜单”对话框，如图13-5所示。步骤3：设置菜单：单击按钮可以添加菜单项目。选中菜单项目，单击按钮可以删除相应的菜单项目。选中菜单项目，单击按钮可以转换到上级或者下级菜单。单击按钮可以调整菜单项目的相对位置关系。设置完效果，如图13-6所示。三、使用内置行为（二）弹出信息【操作步骤】步骤1：在行为面板中单击按钮，并且从弹出菜单中选取“弹出信息”命令，这时可以看见弹出一个窗口，如图13-11所示，在其中输入“欢迎使用行为”之类的提示信息。步骤2：单击“确定”后，在行为面板中就多出一个名为“弹出信息”的行为。此时还要单击左部的下拉菜单，并且从中选择“onload”一项，这样当别人进入页面之后就会自动执行设置的行为，自然也就能够看见消息框了。三、使用内置行为（三）打开浏览器窗口单击缩略图，打开窗口，如图13-12所示。【操作步骤】步骤1：在Dreamweaver中打开缩略图的网页，并且将该图像选中，如图13-13所示。步骤2：单击“行为”浮动面板中的加号按钮，并从弹出菜单中选择“打开浏览器窗口”，随后弹出“打开浏览器窗口”对话框，如图13-14所示。步骤3：单击“确定”按钮完成设置。然后在“行为”浮动面板中调整事件为“onClick”，表示单击时打开浏览器窗。2项目实训项目要求：为项目十一中的网页添加背景音乐。步骤1：打开网页，打开“行为”面板。步骤2：选择“播放声音”命令。步骤3：选择音乐文件。步骤4：单击音乐插件，按Ctrl+F3组合键，单击“参数”按钮。步骤5：将“AUTOSTART”修改为“true”。3项目小