网页设计与制作第7章使用框架制作网页课件.ppt

《网页设计与制作第7章使用框架制作网页课件.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第7章使用框架制作网页课件.ppt（111页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第7 7 1在网页中插入多媒体元素在网页中插入多媒体元素 2行为与事件行为与事件 3本章导读本章导读 框架是一种特殊的网页形式，多用于框架是一种特殊的网页形式，多用于框架是一种特殊的网页形式，多用于框架是一种特殊的网页形式，多用于电子邮箱网站和论坛网站，使用框架电子邮箱网站和论坛网站，使用框架电子邮箱网站和论坛网站，使用框架电子邮箱网站和论坛网站，使用框架技术的网页可以在一个浏览器窗口中技术的网页可以在一个浏览器窗口中技术的网页可以在一个浏览器窗口中技术的网页可以在一个浏览器窗口中显示多个网页的内容。显示多个网页的内容。显示多个网页的内容。显示多个网页的内容。使用框架制作网页使用框架制作网页

2、在网页中插入多媒体文件在网页中插入多媒体文件行为与事件行为与事件能力目标能力目标任务任务1 1 使用框架制作网页使用框架制作网页框架包括两个部分：框架包括两个部分：框架集和框架框架集和框架 1.1.框架和框架集的创建框架和框架集的创建（1 1）将光标插入到文档中，在将光标插入到文档中，在“插入插入”面板中选择面板中选择“布局布局”面板。面板。（2 2）单击）单击“布局布局”面板中的面板中的“框架框架”下拉按钮，在下拉列表中选择下拉按钮，在下拉列表中选择要插入的框架集，即可在文档中插入选择的框架集。要插入的框架集，即可在文档中插入选择的框架集。（3 3）在新建的页面中即可看到新创建的框架集，其样

3、式为开始所选）在新建的页面中即可看到新创建的框架集，其样式为开始所选择的框架集样式，要创建其他样式的框架集，只需要在列表中选择的框架集样式，要创建其他样式的框架集，只需要在列表中选择其他选项即可。择其他选项即可。2.2.选择框架和框架集选择框架和框架集在在DreamweaverDreamweaver中，要选择框架和框架集，需要在中，要选择框架和框架集，需要在“框架框架”面板中面板中进行选取，如果只是选取框架集，则可以单击页面中的框架集直进行选取，如果只是选取框架集，则可以单击页面中的框架集直接选取。接选取。通通通通过过过过按按按按住住住住“Alt”Alt”键键键键，然然然然后后后后单单单单击击

4、击击要要要要选选选选取的框架，也可以直接选取框架。取的框架，也可以直接选取框架。取的框架，也可以直接选取框架。取的框架，也可以直接选取框架。（2 2）在）在“框架框架”面板中，单击面板中，单击“框架框架”面板周围的框架集边框，即面板周围的框架集边框，即可将该框架选定。可将该框架选定。下面介绍在下面介绍在下面介绍在下面介绍在DreamweaverDreamweaverDreamweaverDreamweaver中选定框架集的方法中选定框架集的方法中选定框架集的方法中选定框架集的方法 （1 1）选择）选择“窗口窗口”“”“框架框架”命令，打开命令，打开“框架框架”面板。面板。（2 2）在）在“框架

5、框架”面板中，单击在面板中，单击在“框架框架”面板周围的框架集边框，面板周围的框架集边框，即可选定框架集。即可选定框架集。（2 2）在打开的）在打开的“另存为另存为”对话对中选择要保存的路径和文件名后，对话对中选择要保存的路径和文件名后，然后单击然后单击“确定确定”按钮，即可完成框架的保存。按钮，即可完成框架的保存。（2 2）选择）选择“文件文件”“”“框架集另存为框架集另存为”命令，打开命令，打开“另存为另存为”对话对话框。框。（3 3）在打开的）在打开的“另存为另存为”对话框中设置文件保存路径和名称，然后对话框中设置文件保存路径和名称，然后单击单击“确定确定”按钮完成框架集的保存。按钮完成

