Dreamweaver网页制作基础教程项目十一为首页添加动态效果教学教材.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com Dreamweaver网页制作基础教程 沈阳市信息工程学校 项目十一 为首页添加动态效果 核心技术 ? 了解JavaScript代码的概念及作用 ? 掌握常见的行为在网页中的应用 ? 掌握常见的、简单一些的JavaScript代码在页面中的使用? 任务目标 ? 任务一：利用行为制作页面动态效果 ? 任务二：利用源代码制作特效网页 能力目标 ?JavaScript简介 ? 添加Dreamweaver提供的行为效果 ? 添加一些常见的、公开的JavaScript代码 项目背景 在一般仅使用HTML语言的网页中，由于缺乏动态效果和交互性，从而带给用户的体验感总是有所欠缺。要加强这种用户体验，使用JavaScript（简称JS）是一种很好的解决办法。JS是一种基于浏览器的脚本语言，编写十分方便，能够提供大量的动态效果并加强交互性，但是对于一般用户而言，编写规范的、有效的JavaScript代码比较麻烦。针对这个问题，Dreamweaver直接将一些常用的JS效果集成起来，成为行为，通过直接添加行为，可以在网页中添加各种效果。对于Dreamweaver中没有集成的行为，用户也可以直接使用代码添加到网页中，丰富网页的功能。 项目分析 在Dreamweaver中行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。行为是由事件和动作构成的。例如，当用户把鼠标移动至对象（称为事件）上时，这个对象会发生预定义的变化（称为动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。一个事件可以触发许多动作，用户可以定义它们执行的顺序。利用Dreamweaver中的行为，无须书写代码，就可以实现丰富的动态页面效果，达到用户与页面交互的目的。 Dreamweaver不可能集成用户需要的所有行为，故用户还可以根据自己需要将JavaScript代码插入到网页的相应位置，丰富网页的功能，达到更好的交互。 项目目标 通过网页行为的添加和网页JavaScript代码的直接添加，对于通过JavaScript代码加强网页的交互性和动态效果有比较清晰的认识。能熟练添加一些常用的行为，能将一些常见的JavaScript代码添加到网页中。行为的添加中主要应注意行为对象的选择及事件的选择。添加JavaScript代码时特别要注意JavaScript代码是区分大小写的。 （9）显示/隐藏层：显示/隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。 （10）检查插件：有时制作的页面需要某些插件的支持，如使用Flash制作的网页，所以有必要对用户浏览器的插件进行检查，看它是否安装了指定的插件。应用这个行为就可以实现这一工作。 （11）检查表单：检查指定文本域的内容以确保用户输入了正确的数据类型。 （12）设置文本：可以设置容器、文本域、框架、状态栏的文本 （13）调用JavaScript：这个行为允许当某些事件被触发时，调用相应的JavaScript脚本，以实现相应的动作。 （14）跳转菜单：该行为主要用于编辑跳转菜单。跳转菜单是文件中的弹出菜单，对站点访问者可见，并列出链接到文件或文件的选项。 （15）设置导航栏图像：设置网站导航栏的图像。 （16）跳转到URL：可以指定当前浏览器窗口或者框架窗口载入指定的页面。 （17）预先载入图像：“预先载入图像”动作会使图像载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致的延迟。 2．Dreamweaver的常用事件 （1）onload（装入一个文件）：当浏览器完成装入一个窗口或一个帧集合中所有的帧时产生该事件。 （2）onunload（退出一个文件）：当Web页面退出时引发该事件。 （3）onmousedown（按下鼠标）：当按下鼠标的一个键时发生该事件。 （4）onmousemove（鼠标移动）：当鼠标移动时发生该事件。 （5）onmouseover（鼠标悬停）：当鼠标悬停在一个界面对象时发生该事件。 （6）onmouseout（鼠标滑出界面对象）：当鼠标滑出一个界面对象时发生该事件。 （7）onclick（单击一个对象）：当用户单击鼠标按键时产生该事件。 （8）onfocus（获得焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象获得焦点时引发该事件。可通过用鼠标单击或用键盘的“Tab”键使一个对象得到焦点。 （9）onblur（失去焦点）：当表单对象中的文本输入框对象、文本输入区对象或者选择框对象不再拥有焦点时引发该事件。 任务实施 图11.1.2 打开和关闭页面时，显示弹出信息行为的实现 步骤1：选择页面元素。 因为是打开和关闭页面时产生的效