Dreamweaver MX 2004 行为与特效(转)

Dreamweaver MX 2004 行为与特效(转)[@more@]

　　经常上网的朋友可能会发现很多网站是有诸如弹出信息框、播放音乐、禁止鼠标右键、自动跳转等功能，通常这些功能是通过编写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的开始，第十三行是结束。第十七行是设置的动作，了解了这些，我们就能随心所欲的收集自己喜欢的代码来设计自己的主页了。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10752019/viewspace-955169/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/10752019/viewspace-955169/