网页中插入多媒体

1、第第6章章 网页中插入多媒体网页中插入多媒体 主要内容主要内容6.2 添加声音添加声音 6.1 插入插入Flash动画动画 6.4 多媒体标记介绍多媒体标记介绍 6.3 插入视频插入视频 6.1 6.1 插入插入Flash动画动画 插入动画插入动画 1. 在在Dreamweaver 8中打开本书附带光盘中中打开本书附带光盘中06/01.html文件，将光标定位文件，将光标定位到页面上部，如图到页面上部，如图6.1所示。所示。 图图 6.2 定位光标定位光标 光标位置光标位置6.1 6.1 插入插入Flash动画动画 插入动画插入动画 2. 2. 单击【插入】单击【插入】【媒体】【媒体】【Fla

2、sh】选项，如图选项，如图6.2所示所示.，弹出，弹出“选选择文件择文件”对话框，在其中选择要打开的对话框，在其中选择要打开的Flash动画文件，如图动画文件，如图6.3所示，这所示，这里选择里选择06/meitifiles/flash1.swf文件。文件。 图图 6. 3 插入插入Flash 图图 6.3 选择选择Flash文件文件 6.1 6.1 插入插入Flash动画动画 插入动画插入动画 3.3.单击单击“确定确定”按钮后，插入的按钮后，插入的Flash并不会在设计视图中显示内容，而并不会在设计视图中显示内容，而是以一个带有字母是以一个带有字母F的灰色框来表示，如图的灰色框来表示，如图

3、6.4所示。保存文件并预览，所示。保存文件并预览，效果如图效果如图6.56.5所示。所示。 图图 6.4 插入的插入的Flash 图图 6.5 Flash预览预览 6.1 6.1 插入插入Flash动画动画 动画设置动画设置 插入插入Flash文件后，可以通过【属性】面板对其进行设置，如图文件后，可以通过【属性】面板对其进行设置，如图6.6所示。所示。 图图 6.6 Flash【属性】面板属性】面板 6.1 6.1 插入插入Flash动画动画 技巧技巧1 1： 插入插入FlashFlash文本的方法文本的方法 1. 1. 将光标定位到页面右侧的单元格中，如图将光标定位到页面右侧的单元格中，如图

4、6.7所示。所示。 图图 6.7 光标定位光标定位 光标位置光标位置6.1 6.1 插入插入Flash动画动画 技巧技巧1 1： 插入插入FlashFlash文本的方法文本的方法 2.2.单击【插入】单击【插入】【媒体】【媒体】【Flash文本】选项，弹出文本】选项，弹出“插入插入Flash文本文本”对话框，并在其中进行设置，如图对话框，并在其中进行设置，如图6.8所示。所示。图图 6.8 “插入插入Flash文本文本”对话框对话框 6.1 6.1 插入插入Flash动画动画 技巧技巧1 1： 插入插入FlashFlash文本的方法文本的方法 3.3.单击单击“确定确定”按钮，插入后的按钮，插

5、入后的Flash文本如图文本如图6.9所示，保存文件并所示，保存文件并预览，效果如图预览，效果如图6.10所示。所示。 图图 6.9 “设计视图设计视图”中的中的Flash文本文本 图图 6.10 浏览器中的浏览器中的Flash文本文本 6.1 6.1 插入插入Flash动画动画 技巧技巧2 2： 插入插入FlashFlash按钮的方法按钮的方法 1.1.将光标定位到单元格中，如图将光标定位到单元格中，如图6.11所示。所示。2.2.单击【插入】单击【插入】【媒体】【媒体】【FlashFlash按钮】选项，弹出按钮】选项，弹出“插入插入FlashFlash按钮按钮”对话框，并在其中进行设置，如

6、图对话框，并在其中进行设置，如图6.126.12所示。所示。 图图 6.11 光标定位光标定位 图图 6.12 “插入插入Flash按钮按钮”对话框对话框 光标位置光标位置6.1 6.1 插入插入Flash动画动画 技巧技巧2 2： 插入插入FlashFlash按钮的方法按钮的方法 3.3.单击单击“确定确定”按钮后，保存文件并预览，效果如图按钮后，保存文件并预览，效果如图6.136.13所示。所示。 图图 6.13 Flash按钮效果按钮效果 返回返回6.2 6.2 添加声音添加声音 常用的音频格式常用的音频格式 在网页中可插入的声音格式很多，主要包括如下几种：在网页中可插入的声音格式很多，

