第15章 利用JavaScript制作网页特效.pptVIP

第15章 利用JavaScript制作网页特效 学习目标 应用网页交互 网页与其他平面媒体最大的区别就在于其拥有强大的交互性。几乎所有的浏览器都支持用户通过JavaScript等脚本语言编写各种交互式应用程序，以响应网页浏览者的各种即时操作。 为提高用户通过JavaScript脚本语言实现网页交互的效率，同时降低编写JavaScript脚本的难度，Dreamweaver CS4提供了强大的行为功能，允许用户通过可视化的操作，为网页添加丰富的交互应用。 15.1 检查网页标签 标签是构成网页的基础。使用Dreamweaver CS4，用户可以通过【标签检查器】面板，检查和设置当前选中的网页标签中各种类型的可用属性，以及为该标签添加和编辑各种行为。 15.1.1 检查标签属性 【标签检查器】面板默认打开的是【属性】的选项卡，在该选项卡中，提供了一个目录树形式的分类列表，列出了当前选择的标签各种属性的分类。 1、修改显示方式 在【标签检查器】面板中，用户可以单击【显示列表视图】按钮 ，定义当前标签的属性以字母顺序列表的方式显示。 2、标签属性类别 在类别视图模式下，Dreamweaver将各种网页标签的属性分类会根据当前选择的标签类型而发生变化，动态地进行更新。 15.1.2 管理网页行为 行为是Dreamweaver CS4中一项重要的功能。通过该功能，用户无须编写JavaScript脚本代码，即可通过界面操作选择相关类型的行为，并设置触发该行为的事件以及目标，实现网页的各种交互应用。 15.1.2 管理网页行为 1．使用行为选项卡 在使用Dreamweaver的行为功能时，应在【标签检查器】面板中单击【行为】选项卡，然后即可查看当前网页中添加的各种行为，并通过面板对网页进行添加行为、编辑行为等操作。 2．Dreamweaver事件类型 在Dreamweaver所支持的事件中主要包括15种，其中某些特殊的类型只对特定的网页标签有效。 15.2 文本交互行为 Dreamweaver CS4内置了许多类型的交互行为。其中，有4种交互行为与文本有关，即设置容器文本、设置文本域文本、设置框架文本以及设置状态栏文本等。使用这些行为，可以方便地分别为各种网页容器标签、文本域、框架或浏览器状态栏内添加文本内容。 15.2.1 设置容器的文本 容器是网页中包含内容的标签的统称，典型的容器包括各种定义ID属性的表格、层、框架、段落等块状标签。在应用容器文本的交互行为后，可根据指定的事件触发交互，将容器中已有的内容替换为更新的内容。 15.3 窗口交互行为 窗口交互行为也是一种重要的网页交互行为。同时，其也是最常用的网页交互行为。在Dreamweaver CS4预置的行为中，主要包括弹出信息和打开浏览器窗口等两种窗口交互行为。 15.3.1 弹出信息 【弹出消息】行为显示一个包含指定消息的JavaScript警告。因为JavaScript警告对话框只有一个【确定】按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。 15.3.2 打开浏览器窗口 与弹出信息行为类似，打开浏览器窗口也是一种重要的网页行为，其可以在行为触发时为当前网页打开一个新的网页窗口，并在窗口中显示其他网页文档的内容。打开浏览器窗口的行为在网页设计中被使用的几率非常高，很多网页都通过打开浏览器窗口的行为插入各种广告。 15.4 图像交互行为 图像是网页中最明显且最容易让用户理解的内容。在Dreamweaver CS4中，提供了一些使图像更具有动感的行为，即Dreamweaver图像交互行为。在Dreamweaver的图像交互行为中，主要包括交换图像行为、导航栏图像行为等2种。 15.4.1 交换图像 交换图像功能是指将某一个网页图像转换为其他网页图像的行为功能。在之前的章节中，已介绍了使用Dreamweaver的【插入】命令制作鼠标经过图像的功能。这种鼠标经过功能其实就是一种交换图像功能。 Dreamweaver行为中的交换图像行为比鼠标经过图像的功能更加强大。其不仅能够制作鼠标经过图像，还可以使图像交换的行为响应任意一种网页浏览器支持的事件，包括各种焦点事件、键盘事件、鼠标事件等。 15.4.2 导航栏图像 导航条是网页中相当常见的版块。使用Dreamweaver CS4的行为功能，还可以制作出更加复杂的，集成鼠标单击事件的导航条栏目。此时，就可以使用Dreamweaver内置的【设置导航栏图像】行为。 在Dreamweaver中首先插入导航栏中的各种按钮图像，在【属性】检查器中分别为各按钮图像执行【设置导航栏图像】命令。 15.5 AP Div交互行为 AP div是一种重要的网页容器。其特点是可以方便地固定在网页中任意的位置，同时