第9章 层与行为(2).ppt

1、第9章 层与行为,行为,行为是事件和动作的组合，它允许用户改变网页内容以及执行特定的任务。利用Dreamweaver的行为，可以轻松制作出动态的网页效果，从而使网页更具吸引力。,关于行为,行为是事件和由该事件触发的动作的组合，用户可以利用“行为”面板来将行为添加到页面中。 行为面板 选择“窗口” “行为”，打开“行为”面板， “行为”面板分为上下两个部分，上部为6个按钮，下部为行为列表，如下图所示。,控制按钮,行为列表,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左

2、至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,行为列表：用户可以在其中为某行为项选择不同的事件，如下图所示：,关于行为,动作和事件,动作和事件 动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。 事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。,动作和事件,可产生的事件,根据所选择对象和指定浏览器的不同，显示

3、在事件下拉列表中的事件也有所不同。,行为示例1,动态效果：网页加载时弹出信息框,打开浏览器窗口,使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，同时用户还可以指定新窗口的属性，包括它的大小、特性和名称。 操作步骤 选中要附加行为的对象； 打开“行为”面板，单击 按钮并从动作菜单中选择“打开浏览器窗口”，弹出如下图所示的对话框；,打开浏览器窗口,在“打开浏览器窗口”对话框中设置新窗口的各项属性； 单击“确定”按钮，完成设置，并使用指定事件触发该动作。,播放声音,使用“播放声音”动作可以播放音乐或其它音频片断。 操作步骤 选中要附加行为的对象； 打开“行为”面板，单击 按钮并从动作

4、菜单中选择“播放声音”，弹出如下图所示的对话框；,在“播放声音”对话框中设置要播放的音频文件； 单击“确定”按钮，完成设置，并使用指定事件触发该动作。 注意事项 “播放声音”行为并不支持网上最流行的mp3格式文件，目前只支持wav、midi等少数格式。浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。,播放声音,显示-隐藏层,使用“显示-隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。 操作步骤 选中要附加行为的对象； 打开“行为”面板，单击 按钮并从动作菜单中选择“显示-隐藏层”，弹出如下图所示的对话框；,设置“显示-隐藏层”对话框 在“命名的层”列表中选择要更改其可见

5、性的层； 单击“显示”按钮以显示该层，单击“隐藏”按钮以隐藏该层，单击“默认”按钮以恢复该层的默认可见性。 单击“确定”按钮，完成设置，并使用指定事件触发该动作。 注意事项 如果在动作菜单中“显示-隐藏层”不可用，则可能是因为浏览器不接受事件，选择动作菜单中“显示事件”中IE4.0以后的版本或者选择Netscape6.0，重新选择菜单命令，此时“显示隐藏层”将可用。,显示-隐藏层,显示-隐藏层,转到URL,使用“转到URL”动作可以在当前窗口或指定的框架中打开一个新的网页。这个动作对于想单击一次便改变两个或多个框架中的内容特别有用。 操作步骤 选中要附加行为的对象； 打开“行为”面板，单击 按

6、钮并从动作菜单中选择“转到URL”，弹出如下图所示的对话框；,设置“转到URL”对话框 打开在：设置在主窗口或指定的框架中打开新网页； URL：设置要打开的新网页的路径和名称。 单击“确定”按钮，完成设置，并使用指定事件触发该动作。,转到URL,交换图像,“交换图像”动作可以通过更改img标签的src属性，将一个图像和另一个图像进行交换。 操作步骤 选中要附加行为的原始图像； 打开“行为”面板，单击 按钮并从动作菜单中选择“交换图像”，弹出如下图所示的对话框；,设置“交换图像”对话框 设定原始档为：设置新图像，用来替换原始图像； 预先载入图像：防止新图像加载时发生延迟； 鼠标滑开时恢复图像：鼠

7、标离开图像时，图像自动恢复为原始图像。 单击“确定”按钮，完成设置，并使用默认事件触发该动作。,交换图像,交换图像,注意事项 因为只有图像的src属性受此动作的影响，所以应该换入一个与原始图像具有相同尺寸的图像；否则，换入的图像显示时会被压缩或扩展，以使其适应原始图像的大小。,拖动层,使用“拖动层”动作，可以使页面的层跟随用户的鼠标移动，从而实现某些特殊的页面效果，比如创建拼图游戏、滑块控件和其他可移动的页面元素。 下面以实例的形式介绍该行为的使用： 1. 选择“插入”|“布局对象”|“层”，在文档窗口的设计视图中插入一个层，并在属性面板中将其命名为Layer1。 2. 将光标置于Layer1

8、层内部，选择“插入”|“图像”，向层中插入图像文件cat01.gif。 3. 以同样的方法再创建三个层，并分别插入图像文件cat02.gif、cat03.gif和cat04.gif，三个层分别命名为Layer2、Layer3和Layer4。 4. 移动层，将四个分图拼成一个整图。,拖动层,5. 再次选择“插入”|“布局对象”|“层”，在文档窗口的设计视图中插入一个新层，并将该层命名为Layer5。 6. 将光标置于Layer5层内部，选择“插入”|“表格”，向层中插入一个两行两列的表格。 7. 调整Layer5层的位置及表格大小，使表格的每个单元格与图相对应。 8. 选择“窗口”|“层”打开层

9、面板，将Layer5层置于底层。如图所示。,拖动层,9. 选择插入的第一幅图像cat01.gif，并打开行为面板。 10. 单击“添加行为”按钮并从动作弹出菜单中选择“拖动层”，随即弹出如图所示的“拖动层”对话框。 11. 设置“拖动层”对话框中的参数。 12. 单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。,拖动层,13. 以同样的方法完成对其他三个层的设置。 14. 利用鼠标拖动，将各层的位置打乱。 15. 保存后按下快捷键F12预览，就能得到如图所示的页面。用户可以拖动页面中的层，来进行拼图游戏。,使用扩展管理器,扩展管理器是一个独立的应用程序，可用于安装和管理Macromedia应用程序中的功能扩展。功能扩展是一些可以很容易地添加到Dreamweaver中的新功能（.mxp）。 操作步骤 从Macromedia的官方站点下载需要的功能扩展并保存至安装目录内的Downloaded Extensions文件夹中；