6、框架集的保存。框架是框架集中的文档，是单独的网页文件。框架是框架集中的文档，是单独的网页文件。要显示框架内容就必须先创建好框架集。要显示框架内容就必须先创建好框架集。任务任务2 2 在网页中插入多媒体元素在网页中插入多媒体元素网页中仅有文字和图像是不够的，还需网页中仅有文字和图像是不够的，还需要添加一些动态元素才能让网页更加丰要添加一些动态元素才能让网页更加丰满，最常用的动态元素包括满，最常用的动态元素包括FlashFlash影片、影片、声音和视频等。声音和视频等。阶段阶段1 1 插入声音插入声音（1 1）将光标插入到需要嵌入声音文件的位置，选择）将光标插入到需要嵌入声音文件的位置，选择“插入

7、插入媒体媒体插件插件”命令。命令。（2 2）在打开的）在打开的“选择文件选择文件”对话框中，选择要嵌入到文档中的声音对话框中，选择要嵌入到文档中的声音文件，然后单击文件，然后单击“确定确定”按钮。按钮。（3 3）完成声音文件的选择后，在文档中光标的位置会插入一个插件）完成声音文件的选择后，在文档中光标的位置会插入一个插件图标。图标。插件图标插件图标（5 5）单击）单击“属性属性”面板中的面板中的“参数参数”按钮，打开按钮，打开“参数参数”对话框，对话框，在在“参数参数”对话框中设置参数为对话框中设置参数为“loop”loop”，值为，值为“true”true”。（6 6）单击面板中的）单击面板

8、中的“添加项添加项”按钮新增一项，然后设置其参数为按钮新增一项，然后设置其参数为“Autostart”Autostart”，值为，值为“true”true”。（7 7）单击）单击“确定确定”按钮，完成参数的设置，然后按按钮，完成参数的设置，然后按“F12”F12”键在浏键在浏览器中预览效果。览器中预览效果。（2 2）选择需要插入的）选择需要插入的FlashFlash影片，然后单击影片，然后单击“确定确定”按钮。按钮。（3 3）在单击）在单击“确定确定”按钮后，即可在文档中可以看到刚才选中的按钮后，即可在文档中可以看到刚才选中的FlashFlash影片文件。影片文件。阶段阶段3 3 插入视频插入

9、视频（1 1）将光标插入需要嵌入视频文件的位置，选择）将光标插入需要嵌入视频文件的位置，选择“插入插入”“”“媒体媒体”“”“插件插件”命令，打开命令，打开“选择文件选择文件”对话框。对话框。（2 2）在）在“选择文件选择文件”对话框中，选择要嵌入到文档中的视频文件，对话框中，选择要嵌入到文档中的视频文件，然后单击然后单击“确定确定”按钮。按钮。（3 3）在完成视频文件的选择后，文档中光标的位置会插入一个插件）在完成视频文件的选择后，文档中光标的位置会插入一个插件图标。图标。（4 4）选中插件图标，打开）选中插件图标，打开“属性属性”面板，设置插件的宽度与高度。面板，设置插件的宽度与高度。（5

10、 5）保存文件后，按下）保存文件后，按下“F12”F12”键在浏览器中进行预览。键在浏览器中进行预览。任务任务3 3 行为与事件行为与事件在网页中使用行为，可以在不涉及代码在网页中使用行为，可以在不涉及代码的情况下制作出很多特殊效果，而且方的情况下制作出很多特殊效果，而且方便快捷，因此学习掌握行为的使用方法便快捷，因此学习掌握行为的使用方法很有必要。很有必要。阶段阶段1 1 行为的基本操作行为的基本操作1.什么是行为什么是行为DreamweaverDreamweaver中的行为，实际上就是一系列具中的行为，实际上就是一系列具有特定功能的有特定功能的JavaScriptJavaScript程序脚

11、本。这些程程序脚本。这些程序都是预置在序都是预置在DreamweaverDreamweaver中的。中的。一个完整的行为，需要包括两个方面的内容一个完整的行为，需要包括两个方面的内容才能运行才能运行“事件事件”和和“动作动作”。其中，。其中，“事件事件”是指在计算机上发生的一些操作，例是指在计算机上发生的一些操作，例如单击鼠标、页面加载完毕等；而如单击鼠标、页面加载完毕等；而“动作动作”则是指在发生了事件后，所触发并执行的一则是指在发生了事件后，所触发并执行的一系列处理动作。系列处理动作。2.2.认识认识“行为行为”面板面板“行为行为”面板可以为网页中选定的对象添加多种行为。选择面板可以为网页

