插入音频和视频

项目4　插入音频和视频——制作“自娱自乐”网页

项目描述

一个网页，除了有图文并茂的效果以及Flash动画元素外，音频和视频元素也是必不可少的，这样才能使网页有声有色，更加吸引人们的眼球。现以“自娱自乐”网页的制作过程来掌握音频和视频在网页中的插入和属性设置方法，以及JavaApplet文件和ShockWave文件的插入方法。“自娱自乐”网页的效果如图3-94所示。

图3-94　“自娱自乐”网页效果

项目分析

该项目的完成，需制作空白网页，插入视频文件、音频文件、JavaApplet文件和Shock-Wave文件，以及对插入对象属性进行简单的设置。因此，本项目可分解为以下任务：

任务1　制作空白网页

任务2　插入视频文件

任务3　插入插件

任务4　插入音频文件

项目目标

●了解网页中插入的视频文件和音频文件的格式

●掌握在网页中插入视频和音频文件的方法

●掌握在网页中插入JavaApplet文件的方法

●掌握在网页中插入ShockWave文件的方法

任务1　制作空白网页

操作步骤

在F盘根目录下新建一个sitelx34文件夹，作为站点文件存放的位置；将“素材”文件夹下“单元3”中“项目4”中的素材复制到sitelx34文件夹中。

执行【开始】→【所有程序】→【Adobe Dreamweaver CS3 】命令，打开Dreamweaver CS3工作窗口；在起始页“新建”栏中单击“Dreamweaver站点”选项，在弹出的【站点定义】对话框的“高级”标签中定义站点名称为“自娱自乐”，并指定站点根目录及图片文件的目录，如图3-95所示。

图3-95　【站点定义】对话框

单击【确定】按钮，在【文件】面板即显示新建站点“自娱自乐”，如图3-96所示。

图3-96　【文件】面板

在起始页“新建”栏中单击“HTML”选项，新建网页文档；执行【文件】→【保存】命令，将网页保存在站点根目录下，保存文件名为“yule.html”，如图3-97所示。

图3-97　创建yule.html网页

任务2　插入视频文件

操作步骤

输入文字“娱乐大杂烩——自娱自乐”，设置字体大小为36像素，颜色为＃FFFF00，居中对齐；回车分段，插入水平线；再输入文字“广告片Shockwave影片JavaApplet 3D动画片电视节目武侠电影自拍dv”，设置字体大小为24像素、粗体，颜色为＃FFFF00，居中对齐；设置页面背景颜色为黑色，效果如图3-98所示。

图3-98　插入文字和水平线效果

将光标定位在下一段，执行【插入记录】→【媒体】→【Flash视频】命令，或者在【插入】栏【常用】类别中单击“媒体”按钮，在下拉菜单中选择“Flash视频”选项，如图3-99所示。

图3-99　选择Flash视频选项

在打开的【插入Flash视频】对话框中设置视频类型为“累进式下载视频”，URL为“other/guanggao.flv”，宽度为250，高度为200，勾选“自动播放”、“自动重复播放”和“如果必要，提示用户下载Flash Player”复选框，如图3-100所示。

图3-100　【插入Flash视频】对话框

贴心提示

视频类型有两种，即“累进式下载视频”和“流视频”。前者表示将Flash视频文件下载到站点访问者的硬盘上，然后播放；后者对Flash视频内容进行流式处理，边缓冲边播放。

●URL：指定Flash视频的路径，即flv文件的路径。

●外观：默认Clear Skin1（最小宽度140）。

●自动播放：当网页打开时播放视频。

●自动重新播放：在播放完之后返回起始位置重新播放。

单击【确定】按钮，即可插入Flash视频，如图3-101所示。预览效果如图3-102所示。

图3-101　文档中插入Flash视频

图3-102　Flash视频预览效果

将光标定位至Flash视频后，执行【插入记录】→【媒体】→【Shockwave】命令，或者在【插入】栏【常用】类别中单击“媒体”图标下拉菜单中的Shockwave选项，如图3-103所示。

图3-103　选择Shockwave选项

贴心提示

Shockwave影片文件扩展名为dcr，需要安装Shockwave Player才能正常播放。如果选择的文件不在站点目录下，Dreamweaver会提示用户是否保存至站点目录。

