点击这里给我发消息 点击这里给我发消息

Dreamweaver 8 利用行为制作动态页面

添加时间:2010-1-5
    相关阅读: 网页 设计 页面 HTML JavaScript Dreamweaver 链接

 这篇教程为“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中,对行为的添加和控制主要通过“行为”面板来实现。选择窗口>行为命令,打开行为面板,下图所示。

Dreamweaver 8 利用行为制作动态页面(图一)

  在行为面板上可以进行如下操作:

  单击“+”按钮,打开动作菜单,添加行为;单击“-”按钮,删除行为。

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

  单击事件列右方的三角,打开事件菜单,可以选择事件。

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

  2. 创建行为

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

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

  (1)、打开01.html,选中图片。

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

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

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

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

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

Dreamweaver 8 利用行为制作动态页面(图二)

  4、按F12键预览打开新窗口的效果。

  三、行为的应用

  1、“播放声音”实例

  利用播放声音的动作,可以在网页中播放声音文件,如背景音乐,或单击某个按钮(文字或图片)播放一段声音。

  (1)、给网页添加背景音乐

打开01.html,单击编辑窗口状态栏上的<body>标记,选中整个网页。

  打开行为面板,单击"+"按钮,在菜单中选择“播放声音”。

  在弹出的菜单中输入音乐文件的路径,单击“确定”。

  把事件调整为onLoad(载入页面后)。

  (2)、给图片添加声音,方法同上。

  2、设置状态行文本

  浏览器下端的状态行通常显示当前状态的提示信息,利用“设置状态栏文本”行为,可以重新设置状态行信息。

  选中要附加行为的对象,如网页的<body>标记,或一个链接。

  单击行为面板上的"+"按钮,在打开的动作菜单。

  选择“设置文本”>“设置状态文本”命令,在打开的“信息”对话框中输入需要的文本。

  按F12键,可以看到打开网页后,浏览器下端的状态行上有了新输入的信息
3、网页中的变色按钮

  新建11.html文件,插入一个1行2列的表格,做如下设置:

Dreamweaver 8 利用行为制作动态页面(图三)

  选中全部单元格,在属性面板中做如下设置:

Dreamweaver 8 利用行为制作动态页面(图四)

  在两个单元格中分别输入文字“变色按钮”、“应用行为”,并将它们居中对齐,产生一个DIV标签,在代码区找到第一个div标签,在<div align="center" class="wz1">代码中设置一个id值,这段代码改为<div id="button1" align="center" class="wz1">,同样的方法,在第2二个div标签中设置一个id=button2,即分别给两个单元格内的div标签命名。

  选择窗口>行为,打开行为面板,鼠标在第一个单元格中点击一下,在状态栏选中div标签,单击行为面板上的+按钮,从弹出菜单中选择“改变属性”菜单项,在弹出的对话框中做如下选择:

Dreamweaver 8 利用行为制作动态页面(图五)

  单击“确定”,回到行为面板中,将其鼠标响应行为改为onMouseOver。

  用同样的方法在该div标签上再设置一个行为,将其鼠标响应行为改为onMouseOut,并将对话框中的“新的值”设为原来的背景色#CCCC00

对第二个单元格中的id=button2的div标签,我们也做同样的设置。

  保存文件,按F12浏览效果。

本文作者:
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册