第4章 网页中的多媒体元素

1、company logo 第第4章章 网页中的多媒体元素网页中的多媒体元素 在网页中添加多媒体元素可以增加网页的观赏在网页中添加多媒体元素可以增加网页的观赏 性，向网页中插入多媒体元素，不但可以丰富网页性，向网页中插入多媒体元素，不但可以丰富网页 的内容，还可以使网页更加生动，更加吸引人。的内容，还可以使网页更加生动，更加吸引人。 可以在网页中插入各种类型的媒体元素或媒体可以在网页中插入各种类型的媒体元素或媒体 文件，如：图像、动画、视频、音频和控件等，并文件，如：图像、动画、视频、音频和控件等，并 通过通过“属性属性”面板对这些多媒体元素或媒体文件的面板对这些多媒体元素或媒体文件的 属性进行

2、设置。属性进行设置。 第第4 4章章 网页中的多媒体元素网页中的多媒体元素 网页中图像的基本格式网页中图像的基本格式1 在页面中插入图像在页面中插入图像2 使用图像占位符使用图像占位符3 编辑图像编辑图像4 在网页中插入在网页中插入flash对象对象6 常用音频和视频元素插入常用音频和视频元素插入7 创建鼠标经过图像创建鼠标经过图像5 4.1 网页中图像的基本格式网页中图像的基本格式 v 图像是网页中最常用的元素之一，合理地利用图像，会给图像是网页中最常用的元素之一，合理地利用图像，会给 人们带来美的享受，并更好地理解网页文本内容。网页中人们带来美的享受，并更好地理解网页文本内容。网页中 常用