7、主要包括如下几种： WAV WAV：中文译为中文译为“WAVWAV扩展名扩展名”，这种格式的文件具有较高的声音质，这种格式的文件具有较高的声音质量，能够被大多数浏览器支持，并且不需要插件。量，能够被大多数浏览器支持，并且不需要插件。 MP3MP3：中文译为中文译为“运动图像专家组音频运动图像专家组音频”，这是一种压缩格式的声，这是一种压缩格式的声音可以令声音文件相对于音可以令声音文件相对于WAVWAV格式明显缩小。其声音品质非常好。格式明显缩小。其声音品质非常好。 MIDI MIDI或或MIDMID：中文译为中文译为“乐器数字接口乐器数字接口”，是一种乐器声音的格式，是一种乐器声音的格式，它能

8、够被大多数浏览器支持，并且不需要插件。但是尽管其声音品质它能够被大多数浏览器支持，并且不需要插件。但是尽管其声音品质非常好，但根据浏览者声卡的不同，声音效果也会有所不同。非常好，但根据浏览者声卡的不同，声音效果也会有所不同。 RA RA或或RAMRAM、RPMRPM和和Real AudioReal Audio：这种格式具有非常高的压缩程度，文这种格式具有非常高的压缩程度，文件大小不一要小于件大小不一要小于MP3MP3。全部歌曲文件可以在合理的时间范围内下载。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的因为可以在普通的WEBWEB服务器上对这些文件进行服务器上对这些文件进行“流式处理

9、流式处理”。 6.2 6.2 添加声音添加声音 插入声音插入声音 1.1.在在Dreamweaver 8中打开本书附带光盘中中打开本书附带光盘中06/sound.html文件，将光文件，将光标定位到单元格中，如图标定位到单元格中，如图6.14所示。所示。 光标位置光标位置图图 6.14 光标定位光标定位 6.2 6.2 添加声音添加声音 插入声音插入声音 2.2.单击【插入】单击【插入】【媒体】【媒体】【插件】选项，如图【插件】选项，如图6.15所示，弹出所示，弹出“选择文件选择文件”对话框，选择要插入的声音文件，如图对话框，选择要插入的声音文件，如图6.16所示。所示。 图图 6.15 选择

10、插件选择插件 图图 6.16 “选择文件选择文件”对话框对话框 6.2 6.2 添加声音添加声音 插入声音插入声音 3.3.单击单击“确定确定”按钮，并调整到适当大小，插入后的声音文件如图按钮，并调整到适当大小，插入后的声音文件如图6.17所示，保存文件并预览，效果如图所示，保存文件并预览，效果如图6.18所示。所示。 图图 6.17 设计视图中的声音文件设计视图中的声音文件 图图 6.18 预览声音文件预览声音文件 6.2 6.2 添加声音添加声音 背景音乐背景音乐 声音能极好地烘托网页的氛围，介是要考虎到添加声音后会大大声音能极好地烘托网页的氛围，介是要考虎到添加声音后会大大增 加 文 件

11、 的 大 小 ， 所 以 要 谨 慎 、 精 打 细 算 地 使 用 音 乐 。 在增 加 文 件 的 大 小 ， 所 以 要 谨 慎 、 精 打 细 算 地 使 用 音 乐 。 在Dreamweaver 8Dreamweaver 8中添加背景音乐的方法有两种：一种是通过手写代码中添加背景音乐的方法有两种：一种是通过手写代码实现；另一种是通过实现；另一种是通过“行为行为”实现。这里介绍以代码实现的方法。实现。这里介绍以代码实现的方法。 在在Dreamweaver 8Dreamweaver 8打开网页文件，切换打开网页文件，切换到拆分视图，将光标定位在到拆分视图，将光标定位在 head之间，然后

12、添加如下代码：之间，然后添加如下代码： bgsound src=meitifiles/music.mp3 loop=true其中其中 srcsrc属性：设置声音的来源文件属性：设置声音的来源文件 loop属性：设置循环播放属性：设置循环播放 返回返回6.3 6.3 插入视频插入视频 常用的视频格式常用的视频格式 视频文件的格式非常多，常见的有视频文件的格式非常多，常见的有MPEGMPEG、AVIAVI、WMVWMV、RMRM、MOVMOV等。等。 MPEG MPEG（或或MPGMPG）是一种压缩比率较大的活动图像和声音的视频压缩是一种压缩比率较大的活动图像和声音的视频压缩标准，它也是标准，它也

