项目六 多媒体元素的应用ppt课件.pptx

《项目六 多媒体元素的应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目六 多媒体元素的应用ppt课件.pptx（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目六 多媒体元素的应用项目六 多媒体元素的应用学习目标学习目标熟练插入Flash动画熟练插入视频文件熟练制作背景音乐项目一 初识Dreamweaver CS6项目项目简介简介前面项目学习了文本与图像元素，这些呈现给浏览者的在视觉上主要还是静态表现的。为了更好的表达网站的主题，为网页添加活力和吸引力，我们可以在网页中充分的利用各种多媒体元素，如动画、声音、视频等，以获得更好的效果；可以采用多感官刺激的方式去吸引浏览者，这就涉及多媒体元素的应用。该项目需要掌握在网页中插入Flash动画、视频文件、音频文件等，并会对多媒体元素属性进行设置。本项目要完成的任务：任务一 插入Flash动画任务二 插入

2、FLV视频文件任务三 插入wmv视频文件任务四 制作背景音乐任务一 插入Flash动画任务任务描述描述该任务要求学生会在网页中插入Flash动画，会设置Flash的透明效果、播放方式以及其它的属性设置。该任务的需求如下所示：1.在“WebTest项目6”文件夹中新建6-1.html文档；2.网页设计要求（1）在6-1.html页面中插入FLASH动画“WebTest项目6flashFlash.swf”；（2）Flash属性设置:1)设置透明 Flash 效果；2）加载时自动播放Flash动画；3）设置自动循环播放功能；4）Flash宽为500像素，高为300像素；5）垂直边距为0像素，水平边距

3、为10像素。任务一 插入Flash动画知识知识储备储备1.Flash动画介绍2.播放Flash动画任务一 插入Flash动画项目实施项目实施1.新建文档新建文档新建 6-1.html文档，并保存到“WebTest/项目6”文件夹中；任务一 插入Flash动画2. 插入插入Flash动画动画（1）插入Flash文件在6-1.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单选择“媒体”点击“SWF”命令打开“选择SWF”对话框，在“查找范围”找到flash文件“WebTest项目6flashFlash.swf”点击“确定”按钮。任务一 插入Flash动画（2）设置Flas

4、h文件的属性选中Flash在“属性面板”中，如图6-1所示，在“宽”文本框中输入“500”，在“高”文本框中输入“300”（单位默认为像素“px”）勾选“循环”和“自动播发”复选框在“垂直边距”文本框中输入0，在“水平边距”文本框中输入10在“Wmode”下拉菜单中选择“透明”。图6-1 Flash属性任务一 插入Flash动画3.保存文档，按保存文档，按F12在浏览器中预览在浏览器中预览。提示提示2：在属性面板中点击：在属性面板中点击“播放播放”按钮，可观看按钮，可观看Flash动动画效果。画效果。提示提示3：设置：设置Flash的的“透明透明”模式，主要是不显示模式，主要是不显示flash

5、的背的背景色。景色。任务二 插入FLV视频文件任务任务描述描述通过对前一个任务的学习，我们掌握了Flash动画的应用，该任务需要掌握FLV视频文件的插入与属性设置，通过该任务的学习，从而更好地提高学生对视频文件的实践操作能力。该任务的需求如下所示：任务二 插入FLV视频文件任务任务描述描述1.在“WebTest项目6”文件夹中新建6-2.html文档；2.网页设计要求（1）在6-2.html文档中插入视频文件“WebTest项目4flvFLV.flv”；（2）属性设置：外观为“最小宽度160”；宽度为300像素并限制高度比；加载时自动播放视频；设置自动重新播放功能；任务二 插入FLV视频文件知

6、识知识储备储备FLV 是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。FLV是被众多新一代视频分享网站所采用，是目前增长最快、最为广泛的视频传播格式。任务二 插入FLV视频文件网页中可以使用不同格式的视频文件，除了FLV视频外，流媒体视频还有wmv、asf、rm等，还有普通视频文件如avi、mpg等格式。在网页设计中，建议使用FLV格式的视频。因为它利用了网页上广泛使用的Flas

7、h Player 平台，将视频整合到Flash动画中。也就是说，网站的访问者只要能看Flash动画，自然也能看FLV格式视频，而无需再额外安装其它视频插件，FLV视频的使用给视频传播带来了极大便利。任务二 插入FLV视频文件任务任务实施实施1.新建文档新建文档新建 6-2.html文档，并保存到“WebTest/项目6”文件夹中；任务二 插入FLV视频文件2. 插入插入Flash动画动画在6-2.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单选择“媒体”点击“FLV”命令打开“插入FLV”对话框,如图6-2所示点击“URL”后的“浏览”，找到FLV视频文件“WebT

