DreamweaverMX2004行为和特效

　　

　　经常上网的朋友可能会发现很多网站是有诸如弹出信息框、播放音乐、禁止鼠标右键、自动跳转等功能，通常这些功能是通过编写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）

标签：

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