《Dreamweaver CS5网页设计与制作实例教程》课件_第8章 网页特效.ppt

第八章网页特效第八章网页特效网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，是用网页脚本（javascript,vbscript）来编写制作动态特殊效果的。8.1使用行为实现特效行为(Behaviors)是事件(Event)和动作(JavaScriptAction)的组合。通俗的描述，事件是在特定的系统时间或用户在发出指令，或者在计算机上发生的一些操作，例如，网页下载完毕、网页错误、用户按键或是单击鼠标等。而动作是在事件发生后，所触发并执行的一系列处理动作。例如，打开新的浏览器窗口、弹出菜单、播放音乐、变换图像、图像还原和跳转到另一个网页等。8.1.1添加和编辑行为可以为网页元素或者整个网页添加行为。给对象添加一个行为，应执行以下操作：(1)选择一个页面元素，例如一个图像或一个链接。如果要把一个行为添加到整个页面中，可在文档窗口底部左侧的标签选择器中单击body标签。(2)执行“窗口”|“行为”命令，打开“行为”面板。选定对象的标签将出现在“行为”面板的标题栏上。如图8-1所示，行为加载在页面上；如图8-2所示，行为加载在图像上。(3)单击“行为”面板中加号按钮(如图8-2所示)，在弹出菜单中选择一个动作，并为该动作输入所需的参数。(4)触发动作的默认事件在事件栏(Events)中出现。如果相关对象没有出现，或选定对象不能接受事件，可以单击“行为”面板按钮下的“显示事件”子菜单，选择较高版本的浏览器。在附加一个行为以后，用户可以根据自己的要求改变触发动作的事件、增加或删除动作，并为动作改变参数。8.1.2预定义行为常用的鼠标事件，如表8-1所示。表8-1鼠标事件事件描述onclick事件会在对象被点击时发生onload事件会在页面或图像加载完成后立即发生onunload事件会在用户退出页面发生onkeydown事件会在用户按下一个键盘按键时发生onkeypress事件会在键盘按键被按下并释放一个键时发生onmouseover事件会在鼠标指针移动到指定的对象上时发生onmouseout事件会在鼠标离开时发生onmouseup事件会在鼠标按键被松开时发生onfocus事件会在元素获得焦点时发生实例8.1.3实例一：改变属性行为8.1.4实例二：拖动AP元素行为8.1.5实例三：显示-隐藏层行为（一）图8-27范例效果图8.1.6实例四：显示-隐藏层行为（二）实现点击小图看大图8.1.7实例五：打开浏览器窗口行为图8-40弹出广告8.2使用spry实现特效实例Spry?框架是一个JavaScript?库，Web设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web页。有了Spry，就可以使用HTML、CSS和极少量的JavaScript将XML数据合并到HTML文档中，创建构件(如折叠构件和菜单栏)，向各种页面元素中添加不同种类的效果。点击“插入”|“spry”，可以看到spry框架的组件，其中有五个常用组件“spry菜单栏”“spry选项卡式面板”、“spry折叠式”、“spry可折叠面板”、“spry工具提示”、如图8-41所示。8.2.1spry应用实例（一）【例8-6】通过本实例来学习和掌握spry的使用方法，体会它们给网页带来的活力和互动效果。本例题涉及到spry的四个常用组件“spry选项卡式面板”、“spry折叠式”、“spry可折叠面板”、“spry工具提示”。详细步骤看教材8.2.2spry应用实例（二）【例8-7】应用“Spry菜单栏”设计导航菜单效果如下，详细步骤看教材8.3使用JavaScript实现特效JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加交互性，提供更流畅、美观的浏览效果。它的特点是：(1)JavaScript是一种解释性脚本语言（代码不进行预编译）。(2)JavaScript可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。(3)JavaScript跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。8.3.1JavaScript简介JavaScript是通过嵌入在标准的HTML语言中使用的。也就是说，使用JavaScript编写的脚本代码必须