3、的图像格式包括：常用的图像格式包括： gif图像：是graphics interchange format（图形交换格式）的缩 写，是互联网上应用最为广泛的图像文件格式之一。 jpeg/jpg图像：jpeg是joint photographic expert group（联 合图像专家组标准）的缩写，文件的扩展名为.jpg,它是一种全彩 的影像压缩格式，且压缩比率很高，压缩效果明显，对于照片质 量和连续色调的图像显示效果很好。 png图像：png是portable network graphic(可移植的网络图像 文件格式）的缩写，png文件具有较大的灵活性，并且文件相对 较小，所以对于几乎任

4、何类型的web图像png都是最适合的。 4.2 在页面中插入图像在页面中插入图像 v 在页面中插入图像文件的步骤：在页面中插入图像文件的步骤： 1.在在“文档文档”窗口中窗口中确定确定插入点位置插入点位置 2.选择菜单栏插入图像命令选择菜单栏插入图像命令 或选择工具栏插入图像按钮或选择工具栏插入图像按钮 3.在弹出的在弹出的“选择图像源文件选择图像源文件”对话框中选择图像对话框中选择图像 4.3 使用图像占位符使用图像占位符 v 在页面中插入图像占位符的步骤：在页面中插入图像占位符的步骤： 1.在在“文档文档”窗口中窗口中确定确定插入点位置插入点位置 2.选择菜单栏插入图像占位符命令选择菜单栏

5、插入图像占位符命令 或选择工具栏插入图像占位符按钮或选择工具栏插入图像占位符按钮 3.在弹出的在弹出的“图像占位符图像占位符”对话框中输入内容对话框中输入内容 4.在文档窗口中双击图像占位符并替换成图像在文档窗口中双击图像占位符并替换成图像 4.4 编辑图像编辑图像 v dreamweaver提供了少量的图像编辑功能提供了少量的图像编辑功能 1.重新取样重新取样：是指调整网页中图像文件的像素，：是指调整网页中图像文件的像素，把把图像图像的实际的实际大大 小小调整到调整到页面需求页面需求的大小的大小，同时同时图像效果图像效果也会得到也会得到改善。改善。 2.剪裁：剪裁：是指在整幅图像中选取一个局

6、部区域，未选中的区域会是指在整幅图像中选取一个局部区域，未选中的区域会 被删除，原图像文件也会被修改。被删除，原图像文件也会被修改。 3.亮度和对比度：亮度和对比度：是指修改图像中像素的亮度和对比度。是指修改图像中像素的亮度和对比度。 4.锐化：锐化：是指通过增加图像中边缘的对比度来使模糊图像变清晰。是指通过增加图像中边缘的对比度来使模糊图像变清晰。 4.4 编辑图像编辑图像 v 图像对齐方式：图像对齐方式： 当图像与文本（或图像与图像）出现在同当图像与文本（或图像与图像）出现在同 一行上时，两者之间采用什么样对齐方式，对一行上时，两者之间采用什么样对齐方式，对 页面设计有很大影响。具体的对齐

7、方式可以在页面设计有很大影响。具体的对齐方式可以在 属性面板的对齐方式列表中选择。属性面板的对齐方式列表中选择。 4.5 创建鼠标经过图像创建鼠标经过图像 v 在页面中插入鼠标经过图像的步骤：在页面中插入鼠标经过图像的步骤： 1.准备两张图片准备两张图片 2.在在“文档文档”窗口中窗口中确定确定插入点位置插入点位置 3.选择工具栏插入鼠标经过图像按钮选择工具栏插入鼠标经过图像按钮 4.在弹出的在弹出的“插入鼠标经过图像插入鼠标经过图像”对话框中，输入内容对话框中，输入内容 4.6 在网页中插入在网页中插入flash对象对象 v flash对象的类型对象的类型 1.flash authoring

8、 file文件文件，扩展名，扩展名fla，是，是flash的源文件。的源文件。 2.flash movie file文件文件，扩展名，扩展名swf，是，是flash源文件的压缩输源文件的压缩输 出文件，即影片文件。出文件，即影片文件。 3.flash template file文件文件，扩展名，扩展名swt，是，是flash模板文件。模板文件。 4.flash element file文件文件，扩展名，扩展名swc，是，是flash元素文件。元素文件。 5.flash video文件文件，扩展名，扩展名flv，是，是flash视频文件。视频文件。 4.6 在网页中插入在网页中插入flash对象

9、对象 v 插入插入flash按钮按钮 1.在在“文档文档”窗口中确定插入窗口中确定插入flash按钮按钮 的的位置位置 2.单击工具栏单击工具栏“flash按钮按钮”按钮按钮 3.在打开的在打开的“插入插入flash按钮按钮”对话框中对话框中 选择按钮样式选择按钮样式 4.修改修改flash按钮文本按钮文本 5.设置设置flash按钮属性按钮属性 4.6 在网页中插入在网页中插入flash对象对象 v 插入插入flash文本文本 1.在在“文档文档”窗口中确定插入窗口中确定插入flash文本文本 的的位置位置 2.单击工具栏单击工具栏“flash文本文本”按钮按钮 3.在打开的在打开的“插入插

10、入flash文本文本”对话框中对话框中 选择输入内容选择输入内容 4.设置设置flash文本属性文本属性 4.6 在网页中插入在网页中插入flash对象对象 v 插入插入swf动画动画 vswf动画即扩展名为动画即扩展名为swf的的flash文件文件。 1.在在“文档文档”窗口中确定插入窗口中确定插入swf动画的动画的位置位置 2.单击工具栏单击工具栏“flash”按钮按钮 3.在打开的在打开的“选择文件选择文件”对话框中，选择一个对话框中，选择一个swf格式文件格式文件 4.单击属性面板的单击属性面板的“播放播放”按钮，可以观看动画按钮，可以观看动画 4.7 常用音频和视频元素插入常用音频和

11、视频元素插入 v 插入音频插入音频 1.链接音频文件链接音频文件 2.利用插件嵌入音频文件利用插件嵌入音频文件 在在“文档文档”窗口中确定插入音频的位置窗口中确定插入音频的位置 单击工具栏单击工具栏“插件插件”按钮按钮 在弹出的在弹出的“选择文件选择文件”对话框中选择一个音频文件对话框中选择一个音频文件 在属性面板中设置音频文件的属性在属性面板中设置音频文件的属性 4.7 常用音频和视频元素插入常用音频和视频元素插入 v 常用常用音频音频参数设置参数设置 1.自动播放：自动播放：autostart = true 自动播放。自动播放。 autostart = false 不自动播放。不自动播放。

12、 2.循环播放：循环播放：loop = true无限次循环播放。无限次循环播放。 loop = false不循环，即播放一次就停止。不循环，即播放一次就停止。 3.隐藏：隐藏： hidden = true 浏览时隐藏播放器。浏览时隐藏播放器。 hidden = false 浏览时显示播放器。浏览时显示播放器。 4.设定循环次数：设定循环次数：volume取值为取值为1100之间的任意一个值。之间的任意一个值。 如果如果volume = 3 ，音频播放，音频播放3次之后停止播放。次之后停止播放。 4.7 常用音频和视频元素插入常用音频和视频元素插入 v 插入插入视频视频 1.链接视频文件链接视频

13、文件 2.利用插件嵌入视频文件利用插件嵌入视频文件 在在“文档文档”窗口中确定插入视频文件的位置窗口中确定插入视频文件的位置 单击工具栏单击工具栏“插件插件”按钮按钮 在弹出的在弹出的“选择文件选择文件”对话框中选择一个视频文件对话框中选择一个视频文件 在属性面板中设置视频文件的属性在属性面板中设置视频文件的属性 4.7 常用音频和视频元素插入常用音频和视频元素插入 v 插入插入视频视频 3.插入flash视频文件 flash视频也称为flash video。 在在“文档文档”窗口中确定插入窗口中确定插入flash视频文件的位视频文件的位 置置 单击工具栏单击工具栏“flash video”按钮按钮 在弹出的在弹出的“插入插入flash视频视频”对话框中选择一个对话框中选择一个 flash视频文件视频文件 在属性面板中