12、中选定的对象添加多种行为。选择“窗窗口口行为行为”命令，打开命令，打开“行为行为”面板，在面板中单击面板，在面板中单击“添加行为添加行为”按钮按钮，即可在弹出的列表中，查看在，即可在弹出的列表中，查看在Dreamweaver中所有可以中所有可以应用的行为命令。应用的行为命令。“行行 为为”面板面板交换图像：创建图像变换效果。可以是一对一的变换，交换图像：创建图像变换效果。可以是一对一的变换，也可以是一对多的变换。也可以是一对多的变换。弹出信息：在浏览器中弹出一个新的信息框。弹出信息：在浏览器中弹出一个新的信息框。恢复交换图像：将设置的变换图像还原成变换前的图恢复交换图像：将设置的变换图像还原成

13、变换前的图像。像。打开浏览器窗口：在新的浏览器窗口中载入一个打开浏览器窗口：在新的浏览器窗口中载入一个URLURL。用户可以为这个窗口指定一些具体属性，也可以不加用户可以为这个窗口指定一些具体属性，也可以不加以指定。以指定。拖动层：实现在浏览器中任意移动层的效果。拖动层：实现在浏览器中任意移动层的效果。控制控制Shock WaveShock Wave或或FlashFlash：控制：控制Shock WaveShock Wave或或FlashFlash动动画的播放、停止和返回等播放过程。画的播放、停止和返回等播放过程。播放声音：播放指定的声音。播放声音：播放指定的声音。改变属性：改变页面元素的各项

14、属性。改变属性：改变页面元素的各项属性。时间轴：制作与时间轴相关的动画效果。有转时间轴：制作与时间轴相关的动画效果。有转到时间轴帧、播放时间轴、停止时间轴到时间轴帧、播放时间轴、停止时间轴3 3个级个级联选项。联选项。显示显示隐藏：设置多个层的显示与隐藏效果。隐藏：设置多个层的显示与隐藏效果。检查插件：检查用户浏览器是否安装有相应的检查插件：检查用户浏览器是否安装有相应的插件，并设置在有和无插件的情况下跳转到不插件，并设置在有和无插件的情况下跳转到不同的同的URLURL中。中。设置导航条图像：改变导航条中的图像属性。设置导航条图像：改变导航条中的图像属性。调用调用JavaScriptJavaS

15、cript：调用相应的：调用相应的JavaScriptJavaScript脚本脚本跳转菜单：编辑设置一个跳转菜单。跳转菜单：编辑设置一个跳转菜单。跳转菜单开始：根据菜单所选择的索引转到跳转菜单开始：根据菜单所选择的索引转到URLURL。转到转到URLURL：实现多个页面的跳转。：实现多个页面的跳转。预先载入图像：在页面载入时预先读入特定图预先载入图像：在页面载入时预先读入特定图像像。3.3.添加、修改和删除行为添加、修改和删除行为在在Dreamweaver中使用行为，可以实现很多功中使用行为，可以实现很多功能，但并不需要用户接触程序代码和掌握代码能，但并不需要用户接触程序代码和掌握代码编程技能

16、。编程技能。下面介绍创建行为的方法下面介绍创建行为的方法（1 1）选择）选择“窗口窗口行为行为”命令，打开命令，打开“行为行为”面面板。板。（2 2）在文档中选中要添加行为的对象，在）在文档中选中要添加行为的对象，在“行为行为”面板中单击面板中单击“添添加行为加行为”按钮按钮 ，打开下拉菜单，在弹出的菜单中选择要添加的行，打开下拉菜单，在弹出的菜单中选择要添加的行为命令。为命令。（3 3）选择要添加的行为命令后，通常会弹出一个对话框，在对话框）选择要添加的行为命令后，通常会弹出一个对话框，在对话框中设置好各项必需的参数后，单击中设置好各项必需的参数后，单击“确定确定”按钮，完成行为的添按钮，完