13、是VCDVCD光盘所使用的标准；光盘所使用的标准； AVI AVI是一种是一种Microsoft WindowsMicrosoft Windows操作系统所使用的多媒体文件格式。操作系统所使用的多媒体文件格式。 WMV WMV是一种是一种WindowsWindows操作系统自带的媒体播放器操作系统自带的媒体播放器Windows Media Windows Media PlayerPlayer所使用的多媒体文件格式。所使用的多媒体文件格式。 RM RM是是RealReal公司推广的一种多媒体文件格式，具有非常好的压缩比率，公司推广的一种多媒体文件格式，具有非常好的压缩比率，是网上应用最广泛的格式

14、之一。是网上应用最广泛的格式之一。 MOV MOV是是AppleApple公司推广的一种多媒体文件格式。公司推广的一种多媒体文件格式。 6.3 6.3 插入视频插入视频 插入视频插入视频 1.1.在在Dreamweaver 8中打开本书附带光盘中中打开本书附带光盘中06/01.html文件，将光标定文件，将光标定位到单元格中，如图位到单元格中，如图6.19所示。所示。 光标位置光标位置图图 6.19 光标定位光标定位 6.3 6.3 插入视频插入视频 插入视频插入视频 2. 2.单击【插入】单击【插入】【媒体】【媒体】【插件】选项，弹出【插件】选项，弹出“选择文件选择文件”对对话框，选择要插入

15、的视频文件，如图话框，选择要插入的视频文件，如图6.206.20所示。所示。 图图 6.20 选择视频文件选择视频文件 6.3 6.3 插入视频插入视频 插入视频插入视频 3.单击单击“确定确定”按钮，并调整到适当大小，插入后的视频文件如图按钮，并调整到适当大小，插入后的视频文件如图6.216.21所示，保存文件并预览，效果如图所示，保存文件并预览，效果如图6.226.22所示。所示。 图图 6.21 “设计视图设计视图”中的视频文件中的视频文件 图图 6.22 浏览器中的视频文件浏览器中的视频文件 6.3 6.3 插入视频插入视频 播放控制播放控制 在网页中插入的多媒体文件，在默认的情况下，

16、打开网页会直接在网页中插入的多媒体文件，在默认的情况下，打开网页会直接播放，但也可以使用【属性】面板中的【参数】选项进行播放控制，播放，但也可以使用【属性】面板中的【参数】选项进行播放控制，方法如下：方法如下：1. 选中上例中插入的视频文件，在【属性】面板中点击【参数】选选中上例中插入的视频文件，在【属性】面板中点击【参数】选项，弹出参数对话框，如图项，弹出参数对话框，如图6.23所示。所示。 图图 6.23 参数对话框参数对话框 6.3 6.3 插入视频插入视频 播放控制播放控制 2.在其中进行如下设置，如图在其中进行如下设置，如图6.24所示。所示。 图图 6.23 参数对话框参数对话框

17、添加参数添加参数输入参数值输入参数值3.3.单击确定，保存并预览效果，此时视频文件不能播放。单击确定，保存并预览效果，此时视频文件不能播放。 返回返回6.4 6.4 多媒体标记介绍多媒体标记介绍 多媒体对像插入标记多媒体对像插入标记 embed基本语法是基本语法是，其中其中“”代表代表urlurl地地址。址。插入插入FlashFlash插入插入FlashFlash 6.4 6.4 多媒体标记介绍多媒体标记介绍 插入声音插入声音 html插入声音插入声音/title返回返回6.4 6.4 多媒体标记介绍多媒体标记介绍 插入视频插入视频 html插入视频插入视频/title 要点总结要点总结 一、

18、插入Flash动画 1、打开（sample07flashflash-ori.htm） 2、插入（image-filesdizibo.swf) 3、设置属性 注：flash背景透明的设置方法 打开“属性”面板的“参数”按钮； 设定参数为wmode，值为transparent 二、插入Flash按钮 三、插入Flash文本 结果如（sample07flashflash.htm） 四、插入Flash元素 1、打开（ sample07gallerydisplay.htm） 2、在“Flash元素”快捷栏中单击“图像查看器”按钮 3、设置保存路径和属性 4、打开“标签检查器”面板（F9）， 设置fram

