模块06 行为和JavaScript特效

1、1模块模块06 06 行为和行为和JavaScriptJavaScript特效特效模块引导模块引导网页的动态效果设计是网页设计的重要内容，动态效果是增添网页的动态效果设计是网页设计的重要内容，动态效果是增添网页活力的一个重要元素，合理使用与合理的布局对整个网页的美网页活力的一个重要元素，合理使用与合理的布局对整个网页的美化、甚至整个网站的美化起着重要的作用。为了让自己制作的页面化、甚至整个网站的美化起着重要的作用。为了让自己制作的页面更好看，有必要在静态的网页中加入一些动态的元素，诸如更好看，有必要在静态的网页中加入一些动态的元素，诸如GIF、FLASH动画、滚动字幕、横幅广告、悬停按钮等等，

2、网页的动态动画、滚动字幕、横幅广告、悬停按钮等等，网页的动态效果可以通过行为也可以通过效果可以通过行为也可以通过JavaScript或基于或基于JavaScript的的DHTML代码来实现。代码来实现。本模块围绕着本模块围绕着“工作过程工作过程”为主线，以为主线，以“能力本位能力本位”为主旨，为主旨，通过工作任务的构建，培养学生的职业技能与职业素质，每个任务通过工作任务的构建，培养学生的职业技能与职业素质，每个任务由不同的工作过程、完整的模拟制作任务和独立实践任务组成。每由不同的工作过程、完整的模拟制作任务和独立实践任务组成。每一个任务都分为任务背景、任务要求、重点难点、素材、操作步骤一个任务

3、都分为任务背景、任务要求、重点难点、素材、操作步骤详解和职业技能知识点考核六个部分。详解和职业技能知识点考核六个部分。各专业可以根据自己专业的特点，对本模块的内容进行有选择各专业可以根据自己专业的特点，对本模块的内容进行有选择教学。教学。2应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用3学习目标学习目标能力目标能力目标1. 掌握掌握AP Div的创建和编辑方法。的创建和编辑方法。 2. 通过利用行为制作动态效果，理解行为的功能。通过利用行为制作动态效果，理解行为的功能。 3. 掌握如何修改行为的属性来制作更多的动态效果。掌握如何

4、修改行为的属性来制作更多的动态效果。 4. 掌握制作富有动感、交互性强的网页。掌握制作富有动感、交互性强的网页。 5. 掌握构件结构、行为和样式。掌握构件结构、行为和样式。知识目标知识目标1. 掌握弹出小窗口的制作和设置。掌握弹出小窗口的制作和设置。 2. 掌握交换图像的制作。掌握交换图像的制作。 3. 掌握漂浮广告的制作。掌握漂浮广告的制作。 4. 掌握显示与隐藏层的制作。掌握显示与隐藏层的制作。 5. 掌握选项卡式面板、折叠式面板的制作掌握选项卡式面板、折叠式面板的制作课时分配课时分配2课时（授课课时（授课1课时，实践课时，实践1课时）。课时）。应知技能应知技能学习目标学习目标模拟任务模拟

5、任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用应知技能应知技能行为是强大的网页编辑工具Dreamweaver为用户提供的一种技术，它提供了一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，使不懂JavaScript语言的用户能够做出这样的网页。行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。一个行为是由一个事件（Event）和一个动作（Action）构成的。例如，当用户把鼠标移动至一张图片上时（这被称为一个事件），这个图片会发生预定义好的变化（这被称为是动作）。事实上行为是由预先书写好的JavaScript代码构成的，使

6、用它可以完成诸如打开新浏览窗口、播放背景音乐、控制Shockwave文件的播放等任务。4认识行为认识行为应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用模拟任务模拟任务5任务背景任务背景我们经常看到这样一些网站，一进入首页立刻会弹出一个窗口，或者点击一个链接或按钮弹出，这就是弹出窗口。通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者发布站内公告、网站广告等说明想要特别提示的信息。效果图如图所示。任务任务要求要求打开Gordonss Crown主页index.html时要求弹出有关欢迎广告信息。任务任务1 弹

