http://www.wenyuan.com.cn/webnew/
第 11章 在网页中使用多媒体
（时间,2次课,4学时）
http://www.wenyuan.com.cn/webnew/
教学提示,在本章的学习中应该注意学习在网页中如何使用多媒体元素,注意利用不同的网页制作工具中的特色工具以及脚本程序的使用 。
教学目标,通过本章的学习,用户应掌握网页中视听元素的概念,网页中如何进行文字特效的操作,如何在网页中添加动画,音频以及视频文件 。
第 11章 在网页中使用多媒体
http://www.wenyuan.com.cn/webnew/
第 11章 在网页中使用多媒体
11.1 网页中文字的处理
11.2 在网页中使用图像、动画
11.3 在网页中播放音频文件
11.4 在网页中播放视频文件
11.5 上机指导
11.6 习题
http://www.wenyuan.com.cn/webnew/
11.1 网页中文字的处理
11.1.1 文字颜色的设置
11.1.2 设置文本特效
http://www.wenyuan.com.cn/webnew/
11.1.1 文字颜色的设置
不论在 FrontPage中还是 Dreamweaver中,都可以对选定的文字进行颜色设置 。 在 FrontPage中进行字体颜色设置时,可以通过单击 【 格式 】 |【 字体 】 |【 字体 】
命令,在 【 字体 】 窗口的 【 颜色 】 选项中选择字体所要设置的颜色 。 在 Dreamweaver中操作则更简单,可直接在 Properties(属性 )中进行设置 。
http://www.wenyuan.com.cn/webnew/
11.1.2 设置文本特效
在网页中不仅动画给人以动感,网页中文字的一些特效也会产生同样的效果,增添网页的美感 。 在此介绍一些使用代码实现文本特效的方法 。
具体方法介绍详见书 308~313页
http://www.wenyuan.com.cn/webnew/
11.2 在网页中使用图像、动画
11.2.1 直接使用动画或图像
11.2.2 制作动画效果
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
1,直接使用图像
在网页中直接使用图像一般包括以下两种情况：作为背景或者作为装饰 。
(1) 在网页中使用图像作为背景,使得网页不再单调,不同背景的网页给人不同的感觉 。 在网页中设置背景的具体操作如下：
在 FrontPage中,单击 【 格式 】 |【 背景 】 命令
,打开网页属性对话框,选中 【 背景图片 】 复选框,
单击 Browse按钮,在打开的窗口中选择需要作为背景图片的文件,单击 【 确定 】 按钮即可 。
在 Dreamweaver 中,单击 modify|page
properties 命令,打 开 页 面 属 性 对 话 框,单击
Background Image后的 Browse按钮,选择需要作为背景的图片,单击 OK即可 。
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
(2) 在网页中直接插入图像的方法很简单,在
FrontPage中单击 【 插入 】 |【 图像 】 命令即可；在
Dreamweaver中,单击 Insert | Image命令即可 。
2,直接插入动画
在 Dreamweaver中插入 Flash制作的 SWF格式动画十分容易,单击对象工具栏上的 Flash徽标或选择 【
媒体 】 | Flash命令,就可以打开选择 SWF动画文件的对话框,选好文件后在其属性面板中设定播放的参数即可 。
在 FrontPage XP中不支持直接插入 SWF格式的
Flash动画文件,可以按照以下方法进行操作：
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
(1) 单击 【 插入 】 |【 Web组件 】 命令,然后在打开的对话框左侧组件类型列表中选择 【 高级控件 】 选项,然后在右侧窗口中选择 【 ActiveX控件 】 选项 。 单击 【 下一步 】 按钮,在选择控件列表下方单击 【 自定义 】 按钮 。 在列表中选择 Shockwave Flash Object控件,单击 【 确定 】 按钮返回 【 插入 Web组件 】 对话框,选中 Shockwave Flash
Object复选框,并单击 【 完成 】 按钮 。
(2) 双击网页中出现的白色矩形区域,打开 【 ActiveX控件属性 】 对话框 。 在 Movie URL文本框中输入要插入的
Flash动画文件的链接地址,并在 Quality下拉列表中选择
Flash动画的播放品质,在 Scale选项后选择显示比例,如
,Show All (完全显示 ),,最后单击 【 确定 】 按钮返回即可看到网页中的动画了 。
http://www.wenyuan.com.cn/webnew/
11.2.2 制作动画效果
1,直接使用 Flash制作动画
使用 Flash制作的动画,最吸引人的地方除了其灵活的表现手法和广泛的创意之外,生成作品的 swf文件非常小,适于加入到网页中 。
关于具体制作 Flash的方法,用户可参阅该类书籍,在此不再详细介绍 。
2,设置交替显示图片效果
使用 Dreamweaver 中 Insert菜单的工具实现,在
Dreamweaver 界 面 中 单 击 Insert|Interactive
Images|Rollover Image命令,在弹出的对话框中选择最初显示的图片以及鼠标滑过时要显示的图片 。
利用图层实现,Dreamweaver中一个非常重要的特点就是图层的引入,利用图层可以实现许多特效 。 在此介绍利用图层实现幻灯片的效果 。
http://www.wenyuan.com.cn/webnew/
11.2.2 制作动画效果
3,利用 Dreamweaver中的 Timeline实现图片移动
Dreamweaver中的 Timeline(时间轴 )和 Flash中的 Timeline
作用一样,都可以用来控制元素 (图像或图层 )的运动 。 在此以运用时间轴控制图层的显示事件为例介绍时间轴的使用方法 。
具体操作参见书 315~317页 。
http://www.wenyuan.com.cn/webnew/
11.3 在网页中播放音频文件
11.3.1 在 FrontPage中播放音频文件
11.3.2 在 Dreamweaver中播放音频文件
11.3.3 直接使用代码实现
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
1,使用插件播放音频文件
在网页中使用插件播放音频文件的具体操作步骤如下：
(1) 选择 【 插入 】 |【 Web组件 】 命令,在 【 组件类型 】 列表中选择 【 高级控件 】 选项,并在右边的控件框中选择 【 插件 】 选项 。 单击 【 完成 】 按钮后,网页中添加了一个标志,如图 11.8所示 。
如图 11.8
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
(2) 同时会打开 【 插件属性 】 对话框,在其中单击 【 浏览 】
按钮,在打开的 【 选择插件数据源 】 对话框中选择要播放的音频文件,我们可以选择扩展名为 wav,mid,snd,au的音频文件 。 选好要播放的文件后,单击 【 打开 】 按钮,显示 【 插件属性 】 对话框,在该对话框中可以设置插件的属性,如大小,布局 。
2,直接插入音频文件
在网页中播放音频文件还可以使用插入音频的方法 。 嵌入要使用插件来播放音频文件,离开了插件,嵌入的文件就不能够正常播放,而插入则不同,它在播放多媒体时并不依赖插件,
只和浏览器有关 。 目前,Internet Explorer支持对插入的音频的播放,而 Netscape Navigator还不能支持 。
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
3,直接插入音频文件
还有一种使用音频的方法,就是链接音频文件 。 单击
【 插入 】 |【 超链接 】 命令,打开 【 插入超链接 】 对话框,选择要链接的音频文件,如图 11.15所示,然后单击 【 确定 】 按钮 。
现在用浏览器可以看到,单击超链接时,音频文件就在独立的 Active Movie中播放了；用鼠标右键单击超链接选择 【 目标另存为 】 命令可以将音频文件下载 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
1,直接插入法
具体操作步骤如下：
(1)用 Dreamweaver打开一张需要插入背景音乐的网页,单击 Window | Behaviors命令,打开 Behaviors面板 。
(2)单击,+”按钮,在打开的菜单中选择 Play Sound命令 。
(3)此时弹出 Play Sound对话框,单击 Browser按钮,在
Select File对话框中选择音乐文件,注意,应选择浏览器支持的音乐文件格式 (如 mid,wav,aiff,au)。
(4)插入文件后网页里会显示一个,plugin”插件图标,但我们还需要作进一步的调整 。 因为 Dreamweaver 自动插入了一段控制代码,方便我们定制激活背景音乐 。 如果此功能不需要使用,就要把它删除 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
要删除的代码如下：
<script language="JavaScript" type="text/JavaScript">
<!—
function MM_controlSound(x,_sndObj,sndFile){//v3.0
var i,method="",sndObj=eval(_sndObj);
if (sndObj !=null){
if (navigator.appName==′Netscape′) method="play";
else{
if (window.MM_WMP==null){
window.MM_WMP=false;
for(i in sndObj) if (i=="ActiveMovie"){
window.MM_WMP=true;break;
}}
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
if (window.MM_WMP) method="play";
else if (sndObj.FileName) method="run";
}}
if (method) eval(_sndObj+"."+method+"()");
else window.location=sndFile;
}
//-->
</script>
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
如果 Dreamweaver的版本不是 XP,可能还要删除以下代码：
<p onMouseOver="MM_controlSound(′play′,
′document.CS1022210102744′,′WindowsXP.wav′)
"> </p>
(5)完成插入后的背景音乐还不能自动播放,在
Properties卷展栏中单击右下角的 Parameters按钮,
在弹出的窗口中进行修改,把参数 AutoStart后的
Value默认值 false改成 true,这样就达到打开页面背景音乐就响起的效果 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
2,使用音频插件播放
有些人始终使用 FrontPage也许就是因为一些元素的插入,Dreamweaver 没有提供类似的功能,或者使用不方便 。 但 Dreamweaver 支持插件,声音插入插件为音频,视频文件的播放提供了方便 。
3,通过超链接实现音频文件的播放
选中要链接的文字,在 Properties卷展栏中的 Link
下拉列表框中选择要链接的音频文件 。 在预览时,单击超级链接即可播放选择的音频文件 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
4,Plugin播放音频文件
在 Insert卷展栏的 Media面板中单击 按钮,在打开的 Select File对话框中选择要播放的音频文件,然后单击 OK按钮 。 保存该文件后进行预览,即可播放该文件 。 但并不是一打开网页就播放音频文件,需要单击播放按钮才可以打开该文件 。
http://www.wenyuan.com.cn/webnew/
11.3.3 直接使用代码实现
1,常规背景音乐
在页面源程序的 <body>和 </body>之间加入以下
HTML代码：
<bgsound src="//背景音乐路径 " loop="//播放次数
">
2,可控制播放的背景音乐
在源程序的 <body>中加入以下 HTML代码：
<embed src="// 背 景 音 乐 路 径 " width="280"
height="45">
3,用按钮控制播放的背景音乐
代码如下：
http://www.wenyuan.com.cn/webnew/
11.3.3 直接使用代码实现
<embed src="// 背 景 音 乐 路 径 " width=" 0"
height="0" id="music">
<form>
<input type="button" value=" 关 闭 音 乐 "
onclick="music.stop()">
<input type="button" value=" 播 放 音 乐 "
onclick="music.play()">
</form>
把这段代码放在 <body>和 </body>之间 。 其中,id”
是设定对象的标志,这个标志在这个页面中是惟一的
。,onclick”是设定对象被单击时所执行的脚本程序 。
http://www.wenyuan.com.cn/webnew/
11.4 在网页中播放视频文件
11.4.1 在 FrontPage中播放视频文件
11.4.2 Dreamweaver中播放视频文件
11.4.3 视频点播系统的实现
http://www.wenyuan.com.cn/webnew/
11.4.1 在 FrontPage中播放视频文件
1 嵌入视频文件
具体操作步骤如下：
(1) 单击 【 插入 】 |【 Web组件 】 命令,在 【 插入 Web
组件 】 对话框中选择 【 高级控件 】 选项,并在右边的控件框中选择 【 插件 】 选项,单击 【 完成 】 按钮后,网页中添加了一个标志 。
(2) 在打开的 【 插件属性 】 对话框中单击 【 数据源 】
文本框后的 【 浏览 】 按钮,在 【 选择插件数据源 】 文本框中选择要播放的视频文件 。 选好视频文件后单击 【 打开 】 按钮,打开 【 插件属性 】 对话框,在该对话框中可设置插件的属性,如大小,布局等 。
该过程和嵌入音频的过程类似,在此不再详细介绍 。
http://www.wenyuan.com.cn/webnew/
11.4.1 在 FrontPage中播放视频文件
2,插入视频文件
在要插入视频的地方单击,设置插入点,选择 【 插入 】 |【 图片 】 |【 视频 】 选项 。 打开 【 视频 】 对话框,
选择插入的视频,然后单击 【 确定 】 按钮 。 切换到预览模式,视频就自动播放了 。
3,链接视频文件
选中要作为超链接的文字,单击常用工具栏的 【 超链接 】 按钮,选择要链接的视频文件,然后单击 【 确定 】 按钮,超链接就做好了 。
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件
1,通过超级链接实现
选中要链接的文字,在 Properties卷展栏中的 Link下拉列表中选择要链接的视频文件 。 在预览时,单击超级链接即可播放选择的视频文件 。
2,使用 RealMedia插件播放视频文件
当在 IE中单击一个 RealPlayer链接时,系统会自动启动 RealPlayer软件,不仅占用系统内存,而且在上网时 RealPlayer容易出现错误 。 解决这问题的最好办法就是将 RealPlayer文件嵌入网页 。 只需安装一个 Real
Networks专门为 Dreamweaver开发的 Real Media插件即可 。
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件
在网页中插入 RM音频文件的具体操作如下：
(1) 保存网页 。 在网页中插入任何 RealMedia的控件时,必须先保存网页,不然会出现图 11.22所示的对话框 。
(2) 保存网页后,用鼠标单击 RealMedia Audio按钮
,打开 Select File 对话框 。 一 般 来 说,所 有 的
RealPlayer支持的文件都可以插入其中,如 MP3也可以插入 。
(3) 如果要插入 RealPlayer的视频文件,在网页中只能听到声音,却不见图像 。 这时可以修改 Properties
卷展栏中的各项参数 。 RealMedia Audio各项参数设置如图 11.24所示,
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件图 11.24
在 RealMedia文本框中可以输入对应的名称,W栏和
H栏就是长和高,它的默认属性是 1× 1。 Src是播放文件具体的地址,可以单击文件夹图标进行选择 。 如果要让用户一打开这个页面,就能听到悦耳的音乐,可以选中 Auto-Start复选框 。 一般的音频文件播放时,会出现 Real Networks的商标,如果选中 Hide Logo复选框,那么商标就不再出现了 。
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
以 IE 5.0为例介绍嵌入式 Web视频点播系统的实现方法,
其中用到了部分 PHP和 JavaScript技术 。
具体操作方法如下：
(1) 插入 RealPlayer ActiveX对象 (如果要进行测试,需要先安装 RealPlayer播放器 )
假定以下代码包含在 video.php文档中 (该文件将在主页面中通过 <iframe>进行链接 )。
<object width="320" height="250"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
<param name="CONTROLS" value="ImageWindow">
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
<param name="CONSOLE" value="Video">
<param name="CENTER" value="TRUE">
<param name="MAINTAINSPECT" value="TRUE">
</object> //定义播放界面
<object width="320" height="30"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
<param name="CONTROLS" value="StatusBar">
<param name="CONSOLE" value="Video">
</object> //定义状态栏
<object width="320" height="30"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="Video">
<param name="SRC" value="<?php echo getsrc();?>">
<param name="AUTOSTART" value="TRUE">
<param name="PREFETCH" value="0">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
</object> //定义控制面板
其中,CONTROLS参数用来指定播放器的控件外观,可以用多个控件进行组合,并通过 CONSOLE参数进行关联 。
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
(2) 使用 DHTML动态控制 RealPlayer控件的播放
以下代码包含在主页面中：
<IFRAME id="iVideo" SRC="video.php" Width=500
Height=345 frameborder=0 SCROLLING="no">
</IFRAME>,其中,video.php 文 件 用 力 显 示
RealPlayer控件 。
下面我们加入简单的 JavaScript 代码用来控制视频的播放 。
<script language="JavaScript">
function play(filename){
top.document.all("iVideo").src
= "video.php?src="+filename;
} // iVideo 是刚刚定义的 IFRAME 的标识符
</script>
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
(3) 检测用户是否安装 RealPlayer播放器
在页面的 <head></head>部分加入以下 JavaScript代码,
用以检测用户是否安装 RealPlayer播放器：
<SCRIPT LANGUAGE=JavaScript>
<!—
var RealMode=0;
var RealPlayer5=0;
var RealPlayer4=0;
var RealPlayerG2=0;
if (navigator.userAgent.indexOf("MSIE")< 0 ){
numPlugins = navigator.plugins.length;
for (i = 0; i < numPlugins; i++){
plugin = navigator.plugins【 i】 ;
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
if (plugin.name.substring(0,10)=="RealPlayer"){
RealMode=1;
}
}
}
// 以下代码通过 VBScript的 CreateObject()函数动态的创建
RealPlayer对象
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('RealPlayerG2 = (NOT
IsNull(CreateObject("rmocx.RealPlayer G2 Control")))\n');
document.write('RealPlayer5 = (NOT
IsNull(CreateObject("RealPlayer.RealPlayer(tm) ActiveX
Control (32-bit)")))\n');
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
document.write('RealPlayer4 = (NOT
IsNull(CreateObject("RealVideo.RealVideo(tm) ActiveX
Control (32-bit)")))\n');
document.write('</SCRIPT\> \n');
if ( RealPlayerG2 || RealPlayer5 || RealPlayer4 ){
//可以在此处添加 <object>对象
}else if ( RealMode ){ // NetScape浏览器用户
// 可以在此处加入 <embed>对象
}else{
window.location.replace("install.htm"); // 转入
install.htm页面指导用户进行安装
}
-->
</Script>
http://www.wenyuan.com.cn/webnew/
11.5 上机指导
在网页中插入的多媒体元素比较多,可以根据自己的网页设计情况选择其中的一些插入网页中,来制作一个主页 。
要在这个网页中插入背景音乐,静态图像和动画,则在
Dreamweaver中的具体操作步骤如下：
(1) 插入表格,并根据需要将表格进行拆分 。
(2) 在表格中插入主页标志图片以及其他图像,包括静态的和动态的 。 如图 11.27和 11.28所示是 gif动画变化前后的网页效果 。
http://www.wenyuan.com.cn/webnew/
11.5 上机指导图 11.27
图 11.28
http://www.wenyuan.com.cn/webnew/
11.5 上机指导
(3) 在网页中插入音频文件作为网页背景音乐 。
(4) 完善网页的其他部分,插入设计的其他内容 。 用户可以使用热区以及行为等设置鼠标滑过时显示不同图片的效果 。
(5) 设置完成后得到的效果,如图 11.29所示 。
http://www.wenyuan.com.cn/webnew/
11.5 上机指导图 11.29
http://www.wenyuan.com.cn/webnew/
11.6 习题
参见书 p334页：一、选择题,二、填空题、三、判断改错题、四、简答题、五、操作题。
http://www.wenyuan.com.cn/webnew/
Q & A?
Thanks!
第 11章 在网页中使用多媒体
（时间,2次课,4学时）
http://www.wenyuan.com.cn/webnew/
教学提示,在本章的学习中应该注意学习在网页中如何使用多媒体元素,注意利用不同的网页制作工具中的特色工具以及脚本程序的使用 。
教学目标,通过本章的学习,用户应掌握网页中视听元素的概念,网页中如何进行文字特效的操作,如何在网页中添加动画,音频以及视频文件 。
第 11章 在网页中使用多媒体
http://www.wenyuan.com.cn/webnew/
第 11章 在网页中使用多媒体
11.1 网页中文字的处理
11.2 在网页中使用图像、动画
11.3 在网页中播放音频文件
11.4 在网页中播放视频文件
11.5 上机指导
11.6 习题
http://www.wenyuan.com.cn/webnew/
11.1 网页中文字的处理
11.1.1 文字颜色的设置
11.1.2 设置文本特效
http://www.wenyuan.com.cn/webnew/
11.1.1 文字颜色的设置
不论在 FrontPage中还是 Dreamweaver中,都可以对选定的文字进行颜色设置 。 在 FrontPage中进行字体颜色设置时,可以通过单击 【 格式 】 |【 字体 】 |【 字体 】
命令,在 【 字体 】 窗口的 【 颜色 】 选项中选择字体所要设置的颜色 。 在 Dreamweaver中操作则更简单,可直接在 Properties(属性 )中进行设置 。
http://www.wenyuan.com.cn/webnew/
11.1.2 设置文本特效
在网页中不仅动画给人以动感,网页中文字的一些特效也会产生同样的效果,增添网页的美感 。 在此介绍一些使用代码实现文本特效的方法 。
具体方法介绍详见书 308~313页
http://www.wenyuan.com.cn/webnew/
11.2 在网页中使用图像、动画
11.2.1 直接使用动画或图像
11.2.2 制作动画效果
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
1,直接使用图像
在网页中直接使用图像一般包括以下两种情况：作为背景或者作为装饰 。
(1) 在网页中使用图像作为背景,使得网页不再单调,不同背景的网页给人不同的感觉 。 在网页中设置背景的具体操作如下：
在 FrontPage中,单击 【 格式 】 |【 背景 】 命令
,打开网页属性对话框,选中 【 背景图片 】 复选框,
单击 Browse按钮,在打开的窗口中选择需要作为背景图片的文件,单击 【 确定 】 按钮即可 。
在 Dreamweaver 中,单击 modify|page
properties 命令,打 开 页 面 属 性 对 话 框,单击
Background Image后的 Browse按钮,选择需要作为背景的图片,单击 OK即可 。
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
(2) 在网页中直接插入图像的方法很简单,在
FrontPage中单击 【 插入 】 |【 图像 】 命令即可；在
Dreamweaver中,单击 Insert | Image命令即可 。
2,直接插入动画
在 Dreamweaver中插入 Flash制作的 SWF格式动画十分容易,单击对象工具栏上的 Flash徽标或选择 【
媒体 】 | Flash命令,就可以打开选择 SWF动画文件的对话框,选好文件后在其属性面板中设定播放的参数即可 。
在 FrontPage XP中不支持直接插入 SWF格式的
Flash动画文件,可以按照以下方法进行操作：
http://www.wenyuan.com.cn/webnew/
11.2.1 直接使用动画或图像
(1) 单击 【 插入 】 |【 Web组件 】 命令,然后在打开的对话框左侧组件类型列表中选择 【 高级控件 】 选项,然后在右侧窗口中选择 【 ActiveX控件 】 选项 。 单击 【 下一步 】 按钮,在选择控件列表下方单击 【 自定义 】 按钮 。 在列表中选择 Shockwave Flash Object控件,单击 【 确定 】 按钮返回 【 插入 Web组件 】 对话框,选中 Shockwave Flash
Object复选框,并单击 【 完成 】 按钮 。
(2) 双击网页中出现的白色矩形区域,打开 【 ActiveX控件属性 】 对话框 。 在 Movie URL文本框中输入要插入的
Flash动画文件的链接地址,并在 Quality下拉列表中选择
Flash动画的播放品质,在 Scale选项后选择显示比例,如
,Show All (完全显示 ),,最后单击 【 确定 】 按钮返回即可看到网页中的动画了 。
http://www.wenyuan.com.cn/webnew/
11.2.2 制作动画效果
1,直接使用 Flash制作动画
使用 Flash制作的动画,最吸引人的地方除了其灵活的表现手法和广泛的创意之外,生成作品的 swf文件非常小,适于加入到网页中 。
关于具体制作 Flash的方法,用户可参阅该类书籍,在此不再详细介绍 。
2,设置交替显示图片效果
使用 Dreamweaver 中 Insert菜单的工具实现,在
Dreamweaver 界 面 中 单 击 Insert|Interactive
Images|Rollover Image命令,在弹出的对话框中选择最初显示的图片以及鼠标滑过时要显示的图片 。
利用图层实现,Dreamweaver中一个非常重要的特点就是图层的引入,利用图层可以实现许多特效 。 在此介绍利用图层实现幻灯片的效果 。
http://www.wenyuan.com.cn/webnew/
11.2.2 制作动画效果
3,利用 Dreamweaver中的 Timeline实现图片移动
Dreamweaver中的 Timeline(时间轴 )和 Flash中的 Timeline
作用一样,都可以用来控制元素 (图像或图层 )的运动 。 在此以运用时间轴控制图层的显示事件为例介绍时间轴的使用方法 。
具体操作参见书 315~317页 。
http://www.wenyuan.com.cn/webnew/
11.3 在网页中播放音频文件
11.3.1 在 FrontPage中播放音频文件
11.3.2 在 Dreamweaver中播放音频文件
11.3.3 直接使用代码实现
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
1,使用插件播放音频文件
在网页中使用插件播放音频文件的具体操作步骤如下：
(1) 选择 【 插入 】 |【 Web组件 】 命令,在 【 组件类型 】 列表中选择 【 高级控件 】 选项,并在右边的控件框中选择 【 插件 】 选项 。 单击 【 完成 】 按钮后,网页中添加了一个标志,如图 11.8所示 。
如图 11.8
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
(2) 同时会打开 【 插件属性 】 对话框,在其中单击 【 浏览 】
按钮,在打开的 【 选择插件数据源 】 对话框中选择要播放的音频文件,我们可以选择扩展名为 wav,mid,snd,au的音频文件 。 选好要播放的文件后,单击 【 打开 】 按钮,显示 【 插件属性 】 对话框,在该对话框中可以设置插件的属性,如大小,布局 。
2,直接插入音频文件
在网页中播放音频文件还可以使用插入音频的方法 。 嵌入要使用插件来播放音频文件,离开了插件,嵌入的文件就不能够正常播放,而插入则不同,它在播放多媒体时并不依赖插件,
只和浏览器有关 。 目前,Internet Explorer支持对插入的音频的播放,而 Netscape Navigator还不能支持 。
http://www.wenyuan.com.cn/webnew/
11.3.1 在 FrontPage中播放音频文件
3,直接插入音频文件
还有一种使用音频的方法,就是链接音频文件 。 单击
【 插入 】 |【 超链接 】 命令,打开 【 插入超链接 】 对话框,选择要链接的音频文件,如图 11.15所示,然后单击 【 确定 】 按钮 。
现在用浏览器可以看到,单击超链接时,音频文件就在独立的 Active Movie中播放了；用鼠标右键单击超链接选择 【 目标另存为 】 命令可以将音频文件下载 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
1,直接插入法
具体操作步骤如下：
(1)用 Dreamweaver打开一张需要插入背景音乐的网页,单击 Window | Behaviors命令,打开 Behaviors面板 。
(2)单击,+”按钮,在打开的菜单中选择 Play Sound命令 。
(3)此时弹出 Play Sound对话框,单击 Browser按钮,在
Select File对话框中选择音乐文件,注意,应选择浏览器支持的音乐文件格式 (如 mid,wav,aiff,au)。
(4)插入文件后网页里会显示一个,plugin”插件图标,但我们还需要作进一步的调整 。 因为 Dreamweaver 自动插入了一段控制代码,方便我们定制激活背景音乐 。 如果此功能不需要使用,就要把它删除 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
要删除的代码如下：
<script language="JavaScript" type="text/JavaScript">
<!—
function MM_controlSound(x,_sndObj,sndFile){//v3.0
var i,method="",sndObj=eval(_sndObj);
if (sndObj !=null){
if (navigator.appName==′Netscape′) method="play";
else{
if (window.MM_WMP==null){
window.MM_WMP=false;
for(i in sndObj) if (i=="ActiveMovie"){
window.MM_WMP=true;break;
}}
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
if (window.MM_WMP) method="play";
else if (sndObj.FileName) method="run";
}}
if (method) eval(_sndObj+"."+method+"()");
else window.location=sndFile;
}
//-->
</script>
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
如果 Dreamweaver的版本不是 XP,可能还要删除以下代码：
<p onMouseOver="MM_controlSound(′play′,
′document.CS1022210102744′,′WindowsXP.wav′)
"> </p>
(5)完成插入后的背景音乐还不能自动播放,在
Properties卷展栏中单击右下角的 Parameters按钮,
在弹出的窗口中进行修改,把参数 AutoStart后的
Value默认值 false改成 true,这样就达到打开页面背景音乐就响起的效果 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
2,使用音频插件播放
有些人始终使用 FrontPage也许就是因为一些元素的插入,Dreamweaver 没有提供类似的功能,或者使用不方便 。 但 Dreamweaver 支持插件,声音插入插件为音频,视频文件的播放提供了方便 。
3,通过超链接实现音频文件的播放
选中要链接的文字,在 Properties卷展栏中的 Link
下拉列表框中选择要链接的音频文件 。 在预览时,单击超级链接即可播放选择的音频文件 。
http://www.wenyuan.com.cn/webnew/
11.3.2 在 Dreamweaver中播放音频文件
4,Plugin播放音频文件
在 Insert卷展栏的 Media面板中单击 按钮,在打开的 Select File对话框中选择要播放的音频文件,然后单击 OK按钮 。 保存该文件后进行预览,即可播放该文件 。 但并不是一打开网页就播放音频文件,需要单击播放按钮才可以打开该文件 。
http://www.wenyuan.com.cn/webnew/
11.3.3 直接使用代码实现
1,常规背景音乐
在页面源程序的 <body>和 </body>之间加入以下
HTML代码：
<bgsound src="//背景音乐路径 " loop="//播放次数
">
2,可控制播放的背景音乐
在源程序的 <body>中加入以下 HTML代码：
<embed src="// 背 景 音 乐 路 径 " width="280"
height="45">
3,用按钮控制播放的背景音乐
代码如下：
http://www.wenyuan.com.cn/webnew/
11.3.3 直接使用代码实现
<embed src="// 背 景 音 乐 路 径 " width=" 0"
height="0" id="music">
<form>
<input type="button" value=" 关 闭 音 乐 "
onclick="music.stop()">
<input type="button" value=" 播 放 音 乐 "
onclick="music.play()">
</form>
把这段代码放在 <body>和 </body>之间 。 其中,id”
是设定对象的标志,这个标志在这个页面中是惟一的
。,onclick”是设定对象被单击时所执行的脚本程序 。
http://www.wenyuan.com.cn/webnew/
11.4 在网页中播放视频文件
11.4.1 在 FrontPage中播放视频文件
11.4.2 Dreamweaver中播放视频文件
11.4.3 视频点播系统的实现
http://www.wenyuan.com.cn/webnew/
11.4.1 在 FrontPage中播放视频文件
1 嵌入视频文件
具体操作步骤如下：
(1) 单击 【 插入 】 |【 Web组件 】 命令,在 【 插入 Web
组件 】 对话框中选择 【 高级控件 】 选项,并在右边的控件框中选择 【 插件 】 选项,单击 【 完成 】 按钮后,网页中添加了一个标志 。
(2) 在打开的 【 插件属性 】 对话框中单击 【 数据源 】
文本框后的 【 浏览 】 按钮,在 【 选择插件数据源 】 文本框中选择要播放的视频文件 。 选好视频文件后单击 【 打开 】 按钮,打开 【 插件属性 】 对话框,在该对话框中可设置插件的属性,如大小,布局等 。
该过程和嵌入音频的过程类似,在此不再详细介绍 。
http://www.wenyuan.com.cn/webnew/
11.4.1 在 FrontPage中播放视频文件
2,插入视频文件
在要插入视频的地方单击,设置插入点,选择 【 插入 】 |【 图片 】 |【 视频 】 选项 。 打开 【 视频 】 对话框,
选择插入的视频,然后单击 【 确定 】 按钮 。 切换到预览模式,视频就自动播放了 。
3,链接视频文件
选中要作为超链接的文字,单击常用工具栏的 【 超链接 】 按钮,选择要链接的视频文件,然后单击 【 确定 】 按钮,超链接就做好了 。
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件
1,通过超级链接实现
选中要链接的文字,在 Properties卷展栏中的 Link下拉列表中选择要链接的视频文件 。 在预览时,单击超级链接即可播放选择的视频文件 。
2,使用 RealMedia插件播放视频文件
当在 IE中单击一个 RealPlayer链接时,系统会自动启动 RealPlayer软件,不仅占用系统内存,而且在上网时 RealPlayer容易出现错误 。 解决这问题的最好办法就是将 RealPlayer文件嵌入网页 。 只需安装一个 Real
Networks专门为 Dreamweaver开发的 Real Media插件即可 。
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件
在网页中插入 RM音频文件的具体操作如下：
(1) 保存网页 。 在网页中插入任何 RealMedia的控件时,必须先保存网页,不然会出现图 11.22所示的对话框 。
(2) 保存网页后,用鼠标单击 RealMedia Audio按钮
,打开 Select File 对话框 。 一 般 来 说,所 有 的
RealPlayer支持的文件都可以插入其中,如 MP3也可以插入 。
(3) 如果要插入 RealPlayer的视频文件,在网页中只能听到声音,却不见图像 。 这时可以修改 Properties
卷展栏中的各项参数 。 RealMedia Audio各项参数设置如图 11.24所示,
http://www.wenyuan.com.cn/webnew/
11.4.2 Dreamweaver中播放视频文件图 11.24
在 RealMedia文本框中可以输入对应的名称,W栏和
H栏就是长和高,它的默认属性是 1× 1。 Src是播放文件具体的地址,可以单击文件夹图标进行选择 。 如果要让用户一打开这个页面,就能听到悦耳的音乐,可以选中 Auto-Start复选框 。 一般的音频文件播放时,会出现 Real Networks的商标,如果选中 Hide Logo复选框,那么商标就不再出现了 。
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
以 IE 5.0为例介绍嵌入式 Web视频点播系统的实现方法,
其中用到了部分 PHP和 JavaScript技术 。
具体操作方法如下：
(1) 插入 RealPlayer ActiveX对象 (如果要进行测试,需要先安装 RealPlayer播放器 )
假定以下代码包含在 video.php文档中 (该文件将在主页面中通过 <iframe>进行链接 )。
<object width="320" height="250"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
<param name="CONTROLS" value="ImageWindow">
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
<param name="CONSOLE" value="Video">
<param name="CENTER" value="TRUE">
<param name="MAINTAINSPECT" value="TRUE">
</object> //定义播放界面
<object width="320" height="30"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
<param name="CONTROLS" value="StatusBar">
<param name="CONSOLE" value="Video">
</object> //定义状态栏
<object width="320" height="30"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-
0020AFBBCCFA">
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="Video">
<param name="SRC" value="<?php echo getsrc();?>">
<param name="AUTOSTART" value="TRUE">
<param name="PREFETCH" value="0">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
</object> //定义控制面板
其中,CONTROLS参数用来指定播放器的控件外观,可以用多个控件进行组合,并通过 CONSOLE参数进行关联 。
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
(2) 使用 DHTML动态控制 RealPlayer控件的播放
以下代码包含在主页面中：
<IFRAME id="iVideo" SRC="video.php" Width=500
Height=345 frameborder=0 SCROLLING="no">
</IFRAME>,其中,video.php 文 件 用 力 显 示
RealPlayer控件 。
下面我们加入简单的 JavaScript 代码用来控制视频的播放 。
<script language="JavaScript">
function play(filename){
top.document.all("iVideo").src
= "video.php?src="+filename;
} // iVideo 是刚刚定义的 IFRAME 的标识符
</script>
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
(3) 检测用户是否安装 RealPlayer播放器
在页面的 <head></head>部分加入以下 JavaScript代码,
用以检测用户是否安装 RealPlayer播放器：
<SCRIPT LANGUAGE=JavaScript>
<!—
var RealMode=0;
var RealPlayer5=0;
var RealPlayer4=0;
var RealPlayerG2=0;
if (navigator.userAgent.indexOf("MSIE")< 0 ){
numPlugins = navigator.plugins.length;
for (i = 0; i < numPlugins; i++){
plugin = navigator.plugins【 i】 ;
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
if (plugin.name.substring(0,10)=="RealPlayer"){
RealMode=1;
}
}
}
// 以下代码通过 VBScript的 CreateObject()函数动态的创建
RealPlayer对象
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('RealPlayerG2 = (NOT
IsNull(CreateObject("rmocx.RealPlayer G2 Control")))\n');
document.write('RealPlayer5 = (NOT
IsNull(CreateObject("RealPlayer.RealPlayer(tm) ActiveX
Control (32-bit)")))\n');
http://www.wenyuan.com.cn/webnew/
11.4.3 视频点播系统的实现
document.write('RealPlayer4 = (NOT
IsNull(CreateObject("RealVideo.RealVideo(tm) ActiveX
Control (32-bit)")))\n');
document.write('</SCRIPT\> \n');
if ( RealPlayerG2 || RealPlayer5 || RealPlayer4 ){
//可以在此处添加 <object>对象
}else if ( RealMode ){ // NetScape浏览器用户
// 可以在此处加入 <embed>对象
}else{
window.location.replace("install.htm"); // 转入
install.htm页面指导用户进行安装
}
-->
</Script>
http://www.wenyuan.com.cn/webnew/
11.5 上机指导
在网页中插入的多媒体元素比较多,可以根据自己的网页设计情况选择其中的一些插入网页中,来制作一个主页 。
要在这个网页中插入背景音乐,静态图像和动画,则在
Dreamweaver中的具体操作步骤如下：
(1) 插入表格,并根据需要将表格进行拆分 。
(2) 在表格中插入主页标志图片以及其他图像,包括静态的和动态的 。 如图 11.27和 11.28所示是 gif动画变化前后的网页效果 。
http://www.wenyuan.com.cn/webnew/
11.5 上机指导图 11.27
图 11.28
http://www.wenyuan.com.cn/webnew/
11.5 上机指导
(3) 在网页中插入音频文件作为网页背景音乐 。
(4) 完善网页的其他部分,插入设计的其他内容 。 用户可以使用热区以及行为等设置鼠标滑过时显示不同图片的效果 。
(5) 设置完成后得到的效果,如图 11.29所示 。
http://www.wenyuan.com.cn/webnew/
11.5 上机指导图 11.29
http://www.wenyuan.com.cn/webnew/
11.6 习题
参见书 p334页：一、选择题,二、填空题、三、判断改错题、四、简答题、五、操作题。
http://www.wenyuan.com.cn/webnew/
Q & A?
Thanks!