17、成行为的添加操作。加操作。（4 4）在）在“行为行为”面板的行为列表中，会显示所添加的行为及其触发面板的行为列表中，会显示所添加的行为及其触发事件。事件。下面介绍修改行为的方法下面介绍修改行为的方法 （1 1）在文档中选择一个添加了行为的对象，打开）在文档中选择一个添加了行为的对象，打开“行为行为”面板。面板。（2 2）选择行为列表中的触发事件，单击后面的下拉按钮，在弹出的）选择行为列表中的触发事件，单击后面的下拉按钮，在弹出的下拉列表中选择需要的其他事件类型，即可完成对触发事件的修下拉列表中选择需要的其他事件类型，即可完成对触发事件的修改。改。（3 3）如果需要对已经添加的行为进行动作参数的

18、修改，只需要在）如果需要对已经添加的行为进行动作参数的修改，只需要在“行为行为”面板中双击该行为动作，即可打开其参数设置窗口，完成面板中双击该行为动作，即可打开其参数设置窗口，完成需要的修改后，单击需要的修改后，单击“确定确定”按钮即可。按钮即可。删除行为删除行为如果要删除一个行为，则只需要在如果要删除一个行为，则只需要在“行为行为”面板中选中行为事件，面板中选中行为事件，单击面板上的单击面板上的“删除事件删除事件”按钮即可。按钮即可。阶段阶段2 2 行为的实际应用行为的实际应用1.弹出信息弹出信息“弹出信息弹出信息”行为可以在特定条件下弹出一行为可以在特定条件下弹出一个信息提示框。该提示框中

19、显示的信息是事个信息提示框。该提示框中显示的信息是事先定义好的，用户不能对其进行修改。下面先定义好的，用户不能对其进行修改。下面介绍添加介绍添加“弹出信息弹出信息”行为的方法。行为的方法。（1 1）选择要添加）选择要添加“弹出信息弹出信息”行为的对象，然后打开行为的对象，然后打开“行为行为”面板，面板，在面板中单击在面板中单击“添加行为添加行为”按钮，在打开的行为菜单中选择按钮，在打开的行为菜单中选择“弹弹出信息出信息”命令。命令。（2 2）在打开的）在打开的“弹出信息弹出信息”对话框中输入要显示的对话框信息，然对话框中输入要显示的对话框信息，然后单击后单击“确定确定”按钮。按钮。（3 3）在

20、）在“行为行为”面板中可以看到刚添加的面板中可以看到刚添加的“弹出信息弹出信息”行为。行为。（4 4）保存文档后，按）保存文档后，按“F12”F12”键在浏览器中预览效果。键在浏览器中预览效果。2.2.打开浏览器窗口打开浏览器窗口（1 1）在文档中选择一个链接对象后，打开）在文档中选择一个链接对象后，打开“行为行为”面板，单击面板，单击“添添加行为加行为”按钮按钮 ，在弹出的下拉菜单中选择，在弹出的下拉菜单中选择“打开浏览器窗口打开浏览器窗口”命命令，打开令，打开“打开浏览器窗口打开浏览器窗口”对话框。对话框。（2 2）单击）单击“要显示的要显示的URL”URL”后面的后面的“浏览浏览”按钮，

21、在打开的按钮，在打开的“选择选择文件文件”对话框中选择要打开的文件，然后单击对话框中选择要打开的文件，然后单击“确定确定”按钮。按钮。（3 3）回到）回到“打开浏览器窗口打开浏览器窗口”对话框后，在对话框中设置新窗口的对话框后，在对话框中设置新窗口的尺寸和其他属性，然后单击尺寸和其他属性，然后单击“确定确定”按钮，完成按钮，完成“打开浏览器窗打开浏览器窗口口”行为的设置。行为的设置。（4 4）在）在“行为行为”面板中查看行为的触发事件是否满足网页设计需要，面板中查看行为的触发事件是否满足网页设计需要，如果需要改动，则在触发事件的下拉列表中选择。如果需要改动，则在触发事件的下拉列表中选择。3.3

22、.播放声音播放声音（1 1）选择）选择“窗口窗口行为行为”命令，打开命令，打开“行为行为”面板，在面板，在“行为行为”面面板中单击板中单击“添加行为添加行为”按钮，在弹出的下拉菜单中选择按钮，在弹出的下拉菜单中选择“播放声播放声音音”命令。命令。（2 2）在打开的）在打开的“播放声音播放声音”对话框中单击对话框中单击“浏览浏览”按钮。按钮。（3 3）在打开的）在打开的“选择文件选择文件”对话框中选取需要添加的声音文件，然对话框中选取需要添加的声音文件，然后单击后单击“确定确定”按钮，可以在按钮，可以在“播放声音播放声音”对话框中看到声音文对话框中看到声音文件的路径。件的路径。（4 4）单击）单

