《网页设计与制作》第 五章：高级网页制作.ppt

第5章 高级网页制作 第5章 高级网页制作 行为 事件和动作 行为和JavaScript脚本程序 认识“行为”面板 “行为”面板是添加和控制操作行为的场所。选择“窗口/行为”命令或按Shift+F3键，打开“行为”面板，在面板中会显示已添加的行为。 “行为”面板中各按钮的功能如下： 认识“行为”面板 单击 按钮只显示已设置的事件列表。 单击 按钮显示所有事件列表。 单击 按钮会弹出“行为”菜单。在该菜单中 选择相应的行为后，会打开相应的对话框，设置完成后将为指定的对象添加行为。 单击 按钮会删除一个行为。 认识“行为”面板 单击 按钮将向上移动所选择的动作。若该按钮为灰色，则表示不能移动。 单击 按钮将向下移动所选择的动作。 实例5.1：使用行为实现鼠标移动到图片上面改变状态栏文字。 事件 附加动作 检查浏览器 由于访问者可能会使用不同类型和版本的浏览器，利用“检查浏览器”行为可根据访问者使用的浏览器而跳转到不同的页面。 检查插件 “检查插件”行为的目的是检查浏览者的电脑是否安装了指定的插件，从而决定将网页转到不同的页面。如让安装了Shockwave插件的访问者转到有Shockwave影片的页面，让未安装该插件的访问者转到没有Shockwave影片的页面。 转到URL “转到URL”行为可以在当前窗口或指定的框架中打开一个新页面。利用此行为可以通过一次单击更改两个或多个框架的内容，非常方便。 跳转菜单 “跳转菜单”行为可通过选择“插入/表单/跳转菜单”命令进行创建，并可通过“行为”面板对已有的跳转菜单进行编辑修改。在“跳转菜单”对话框中可设置跳转菜单的属性，打开该对话框的方法有以下两种： 跳转菜单 选中已插入的跳转菜单，双击“行为”面板中的“跳转菜单”动作，打开“跳转菜单”对话框。 选中已插入的跳转菜单，在打开的“行为”面板中单击 +按钮，在弹出的“行为”菜单中选择“跳转菜单”命令，打开“跳转菜单”对话框。 在“跳转菜单”对话框中设置跳转菜单的方法和“跳转菜单”的创建基本相同，完成后单击 按钮关闭对话框，如有需要可在面板中修改事件。 打开浏览器窗口 使用“打开浏览器窗口”行为可打开一个新的浏览器窗口显示指定的文档，并且可以指定新窗口的属性和名称。 实例2:在网页调入的同时,打开一个POP窗口. 弹出信息 添加了“弹出信息”行为后，当触发设定的事件时将会弹出预设对话框。 实例5.3：制作一个显示URL的对话框。 设置文本 “设置状态栏文本”行为 “设置状态栏文本”行为可用于在浏览器窗口底部左侧的状态栏中显示消息。 “设置层文本”行为 “设置层文本”行为可以设置层的内容和格式，但保留层的属性，如颜色等。该内容可以包括任何有效的HTML源代码。 实例一个显示会员简介的网页 预先载入图像 “预先载入图像”行为将不会立即出现在页面上的图像预先载入浏览器缓存中，可防止图像出现时由于下载而导致延迟。 设置导航栏图像 使用“设置导航栏图像”行为不仅可以将某个图像变为导航条图像，还可以更改导航条中图像的显示和动作。 交换图像 在页面中插入鼠标经过图像实际上就是Dreamweaver自动添加了一个“交换图像”行为。“交换图像”行为通过更改img标签的src属性将一个图像和另一个图像进行交换，该行为创建了按钮变换和其他图像效果，包括一次交换多个图像。 改变属性 使用“改变属性”行为可更改对象的某些属性，其中可更改的属性是由浏览器决定的。 实例5.5：鼠标移过图像时改变大小。 显示-隐藏层 “显示-隐藏层”行为用于交互时显示信息，可以显示、隐藏或恢复一个或多个层的可见性。 实例5.6:鼠标移动到会员图像上时显示会员介绍。 拖动层 浏览者在访问添加了“拖动层”行为的页面时可拖动层到页面的任意位置。 “拖动层”行为可通过“拖动层”对话框实现。选中所需的层并打开“行为”面板，单击 按钮，在弹出的 “行为”菜单中选择“拖动层”命令，打开“拖动层”对话框，该对话框中有“基本”和“高级”两个选项卡。可以设定浏览者向水平、垂直或任意方向拖动层，以及用JavaScript函数名或代码实现一些特殊功能。 拖动层 1．“基本”选项卡 2. “高级”选项卡 1．“基本”选项卡 “基本”选项卡中可选择添加行为的层、拖动限制等。 2.“高级”选项卡 单击对话框的“高级”选项卡，在其中可进行层的拖动控制点、在拖动层时跟踪层的移动以及当放下层时触发一个动作等设置。 实例5.7：制作拖动图像进行类似拼图的效果，将会员图片拖到指定位置。 调用JavaScript “调用JavaScript”行为允许用户使用“行为”面板指