8、est项目6VideoFLV.flv” “外观”选择“最小宽度160” 点击“检测大小”会自动检查视频文件的“宽度”和“高度”勾选“限制高宽比”（实现视频按比例缩放），在“宽度”文本框中输入300勾选“自动播放”和“自动重新播放”复选框点击“确定”完成操作。任务二 插入FLV视频文件图6-2 插入FLV对话框任务二 插入FLV视频文件3.保存文档，按保存文档，按F12在浏览器中预览在浏览器中预览。提示提示2：也可在属性面板中设置：也可在属性面板中设置FLV对象的属性，如图对象的属性，如图6-3所示。所示。图6-3 FLV属性任务三 插入wmv视频文件任务描述任务描述通过对前一个任务的学习，我们

9、掌握了FLV视频的应用，该任务需要掌握WMV视频文件的插入与属性设置，通过该任务的学习，让学生进一步加深对不同格式的视频文件的操作及应用能力。该任务的需求如下所示：任务三 插入wmv视频文件任务描述任务描述通过对前一个任务的学习，我们掌握了FLV视频的应用，该任务需要掌握WMV视频文件的插入与属性设置，通过该任务的学习，让学生进一步加深对不同格式的视频文件的操作及应用能力。该任务的需求如下所示：任务三 插入wmv视频文件1.在“WebTest项目6”文件夹中新建6-3.html文档；2.网页设计要求（1）在6-3.html页面中插入视频文件“WebTest项目6videowinsat.wmv”

10、；（2）属性设置1）设置插件的宽为400像素，高为300像素；2）设置垂直边距为5像素，水平边距为20像素；3）设置视频为自动播放且循环播放。任务三 插入wmv视频文件任务任务实施实施1.新建文档新建 6-3.html文档，并保存到“WebTest/项目6”文件夹中；任务三 插入wmv视频文件2. 插入WMV动画在6-3.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单选择“媒体”点击“插件”在“选择文件”对话框中选择wmv视频文件“WebTest项目6videowinsat.wmv” 点击“确定”完成操作任务三 插入wmv视频文件3. 属性设置选中插件在属性面板如图

11、6-4所示，在“宽”文本框中输入400，在“高”文本框中输入300，在“垂直边距”文本框中输入5，在“水平边距”中输入20点击“参数”按钮，如图6-5所示，分别输入autostart=true 、loop=true点击“确定”按钮，完成设置。任务三 插入wmv视频文件图6-4 插件属性图6-5 参数设置提示：提示：autostart=“true”表示页面打开时自动播放（默认为自动播表示页面打开时自动播放（默认为自动播放），放），loop=“true“表示循环播放（默认为播放一次）。表示循环播放（默认为播放一次）。任务三 插入wmv视频文件3.保存文档，按保存文档，按F12在浏览器中预览在浏览器

12、中预览。提示：提示：WMV(Windows Media Video)是微软推出的一种流是微软推出的一种流媒体格式，媒体格式，windows系统自带的系统自带的Windows Media Player可完可完美支持美支持WMV格式。格式。任务四 制作背景音乐任务任务描述描述我们在打开某些网页时会听到动听的背景音乐声，这给网页添加了不少生气，该任务需要掌握网页背景音乐的制作。该任务的需求如下所示（以mp3音频为例）： 1.在“WebTest项目6”文件夹中新建6-4.html文档；2.在6-4.html页面中插入MP3音频文件“WebTest项目6 Audiosound.mp3”；3.要求采用嵌入

13、mp3音乐的方式作为页面的背景音乐，不显示播放条；4.要求实现音乐的自动播放和循环播放功能。任务四 制作背景音乐知识知识储备储备网页中常见的声音格式有WAV、MP3、MIDI、AIF、RA（Real Audio）等。为网页添加声音效果可以通过设置背景音乐或嵌入音乐两种方法实现。任务四 制作背景音乐1. 直接设置音乐文件为背景音乐语法：注意：这种语法制作的背景音乐IE浏览器支持，但有部分浏览器不支持，如firefox、chrome等，打开网页时会没有背景音乐。任务四 制作背景音乐2. 嵌入音乐文件为背景音乐方法：插入媒体插件语法：这种方式支持所有的浏览器浏览，建议制作背景音乐时采用些方法。任务四

14、 制作背景音乐2. 嵌入音乐文件为背景音乐方法：插入媒体插件语法：这种方式支持所有的浏览器浏览，建议制作背景音乐时采用些方法。任务四 制作背景音乐任务实施任务实施1.新建文档新建 6-4.html文档，并保存到“WebTest/项目6”文件夹中；2.插入mp3音频在6-4.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单选择“媒体”点击“插件”在“选择文件”对话框中选择mp3音频文件“WebTest项目6 Audiosound.mp3” 点击“确定”完成插入操作任务四 制作背景音乐3.属性设置选中插件对象，在属性面板如图6-6所示，在“宽”文本框中输入0，在“高”文本框中输入0（此处设置宽高均为0，达到隐藏播放条的目的）点击“参数”按钮，如图6-5所示，分别输入autostart=true 、loop=true点击“确定”按钮，完成设置。图6-6插件属性任务四 制作背景音乐4.保存文档，按保存文档，按F12在浏览器中预览在浏览器中预览。