分享
 
 
 

Dreamweaver8利用行为制作动态页面

王朝html/css/js·作者佚名  2008-05-21
窄屏简体版  字體: |||超大  

这篇教程为“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(鼠标滑过),如下图所示:

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有