第7章行为重点.ppt

第七章 行为 行为是某事件和由该事件触发的动作组合。Adobe Dreamweaver Cs3行为将JavaScript代码放置到文档中，这样访问者就可以通过这种方式更改Web页面，或者启动某项任务。 在Dreamweaver Cs3中，利用行为可以使网页制作者不用编写代码就可以制作出一些网页特效，如弹出式信息，变化的图像，跳转菜单，弹出式菜单，弹出式窗口等。 任务一 创建自动弹出窗口 知识点： 什么是行为； 什么是事件、动作； 添加行为； 制作弹出窗口； 任务描述 元旦快到了，公司希望在网站的主页中添加一个自动弹出的窗口，向所有访问者表达新年的祝福，同时也为网站增加一些喜庆色彩。本任务使访问者打开本章例1网页时，自动弹出一个窗口显示网页welcome.htm.效果如下图所示： 任务分析 要使网页弹出新窗口，应该使用DREAMWEAVER CS3提供的“打开浏览器窗口行为”。而要实现自动弹出效果，则要用到onload事件。 一、知识链接 1．动作 动作是一段预先编写的 JavaScript 代码，可用于执行诸如以下的任务：打开浏览器窗口、显示或隐藏 AP 元素、播放声音或停止播放 Adobe Shockwave 影片。Dreamweaver 所提供的动作提供了最大程度的跨浏览器兼容性。 2．事件 每个浏览器都提供一组事件。实际上，事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。例如，当访问者将鼠标指针移到某个链接上时，浏览器将为该链接生成一个 onMouseOver 事件；不同的页元素定义了不同的事件；例如，在大多数浏览器中，onMouseOver 和 onClick 是与链接关联的事件，而 onLoad 是与图像和文档的 body 部分关联的事件。这些事件可以与“行为”面板的“动作”(+) 弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的 JavaScript 函数。Dreamweaver 提供多个可通过这些事件触发的常用动作。 单个事件可以触发多个不同的动作，您可以指定这些动作发生的顺序。 二、操作体验 操作步骤 步骤1：配置站点（创建一个站点） 步骤2：选择要添加行为的对象，单击标签选器中的body标签。 步骤3：添加行为 （1）打开“行为面板” （2）在面板中单击“添加行为”按钮，在菜单中选择“打开浏览器窗口”命令。 步骤4：设置“打开浏览器窗口”行为。 （1）在弹出的“打开浏览器窗口”对话框中，进行相关设置 （2）单击“确定”，将行为添加到行为面板中。 步骤5：选择事件。 在行为面板中，从事件列表中选择“onload”事件。 步骤6：保存文件，按F12键预览网页。 试一试 1．请将附书光盘中的“素材\第7章\示例\01\原始文件”文件夹复制到D：中，新建并设计一个网页文件“gongxi.htm”,使用户在打开index.htm时自动弹出它。 2．Dreamweaver给用户预定义了弹出信息动作，该动作可以弹出一个信息框。请你将上题修改，当网页打开时弹出一个信息框。信息内容是“欢迎你”。 任务二 利用交换图像制作按钮 知识点： 插入鼠标经过图像； 设置恢复图像； 鼠标事件； 任务描述 通过行为，当鼠标经过按钮时，网页显示不同的图片来表示按钮的按下和原始状态。本任务就是创建按钮使得当鼠标经过按钮时，按钮图片自动变化。 任务分析 要使图片能随鼠标操作而变化，需要对鼠标事件进行响应，常用的有onMousedown、onMouseup、onMouseover、onMouseout等鼠标事件和onLoad页面加载事件，通过对这些事件设置不同的行为可以实现图片的自动变化。 一、操作体验 操作步骤 按照教材操作步骤完成任务一 1．常见鼠标事件 试一试 1．打开附书光盘“素材\第7章\试一试\02\index.html”文档，设置按钮为如图7-10效果。 试一试 2．在许多个人网站中，我们经常可以看到浏览器的状态栏中有一些静态的或者动态的提示性文字，这种提示性的文字，在一定程度上引起了我们的注意。请使用行为创建状态栏文本。当鼠标指针指向网页中的某对象时，自动在状态栏上显示其功能。 * * 鼠标双击时发生 onDblclick 鼠标单击时发生 onClick 鼠标移动时发生 onMousemove 鼠标左键释放时发生 onMouseup 鼠标左键按下时发生 onMousedown 鼠标离开时发生 onMouseout 鼠