第9讲 使用行为和媒体

DreamweaverCS4中文版基础培训教程主讲：XXX老师从零开始人民邮电出版社第9讲使用行为和媒体教学目标9.1使用行为9.1.1功能讲解9.1.2范例解析──使用行为制作“翔翔写真”网页9.1.3课堂实训——使用行为完善“十大名山”网页功能9.2使用媒体9.2.1功能讲解9.2.2范例解析——插入WMV视频9.2.3课堂实训——插入swf动画9.3综合案例──完善“西湖十景”网页教学目标了解行为的基本概念。掌握常用事件和动作。掌握插入常用媒体的方法。返回目录9.1使用行为9.1.1功能讲解9.1.2范例解析──使用行为制作“翔翔写真”网页9.1.3课堂实训——使用行为完善“十大名山”网页功能返回目录9.1.1功能讲解使用行为可以允许浏览者与网页进行简单的交互，从而以多种方式修改页面或引发某些任务的执行。基本概念。添加行为。常用事件。常用动作。返回目录一、基本概念认识行为需要掌握以下几个基本概念。行为：事件和动作的组合，因此行为的基本元素有两个：事件和动作。事件：触发程序运行的原因，事件可附加到网页中的对象上，例如，当访问者将鼠标光标移到一个链接上时，将会产生一个“onMouseOver”（鼠标经过）事件。动作：事件触发后要实现的效果，如打开浏览器窗口等。对象：产生行为的主体，如文本、图像等，不同的事件为不同的对象所定义，例如，“onMouseOver”（鼠标经过）和“onClick”（单击）是与链接相关的事件，“onLoad”（载入）是与图像和文档相关的事件。返回目录二、添加行为在添加行为时，首先应选中对象，然后选择【窗口】/【行为】命令打开【行为】面板，在【行为】面板中单击按钮，在弹出的行为菜单中选择相应的动作，最后在【行为】面板中单击事件名右边的按钮，在弹出的下拉菜单中选择相应的触发动作的事件，如图所示。返回目录三、常用事件事件决定了动作的执行时间，常用事件如表所示。返回目录返回目录四、常用动作DreamweaverCS4内置了许多行为动作，这些行为动作的功能如表所示。返回目录返回目录（1）弹出信息【弹出信息】行为将弹出一个提示对话框。在文档中选择要触发行为的对象，如图像，然后从行为菜单中选择【弹出信息】命令，在弹出的【弹出信息】对话框中进行参数设置即可，如图所示。返回目录在【行为】面板中将事件设置为【onMouseDown】，即鼠标按下时触发该事件。在浏览网页时，用户可以在图像上单击鼠标右键，在弹出的快捷菜单中选择【图片另存为】命令，将网页中的图像下载到自己的计算机中。而当添加了这个行为动作以后，当访问者单击鼠标右键时，将显示提示框而不是快捷菜单，这样就限制了用户使用鼠标右键来下载图像，如图所示。返回目录（2）打开浏览器窗口使用【打开浏览器窗口】行为将打开一个新浏览器窗口来显示指定的网页文档。在文档中选择触发行为的对象，如图像，然后从行为菜单中选择【打开浏览器窗口】命令即可打开【打开浏览器窗口】对话框，根据需要进行设置即可。在【行为】面板中将事件设置为“onClick”。当预览网页时，单击小图将打开一个大图像的新窗口，如图所示。返回目录（3）调用JavaScript【调用JavaScript】行为能够让设计者使用【行为】面板指定一个自定义功能，或者当一个事件发生时执行一段JavaScript代码。在文档中选择要触发行为的对象，如带有空链接的“关闭窗口”文本，然后从行为菜单中选择【调用JavaScript】命令，弹出【调用JavaScript】对话框，在文本框中输入要执行的JavaScript代码或函数名，如“window.close()”，用来关闭窗口。在【行为】面板中确认触发事件为【onClick】。预览网页，当单击“关闭窗口”超级链接文本时，就会弹出提示对话框，询问用户是否关闭窗口，如图所示。返回目录（4）改变属性【改变属性】行为用来改变网页元素的属性值，如文本的大小、字体，层的可见性，背景色，图片的来源以及表单的执行等。例如，在文档中插入一个层，并在其中插入一幅名称为“pic”的图像，然后选中层并从【行为】菜单中选择【改变属性】命令，弹出【改变属性】对话框，根据需要进行参数设置，在【行为】面板中确认触发事件为【onMouseOver】，运用相同的方法再添加一个【onMouseOut】事件及相应的动作，如图所示。返回目录（5）交换图像【交换图像】行为可以将一个图像替换为另一个图像，这是通过改变图像的“src”属性来实现的。虽然也可以通过为图像添加【改变属性】行为来改变图像的“src”属性，不过【交换图像】行为更加复杂一些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。例如，在文档中插入一幅图像并命名，然后在【行为】面板中单击按钮，从弹出的【行为】菜单中选择【交换图像】命令，弹出【交换图像】对话框。在【图像】列表框中选择要改变的图像，然后设置其【设定原始档为】选项，并勾选【预先载入图像】和【鼠标滑开时恢复图像】复选框，如图所示。返回目录返回目录单击按钮，关闭对话框，在【行为】面板中自动添加了3个行为：图像的【交换图像】和【恢复交换图像】行为及文档的【预先载入图像】行为。预览网页，当鼠标滑过图像时，图像会发生变化，如图所示。返回目录（6）Spry效果“Spry效果”是视觉增强功能，几乎可以将它们应用于使用JavaScript的HTML页面上的所有元素。要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个Id。例如，如果要向当前未选定的Div标签应用高亮显示效果，该Div必须具有一个有效的Id值。如果该元素尚且没有有效的Id值，需要在HTML代码中添加一个。利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。由于这些效果都基于Spry，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。在【行为】面板的下拉菜单中选择【效果】命令，其子命令如图所示。返回目录下面对【效果】命令的子命令进行简要说明。【增大/收缩】：使元素变大或变小。【挤压】：使元素从页面的左上角消失。【显示/渐隐】：使元素显示或渐隐。【晃动】：模拟从左向右晃动元素。【滑动】：上下移动元素。【遮帘】：模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。【高亮颜色】：更改元素的背景颜色。当使用效果时，系统会在【代码】视图中将不同的代码行添加到文件中。其中的一行代码用来标识“SpryEffects.js”文件，该文件是包括这些效果所必需的。不能从代码中删除该行，否则这些效果将不起作用。返回目录9.1.2范例解析──使用行为制作“翔翔写真”网页首先将“范例解析素材\第9讲\9-1-2”文件夹下的内容复制到站点根文件夹下，然后使用行为制作“翔翔写真”网页，要求图像不允许下载，当鼠标光标指在图像上时，图像立即变为另一幅图像，当鼠标光标指在图像下面的文本上时，文本的颜色及背景颜色均发生变化，最终效果如图所示。这是使用行为制作网页效果的一个例子，涉及到弹出信息、交换图像和改变属性等行为，具体操作步骤参考教材。返回目录9.1.3课堂实训——使用行为完善“十大名山”网页功能首先将“课堂实训\素材\第9讲\9-1-3”文件夹下的内容复制到站点根文件夹下，然后使用行为完善“十大名山”网页功能，要求图像不允许下载，当鼠标指在图像上时在状态栏显示图像说明文字，最终效果如图所示。这是使用行为完善网页功能的一个例子，涉及到设置状态栏文本、弹出信息等行为。返回目录9.2使用媒体9.2.1功能讲解9.2.2范例解析——插入WMV视频9.2.3课堂实训——插入swf动画返回目录9.2.1功能讲解媒体技术的发展使网页设计者能够轻松自如地在页面中加入声音、动画、影片等内容，使制作的网页充满了乐趣，更给访问者增添了几分欣喜。在DreamweaverCS4中，媒体的内容包括swf（Flash动画）、FlashPaper、Flv（Flash视频）、Shockwave、Applet、ActiveX、插件等。插入swf动画。插入ActiveX。返回目录一、插入swf动画Flash技术是实现和传递矢量图像和动画的首要解决方案。其播放器是FlashPlayer，在常用计算机上，它可以作为IE浏览器的ActiveX控件，因此，Flash动画可以直接在浏览器中播放。Flash通常有3种文件格式：Flash文件（.fla格式）、Flash影片文件（.swf格式）和Flash视频文件（.flv格式）。其中，Flash文件是在Flash中创建的文件的源文件格式，不能直接在Dreamweaver中打开使用；Flash影片文件是由Flash文件输出的影片文件，可在浏览器或Dreamweaver中打开使用；Flash视频文件是Flash的一种视频文件，它包含经过编码的音频和视频数据，可通过FlashPlayer传送。在DreamweaverCS4中插入swf动画的方法通常有以下3种。选择【插入】/【媒体】/【swf】命令。在【插入】/【常用】面板的媒体按钮组中，单击按钮。在【文件】面板中选中Flash文件，然后拖动到文档中。插入Flash动画后，其【属性】面板如图所示。返回目录二、插入ActiveXActiveX的主要作用是在不发布浏览器新版本的情况下扩展浏览器的能力。如果浏览器载入了一个网页，而这个网页中有浏览器不支持的ActiveX控件，浏览器会自动安装所需控件。WMV和RM是网络常见的两种视频格式。其中，WMV影片是Windows的视频格式，使用的播放器是MicrosoftMediaPlayer。在WMV视频的ActiveX【属性】面板中，许多参数没有设置，便无法正常播放WMV格式的视频。这时需要做两项工作：一是添加“ClassID”；二是添加控制播放参数。对于控制播放参数，可以根据需要有选择地添加。返回目录除了当前的WMV视频，此种方式还可以播放MPG、ASF等格式的视频，但不能播放RM、RMVB格式。播放RM格式的视频不能使用MicrosoftMediaPlayer播放器，必须使用RealPlayer播放器。设置方法是：在【属性】面板的【ClassID】下拉列表中选择“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”，勾选【嵌入】复选框，然后在【属性】面板中单击按钮，打开【参数】对话框添加参数，最后设置【宽】和【高】为固定尺寸。在播放WMV格式的视频时，可以不设置具体的尺寸，但是RM格式的视频必须要设置一个具体的尺寸。当然，这个尺寸可能不是影片的原始比例尺寸，可以通过将参数“MAINTAINASPECT”设置为“true”来恢复影片的原始比例尺寸。返回目录9.2.2范例解析——插入WMV视频首先将“范例解析素材\第9讲\9-2-2”文件夹下的内容复制到站点根文件夹下，然后创建一个网页并插入WMV视频，播放效果如图所示。这是使用ActiveX制作网页效果的一个例子，具体操作步骤参考教材。返回目录9.2.3课堂实训——插入swf动画首先将“课堂实训\素材\第9讲\9-2-3”文件夹下的内容复制到站点根文件夹下，然后创建一个网页并插入swf动画，播放效果如图所示。这是插入Flash动画的一个例子，可以使用【插入】/【媒体】/【swf】命令进行操作。返回目录9.3综合案例──完善“西湖十景”网页首先将“综合案例\素材\第9讲”文件夹下的所有内容复制到站点根文件夹下，然后使用行为和媒体完善网页，最终效果如图所示。这是使用行为和媒体完善网页的一个例子，可以先插入swf动画，然后插入图像，并使用行为禁止图像下载，同时对图像应用Spry增大效果。返回目录返回目录