19、eshow属性为“是”； 在imageURLs属性中添加图片 设置transitionsType值为Random（随即播放动画效果） 设置slideAutoPlay值为是（自动播放） 设置slideLoop值为是（循环播放）常用常用“Flash元素元素”参数参数 bgColor 指定背景颜色。 frameColor 指定图像边框的颜色。将 frameShow 参数设置为“Yes”可显示边框。 frameShow 指示每个图像四周是否显示边框。 frameThickness 指定每个图像四周边框的宽度，以像素为单位。 captionColor 指定 imageCaptions 中包含的图像题注的

20、颜色。 captionFont 指定 imageCaptions 中包含的图像题注的字体。常用常用“Flash元素元素”参数参数 captionSize 指示 imageCaptions 中包含的图像题注的点数。 imageCaptions 包含 imageURLs 中指定的每个图像的题注。题注可用于部分或所有图像，或者不用于任何图像。 imageLinks 包含在 imageURLs 中指定的每个图像的 URL。LinkURLs 可用于部分或所有图像，或者不用于任何图像。 imageURLs 包含在图像查看器中显示的图像的位置。只能使用非渐进式的 JPEG 或 SWF 文件。 imageLi

21、nkTarget 指定浏览器窗口，将在其中加载在 linkURLs 中指定的 URL。可以将此参数设置为 _blank、_self、_top 或 _parent。常用常用“Flash元素元素”参数参数 showControls 指示在用户播放 Flash 元素时是否出现图像查看器控件。 slideAutoPlay 确定是否以幻灯片放映形式播放图像。如果设置为 true，则在第一幅图像加载完毕后，图像就开始以幻灯片形式播放。 slideDelay 指示在按下“播放”按钮或启用 autoPlay 时，每两个图像之间等待的时间长度（以秒为单位）。如果图像需要更长的时间进行加载，则图像的更改频率可以小

22、于此参数指定的时间。 slideLoop 指定图像幻灯片放映以连续循环方式进行播放。常用常用“Flash元素元素”参数参数 title 指定在图像查看器顶部显示的标题。 titleColor 指定 title 中包含的标题的颜色。 titleFont 指定 title 中包含的图像查看器标题的字体。 titleSize 指示 title 中包含的图像查看器标题的点数。transitionsType 参数说明参数说明 None：没有过渡效果。Blinds：百叶窗Fade：淡入淡出Fly：飞入Iris：缩放（中心）Photo：电子相册PixeIDissolve：溶解Rotate：旋转Squeeze

23、：伸展Wipe：擦除Zoom：缩放（左上角）Random：随机 五、插入FlashPaper （ sample07paperflashpaper.htm） 六、插入Flash视频 （ sample07flashvideoflashvideo.htm） 七、控制Flash的播放按钮 1、打开网页（ sample07controlindex_ori.htm） 2、给Flash影片命名为“f”；停止按钮链接为“#” 3、设置停止按钮的行为“控制shockwave或flash” 4、选中停止单选按钮，事件是onclick 5、“播放”、“重放”按钮类似 八、插入shockwave动画 （ sample

24、07shockwaveindex_ori.htm）插入声音插入声音 一、添加背景音乐 1、打开（ sample07soundindex_ori.htm） 2、添加如下代码： 二、嵌入音乐 1、打开（ sample07embedembed.htm） 2、在参数列表中设置： Loop值为“true”，表示循环播放 autostart值为“true”，表示自动开始 三、添加声音到任何对象（利用行为） 1、打开（sample07musicmusic_ori.htm） 2、选中播放按钮，打开其行为面板 3、选择播放声音动作，设置声音文件路径 4、事件为onClick插入视频插入视频 一、插入MPG、AV

25、I等视频 1、打开（sample07videojingdian_ori.htm） 2、单击“常用”“媒体”“插件”来选择视频文件 3、修改属性 二、插入RM视频 1、将（sample07加入RealVideo文件）复制到（C:Program FilesMacromediaDreamweaver 8ConfigurationObjectsMedia） 2、打开（sample07realvideoindex_ori.htm) 3、单击“常用”“媒体”“ embed realvideo plug-in”来选择视频文件插入其他多媒体插入其他多媒体 一、插入Java小程序 1、打开（sample07ja

