网页设计与制作项目7 交互应用.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 任务7.2.1 行为面板 1 3、事件 事件决定了为某一页面元素所定义的动作在何时被执行，即在何时触发一个动作。每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+) 弹出式菜单中列出的动作相关联。当Web页的访问者与页进行交互时（例如，单击某个图像），浏览器生成事件；这些事件可用于调用引起动作发生的JavaScript函数。 4、附加行为 可以将行为附加给整个文件，也可以附加给链接、图像、表单对象或如何其它的HTML元素。每个事件可以指定多个动作，动作将按照顺序列表一次执行。 任务7.2.1 行为面板 1 5、修改行为 在给一个对象附加了行为以后，仍可以改变引发动作的事件，添加或删除动作及改变动作的参数。 任务7.2.2 常用行为介绍及应用 1 Dreamweaver CS5 提供了许多种网页行为，可以直接应用于网页中各种元素中。在“标签检查器”中的“行为”面板中，用户可以方便地为文本、窗口、图像、容器以及各种CSS属性添加交互行为。 1、窗口交互行为 窗口交互行为的作用是对浏览器窗口和窗体的对话框进行操作，实现简单的用户交互。在Dreamweaver CS5中，主要提供了两种窗口交互行为，及弹出信息和打开浏览器窗口。 “弹出信息”行为可以根据用户触发的事件，在浏览器窗口中弹出一个包含文本信息和一个确认按钮的对话框。使用该行为，可以以醒目的方式强制用户阅读本文信息。 “打开浏览器窗口”行为可以根据用户触发的事件，为Web浏览器弹出一个新的窗口，同时还可以定义新窗口的属性。 任务7.2.2 常用行为介绍及应用 1 2. 容器交互行为 容器交互行为的作用就是为AP Div等带有ID的容器添加交互的行为效果，包括“拖动AP元素”行为和“显示-隐藏元素”行为。 添加“拖动AP元素”行为允许用户为AP元素标签添加拖拽行为，允许用户在Web浏览器中用鼠标拖动该元素，更改元素的位置。由于“拖动AP元素”动作必须在层被用户拖动之前调用，所以确认引发动作的事件必须发生在拖动层之前。 任务7.2.2 常用行为介绍及应用 1 “显示-隐藏元素”行为可以控制网页架构标签根据用户重复的行为，在显示和隐藏等两种状态间切换。“显示-隐藏元素”行为可以应用于所有带ID属性的网页布局标签，不需要该标签以绝对定位的方式显示。“显示-隐藏元素”行为通常被用在一些特殊的网页元素上，如弹出式菜单、下落列表类导航等。 任务7.2.2 常用行为介绍及应用 1 3. 图像交互行为 图像交互行为的作用是为网页中的各种图像添加交互事件，实现图像的交换/恢复等。图像交互行为通常是基于鼠标滑过和滑开事件的。 预先载入图像 当我们浏览网页时，如果使用的宽带较慢时，常常会出现显示图像时的长时间等待。此时使用Dreamweaver CS5中自带的“预先载入图像”动作，可以使图像的下载速度明显加快，因为它已经将需要的图像保存到用户的缓冲区中。这样可以大大提高网站的访问量。 “交换图像”行为和“恢复交互图像”行为通常都是成对使用。“交换图像”行为可以在用户触发行为后替换网页文档中插入的图像；“恢复交互图像”可以根据另一个触发的事件恢复显示原来的图像，只有在使用了“交换图像”行为后才起作用。 任务7.2.2 常用行为介绍及应用 1 4. 属性交互行为 属性交互行为的作用是根据用户触发的事件，动态地改变网页中某个对象的属性值，一般通过改变对象的标记属性值相应地发表对象的属性，以实现各种特殊的视觉效果。Dreamweaver CS5 提供了“改变属性”行为，用户可以很方便地更改网页标签的各种属性，实现属性的交互。 5. 文本交互行为 文本交互行为即操作网页中文本内容的行为。在Dreamweaver CS5 中，允许用户通过行为功能操作容器本文、文本域文本、框架文本以及状态栏文本等。 “设置容器的文本”行为可以方便地定义触发的事件，用指定的内容来代替页面上现有容器的内容。 “设置状态栏本文”，状态栏是在浏览器窗口底部显示当前网页打开状态以及鼠标滑过的网页对象等情况的一种特殊工具栏。在Web页中，用户可以通过JavaScript脚本语言等定义状态栏的文本内容。 任务7.2.2 常用行为介绍及应用 1 6、跳转菜单及转到URL 跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。当您使用“插入-表单对象-跳转菜单”创建跳转菜单时，Dreamweaver CS5 创建一个菜单对