第九章第九章.ppt

第9章行为网页设计与制作DreamweaverCC标准教程

1.行为简介2.制作图像特效3.改变属性4.启用浏览器窗口5.效果行为6.JavaScript代码本章学习主要内容：

网页中的行为实际上就是网页文档中一系列的JavaScript代码，用于实现网页的动感效果或引起某些特殊功能。一个完整的Dreamweaver行为由两大要素组成：事件（Event）和动作（Action）。事件是由浏览器定义的消息，可以附加在网页元素上，或者HTML语言标签上。动作是行为的内容本身，由一组JavaScript

程序组成。对于一个特定网页元素或对象来说，添加行为需要确定事件

和动作，并将动作和相应的事件关联起来，才能实现行为。9.1行为

9.1.1事件9.1.2动作9.1.3行为面板9.1行为

事件可以理解为是行为中各种动作的触发条件，最常用的事件包括onClick，onDblClick，onMouseOver，onMouseOut和onLoad等，分别表示鼠标单击，鼠标双击、鼠标经过、鼠标移开和页面加载等。9.1.1事件

动作是行为的具体实现过程。不同动作执行不同的任务或工作，展示不同的效果。针对不同元素或对象，可以添加不同的行为，有针对层的行为，有针对图像的行为等。9.1.2动作

在网页中添加和修改行为，由【行为】面板来完成。选择菜单【窗口】|【行为】，或按快捷键Shift+F4，即可打开【行为】面板。9.1.3行为面板

添加适当的图像特效，能使网页内容更加生动。常用的图像特效有交换图像、显示-隐藏元素等。9.2制作图像特效

9.2.1课堂案例—吉太美食9.2.2交换图像9.2.3显示-隐藏元素9.2制作图像特效

案例学习目标：学习图像特效的制作。案例知识要点：在【行为】面板中，点击按钮，在【动作】菜单中选择相应图片特效动作进行设置。素材所在位置：案例素材/ch9/课堂案例-吉太美食。案例效果如图9-4所示。9.2.1课堂案例-吉太美食

交换图像动作主要用于创建当鼠标指针经过时产生动态变化的图片对象。提示：因为只有图像的src属性受此动作的影响，因此目标图像应与原图像具有相同宽度和高度，否则，载入图像将被压缩或拉伸，导致变形。9.2.2交换图像

显示-隐藏元素动作，能够通过响应事件，触发改变一个或多个网页元素的可见性。提示：设置网页中的显示或隐藏元素，通常由两个行为组成，第一个行为通过事件触发显示或隐藏网页元素，第二个行为用以恢复网页元素之前的显示或隐藏状态。9.2.3显示-隐藏元素

改变属性允许网页浏览者通过事件控制网页元素，令其各种属性发生变化。利用改变属性的方法控制网页元素的外观及其他所有属性，可以更加灵活地形成各种特殊效果。9.3改变属性

11.3.1课堂案例——绿野网站建设11.3.2改变属性9.3改变属性

案例学习目标：学习改变网页元素属性的方法。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择【改变属性】进行设置。素材所在位置：案例素材/ch9/课堂案例-绿野网站建设。案例效果如图9-23所示。9.3.1课堂案例-改变属性

自动弹出浏览器窗口是网络浏览过程中经常会用到的特效。11.4启用浏览器窗口

9.4.1课堂案例—儿童摄影9.4.2打开浏览器窗口9.4.3转到URL调用9.4启用浏览器窗口

案例学习目标：学习添加启用浏览器窗口行为。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择添加浏览器行为。素材所在位置：案例素材/ch9/课堂案例-儿童摄影。案例效果如图9-37所示。9.4.1课堂案例-儿童摄影

打开浏览器窗口行为主要用于控制在一个新窗口中打开指定网页。9.4.2打开浏览器窗口

转到URL动作主要用于在当前窗口指定的框架下打开一个新网页，可通过一次操作更改多个框架的内容。9.4.3转到URL调用

效果行为是视觉增强功能，通常在一段时间内修改网页元素的视觉效果。效果包括增大收缩、显示渐隐、晃动、挤压和滑动等效果，还可以组合两个或多个效果来创建复合特效。该行为可以应用于网页中几乎所有的元素9.5效果行为

9.5.1课堂案例—艺术画廊9.5.2Blind，Clip，Slide，Fold9.5.3Fade，Highlight，Drop9.5.4Puff，Scale9.5.5Bounce，Pulsate，Shake9.5效果行为

案例学习目标：学习设置图像效果的方法。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择【效果】进行设置。素材所在位置：案例素材/ch9/课堂案例-艺术走廊。案例效果如图9-43所示。9.5.1课堂案例-艺术画廊

9.5.2Blind，Clip，Slide，Fold为网页元素添加B