静态网页设计与制作 课件 第6章 制作多媒体网页

项目六

制作多媒体网页任务1添加声音任务2HTML5多媒体任务3Flash对象任务1添加声音任务引入网页中除了包含图像和文字之外，有时还需要添加一些音频，小明了解到不同类型的声音文件插入到网页中会有不同的要求和效果，那么具体有哪些类型的声音文件，如何将声音文件添加到网页中呢？知识准备声音文件的格式有多种类型，将声音添加到网页中也有多种不同的方法。在确定采用哪一种格式和方法添加声音之前，需要考虑以下一些因素：添加声音的目的、受众、文件大小、声音品质和不同浏览器的差异。一、关于声音不同类型的声音文件和格式有各自不同的特点。下面介绍几种较为常见的音频文件格式，以及每一种格式在网页应用中的一些优缺点：.midi或.mid（乐器数字接口）格式：主要用于器乐。.wav（Waveform扩展名）格式：.aif（音频交换文件格式，即AIFF）格式：.mp3（运动图像专家组音频，即MPEG-音频层-3）格式：.ra、.ram、.rpm或RealAudio格式：二、链接到音频文件链接到音频文件是在网页中添加音频文件的一种简单而有效的方法。这种集成声音文件的方法可以使访问者能够选择是否收听该文件，并且可使文件用于最广范围的访客。案例——链接到音频文件下面创建一个简单的例子，演示链接到音频文件的具体操作，效果如图所示。（1）新建一个空白的HTML文件，输入并格式化图中的文字。（2）选中“1.SleepAway”，在属性面板中，单击“链接”文本框右侧的“浏览文件”按钮，在弹出的对话框中选中音频文件，或者在“链接”文本框中键入文件的路径和名称。（3）保存文件，在浏览器中预览创建的结果。链接到音乐文件

打开播放器播放音乐三、嵌入音乐文件嵌入音频是指将声音播放器直接并入页面中，只有当访问者的浏览器安装有播放声音所需的插件时，声音才可以播放。如果要将声音用作背景音乐，或者要对声音演示进行更多控制，例如设置音量、播放器在页面上显示的方式，以及声音文件的开始点和结束点，可以嵌入文件。案例——制作背景音乐下面通过一个简单实例演示背景音乐的制作方法。最终的创建效果如图所示。（1）新建一个空白的HTML文档。（2）在“设计”视图中，将插入点放置在要嵌入文件的位置，执行“插入”｜“HTML”｜“插件”命令，弹出“选择文件”对话框。（3）选择要链接的音乐文件，单击“确定”按钮，在页面上插入一个插件占位符。（4）选中插件占位符，在属性面板上将插件尺寸修改为300×40。单击“参数”按钮，弹出如图所示的“参数”对话框。（5）单击对话框上的“添加”按钮，在“参数”列中输入参数的名称“loop”。在“值”域中输入该参数的值“true”，如图所示。输入完毕后单击“确定”按钮。（6）执行“文件”｜“保存”命令，保存文档。在浏览器中的预览效果如图所示，且音乐循环播放。“参数”对话框

“参数”对话框任务2HTML5多媒体任务引入在Dreamweaver2021中，除了能在网页中插入声音之外，还可以插入HTML5视频、HTML5音频等多媒体对象，那么要如何插入HTML5多媒体呢，如何设置媒体属性呢？知识准备HTML5视频元素提供一种将动画或视频嵌入网页中的标准方式。一、插入HTML5视频在网页中插入HTML5视频的操作步骤如下：（1）将光标放置在要插入视频的位置。（2）执行“插入”｜“HTML”｜“HTML5Video”菜单命令，即可在指定位置插入一个HTML5视频占位符，如图所示。HTML5视频占位符二、设置HTML5视频属性在网页中插入HTML5视频后，选中HTML5视频占位符，对应的属性面板如图所示。下面简要介绍属性面板中常用属性的功能。源：用于指定视频文件的位置。Alt源1、Alt源2：用于指定备用视频文件的路径。三、插他们入HTML5音频在网页中插入HTML5音频的操作步骤如下：（1）将光标放置在要插入音频的位置。（2）执行“插入”｜“HTML”｜“HTML5Audio”菜单命令，即可在指定位置插入HTML5音频的占位符，如图所示。四、设置HTML5音频属性在网页中插入HTML5音频后，选中HTML5音频占位符，对应的属性面板如图所示。与HTML5视频相同，“源”/“Alt源1”/“Alt源2”用于指定音频文件的路径和备用音频文件的路径。如果“源”中指定的音频格式不被支持，则使用“Alt源1”或“Alt源2”指定的格式。浏览器选择第一个可识别格式播放音频。任务3Flash对象任务引入小明已经掌握了添加音频文件和HTML5多媒体对象的方法，但是有时也需要插入Flash对象，这个在Dreamweaver软件中也是可实现的，具体应该怎么去插入对象以及修改对象属性呢？知识准备Flash技术是一种实现和传递基于矢量图形和动画的解决方案，能与Dreamweaver很好地结合使用。用户可以很方便地在Dreamweaver文档中插入Flash动画和Flash视频。一、添加Flash动画在Dreamweaver2021中，用户可以很方便地在页面中添加Flash动画。本小节将通过一个实例演示在文档中插入Flash影片的操作方法。（1）新建一个HTML文档并保存。（2）在“设计”视图中，将插入点放置在要插入Flash动画的地方，在“插入”/“HTML”面板中单击“FlashSWF”按钮。（3）在弹出的“选择SWF”对话框中选择需要的Flash动画文件之后，单击“确定”按钮插入Flash动画。（4）选中插入的影片占位符，在属性面板上设置其大小、播放方式、对齐方式和背景颜色。本例将其居中对齐，其他采用默认设置。在Wmode下拉列表中选择“透明”，则可使Flash背景透明。（5）保存文件，按F12键即可预览影片文件。如图所示。二、插入Flash视频内容若要在网页中插入Flash视频，执行以下操作：（1）选择“插入”|“HTML”|“FlashVideo”菜单命令，弹出如图所示的“插入FLV”对话框。（2）在“视频类型”下拉列表中选择视频加载方式。（3）在“URL”文本框中键入Flash视频的路径。（4）在“外观”下拉菜单中指定Flash视频组件的外观。Flash动画的占位符

播放Flash动画（5）在“宽度”和“高度”文本框中以像素为单位指定FLV文件的宽度和高度。（6）选中“限制高宽比”复选框，可以保持Flash视频组件的宽度和高度的比例不变。默认情况下选择此选项。（7）选中“自动播放”复选框，则网页加载时自动播放视频。（8）选中“自动重新播放”复选框，则播放控件在视频播放完之后返回到起始位置，循环播放。（9）单击“确定”按钮关闭对话框，即可在页面中插入Flash视频占位符。“插入FLV”对话框三、修改Flash视频属性若要修改Flash视频属性，可以执行以下步骤：（1）在“文档”窗口中，单击选中Flash视频组件占位符。（2）打开属性面板进行更改。项目总结项目实战实战一在网页中添加声音练习绘制如图所示的符号，涉及的命令主要是“直线”命令。为了使绘制过程准确无误，要求通过坐标值的输入指定线段的端点，利用这些操作使读者灵活掌握线段的绘制方法。（1）新建一个HTML文件，输入并格式化文字。（2）文本，在属性面板上的“链接”区域单击文件夹图标找到需要的音频文件。（3）同样的方法，为其他文本选择链接的音乐文件。（4）保存文件，在浏览器中预览页面效果，效果如图所示。