网页制作与网站设计_11Dreamweaver用行为制作网页解剖.ppt

项目十一 Dreamweaver用行为制作网页 内容摘要 理解什么是行为、事件和动作 学习行为面板的使用 学习添加、删除、修改行为、使用行为 学习目标 理解行为的概念、行为的组成 掌握行为的基本操作：添加、修改、删除行为 掌握在网页中利用行为实现特定的交互效果或特效 Dreamweaver用行为制作网页  任务一描述：行为概念 小刚在前面已经基本掌握了网页制作的方法，能够制作简单的网页了。可小刚的网页怎么不能像其他大型网站的网页那般好像能与用户交互呢？老师告诉了小刚一个秘密工具：行为。并且告诉他假如想要使网页更“聪明”的话，就要使用行为来感知外界的信息并做出相应的响应。这些外界信息包括鼠标的活动，如页面的调用和关闭、鼠标移动到页面元素上点击元素或移开元素，连同焦点的改变和键盘的情况等各种变化，对不同的页面内容有不同的事件。接下来我们就先来了解一下什么叫行为。 解决方案 行为是Dreamweaver中制作绚丽网页的利器，功能强大，在学习利用行为实现各种特效前，我们先来了解行为的概念。 Dreamweaver用行为制作网页  知识讲解 行为是为影响某一具体事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。所以在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。 在Dreamweaver中，行为是事件和动作的组合。事件是特定的时间或是用户在某市所发出的指令后紧接着发生的，而动作是事件发生后网页所要做出的反应。所谓的动作就是设置交换图像、弹出信息等特殊的JavaScript效果。在设定的事件发生时运行动作。 Dreamweaver用行为制作网页  知识讲解 事件：每个浏览器都提供一组事件，不同的浏览器有不同的事件，但常用的事件大部分浏览器都支持，常用的事件及作用说明如下。 动作：动作就是当用户触发事件后所执行的脚本代码，一般使用JavaScript或VBScript编写。这些代码可移植性特定的任务，如打开浏览器窗口以及显示或隐藏层等。 Dreamweaver用行为制作网页  任务二描述：行为基本操作 听完老师的讲解之后，小刚知道了行为的强大功能，老师为了让小刚进一步了解行为，分别又讲解了行为面板和“行为”的基本操作。 解决方案 了解了行为的概念之后，我们来认识一下行为面板和。 Dreamweaver用行为制作网页  知识讲解 Dreamweaver CS3提供了丰富的内置行为，这些行为利用简单直观的语句设置手段，不需要编写任何代码就可以实现一些强大的交互性和控制功能，还可以从互联网上下载一些第三方提供的动作来使用。 【行为】面板的作用 事件：是浏览器对每一个网页元素的响应途径，与具体 的网页对象相关。 动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务，如播放声音、打开浏览器口、弹出菜单等。 行为：实质上是事件和动作的合成体。 Dreamweaver用行为制作网页  任务三描述：行为的应用 在了解行为概念和行为的基本操作之后，小刚兴趣大增，老师通过几个实例向小刚展示了行为的强大功能。 解决方案 在Dreamweaver CS3中自带的行为大约有20多种，在对象上添加这些行为后可以使网产生各种特效。 Dreamweaver用行为制作网页  知识讲解及操作步骤 交换图像 【交换图像】就是当鼠标指针经过图像时，原图像会变成另外一幅图，一个交换图像其实是由两幅图像组成，即原始图像和交换图像。 操作步骤： 打开网页文档 在菜单栏中选择【窗口】|【行为】命令，打开【行为】面板，在面板中单击【添加】 按钮，在弹出的菜单中选择【交换图像】命令 弹出【交换图像】对话框，在对话框中单击【设定原始文档为】文本框右边的【浏览】按钮，在弹出的【选择图片源文件】对话框中选择相应的图像文件，输入新图像的路径和文件名 单击【确定】按钮，在【行为】面板中可以看到添加的行为 保存文档，在浏览器中浏览，交换图像后的效果 Dreamweaver用行为制作网页  知识讲解及操作步骤 弹出提示信息 【弹出信息】显示一个带有指定信息的警告窗口，因为该警告窗口只有一个【确定】按钮，所以使用这个动作可以提供信息，而不能为用户提供选择。 具体操作步骤： 打开网页文档 在菜单栏中选择【窗口】|【行为】命令，打开【行为】面板，在面板中单击【添加】 按钮，在弹出的菜单中选择【弹出信息】命令 弹出【弹出信息】对话框，在【消息】文本框中输入文本【欢迎光临】 单击【确定】按钮，将行为添加到【行为】面板，单击显示的下拉按钮，在弹出的