Dreamweaver 4教程——动态网页设计技巧与实例.docVIP

第6章 动态网页设计技巧与实例 创建网页的动态变化或交互内容有两种选择：要么在服务器端建立Server-side Script或Database Interaction，要么在客户端用JavaScript编程。通过编写简短的JavaScript程序就可以实现强大的交互性与控制功能。例如：通用动态内容、检查插件、打开窗口、使窗体有效、在翻滚页面上改变图像、打开新的窗口、扫描插件、改变状态条、弹出消息、用鼠标指向一个图片时显示一个带音乐的动画等。 使用时间链工具可以制作出非常吸引人的动态网页效果。时间链使用动态HTML通过时间的变化来改变层的位置、大小、可见性和叠放顺序等属性来创建动画。 这些任务在Dreamweaver中很容易实现，Dreamweave 提供了丰富的内置行为，这些行为的设置是利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，它使那些不熟悉JavaScript或VBScript的网页设计师，可以方便地设计出通过复杂的JavaScript或VBScript 语言才能实现的功能。Dreamweave 4提供了一种不需要编写任何代码，就可以实现一些强大的交互性与控制功能的能力。还可以从互联网上下载一些第三方提供的动作来使用。如果熟悉JavaScript，还可以编写一些特定的行为来使用。 由于Dreamweave 4不是专门用来创建XML文件的软件，所以在使用Dreamweaver 4创建动态页面后，常常需要将源代码进行调整，使之符合XML语法。 6.1 行 为 在本节中将讲述如何使用Dreamweaver 4创建有特殊效果的XML网页。例如：通用动态内容、检查插件、打开窗口、使窗体有效、在翻滚页面上改变图像、打开新的窗口、扫描插件、改变状态条、弹出消息、用鼠标指向一个图片时显示一个带音乐的动画等等。这些任务在Dreamweaver 4中很容易实现，Dreamweaver 4提供了丰富的内置行为，这些行为的设置是利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，它使那些不熟悉JavaScript或VBScript的网页设计师，可以方便地设计出通过复杂的JavaScript或VBScript 语言才能实现的功能。Dreamweaver 4提供了一种不需要编写任何代码，就可以实现一些强大的交互性与控制功能的能力。 6.1.1 使用行为的总体方法 行为是为响应某一具体事件而采取的一个或多个动作。当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。所以当创建行为时，必须先指定一个动作，然后再指定触发动作的事件。 行为是针对网页中的所有对象，要给一个对象添加行为，可以按如下步骤进行： （1）选择Window|Behaviors命令，则可以打开Behaviors面板，如图6.1所示。 图6.1 行为面板 该面板中各个部分功能如下： ：单击该按钮，则弹出行为列表，对当前不能使用的行为，则以灰色显示，没有变灰的其他行为表示可以使用，可以用鼠标从中选择。当选择一个行为时，就会打开参数对话框。 ：单击该按钮，则删除下面列表中当前选择的行为。 和：用于在行为列表中移动选定的动作，改变执行动作的顺序。 Events：用于设置当前对象上触发动作的事件。JavaScript程序可以响应这个事件而运行代码，并创建在Dreamweaver 中与用户的操作相交互的程序。一个对象可以有多个触发事件。通常一个事件是针对页面对象或标记而言，不同版本的浏览器所支持的事件类型也不一样。 Actions：用于设置一个事件触发的动作。动作是一段预先编写好的JavaScript源程序，使用这段程序代码可以完成相应的任务。 （2）在文档窗口中选定一个对象。 （3）单击Behaviors面板中加号按钮，从弹出的行为列表选项中选择Show Events For命令，则会弹出一个子菜单，从该子菜单中选择不同的浏览器版本。不同的浏览器支持的事件不一样，版本越高则支持的事件越多。可从子菜单中选择不同的浏览器，也可以选择浏览器的范围，例如4.0 or Later Browsers，表示选择4.0及以后版本的浏览器。 （4）单击行为面板中的按钮，从弹出的行为列表选项中选择合适的行为。根据所选定的行为，在参数对话框中设置该行为的参数及指令。 （5）设置行为的所有参数，然后单击OK按钮。 6.1.2 所有动作的使用 选择Window|Behaviors命令，出现Behaviors面板，单击Behaviors面板中加号按钮，则会弹出动作菜单，可从中选择一个动作添加到当前对象的Behaviors面板中。在文档窗口中选择的对象不一样，则可以使用的动作也不一样，给一个对象添加动作时，在Behaviors面板的标题栏中