第10章 使用行为和javascript创建特效网页

《第10章 使用行为和javascript创建特效网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章使用行为和JavaScript创建特效网页一、行为概述行为指设计者能够运用制作动态网页的JavaScript功能，并将期放置在网页文档中，以允许浏览器与网页本身进行交互，从而以多种方式更改网页或引起某些任务的执行。如果想运用这些行为(behavior)，首先要选择运用行为的对象，然后决定要发生的动作（action），还要设置动作在何种情况下发生的事件(event)。行为是事件和由该事件触发的动作的组合体。1．行为基础在“行为”面板中，您可以先指定一个动作，然后指定触发该动作的事件，以此将行为添加到页面中。行为代码是客户端JavaScript代码；

2、即它运行在浏览器中，而不是服务器上。事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作动作是一段预先编写的JavaScript代码在将行为附加到某个页面元素之后，每当该元素的某个事件发生时，行为即会调用与这一事件关联的动作（JavaScript代码）。行为面板概述使用“行为”面板（“窗口”>“行为”）可以将行为附加到页面元素（更具体地说是附加到标签），并可以修改以前所附加行为的参数。行为面板包含以下选项：1）显示设置事件：显示设置事件是默认的视图。2）显示所有事件：按字母顺序显示属于特定类别的所有事件。3）添加动作(+)4）删除(–)：从行为列表

3、中删除所选的事件和动作。5）向上箭头和向下箭头按钮：在行为列表中上下移动特定事件的选定动作。6）事件7）显示事件：指定当前行为在哪个浏览器中起作用。2.动作动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏元素、拖动AP元素等。3.事件事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+)弹出菜单中列出的动作相关联。二、使用DreamweaverCS5内置行为Dreamweaver附带的行为已经编写，可适用于新型浏览器。Drea

4、mweaver动作是经过精心编写的，如果您从Dreamweaver动作中手工删除代码，或将其替换为自己编写的代码，则可能会失去跨浏览器兼容性。1.应用改变属性行为使用“改变属性”行为可更改对象某个属性（例如div的背景颜色或表单的动作）的值。需要非常熟悉HTML和JavaScript的情况下才能使用此行为。使用改变属性行为方法通过选择对象，从“行为”面板的“动作”菜单中选择“改变属性”中进行。2.应用拖动AP元素行为可让访问者拖动绝对定位的(AP)元素。使用此行为可创建拼板游戏、滑块控件和其它可移动的界面元素。使用应用拖动AP元素行为的方法通过选择“插入

5、”>“布局对象”>“APDiv”或单击“插入”栏上的“绘制APDiv”按钮进行。3.转到URL行为“转到URL”行为可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。4.跳转菜单行为使用“插入”>“表单”>“跳转菜单”创建跳转菜单时，Dreamweaver创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。通常不需要手动将“跳转菜单”行为附加到对象。5.应用跳转菜单转到行为“跳转菜单转到”行为与“跳转菜单”行为密切关联；“跳转菜单转到”允许您将一个“转到”按钮和一个跳转菜单关联起来。单击“转到”按

6、钮打开在该跳转菜单中选择的链接。通常情况下，跳转菜单不需要一个“转到”按钮；从跳转菜单中选择一项通常会引起URL的载入，不需要任何进一步的用户操作。但是，如果访问者选择已在跳转菜单中选择的同一项，则不发生跳转。6.应用打开浏览器窗口行为使用“打开浏览器窗口”行为可在一个新的窗口中打开页面。您可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未明确打开的属性。使用打开浏览器行为的具体方法通过选择一个对象，然后从“

7、行为”面板的“动作”菜单中选择“打开浏览器窗口”中进行。7.应用弹出消息行为“弹出消息”行为显示一个包含指定消息的JavaScript警告。因为JavaScript警告对话框只有一个按钮（“确定”），所以使用此行为可以提供用户信息，但不能为用户提供选择操作。应用弹出消息行为的具体方法通过选择对象，然后从“行为”面板的“动作”菜单中选择“弹出消息”中进行。8.应用预先载入图像行为“预先载入图像”行为可以缩短显示时间，其方法是对在页面打开之初不会立即显示的图像（例如那些将通过行为或JavaScript换入的图像）进行缓存。当使用“交换图像”时不需要手动添加“

8、预先载入图像”。应用预先载入图像行为的方法通过选择一个对象，然后从“行为”面板的