7、弹出窗口的制作出窗口的制作应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用模拟任务模拟任务6任务背景任务背景图像是页面设计中必不可少的元素，图像有许多的应用方式，使用这些方式可以制作出更富动态感的网页文件，下面通过更改img标记的src属性将一个图像和另一个图像进行交换，为index.html设置两张图像的交换。效果图如图所示。任务任务要求要求在用户浏览网页中，鼠标指针滑过图像时换成另外一幅图像，离开时恢复原始图像。任务任务2 使用使用图像行为图像行为应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展

8、情境01AP Div和行为的使用模拟任务模拟任务7任务背景任务背景在浏览很多网站或博客的时候，经常能看到那种当鼠标移到图片上时，图片会显示增大、遮帘、渐隐等特殊效果，为网页增加动感效果。利用行为面板中的内置方法“效果”，可以很方便地实现上述效果。效果图如图所示。任务任务要求要求当用户浏览网页时，鼠标指针滑过一幅图像，图像就以淡入方式显示。任务任务3 制作制作图片的渐隐载入显示效果图片的渐隐载入显示效果应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用模拟任务模拟任务8任务背景任务背景选项卡式面板构件是一组面板，用来将内容存储到紧凑空

9、间中，访问者可通过选择它们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容，单击不同的选项卡时，会打开相应的面板。效果图如图所示。任务任务要求要求移到不同的选项卡上，构件的面板会相应地打开，在给定时间内，选项卡面板构件中只有一个内容面板处于打开状态。任务任务4 选项选项卡式面板的制作卡式面板的制作应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用知识拓展知识拓展1行为的构成行为的构成事件：事件是触发动作被执行的条件，只有当指定的事件发生时，对应的动作才被执行。例如，onMouseOver，onMouseOut和onCli

10、ck都是用户在浏览器中对浏览页面的操作。动作：最终产生的动态效果，是一段编写好的内置在Dreamweaver中的JavaScript程序，它由事件触发，执行程序代码实现一定的功能。2行为的基本操作行为的基本操作【行为】面板的基本操作包括打开面板、显示事件、添加行为、删除行为等。3行为的应用行为的应用Dreamweaver CS5内置了20多种行为，可以实现很多常用的功能，使网页看起来更加具有动感，同时能够与浏览者产生互动，完成一些实用的功能。 弹出信息交换图像效果 打开浏览器窗口显示-隐藏元素设置文本 调用JavaScript检查表单拖动AP元素行为 改变属性检查插件9行为的应用行为的应用应知

11、技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Div和行为的使用知识拓展知识拓展1什么是什么是Spry？Spry是实现Ajax的一种简单方式，适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，可以实现在HTML网页中展现XML数据、建立诸如炫酷菜单的一些界面，还有其他的一些页面特效。在减少页面刷新的同时，增加交互性、速度和可用性。2Spry的功能的功能Spry构件Spry验证表单Spry XML数据显示Spry特效10Spry构件构件应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境01AP Di

12、v和行为的使用独立实践独立实践11任务背景任务背景经常在网上浏览网页的人会发现有这样一个很酷的导航菜单，当访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单，使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。效果如图所示。任务任务要求要求鼠标移到某个按钮上时，下拉菜单显示，鼠标离开下拉菜单消失。任务任务5 多级菜单的制作多级菜单的制作应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言学习目标学习目标能力目标能力目标1. 掌握掌握标记的使用。标记的使用。2. 掌握掌握标记的

13、设置标记的设置。3. 掌握掌握脚本的基本脚本的基本语法和使用。语法和使用。知识目标知识目标1. 掌握掌握标记的使用。标记的使用。2. 学会学会在网页中引入在网页中引入JavaScript。3. 掌握掌握应用应用JavaScript技术制作网页特效的常用方法。技术制作网页特效的常用方法。课时分配课时分配2课时（授课课时（授课1课时，实践课时，实践1课时）。课时）。12应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言应知技能应知技能13JavaScript由Netscape公司开发并随Navigator导航者一起发布的、介于Jav

