使用行为制作网页特效PPT课件

《使用行为制作网页特效PPT课件》由会员分享，可在线阅读，更多相关《使用行为制作网页特效PPT课件（38页珍藏版）》请在金锄头文库上搜索。

1、 第10章使用行为制作网页特效 Dreamweaver行为是一段Javascript代码 当某个事件触发它时 将执行一个动作 如打开浏览器窗口或显示页面元素 使用Dreamweaver内置的行为 不需要编写代码 就可以实现复杂的网页特效 本章学习内容 10 1学习任务 认识行为10 2案例1制作网页加载时弹出公告页10 3案例2利用JavaScript实现加载网页时弹出消息框10 4案例3使用行为设置图像特效10 5案例4使用行为设置文本10 6案例5使用行为设置跳转菜单效果10 7案例6制作网页拼图游戏 10 1学习任务 认识行为 行为是DreamweaverCS5中一个非常强大的工具 使用

2、行为 编程人员不用编写Javascript代码便可实现多种动态网页特效 DreamweaverCS5提供了很多行为 这些行为放在其内部行为库中 本节学习任务认识行为 了解行为的相关概念以及属性 事件 方法的含义 掌握行为面板的基本操作 10 1 1行为概述 行为是对象为响应某一事件而采取的动作 它由对象 事件和动作组成 对象是产生行为的主体 很多网页元素都可以成为对象 如图片 文字 多媒体文件等 此外 网页本身有时也可作为对象 10 1 1行为概述 事件是触发动态效果的原因 它可以被附加到各种页面元素上 也可以被附加到HTML标记中 一个事件总是针对页面元素或标记而言的 例如将鼠标指针移到图片

3、上 把鼠标指针放在图片之外和单击鼠标左键 是与鼠标有关的三个最常见的事件 onMouseOver onMouseOut onClick 不同浏览器支持的事件类型和数量是不一样的 通常高版本的浏览器支持更多的事件 动作是指最终需完成的动态效果 如交换图像 弹出信息 打开浏览器窗口 播放声音等都是动作 动作通常是一段JavaScript代码 在DreamweaverCS5中使用内置行为时 系统会自动向页面中添加JavaScript代码 用户完全不必自己编写 10 1 2 标签检查器 面板 在DreamweaverCS5中 对行为的添加和管理主要通过 标签检查器 面板完成 在菜单栏中选择 窗口 行为

4、 命令或按组合键 可以打开 标签检查器 面板 如图10 1所示 10 1 3事件 用户与网页交互时产生的操作 称为事件 事件可以由用户引发 也可能是页面发生改变 甚至还有看不见的事件 如Ajax的交互进度改变 绝大部分事都由用户的动作所引发 如 用户单击鼠标触发onClick事件 若鼠标移动到目标时 触发onMouseOver事件等等 在Javascript中 事件往往与事件处理程序配套使用 每个浏览器都提供一组事件 这些事件可以与 标签检查器 面板的 动作 弹出菜单中列出的动作相关联 当网页的访问者与页面进行交互时 例如 单击某个图像 浏览器会生成事件 这些事件可用于调用执行动作的JavaS

5、cript函数 Dreamweaver提供多个可通过这些事件触发的常用动作 10 1 4DreamweaverCS5的标准行为 针对InternetExplorer4 0或更高版本浏览器 在 标签检查器 面板中 单击 添加行为 按钮 可以展开行为菜单 如图10 2所示 10 2案例1制作网页加载时弹出公告页 学习目标使用Dreamwear的 打开浏览器窗口 行为制作网页加载时弹出公告页 知识要点创建行为的步骤 打开浏览器窗口 行为 当加载网页时 弹出公告页 如图10 3所示 案例小结在DreamweaverCS5中 内置了丰富的行为 行为的设置是通过 标签检查器 面板完成的 添加行为的步骤为

