动态网页设计与制作实用教程（第三版）电子教案程伟渊 第14章.pptVIP

第14章 浏览器动态网页的制作 本章学习导读 所谓“动态网页”是指用户和页面间能够进行信息交流的网页。它一 般有3个特点： （1）交互性：网页会根据用户的要求和选择而动态改变和响应。 （2）自动更新：无须手动更新HTML文档，便会自动生成新的页面。 （3）随环境而变：当浏览器环境（如时间、版本、用户等）变化时， 访问同一网址会产生不同的页面。 动态网页的互动功能和动画效果使界面更友好，有利于提高访问者 的兴趣。根据交互实现的过程，一般将交互动态网页分为浏览器端的交 互和服务器端交互两种类型。通过本章学习，读者应该掌握以下内容： 行为的概念与行为面板应用 行为在动态网页上的应用 第14章 浏览器动态网页的制作 14.1 行为与行为面板 14.1.1 行为的工作原理 行为是由事件和由该事件触发的动作构成的。行为可以创建网页动 态效果，实现用户与页面的交互。行为是由事件和动作组成的。与行为 相关的有三个重要的部分——对象、事件和动作。 1. 对象(Object) 对象是产生行为的主体，很多网页元素都可以成为对象，如图片、 文字、多媒体文件等，甚至是整个页面。 2. 事件(Event) 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也 可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的。 第14章 浏览器动态网页的制作 3. 动作(Action) 行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放 声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver8中 使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必 自己编写。 4. 事件与动作 将事件和动作组合起来就构成了行为，例如，将onClick行为事件 与一段JaveScript代码相关联，单击鼠标时就可以执行相应的动作。一 个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。 为了实现需要的效果，我们还可以指定和修改动作发生的顺序。 第14章 浏览器动态网页的制作 14.1.2 行为面板的应用 1．行为面板 通过“行为”面板可以将行为附加到页面元素，并修改以前所附加行 为的参数。 2．创建行为 一般创建行为有三个步骤：选择对象、添加动作、调整事件。 3．应用事件 每个浏览器都提供一组事件，这些事件可以与“行为”面板的动作 （+）弹出式菜单中列出的动作相关联。当Web页的访问者与网页进行 交互时（例如，单击某个图像），浏览器生成事件，这些事件可用于调 用引起动作发生的JavaScript函数（没有用户交互也可以生成事件，例 如设置网页每10秒钟自动重新载入）。 第14章 浏览器动态网页的制作 4．应用动作 可以将动作附加到整个文档（即附加到body标签），还 可以附加到链接、图像、表单元素或多种其他HTML元素中 的任何一种。选择的目标浏览器确定给定的元素所支持的动 作。例如，对于每个元素，Internet Explorer 4.0比avigator 4.0或任何3.0版的浏览器具有更多的动作。 第14章 浏览器动态网页的制作 5．应用行为 给元素附加行为的操作步骤如下： （1）在页上选择一个元素，例如一个图像或一个链接。若要将行为附加 到整个页面，在文档窗口底部左侧的标签选择器中单击body标签。 （2）选择“窗口/行为”打开“行为”面板。 （3）单击加号（+）按钮，并从“动作”弹出式菜单中选择一个动作。为 动作输入参数，然后单击“确定”按钮。 （4）触发该动作的默认事件显示在“事件”栏中。如果这不是所需的触发 事件，则从“事件”弹出式菜单中选择另一个事件（单击显示在事件名称和 动作名称之间的向下的黑色箭头，打开“事件”弹出式菜单）。 第14章 浏览器动态网页的制作 14.2 应用行为制作动态网页 14.2.1 与AP Div有关的行为 在Dreamweaver CS中，可以设置拖动AP元素、显示―隐藏元素等与AP Div有关的行为。 1．拖动AP元素 2．显示－隐藏元素 第14章 浏览器动态网页的制作 14.2.2 改变属性 改变层的背景色的操作如下： （1）选择“插入→布局对象→AP Div”命令或单击“插入”面板“布局”类别中的“绘制AP Div”按钮，然后在文档窗口中绘制一个AP Div。在属性面板中为AP Div设置比较醒目的背景色。 （2）选中该AP Div作为事件对象（也可以选择其他的图片