在打开的【选择文件】对话框中，选中“流星.dcr”文件，单击【确定】按钮，即可插入Shockwave影片。为了便于查看影片效果，需要修改影片的宽和高。在此，为了美观和对齐的需要，在“属性”面板中设置影片宽250像素，高200像素。效果如图3-104所示，预览效果如图3-105所示。

将光标定位至Shockwave后，执行【插入记录】→【媒体】→【APPLET】命令，或者在【插入】栏【常用】类别中单击“媒体”图标下拉菜单中的“APPLET”选项，如图3-106所示。

图3-104　在文档中插入Shockwave影片

图3-105　Shockwave影片预览效果

图3-106　选择“APPLET”选项

贴心提示

Java Applet文件扩展名为class，浏览器必须支持Java才能显示效果。一般来讲，Applet文件插入文档后，需要设置参数才能正常显示Applet本身的效果。

在打开的【选择文件】对话框中，选中“flame.class”文件，单击【确定】按钮，即可插入Applet文件。为了便于查看Applet效果，需要修改Applet的宽和高，在此，为了美观和对齐的需要，设置Applet文件宽250像素，高80像素。效果如图3-107所示。

图3-107　在文档中插入Applet文件

该Applet可以实现燃烧文字的效果，为了设置用户想要显示的文字，必须在代码中插入如下参数：

＜applet code＝″flame.class″width＝″250″height＝″80″＞

＜param name＝″Text″value＝″娱乐大杂烩″/＞

Sorry，your browser doesn’t support Java（tm）.

＜/applet＞

设置完参数后预览，如果浏览器不支持Java，则会显示“Sorry，your browser doesn’t support Java（tm）.”；反之，则会显示燃烧文字的效果，如图3-108所示。

图3-108　Applet预览效果

任务3　插入插件

操作步骤

将光标定位至下一段，执行【插入记录】→【媒体】→【插件】命令，或者在【插入】栏【常用】类别中单击“媒体”图标下拉菜单中的“插件”选项，如图3-109所示。

图3-109　选择插件选项

贴心提示

在Dreamweaver中，除了Flash视频外，其他视频音频文件都是通过插件插入的。

在打开的【选择文件】对话框中，选中“donghua.avi”文件，单击【确定】按钮，即可插入AVI格式的3D动画视频。为了便于查看效果，需要修改插件的宽和高，在此，为了美观和对齐的需要，设置3D动画视频宽250像素，高200像素，效果如图3-110所示。按F12键预览，效果如图3-111所示。

图3-110　在文档中插入AVI视频文件

将光标定位在AVI视频后，执行【插入记录】→【媒体】→【插件】命令，或者在【插入】栏【常用】类别中单击“媒体”图标下拉菜单中的“插件”选项，打开【选择文件】对话框，选中“刘若英-后来.wmv”文件，单击【确定】按钮，即可插入WMV视频文件。在【属性】面板中设置插件的宽和高分别为250像素和200像素。

图3-111　AVI视频预览效果

将光标定位至WMV视频之后，选中插件图标，再打开【选择文件】对话框，选中“剑雨.mpg”文件，单击【确定】按钮，即可插入MPG格式的武侠电影视频。在【属性】面板中设置插件的宽和高分别为250像素和200像素。

将光标定位至下一段，选中插件图标，再打开【选择文件】对话框，选中“dolphin.mpg”文件，单击【确定】按钮，即可插入MPG格式的自拍DV。在【属性】面板中设置插件的宽和高分别为250像素和200像素。按F12键预览，效果如图3-112所示。

图3-112　插入多种格式视频插件预览效果

任务2　插入音频文件

操作步骤

音频文件的插入和视频类似，将光标定位至自拍DV后，执行【插入记录】→【媒体】→【插件】命令，或者在【插入】栏【常用】类别中单击“媒体”图标下拉列表中的“插件”选项，在打开的【选择文件】对话框中，选中“tianmimi.mp3”文件，单击【确定】按钮，即可插入MP3格式的音频文件。修改音频文件的宽和高分别为250像素和50像素。

同样操作，在MP3文件之后，插入“gaoshanliushui.mid”文件；修改文件的宽和高分别为250像素和50像素；按F12键在网页中预览，效果如图3-113所示。至此，“自娱自乐”网页制作完成。

图3-113　插入多种格式音频文件预览效果

知识百科

1.网页中视频文件类型

网页中的视频文件格式有很多，如AVI、WMV、ASF、MPG、RM、RMVB、MOV、FLV等，本书主要介绍以下4种：