6、创建或选择要触发行为的页面元素 选择要应用的行为 并设置其参数 指定触发该行为的事件 通过学习设置 打开浏览器窗口 行为的具体步骤 掌握了在Dreamweaver中添加行为的方法 10 3案例2利用JavaScript实现加载网页时弹出消息框 学习目标为网页调用JavaScript 当加载网页时 弹出对话框 提示用户当前正访问的网站 知识要点了解JavaScript基本概念 在网页中引用JavaScript脚本的两种方法 掌握通过 标签检查器 面板调用JavaScript脚本的步骤 在浏览器中打开网页时 弹出消息框 由浏览者单击 确定 后继续浏览网站 效果如图10 7所示 请在Dreamwea

7、ver中完成案例的制作 10 3 1认识JavaScript DreamweaverCS5内置了丰富的行为 行为是某些事件触发的动作 而动作则是DreamweaverCS5库中的JavaScript代码或用户自定义的代码 JavaScript是一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言 主要目的是为了解决服务器端编程语言如Perl速度过慢的问题 以便为客户提供更加流畅的浏览体验 JavaScript的正式名称是 ECMAScript 由ECMA EuropeanComputerManufacturersAssociation 欧洲电脑厂商协会 组织发展和维护

8、 ECMA 262是正式的JavaScript标准 这个标准基于JavaScript Netscape 和JScript Microsoft JSript是微软为了取得技术优势 推出的脚本语言 目前JavaScript的最新版本为2 0 JavaScript在网页中有两种简单的调用方法 一种是直接将JavaScript脚本语言嵌入到网页中 另一种是引用外部JavaScript文件 1 直接嵌入HTML文档这是最常用的方法 大部分含有JavaScript的网页都采用这种方法 打开网页文件 01 html 可以查看代码如下所示 document write helloworld Javascrip

9、t 2 引用方式如果已经存在一个Javascript源文件 以js为扩展名 则可以在网页中引用它 以提高代码的利用率 其格式如下 其中的url就是程序文件的地址 同样的 该语句可以放在HTML文档头部或主体的任何部分 如果要实现 直接插入方式 中所举例子的效果 可以首先创建一个Javascript源代码文件 script js 其内容如下 document write helloworld 在网页 02 html 中 调用脚本文件 script js 10 3 2使用行为调用JavaScript脚本 调用JavaScript 行为在事件发生时执行自定义的函数或JavaScript代码行 可以自

10、己编写JavaScript 也可以使用Web上各种免费的JavaScript库中提供的代码 本实例采用的行为是Dreamweaver内部Javascript库的行为window alert 该行为用来弹出消息框 操作步骤如下 在Dreamweaver中打开网页文件 10 3 html 如图10 9所示 选择 body 标签 单击 窗口 行为 菜单命令 打开 标签检查器 面板 单击 添加行为 按钮 选择 调用Javascript 菜单命令 弹出 调用Javascript 对话框 在文本框中输入JavaScript脚本 window alert 欢迎访问夏威夷风情网 如图10 10所示 单击 确定

11、 按钮 在 标签检查器 面板添加了 调用Javascript 行为 设置触发事件为 onLoad 如图10 11所示 保存文档 按 F12 键在浏览器中预览效果 案例小结JavaScript是一种功能强大的脚本语言 在网页内部嵌入JavaScript脚本语言 可以方便的实现JavaScript特效 本案例简要介绍了Javascript脚本语言和通过行为面板调用JavaScript脚本的方法 10 4案例3使用行为设置图像特效 DreamweaverCS5内置了 交换图像 预先载入图像 等图像行为特效 交换图像 行为通过更改标签的src属性将一个图像和另一个图像进行交换 使用此行为可创建 鼠标经

