《Dreamweaver CS5网页设计与制作实例教程》课件-第8章 网页特效_第1页
《Dreamweaver CS5网页设计与制作实例教程》课件-第8章 网页特效_第2页
《Dreamweaver CS5网页设计与制作实例教程》课件-第8章 网页特效_第3页
《Dreamweaver CS5网页设计与制作实例教程》课件-第8章 网页特效_第4页
《Dreamweaver CS5网页设计与制作实例教程》课件-第8章 网页特效_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第八章网页特效第八章网页特效网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，是用网页脚本（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编写的脚本代码必须存放在HTML文档中，否则它将无法运行。JavaScript代码放在<script>与</script>标记之间，以便将脚本代码与HTML标记符区分开来。Script块可放在<head>与</head>之间，也可以放在<body>与</body>之间。基本结构如下：<scriptlanguage="JavaScript">JavaScript脚本代码</script>JavaScript简介JavaScript代码不但可以直接嵌入到HTML语言中，而且可以连接外挂的JavaScript文件*.js。实现方法是首先将JavaScript脚本保存成一个扩展名为.js的文件，然后在HTML文档中调用这个文件。采用连接外挂的JavaScript文件的方法，具有可修改性和可携带性，便于在多个网页中使用。编写*.js脚本文件时要注意，文件中只能包含JavaScript代码，不能包含HTML标记。8.3.2JavaScript应用实例对于网页设计人员而言，自己设计全部代码过于复杂和繁琐，目前出现的一些javascript插件较好地解决了这个问题。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。接下来通过实例来体验jQuery在网页设计中的应用。实例【例8-8】通过jQuery插件给网页增加自动轮换广告和信息的横向滚动，循环展览的效果。思考题1．什么是JavaScript脚本语言，如何在网页中加入JavaScript?2．如何在HTML语言中插入VBScript或JavaScript程序？3．请作出网页特殊效果，当鼠标移动的时候，有一十字架跟随其移动。4．什么是行为？举例说明事件与动作的含义。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论