《网页设计与制作实例教程》第8章(王军).pptVIP

清华大学出版社《网页设计与制作实例教程》第8章高等学校计算机应用规划教材添加网页特效2024/5/12主编方其桂

一个优秀的网站，不仅需要搭建合理的结构，丰富多彩的内容，得当的网页特效会使得网站更加吸引人。DreamweaverCS6中提供了通过网页行为、AP元素和Spry构件等来添加网页特效，使用简单方便，效果明显。本章通过实例，介绍各种网页特效的效果和添加网页特效的方法。内容提要

使用网页行为添加网页特效使用AP元素增加网页特效使用Spry构件增强视觉效果010203章节目录内容提要

教学内容DreamweaverCS6中的行为命令，实际上就是一系列具有特定功能的JavaScript程序脚本。一个完整的行为，需要包括“事件”和“动作”才能运行。“事件”是指在计算机上发生的一些操作；而“动作”则是指在发生了事件后，所触发并执行的一系列处理动作。

教学内容8.1.1交换位图实例1交换位图选择2张图片，一张做为初始图像显示在网页中，当鼠标单击图像时，图像变成另一张图片，当鼠标离开图像显示范围时，图像又恢复到初始图像，本例中交换图像后的效果如下图所示

教学内容8.1.2弹出信息实例2弹出信息给图像设置“弹出信息”行为，当用户在当前图像区域单击图像时，触发“弹出信息”行为，以窗口形式显示信息内容，效果如图8-4所示。

教学内容8.1.3打开窗口实例3打开浏览器窗口对网页中的图像设置“打开浏览器窗口”动作，单击图像触发事件，打开指定网页。如图8-6(a)所示为网页显示效果，图8-6(b)所示为单击图片后显示的打开指定浏览器窗口效果。

教学内容8.1.4其它效果实例4增大/收缩效果对网页中的图像设置“效果”行为，设置单击图像时图像增大200%，鼠标离开图像区域后，恢复图像比率。如图8-8(a)所示是一幅有待处理的图像，图8-8(b)所示是一个处理完成的图像。

教学内容8.1.4其它效果实例5晃动效果DreamweaverCS6效果行为中“晃动效果”经常用于网页中，通过晃动指定对象，达到引起用户的注意。设置“晃动效果”首先要指定对象，再在行为列表中“效果”选项中设置“晃动”，最后设置行为触发动作。用户浏览网页是触发相关动作后，指定图像立即晃动以引起用户的注意。

教学内容知识库1．DreamweaverCS6行为在DreamweaverCS6中对象行为种类众多，作用各不相同，表8-1罗列出DreamweaverCS6行为的动作名称和动作的功能。动作名称动作的功能交换图像发生事件后，用其他图像来取代选定的图像弹出信息设置事件发生后，弹出窗口显示信息恢复交换图像设置事件后，恢复先前已经交换的图像打开浏览器窗口在新窗口中打开URL，可以定制窗口大小拖动AP元素设置鼠标可以拖动相应的apDiv元素改变属性改变选定对象的属性效果设置对象显示效果，分别有增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘和高亮颜色7种效果显示-隐藏元素根据设定的事件，显示或隐藏指定的内容检查插件检查当前设备是否具备相应的插件检查表单检查当前网页是否具有指定的表单设置文本在指定的内容中显示相应的内容，分为设置层文本、设置框架文本、设置文本域文本和设置状态栏文本

教学内容知识库2．网页特效网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。它一般分为：时间日期类、页面背景类、页面特效类、图形图象类、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类和游戏类等等。

DreamweaverCS6中的AP?元素（绝对定位元素）是分配有绝对位置的?HTML?页面元素，具体地说，就是?div?标签或其他任何标签。AP?元素可以包含文本、图像或其他任何可放置到?HTML?文档正文中的内容。

8.2.1拖动元素效果实例6拖动元素APDiv在DreamweaverCS6中拥有绝对位置，在网页中先插入APDiv为对象设置好位置，再在APDiv中插入对象。要想实现鼠标拖动效果，就要为APDiv在行为中设置“拖动AP元素”效果。制作时应先在网页中插入APDiv，再设置APDiv行为效果。

8.2.2切换元素效果实例7切换元素本例通过对多个AP元素添加鼠标响应的行为命令，实现控制AP元素的显示与隐藏，从而达到不同AP元素间的切换效果，如图8-1