12、过图像 的效果以及其他图像效果 包括一次交换多个图像 预先载入图像 行为可以将不会立即出现在网页上的图像载入到浏览器缓存中 这样可以防止由于网速导致图像下载缓慢而带来的浏览延迟 学习目标在网页中插入一幅图像并设置ID 选中图像 添加 交换图像 行为并设置参数 当鼠标经过图像时切换图像 知识要点图像 ID 属性的设置 为图像添加 交换图像 行为的方法和参数设置 请在Dreamweaver中完成案例的制作 10 5案例4使用行为设置文本 通过Dreamweaver内置的 设置文本 行为可以为网页的状态栏 容器 文本域 框架等元素要显示的文字 设置状态栏文本 行为可在浏览器窗口左下角处的状态栏中显示

13、文本消息 例如 可以使用此行为在状态栏中说明链接的目标 而不是显示默认的URL 设置容器的文本 行为将页面上现有容器的内容和格式替换为指定的内容 设置文本域文字 行为可用指定的内容替换表单文本域的内容 设置框架文本 行为可用来动态设置框架的文本 用指定的内容替换框架的内容和格式 该内容可以包含任何有效的HTML代码 使用此行为可在框架中动态显示信息 学习目标为网页添加 设置状态栏文本 行为 当浏览网页时在状态栏显示相应信息 为APDiv添加 设置容器的文本 行为 当鼠标经过时 用指定内容替换APDiv中的图像 知识要点为网页添加 设置状态栏文本 行为 为APDiv添加 设置容器行为 请在Dre

14、amweaver中完成案例的制作 案例小结本节主要介绍通过Dreamweaver内置的 设置文本 行为为网页设置所要显示的内容 为网页元素设置文字的重点在于HTML标签和JavaScript脚本语言的使用 10 6案例5使用行为设置跳转菜单效果 使用Dreamweaver内置的行为可以创建跳转菜单 跳转菜单是由下拉式菜单组成的超链接组 使用跳转菜单可以创建多个网页的链接 实现向多个目标网页的跳转 学习目标使用 跳转菜单 行为 为网页添加友情链接栏 知识要点为网页添加 跳转菜单 行为 网页效果如图10 24所示 请在Dreamweaver中完成案例的制作 案例小结使用 跳转菜单 行为 可以快速设

15、置超链接区域 并且节省空间 是网页更加整洁 跳转菜单 行为是表单的一种 10 7案例6制作网页拼图游戏 学习目标使用Fireworks软件切割图片 使用 拖动AP元素 行为制作网页拼图游戏 知识要点使用Fireworks软件切割图片 APDiv元素的基本操作 拖动AP元素 行为 使用 拖动AP元素 行为创建的网页拼图游戏效果如图10 30所示 请在Dreamweaver中完成案例的制作 案例小结使用 拖动AP元素 行为制作拼图游戏 使用Dreamweaver的内置行为 可以方便的制作网页特效 10 8实训 本节重点练习使用Dreamweaver的 标签选择器 面板创建行为的基本操作 10 8

16、1使用行为创建图像收缩特效 1 实训目的掌握 标签检查器 面板及行为的基本操作掌握使用 效果 行为设置图像收缩特效的方法2 实训要求及网页设计效果使用 标签检查器 面板中的 效果 行为为图像设定收缩效果 首先在文档中插入一幅图像 然后单击 标签检查器 面板中的按钮 选择 效果 增大 收缩 为该图像设置 增大 收缩 行为 在 增大 收缩 对话框中的设置参考如图10 37所示 设置后的 标签检查器 面板如图10 38所示 鼠标经过前的图像和鼠标经过后的图像如图10 39和图10 40所示 10 8 2设置变换图像的导航栏 1 实训目的掌握 标签检查器 面板及行为的基本操作掌握使用 交换图像 行为设置导航栏图像的方法2 实训要求及网页设计效果导航栏是网页重要的组成部分 变换图像的导航栏是网页常用的导航特效 当鼠标移动到导航按钮时 变换图像 当鼠标移开时 恢复原图像 操作提示 在Dreamweaver中打开网页 temp html 为导航栏图像设置ID 依次为nav1 nav6 选择导航栏图像 单击 窗口 行为 菜单命令 打开 标签选择器 面板 单击面板中的按钮 在弹出的菜单中选择 交换图像