26、vaindex_ori.htm) 2、单击“常用”“媒体”“ Applet”来选择文件 3、修改属性 二、插入ActiveX控件 三、插入参数 四、插入滚动字幕或图像 1、打开（sample07marqueev2_ori.htm) 左右滚动： 2/5 本站更新 2/6 本站添加新栏目 上下滚动： 2/5 本站更新 2/6 本站添加新栏目 调整速度： 2/5 本站更新 2/6 本站添加新栏目 鼠标控制： 2/5 本站更新 2/6 本站添加新栏目HTML代码中插入多媒体元素代码中插入多媒体元素 一、多媒体对象插入 注：该标签必须有 src 属性。 （一）、基本语法： embed src=url 说

27、明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等， Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 示例： （二）、属性设置： 1、自动播放： 语法：autostart=true、false 说明：该属性规定音频或视频文件是否在下载完之后就自动播放。 true：音乐文件在下载完之后自动播放； false：音乐文件在下载完之后不自动播放。 示例： 2、循环播放： 语法：loop=正整数、true、false 说明：该属性规定音频或视频文件是否循环及循环次数。 属性值为正整数值时，音频或视频文件的循环次

28、数与正整数值相同； 属性值为true时，音频或视频文件循环； 属性值为false时，音频或视频文件不循环。 示例： 3、面板显示： 语法：hidden=ture、no 说明：该属性规定控制面板是否显示，默认值为no。 ture：隐藏面板； no：显示面板。 示例： embed src=your.mid hidden=no 4、开始时间： 语法：starttime=mm:ss（分：秒） 说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。 示例： 5、音量大小： 语法：volume=0-100之间的整数 说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。 示

29、例：embed src=your.mid volume=10 6、容器属性： 语法：height=# width=# 说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。 height：控制面板的高度； width：控制面板的宽度。 示例： 7、容器单位： 语法：units=pixels、en 说明：该属性指定高和宽的单位为pixels或en。 示例： 8、外观设置： 语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、 volumelever 说明：该属性规定控制面板的外观。默认值是cons

30、ole。 console：一般正常面板； smallconsole：较小的面板； playbutton：只显示播放按钮； pausebutton：只显示暂停按钮； stopbutton：只显示停止按钮； volumelever：只显示音量调节按钮。 示例： 9、对象名称： 语法：name=# 说明：#为对象的名称。该属性给对象取名，以便其他对象利用。 示例： 10、说明文字： 语法：title=# 说明：#为说明的文字。该属性规定音频或视频文件的说明文字。 示例： 11、前景色和背景色： 语法：palette=color|color 说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个

31、值为前景色，第二个值为背景 色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。 示例： 12、对齐方式： 语法：align=top、bottom、center、baseline、 left、right、texttop、middle、 absmiddle、absbottom 说明：该属性规定控制面板和当前行中的对象的对齐方式 center：控制面板居中； left：控制面板居左； right：控制面板居右； top：控制面板的顶部与当前行中的最高对象的顶部对齐； bottom：控制面板的底部与当前行中的对象的基线对齐； bas

32、eline：控制面板的底部与文本的基线对齐； texttop：控制面板的顶部与当前行中的最高的文字顶部对齐； middle：控制面板的中间与当前行的基线对齐； absmiddle：控制面板的中间与当前文本或对象的中间对齐； absbottom：控制面板的底部与文字的底部对齐。 示例： 二、特殊标记 定义及用法 标签用于在网页里嵌入对象，比如图像、音频、视频、Java小程序、ActiveX、PDF、Flash等等。 标签原本是用来替代和的，不过由于各浏览器对该标签的支持不太好，因此目标并未实现。 各浏览器对的支持取决于对象的类型。不幸的是，各主流浏览器在加载同种对象时所采用的代码并不统一。 好在元素提供了一种机制来解决此问题：当元素无法显示时，那么介于和之间的代码将被执行。因此，我们可以通过嵌套元素（每个浏览器嵌套一层）的方式来解决浏览器差异的问题。HTML代码中插入多媒体元素代码中插入多媒体元素 object和和embed的区别的区别object标签只支持IE系列的浏览器或者其它支持Activex控件的浏览器（Internet Explorer），“classid”和“codebase”属性必须要精确地写，它们告