23、击“确定确定”按钮，完成按钮，完成“播放声音播放声音”行为的添加，在行为的添加，在“行为行为”面板上可以看到一个面板上可以看到一个“播放声音播放声音”的行为。的行为。（5 5）在文档的左下角，可以看到插入了一个媒体插件图标。）在文档的左下角，可以看到插入了一个媒体插件图标。（6 6）单击该插件图标，打开）单击该插件图标，打开“属性属性”面板，在面板中单击面板，在面板中单击“参数参数”按按钮。钮。（7 7）在弹出的）在弹出的“参数参数”对话框中，将对话框中，将“Loop”Loop”的值和的值和AUTOSTART”AUTOSTART”的值都设为的值都设为“true”true”。（8 8）单击）单击

24、“确定确定”按钮，完成按钮，完成“播放声音播放声音”行为参数的设置。行为参数的设置。4.4.拖动层拖动层（1 1）在）在DreamweaverDreamweaver中新建一个文档，然后选择中新建一个文档，然后选择“插入插入布局对象布局对象层层”命令，在文档中插入一个层。命令，在文档中插入一个层。（2 2）将鼠标指针插入到刚创建的层中后（左图），选择）将鼠标指针插入到刚创建的层中后（左图），选择“插入插入”“”“图像图像”命令（右图），打开命令（右图），打开“选择图像源文件选择图像源文件”对话框。对话框。（3 3）在对话框中选择要插入的图像（左图），然后单击）在对话框中选择要插入的图像（左图），

25、然后单击“确定确定”按按钮，将图像插入到层中（右图）。钮，将图像插入到层中（右图）。（4 4）打开）打开“属性属性”面板，调整层的大小，将层的大小与图像的大小面板，调整层的大小，将层的大小与图像的大小调整为一致。调整为一致。（5 5）选中）选中DreamweaverDreamweaver状态栏中的状态栏中的标签，然后选择标签，然后选择“窗口窗口行为行为”命令（左图），打开命令（左图），打开“行为行为”面板，单击面板，单击“添加行为添加行为”按按钮钮 ，在弹出的下拉菜单中选择，在弹出的下拉菜单中选择“拖动层拖动层”命令（右图）。命令（右图）。（6 6）选择）选择“拖动层拖动层”命令后，打开命令后

26、，打开“拖动层拖动层”对话框，在其中进行对话框，在其中进行设置后，单击设置后，单击“确定确定”按钮。按钮。（7 7）单击）单击“确定确定”按钮后，将按钮后，将“拖动层拖动层”行为添加到行为添加到“行为行为”面板面板中。中。（8 8）保存文档后，按）保存文档后，按“F12”F12”键在浏览器中预览效果（左图），可键在浏览器中预览效果（左图），可以将该层在网页中任意进行拖动（右图）。以将该层在网页中任意进行拖动（右图）。5.5.设置层文本设置层文本（1 1）在文档中的标签栏中选择）在文档中的标签栏中选择标签，然后打开标签，然后打开“行为行为”面板。面板。（2 2）单击）单击“添加行为添加行为”按钮

27、，在打开的按钮，在打开的“行为行为”下拉菜单中选择下拉菜单中选择“设置文本设置文本设置层文本设置层文本”命令。命令。（3 3）在打开的）在打开的“设置层文本设置层文本”对话框中进行设置，在对话框中进行设置，在“层层”下拉列下拉列表中选择要设置的层，在表中选择要设置的层，在“新建新建HTML”HTML”文本框中输入文本框中输入HTMLHTML源代码源代码或或JavaScriptJavaScript函数等，然后单击函数等，然后单击“确定确定”按钮即可。按钮即可。（4 4）在）在DreamweaverDreamweaver的的“行为行为”面板中可以看到刚刚创建的面板中可以看到刚刚创建的“设置设置层文

