网页制作教程第10章.ppt

第10章 Dreamweaver的行为 * 本章知识技能要点： 行为、动作和事件的概念 Dreamweaver中自带的行为及其使用 10.2 Dreamweaver的行为 Dreamweaver中的行为是JavaSrcipt的程序库，是动作和事件的组合。行为代码是客户端JavaScript代码，即它运行于浏览器中，而不是在服务器上。在将行为附加到页面元素之后，只要对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作，即JavaScript代码。 从另一方面来说，行为是实现网页上交互的一种捷径，Dreamweaver的行为是将 javascript 代码嵌入在文档中，以便允许访问者与 Web 页进行交互，从而以多种方式更改页面动作或执行某些任务。 10.2 Dreamweaver的行为 10.2.1“行为”、“事件”和“动作”的概念 这里首先就“行为”、“事件”和“动作”这几个概念给予说明。 “行为”、“事件”和“动作”的概念在人们的自然语言中似乎意义非常相似，但在这里有严格的区分。举个例子来说明：网页上有一行文字，浏览网页时，鼠标一旦放在这行文字上，就会显示一幅图片；鼠标一旦离开这行文字，那个图片就会隐藏起来。这个效果就使用了“行为”。 事件：鼠标的移入和鼠标的移出； 动作：图片的显示和隐藏； 行为：鼠标的移入+图片的显示，鼠标的移出+图片的隐藏 由此可见，行为是事件和由该事件触发的动作的组合。 10.2 Dreamweaver的行为 10.2.2 行为中动作的种类： 表10-1列举了Deaamweaver 8 中可用的22种动作。 10.2 Dreamweaver的行为 10.2.3 行为中常用的事件种类： 表10-2列举了Deaamweaver 8 中常用的14种事件。 表10-2 Deaamweaver 8 中事件的种类 10.2 Dreamweaver的行为 10.2.4 行为面板 右图示的是Deaamweaver 8 中的行为面板。点击其中的“添加行为”按钮，即可展开一个可用的动作列表，列表中呈现出黑色的项目是当前可以添加的动作。点击“显示设置事件”按钮，在面板中就会列出当前页面所有已经设置的行为，右侧列出的是动作，左侧列出的是对应的事件。右键单击动作项目时，从弹出的快捷菜单选择“编辑行为”，可以重新设置行为的属性；点击“事件”列表旁边的下拉按钮，从展开的事件列表可以选择一个合适的事件。 10.2 Dreamweaver的行为 10.2.5 应用行为 选择网页中要附加行为的对象（如图像或链接），然后在“行为”面板中单击“添加行为”按钮，从弹出菜单中选择要附加的行为。当选择某个动作时，将会弹出一个相应的对话框，显示该动作的参数和说明。在对话框中进行参数设置后，单击“确定”按钮，即可完成附加行为的操作。 10.2.6 修改事件 添加了行为后，用于触发该动作的默认事件会显示在“行为”面板“事件”栏中。在“事件”栏中单击要应用的事件，然后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中选择另一个事件,即可修改触发事件。 10.3 Dreamweaver行为的应用实例 10.3.1 弹出式菜单的制作 浏览网页时经常会见到这样的情况：在自然状态下，菜单是折叠着的，也就是仅仅显示菜单的标题，当鼠标滑过菜单的标题时，菜单立即展开，但鼠标离开时菜单又会折叠起来这就是弹出式菜单。 制作的步骤如下： （1）可以直接给图片加上弹出菜单。但是不能给文本直接加上弹出菜单。如果需要给文本加上弹出菜单，首先需要把文本变成链接。选中文本，在属性面板的链接项输入“javascript:;”，就给文本加上链接了。如图，将页面上的文本均加上链接“javascript:;”。 10.3 Dreamweaver行为的应用实例 （2）在添加弹出式菜单之前需要保存网页文件。保存网页之后，打开行为面板，点击“添加行为”按钮。 （3）在弹出的菜单中点击“显示事件”，在“显示事件”的级联菜单里，选择“4.0 and Later Browsers”。 （4）点击“添加行为”按钮，在展开的菜单中选择“显示弹出式菜单”，打开“显示弹出式菜单”对话框。如图。 10.3 Dreamweaver行为的应用实例 （5）在“显示弹出式菜单”对话框里有四张选项卡。在“内容”选项卡中，设置弹出菜单上的文本和所链接的文档以及打开的目标窗口。在“外观” 和“高级”选项卡中，设置弹出菜单的显示效果，在“位置”选项卡中，设置菜单弹出时与菜单标题对象的相对位置。 弹出式菜单的行为面板如图示。 10.3 Dreamweaver行为的应用实例 （6）做好弹出菜单后，保存文档。在浏览器中的效果如图。 10.3 Dreamwe