分享
 
 
 

DreamweaverMX2004行为与特效

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

经常上网的朋友可能会发现很多网站是有诸如弹出信息框、播放音乐、禁止鼠标右键、自动跳转等功能,通常这些功能是通过编写JavaScript代码完成的,现在DW MX2004已经内置了20多种代码在“行为面板”中,不熟悉代码编写或者不会编写代码的朋友也能轻松的制作带有这些效果的网页了。

首先我们来做一个简单的了解,一个行为是由一个事件触发一个动作组成的,因此行为由两个基本元素构成:事件和动作。举一个例子:事件是访问者对网页所做的事情,比如把鼠标移动到一个链接上,这就生一个鼠标经过的事件,这个事件触发浏览器去执行执行一段JavaSceipt代码,这就是动作,然后产生了JavaScript设计的效果,可能是打开窗口,也可能是播放音乐等,这就是行为。

我们再来了解一下行为面板,使用Shift+F4或者在窗口菜单选中行为可以打开行为面板。

实例1 在链接上按下鼠标弹出新窗口:

与超级链接打开新窗口不同,弹出的窗口可以进行设置。

1、新建一个文档,插入素材包里的dog.jpg图像,记住图片尺寸位300×300像素,设置页面属性,左边距和上边距均设为0像素。保存文件为photo.htm

2、再新建一个文档,插入素材包内的“d.jpg”图片,然后用鼠标选中这个图片。

3、在行为面板添加行为“打开浏览器窗口”

得到如下对话框

【要显示的URL】:浏览找到第一步制作的网页。

【窗口宽度】 【窗口高度】:刚才插入图片的尺寸。

【属性】:本实例不设置,如果设置则新打开的浏览器会相应显示出这些内容。

【窗口名称】:新窗口的名称,如果要编写JavaScript来控制它就要给他命名,本实例不填写。

设置完毕确定后在行为面板可以看到:

4、用鼠标单击事件,产生一个下拉菜单:

对事件进行设置:下拉菜单中选则选择“onMouseDown”(按下鼠标按键)

设置完毕行为面板显示为:

5、保存该网页为“test.htm”,用浏览器打开这个网页,用鼠标图片在图片上按下的时候,弹出一个新的窗口。

提示:一个行为,可以由不同的事件来触发而产生。 本例中使用了鼠标按下,大家可以改为鼠标经过、鼠标移开、鼠标点击、鼠标双击等事件来触发。

实例2 调用JavaScript:

1、新建一个文档,输入“关闭窗口”

2、为文本建立一个空链接,即在其属性面板里面直接输入一个“#”

2、在选中链接“关闭窗口”的状态,在行为面板中添加行为“调用JavaScript”,弹出如下对话框:在其中输入“window.close()” 后确定。

3、将事件设置为“onClick”:

4、保存该页面之后,用F12测试效果,在浏览器中当鼠标点击“关闭窗口”的文字时,出现如下画面:

实例3 鼠标滑过弹出信息:

1、新建一个文档,输入“鼠标滑过看效果”

2、为文本建立一个空链接,即在其属性面板里面直接输入一个“#”

3、选中文本,在行为面板添加行为“弹出信息”在对话框中输入“欢迎光临!”

4、将动作设置为“onMouseOver”

5、保存该页面,按下F12测试,当鼠标滑过(不是按下鼠标)链接的文字时,会弹出一个信息。效果如下:

综合实例1 导航条设计:

设计要求:1、用表格布局建立一个一行三列的导航条,内容分别是“唐诗”“宋词”“元曲”并逐个建立空链接。2、设置表格:宽200像素,高20像素,边线宽度2,充填0,边框黑色(#000000)背景明黄色(#FFCC00)居中对齐。3、设置单元格:单元格宽度为60像素,高度默认,边框颜色红色(#FF0000)背景色明黄色(#FFCC00)居中对齐,垂直对齐。3、利用行为面板做出特效:当鼠标鼠标移动到链接时,链接所在单元格底色变为紫色(#993399)当鼠标移开链接时,单元格恢复到起始颜色明黄色;当鼠标点击链接按下的时候,单元格为蓝色(#0000FF)

为了方便大家制作给出示意图:

颜色代码

起始颜色

#FFCC00

鼠标经过

#993399

鼠标移开

#FFCC00

鼠标按下

#0000FF

制作过程:

1、建立一个新的文档,然后在文档中插入设计要的表格:

2、表格内填写内容并建立空链接。唐诗

宋词

元曲

3、按照设计要求设置单元格:唐诗

宋词

元曲

4、启用“拆分”模式给DIV命名:分别是应为半角状态下id="a1"、id="a2"、id="a3"

5、添加行为:鼠标选中唐诗,然后在行为面板添加行为“改变属性”

得到如下设置界面:

因为此例除去原始状态之外还有三种设计的效果,所以我们要添加三个行为,重复上一步添加行为,在行为面板可以看到:

现在来分别设置动作:

分别设置行为的属性:双击行为面板中的“改变属性”字样,再一次打开改变属性的设置界面,对应鼠标事件按照预先设计的颜色,分别在设置界面中填写“新的值”

保存页面,用F12预览效果。其他几个链接方式完全一致,大家也可以把刚才的设置结合前面讲的CSS作为样式表一并设置,更多的功能还需要大家在使用的过程中不断摸索创造。

在MX2004中行为共有20余种,不能一一叙述,用户还可以通过第三方开发人员站点获取或自己编写JavaScript来得到更多的行为,同时,大家平时也可一收集一些自己喜欢的代码,收集的方法是:

大家知道HTML是用<>表示标记开始用</>表示标记结束的,JavaSceipt在网页的代码中也是一样。大家请看下图

这就是实例3的代码,从第七行开始是JavaScript的开始,第十三行是结束。第十七行是设置的动作,了解了这些,我们就能随心所欲的收集自己喜欢的代码来设计自己的主页了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有