2.11 行为(课件）-高二《网页设计与制作》同步教学（北京理工版）

2.11 行为 2.11.1关于行为 Dreamweaver中的行为将JavaScript代码放置在文档中，允许浏览者与Web网页进行交互，从而以多种方式更改网页或引起某些任务的执行。 行为是事件和由该事件触发的动作的组合，具体由3部分组成(简称行为的三要素)。 1.对象 对象(Object)产生行为的主体。自然界的任何事物都可以看成一个对象，如计算机、电视机、电话、人等，而在网页中许多元素也可以成为对象，如网页中插入的图片、一段文字、一个多媒体文件等。 返回 下一页 上一页 2.11 行为 2.事件 事件(Event)是触发动态效果的原因。对象的事件说明对象可以识别和响应的某些操作行为，如单击、关闭浏览器等。对于同一个对象，不同的浏览器支持的事件种类和多少是不一样的，高版本的浏览器(如IE6.0)支持更多的事件，然而，如果应用了这些只有高版本浏览器支持的事件，在低版本浏览器中是看不到行为效果的。表2-1列举了Dreamweaver中经常使用的一些事件。 返回 下一页 上一页 2.11 行为 3.动作 动作(Action)是行为最终产生的动态效果，也就是让浏览器完成了什么功能，如图片的翻转、链接的改变、声音的播放等。 例如，对于翻转图片这一行为，可以用三要素来解释:图片(对象)，光标放置在其上时(事件)，更换为另一张图片(动作)。创建此行为大致经过3个步骤(注意前后顺序)。 (1)指定目标浏览器，选择对象(图片)。 (2)添加动作(翻转图片)。 (3)设置事件(OnMouseOver)。 行为三要素可概括成一句话———对象由于某事件，产生行为。 返回 下一页 上一页 2.11 行为 2.11.2使用行为 针对以上翻转图片，制作步骤如下: (1)选择“窗口”∣“行为”命令，打开“行为”面板，然后单击“添加行为”按钮 ，并在弹出的菜单中选择“显示事件” ∣ " IE 5. 0”命令，表示指定目标浏览器，如图2 -168所示。 (2)选中主页欲实现翻转的原图片，然后单击“添加行为”按钮 ，并在弹出的菜单中选择“预先载入图像”选项，弹出如图2-169所示的“预先载入图像”对话框。 (3)单击“浏览”按钮可以指定翻转图片的源文件，若要增加多幅图片或删除已添加图片，可以通过 按钮实现。 返回 下一页 上一页 2.11 行为 (4)设置完成后，自动返回“行为”面板，如图2-170所示，此时指定事件为OnMouseOver即可。 下面介绍几项常用的行为操作。 1.打开浏览器窗口 在网上经常看见，当打开一个页面时，马上就弹出一个广告窗口。把这个广告窗口称为弹出式窗口，其制作方法用到了行为中的“打开浏览器窗口”，具体制作步骤如下: (1)将鼠标定位于页面最开始位置，然后打开“行为”面板，在行为菜单中选择“打开浏览器窗口”命令，弹出如图2-171所示的“打开浏览器窗口”对话框。 (2)分别进行设置。打开文件名为图片2.htm，窗口大小为300 x60，不带任何属性。 返回 下一页 上一页 2.11 行为 (3)单击“确定”按钮，自动返回“行为”面板，并设置事件为OnLoad，即打开浏览器时自动弹出2.htm广告窗口。 2.设定状态栏文字 设置浏览器状态栏上的文字在Web页面上经常可见，利用行为中的“设置文本”∣"设置状态栏文本”命令即可实现这一功能。其操作步骤如下: (1)将光标定位于页面最开始位置，然后打开“行为”面板，在行为菜单中选择“设置文本” ∣“设置状态栏文本”命令，弹出如图2-172所示的“设置状态栏文本”对话框。 返回 下一页 上一页 2.11 行为 (2)在此输入文字“欢迎光临……”。 (3)单击“确定”按钮，自动返回“行为”面板，并设置事件为OnLoad，即打开浏览器时在浏览器的状态栏自动显示此文字。 3.弹出信息框 网页中的某些对象在一定事件下会弹出信息框，如单击按钮后弹出的信息框。信息框用于显示网页制作人员预先输入的信息。信息框弹出后，用户需要单击信息框上的“确定”按钮才能关闭信息框。其操作步骤如下: (1)选中要应用这个行为的对象，然后打开“行为”面板，在行为菜单中选择“弹出信息”命令，弹出如图2-173所示的“弹出信息”对话框。 返回 下一页 上一页 2.11 行为 (2)在“消息”文本框内，输入文字“这是会员区，请退出!!”。 (3)单击“确定”按钮，自动返回“行为”面板，并设置事件为OnClick，即当用户单击时，在浏览器中自动弹出提示框。 返回 下一页 上一页 图2-168指定目标浏览器 返回 图2-169“预先载入图像”对话框 返回 图2-170设置事件 返回 图2-171“打开浏览器窗口”对话框 返回 图2-172“设置状态栏文本”对话框 返回 图2-173“弹出信息”对