28、本层文本”行为。行为。6.6.设置框架文本设置框架文本（1 1）选择页面中的框架，然后打开）选择页面中的框架，然后打开“行为行为”面板。面板。（2 2）单击）单击“添加行为添加行为”按钮，在打开的按钮，在打开的“行为行为”下拉菜单中选择下拉菜单中选择“设置文本设置文本设置框架文本设置框架文本”命令。命令。（3 3）在打开的）在打开的“设置框架文本设置框架文本”对话框中进行设置。在对话框中进行设置。在“框架框架”下下拉列表框中选择要设置的框架，在拉列表框中选择要设置的框架，在“新建新建HTML”HTML”文本框中输入文本框中输入HTMLHTML源代码。源代码。（4 4）单击）单击“获取当前获取当

29、前HTML”HTML”按钮，获取当前目按钮，获取当前目标框架标框架中的内容，选中中的内容，选中“保留背景色保留背景色”复选框，以保留框架的背景和文本颜色属性，复选框，以保留框架的背景和文本颜色属性，最后单击最后单击“确定确定”按钮即可。按钮即可。7.7.设置文本域文本设置文本域文本（1 1）选择文档中插入的文本域，然后打开）选择文档中插入的文本域，然后打开“行为行为”面板，单击面板，单击“添添加行为加行为”按钮，在打开的按钮，在打开的“行为行为”下拉菜单中选择下拉菜单中选择“设置文本设置文本”“”“设置文本域文字设置文本域文字”命令。命令。（2 2）在打开的）在打开的“设置文本域文字设置文本域

30、文字”对话框中进行设置。在对话框中进行设置。在“文本域文本域”下拉列表中选择要设置的文本域。下拉列表中选择要设置的文本域。（3 3）在）在“新建文本新建文本”文本框中输入文本内容，然后单击文本框中输入文本内容，然后单击“确定确定”按按钮。钮。（4 4）在）在“行为行为”面板中可以看到刚添加的行为，也可以根据需要修面板中可以看到刚添加的行为，也可以根据需要修改行为的响应事件。改行为的响应事件。8.8.设置状态栏信息设置状态栏信息（1 1）选中文档窗口左下角状态栏中的）选中文档窗口左下角状态栏中的标签，然后选择标签，然后选择“窗口窗口行为行为”命令打开命令打开“行为行为”面板。面板。（2 2）在打

31、开的）在打开的“行为行为”面板中单击面板中单击“添加行为添加行为”按钮按钮 ，在弹出的，在弹出的下拉菜单中选择下拉菜单中选择“设置文本设置文本设置状态栏文本设置状态栏文本”命令命令 （3 3）在打开的）在打开的“设置状态栏文本设置状态栏文本”对话框中，输入要在网页状态栏对话框中，输入要在网页状态栏中显示的文字，然后单击中显示的文字，然后单击“确定确定”按钮。按钮。（4 4）在）在“行为行为”面板中可以看到设置好的行为。面板中可以看到设置好的行为。（5 5）在）在“行为行为”面板中将事件设为面板中将事件设为“onLoad”onLoad”（左图），在加载页（左图），在加载页面的时候，即可在状态栏中

32、显示出设置的状态栏信息（右图）。面的时候，即可在状态栏中显示出设置的状态栏信息（右图）。（6 6）按）按“F12”F12”键，在浏览器中预览网页键，在浏览器中预览网页效果，即可在浏览器底部的状态栏中看效果，即可在浏览器底部的状态栏中看到设置的文字信息到设置的文字信息9.9.交换图像交换图像（1 1）准备两张尺寸相同的图像，一幅作为原始图像（左图），另一）准备两张尺寸相同的图像，一幅作为原始图像（左图），另一幅作为交换图像（右图）。幅作为交换图像（右图）。（2 2）在文档中创建一个表格，然后将光标插入到要加入交换图像的）在文档中创建一个表格，然后将光标插入到要加入交换图像的单元格中，选择单元格中

33、，选择“插入插入图像图像”命令。命令。（3 3）在打开的）在打开的“选择图像源文件选择图像源文件”对话框中选择要插入的图像，然对话框中选择要插入的图像，然后单击后单击“确定确定”按钮。按钮。（4 4）选择刚插入的图像，在）选择刚插入的图像，在“属性属性”面板中为图像输入名称。面板中为图像输入名称。（5 5）选中插入的图像，在）选中插入的图像，在“行为行为”面板中单击面板中单击“添加行为添加行为”按钮按钮 ，在弹出的下拉菜单中选择在弹出的下拉菜单中选择“交换图像交换图像”命令，打开命令，打开“交换图像交换图像”对对话框。话框。（6 6）在）在“交换图像交换图像”对话框中单击对话框中单击“浏览浏览