1）FLV文件

FLV（Flash Video）流媒体格式是随着Flash MX的推出发展而来的一种新的视频格式。FLV文件容量小，清晰的FLV视频1min在1MB左右，一部电影在100MB左右，是普通视频文件容量的1/3。再加上CPU占有率低、视频质量良好等特点，使其在网络上盛行。目前网上几家著名视频共享网站均采用FLV格式文件提供视频。

2）AVI文件

AVI英文全称为Audio Video Interleaved，即音频视频交错格式，是将语音和影像同步组合在一起的文件格式。它对视频文件采用了一种有损压缩方式，但压缩比较高。因此，尽管画面质量不是太好，但其应用范围仍然非常广泛。AVI支持256色和RLE压缩。AVI信息主要应用在多媒体光盘上，用来保存电视、电影等各种影像信息。

3）WMV文件

WMV是微软推出的一种流媒体格式，它是由“同门”的ASF（Advanced Stream Format）格式升级延伸来的。在同等视频质量下，WMV格式的容量非常小，因此，很适合在网上播放和传输。

4）MPG文件

MPG又称MPEG（Moving Pictures Experts Group），即动态图像专家组。国际标准化组织ISO与IEC（International Electronic Committee）于1988年联合成立，该组织专门致力于运动图像（MPEG视频）及其伴音编码（MPEG音频）标准化工作。

2.网页中音频文件类型

网页中的音频文件格式很多，比如WAV、MP3、AIF、MIDI、RAM、RPM等，本书主要介绍以下3种：

1）MP3文件

MP3是一种音频压缩技术，由于这种压缩方式的全称叫MPEG Audio Layer3，所以人们把它简称为MP3。MP3是利用MPEG Audio Layer 3的技术，将音乐以1∶10甚至1∶12的压缩率，压缩成容量较小的文件。换句话说，能够在音质丢失很小的情况下把文件压缩到更小的程度，而且还非常好地保持了原来的音质。正是因为MP3容量小、音质高的特点，使得MP3格式几乎成为网上音乐的代名词。

2）MIDI文件

MIDI系统实际就是一个作曲、配器、电子模拟的演奏系统。从一个MIDI设备转送到另一个MIDI设备上去的数据就是MIDI信息。MIDI数据不是数字的音频波形，而是音乐代码或称电子乐谱。MIDI技术的一大优点是其文件数据量相当小，一个包含有1min立体声的数字音频文件需要约10MB的存储空间。然而，1min的MIDI音乐文件只有2KB。

3）WAV文件

WAV格式是微软公司开发的一种声音文件格式，也叫波形声音文件，是最早的数字音频格式，被Windows平台及其应用程序广泛支持。WAV格式支持许多压缩算法，支持多种音频位数、采样频率和声道，采用44.1kHz的采样频率，16位量化位数。因此，WAV的音质与CD相差无几，但WAV格式对存储空间需求太大不便于交流和传播。

3.网页中其他多媒体文件

除了常见的视频和音频文件外，网页中还可以添加其他多媒体元素，比如Shockwave影片、Java Applet文件等。

1）Shockwave影片

Shockwave影片具有文件小、下载速度快，被目前主流的浏览器支持，所以被广泛应用于网页中。它是使用Director Shockwave Studio制作的，像在网页上看到的互动游戏、电影短片等，几乎都是Shockwave影片。

2）Java Applet文件

Java Applet就是用Java语言编写的小应用程序，可以直接嵌入到网页中，并能够产生特殊的效果。在Java Applet中，可以实现图形绘制、字体和颜色控制、动画和声音的插入、人机交互及网络交流等功能。

3）ActiveX对象

ActiveX是一个开放的集成平台，为开发人员、用户和Web生产商提供了一个快速而简便的在Internet和Intranet创建程序集成和内容的方法。使用ActiveX，可轻松方便地在Web页中插入多媒体效果、交互式对象以及复杂程序，创建高质量多媒体。

项目小结

通过制作“自娱自乐”网页，掌握了如何在网页中插入视频文件和音频文件的方法。网页中包括多种视频格式，如AVI、WMV、MPG、FLV等，多种音频格式，如MP3、MIDI等，还有其他多媒体元素，如Shockwave影片、Java Applet等。另外，还应掌握插入对象属性的设置方法，如大小、对齐方式等属性设置。