Dreamweaver8利用行为制作动态页面

　　

　　这篇教程为“Dreamweaver 8 入门经典教程”的一部分。查看全套教程>>>>>。

　　一般说来，动态网页是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户和页面的简单交互。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就能够实现丰富的动态页面效果，实现人和页面的简单交互。

　　行为是事件和动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。

　　一、了解行为

　　“行为”能够创建网页动态效果，实现用户和页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，假如图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。和行为相关的有三个重要的部分——对象、事件和动作。

　　1. 对象(Object)

　　对象是产生行为的主体，很多网页元素都能够成为对象，如图片、文字、多媒体文档等，甚至是整个页面。

　　2. 事件(Event)

　　事件是触发动态效果的原因，他能够被附加到各种页面元素上，也能够被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是和鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不相同的，通常高版本的浏览器支持更多的事件。

　　3. 动作(Action)

　　行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。

　　4. 事件和动作

　　将事件和动作组合起来就构成了行为，例如，将onClick行为事件和一段JaveScript代码相关联，单击鼠标时就能够执行相应的JaveScript代码(动作)。一个事件能够同多个动作相关联(1：n)，即发生事件时能够执行多个动作。为了实现需要的效果，我们还能够指定和修改变作发生的顺序。

　　

　　Dreamweaver内置了许多行为动作，好象是个现成的JaveScript库。除此之外，第三方厂商提供了更多的行为库，下载并在Dreamweaver中安装行为库中的文档，能够获得更多的可操作行为。假如您很熟悉JaveScript语言，也能够自行设计新动作，添加到Dreamweaver中。

　　二．应用行为

　　1. 行为面板

　　在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择窗口>行为命令，打开行为面板，下图所示。

　　在行为面板上能够进行如下操作：

　　单击“ ”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。

　　添加行为时，从动作菜单中选择一个行为项。

　　单击事件列右方的三角，打开事件菜单，能够选择事件。

　　单击"向上"箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。

　　2. 创建行为

　　一般创建行为有三个步骤：选择对象、添加动作、调整事件。

　　我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。

　　（1）、打开01.html，选中图片。

　　（2）、单击行为面板上的" "按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中配置参数。

　　在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址(能够是网页也能够是图像)。

　　窗口宽度设为400px，窗口高度设为300px。

　　窗口名称为“放大图片”。

　　（3）、当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标)，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)，如下图所示：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有