34、”按钮，打开按钮，打开“选择图像选择图像源文件源文件”对话框，选择需要作为变换图像的文件，然后单击对话框，选择需要作为变换图像的文件，然后单击“确确定定”按钮。按钮。（7 7）返回到）返回到“交换图像交换图像”对话框中，可以看到所选择的交换图像的对话框中，可以看到所选择的交换图像的路径，然后单击路径，然后单击“确定确定”按钮。按钮。（8 8）这时看到）这时看到“行为行为”面板中已经添加了交换图像行为。面板中已经添加了交换图像行为。（9 9）保存文件，按）保存文件，按“F12”F12”键打开浏览器窗口（左图），在其中预键打开浏览器窗口（左图），在其中预览网页，将鼠标指针移到交换图像上面，可以看到

35、图像发生了变览网页，将鼠标指针移到交换图像上面，可以看到图像发生了变化（右图）。化（右图）。10.10.调用调用JavaScriptJavaScript（1 1）在文档中选择要添加行为的文本对像，这里选择文档中的）在文档中选择要添加行为的文本对像，这里选择文档中的“关关闭窗口闭窗口”文本内容。文本内容。（2 2）打开）打开“属性属性”面板，在面板，在“属性属性”面板中为其添加一个空链接面板中为其添加一个空链接“JavaScript:;”JavaScript:;”。（3 3）打开）打开“行为行为”面板，单击面板，单击“添加行为添加行为”按钮（左图），在弹出按钮（左图），在弹出的菜单中选择的菜单中

36、选择“调用调用JavaScript”JavaScript”命令，打开命令，打开“调用调用JavaScript”JavaScript”对话框（右图）。对话框（右图）。（4 4）在对话框中输入）在对话框中输入“window.close()”window.close()”，这个，这个JavaScriptJavaScript代码命代码命令可以在被执行后，关闭当前浏览器窗口，然后单击令可以在被执行后，关闭当前浏览器窗口，然后单击“确定确定”按钮。按钮。（5 5）在）在“行为行为”面板中可以看到刚刚创建的面板中可以看到刚刚创建的“调用调用JavaScript”JavaScript”行行为。为。（6 6）按

37、）按“F12”F12”键，在浏览器中预览网页（左图），单击键，在浏览器中预览网页（左图），单击“关闭窗关闭窗口口”文本，即可弹出关闭浏览器窗口提示信息框（右图）。文本，即可弹出关闭浏览器窗口提示信息框（右图）。11.11.转到转到URLURL（1 1）打开一个网页文档，选择）打开一个网页文档，选择“窗口窗口行为行为”命令（左图），打开命令（左图），打开“行为行为”面板（右图）。面板（右图）。（2 2）在）在“行为行为”面板中单击面板中单击“添加行为添加行为”按钮，在弹出的下拉菜单按钮，在弹出的下拉菜单中选择中选择“转到转到URL”URL”命令。命令。（3 3）在选择了）在选择了“转到转到URL

38、”URL”命令后，即可打开命令后，即可打开“转到转到URL”URL”对话框。对话框。（4 4）在）在“转到转到URL”URL”对话框中输入一个网址，然后单击对话框中输入一个网址，然后单击“确定确定”按按钮。钮。（5 5）将行为添加到）将行为添加到“行为行为”面板中，在面板中，在“行为行为”面板中可以看到刚面板中可以看到刚添加的添加的“转到转到URL”URL”行为。行为。（6 6）保存文档后，按）保存文档后，按“F12”F12”键在浏览器中预览效果。键在浏览器中预览效果。本章小结本章小结 使用框架制作网页既可以使页面的整体使用框架制作网页既可以使页面的整体布局清晰，又可以加快网页制作速度。布局清晰，又可以加快网页制作速度。在在Dreamweaver中加入多媒体元素以及中加入多媒体元素以及设置行为与事件，可以丰富网页内容。设置行为与事件，可以丰富网页内容。