《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第五章》由会员分享，可在线阅读，更多相关《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第五章（21页珍藏版）》请在金锄头文库上搜索。
1、第五章 行为特效,5.1认识行为 5.2 使用行为,5.1 认识行为,DW中内置一组行为，其实它们都是标准的JavaScript程序，每个行为可以完成特定的任务，如播放声音、弹出提示对话框、弹出广告窗口等。如果你所需要的功能在系统内置的行为中，那么可以省去编写JavaScript脚本代码，否则用户可能需要自己编写JavaScript脚本程序，创建新的行为。,5.1 认识行为,行为是由对象、动作和事件构成的，事件是产生行为的条件，动作是行为的具体结果。 对象：是产生行为的主体。对象可以是网页中的很多元素，如网页中的一段文字、一幅图片等元素，也可以整个网页文档。 动作：通常是一段JavaScrip
2、t代码，用于完成某些特殊的任务。如打开一个窗口自动弹出“欢迎”窗口、鼠标经过图片图片晃动等效果。 事件：是由用户或浏览器引发动作产生的事情。事件经常是针对页面元素的，也就是行为的对象，如鼠标经过、鼠标离开、鼠标单击等。,5.2 使用行为,任务与目的 为某页面添加一组行为，增加的页面的动态效果使网页变得变活泼、生动，更好地吸引浏览者。掌握创建库项目 掌握行为的概念；了解JavaScript知识。 掌握设置行为的基本操作。 熟悉行为面板。,5.2 使用行为,1.页面载入时弹出消息对话框 当浏览者载入index.html页面时，将自动弹出消息对话框，在消息对话框中显示“请注意网络用语！”。设置页面前
3、的效果如图5-2，添加行为后的效果如图5-3, function MM_popupMsg(msg) /v1.0 alert(msg); ,5.2 使用行为,页面关闭弹出问卷调查窗口 页面关闭时利用行为可以弹出浏览器窗口，打开其他页面（如问卷调查窗口等）。具体操作如下。 1.制作问卷调查页面 打开DW新建html页面，保存为“调查.html”。可以利用AP Div在页面中设计比较简单的问卷调查页面。,5.2 使用行为,页面关闭弹出问卷调查窗口 2.添加行为, function MM_openBrWindow(theURL,winName,features) /v2.0 window.open(t
4、heURL,winName,features); ,5.2 使用行为,图片的晃动效果,function MM_effectShake(targetElement) Spry.Effect.DoShake(targetElement); ,默认选项，晃动的目标元素为“当前选定的内容”,5.2 使用行为,设置文本行为 在index.html页面中添加状态栏文字，同时设置文本域的文字，当鼠标移至用户名文本框时，显示“请输入用户名”，当光标在用户名文本框闪烁时，用户可以输入用户名。效果如图5-21所示,5.2 使用行为,设置文本行为 状态栏文字是页面载入时出现，因此行为的主体对象是body标签。首先在
5、标签检查器中选择“body”标签，然后在行为面板中添加动作和事件,5.2 使用行为,设置文本行为 function MM_displayStatusMsg(msgStr) /v1.0 window.status=msgStr; document.MM_returnValue = true; ,5.2 使用行为,文本域文字的行为 页面中的用户登录需要输入用户名、密码，因此在页面会插入给用户输入的文本域。常常可以设计这样的效果：当鼠标移到文本域时，文本域中显示“请输入用户名”，当文本域获得焦点时，之前的文字消失，用户则可以输入用户名信息。这种效果是添加了文本域文字的行为,5.2 使用行为,制作交换
6、图像 “交换图像”这一动作的特效是恢复交换的图像。当鼠标经过图像时，原图像会变成另外一幅图像，否则恢复原图像。其实，一个交换图像是由两幅图像组成的，包括原始图像和鼠标经过时显示的交换图像。,5.2 使用行为,制作交换图像 2.选择行为的事件。, function MM_swapImgRestore() /v3.0 var i,x,a=document.MM_sr; for(i=0;a ,5.2 使用行为,修改属性,5.2 使用行为,修改属性 2. 修改行为的触发事件, function MM_changeProp(objId,x,theProp,theValue) /v9.0 var obj
7、= null; with (document) if (getElementById) obj = getElementById(objId); if (obj) if (theValue = true | theValue = false) eval(“obj.style.“+theProp+“=“+theValue); else eval(“obj.style.“+theProp+“=“+theValue+“); /scrip,5.2 使用行为-相关概念及操作,行为面板 DW允许用户通过内置的“标签检查器”面板管理其所提供的多种内置行为。如果“标签检查器”面板已关闭，可以在“窗口”菜单中选
8、择“行为”命令，将其打开。单击“行为”选项卡，显示“行为”面板，还可以按【Shift+F4】打开“行为”面板。在面板中可查看当前标签中已添加的行为，并可对行为进行管理，如图5-38所示。,5.2 使用行为-相关概念及操作,JavaScript JavaScript是一种脚本语言，在网页中添加一段JavaScript，可以增加网页的互动性，因此常常嵌入在网页文件（如html文件）中，使网页增加互动性。它不依赖于Web服务器，而是由客户端浏览器解释执行，因此JavaScript 能及时响应用户的操作。,5.2 使用行为-相关概念及操作,JavaScript,5.2 使用行为-相关概念及操作,常见的内置行为 在DW中已经预设了一组内置行为。行为是事件和动作构成的。动作是完成某种特殊任务，事件是触发动作发生的原因,5.2 使用行为-相关概念及操作,