14、a与HTML之间、基于对象事件驱动的编程语言。使用目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。特点特点1. 开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中；2. JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML 文段简化，减少下载时间。3. JavaScript 能及时响应用户的操作，对提交表单做即时的检查。JavaScript应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言模拟任务模拟

15、任务14任务背景任务背景为了更容易吸引浏览者的目光，现在各大网站都比较流行宽屏幻灯片效果，既可以突出显示广告内容，视觉效果又很强烈。效果如图所示。任务任务要求要求掌握JavaScript与页面有机的结合，掌握脚本的使用。任务任务1 宽宽屏幻灯片屏幻灯片应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言模拟任务模拟任务15任务背景任务背景为了更容易吸引浏览者的目光，可以在首页或各版块的页面两边制作漂浮的广告图片，随滚动条上下移动。效果如图所示。任务任务要求要求掌握层的制作和层的元素设置，掌握脚本的使用。任务任务2 随随滚动条上下移

16、动的菜单滚动条上下移动的菜单应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言模拟任务模拟任务16任务背景任务背景公告是网站的一个重要内容，能使用户及时了解最新的信息，所以为了使公告上的文字不至于被淹没在页面茫茫的文字海洋中，常常使它们动起来，并能随鼠标发生不同的状态，为页面增添生趣。效果如图所示。任务任务要求要求对文字插入marquee标签，使用“标签检查器”设置标签的各种属性值，并查看生成的代码。任务任务3 跑跑马灯的制作马灯的制作应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02Jav

17、eScript脚本语言模拟任务模拟任务17任务背景任务背景我们在浏览网页时，有时会看到跟随鼠标移动的五彩色块或文字，鼠标放到哪里，它们会跟到哪里，而且总在不停的旋转，颜色也很炫，让你的网页个性十足。效果如图所示。任务任务要求要求在index.html网页上设置跟随鼠标移动的色块或文字。任务任务4 跟随跟随鼠标的字符鼠标的字符应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言模拟任务模拟任务18任务背景任务背景在网页中嵌入随网页滚动条漂浮的QQ在线客服效果，能够很方便地实现商户与用户在线交流，尤其随着电子商务的发展，每一个商户都不

18、希望错过商机。效果如图所示。任务任务要求要求在index.html主页上嵌入QQ在线客服，掌握脚本的使用。任务任务5 在线在线QQ制作制作应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知识拓展情境02JaveScript脚本语言知识拓展知识拓展19MarqueeMarquee标签是成对出现的标签，首标签和尾标签之间的内容就是滚动内容。标签的属性主要有behavior、bgcolor、direction、width、height、loop、scrollamount、scrolldelay等，它们都是可选的。属性注释behavior字幕动态效果 ，该属性的参数值为alte

19、rnate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，默认值为scroll；。 需要注意的是：如果在标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。direction文字滚动方向，其值可取right，left，up，downwidth字幕宽度height字幕高度loop决定滚动文字的滚动次数，缺省时无限循环scrolldelay滚动延迟时间，单位毫秒scrollamount滚动数量，单位像素应知技能应知技能学习目标学习目标模拟任务模拟任务独立实践独立实践知识拓展知

20、识拓展情境02JaveScript脚本语言知识拓展知识拓展20事件与事件处理事件与事件处理事件是用户在访问页面时执行的操作。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver），而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。事件说明事件动作onClick鼠标单击时触发此事件onChange当前元素失去焦点并且被改变时触发此事件ondbclick鼠标双击时触发此事件onFocus当某个元素获得焦点时触发此事件onmousedown按下鼠标时触发此事件onLoad页面内容完成时触发此事件onmouseup释放鼠标左键时触发此事件onUnload当前页面将被改动时触发此事件onmouseover鼠标移动时触发此事件onkeydown当键盘上某个键被敲下