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