《图像和多媒体对象》PPT课件

Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义第6章 图像和多媒体对象重点内容：用于网页的图像及多媒体文件格式 插入及编辑图像文件 插入Flash对象 插入其他音/视频对象Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、用于网页的图像及多媒体文件格式：1.网页图像格式 GIF格式（图形交换格式）JPEG格式（联合图像专家组格式）PNG格式（可移植网络图形格式）Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、用于网页的图像及多媒体文件格式：2.网页音频格式 MIDI（乐器数字接口）格式 WAV（Waveform扩展名）格式 AIF（音频交换文件格式，或AIFF）格式 MP3（运动图像专家组音频即MPEG音频层3）格式 RA、RAM、RPM格式 QTM、MOV格式Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、用于网页的图像及多媒体文件格式：3.网页视频格式 QuickTime视频影像文件 ActiceX插件 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义一、用于网页的图像及多媒体文件格式：4.网页动画 GIF动画 Flash动画 Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：1.插入图像 选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，在【选取文件名自】选项组中选择图像文件的来源，然后选择所需的文件。【选择图像源文件】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：2.设置图像属性 可以在图像的属性检查器中设置图像的属性。当选择网页中的一幅图像时，在属性检查器上将反映该图像的属性。图像的属性检查器Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：3.使用图像占位符 插入图像占位符选择【插入】|【图像占位符】命令，弹出【图像占位符】对话框，为图像占位符设置大小和颜色，并指定文本标签，然后单击【确定】按钮。【图像占位符】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：3.使用图像占位符 替换图像占位符在文档窗口中双击图像占位符，或者单击图像占位符，然后在属性检查器中单击【源文件】文本框旁边的文件夹图标，弹出【选择图像源文件】对话框，选择要用于替换图像占位符的图像。单击【确定】按钮后，选定图像即出现在文档中。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：4.图文混排 在Dreamweaver中，插入的图像被视为一般字符。因此在插入图像时，图像将夹在文字之间，好像是一个放大后的文字，而且与上面一行文字空出相当大的距离。通过设置该图像相对于同一段落或行中的其他元素的对齐方式可以调整图像与其他对象之间的关系。选择所需图像后，可在图像属性检查器中的【对齐】下拉列表框中选择要使用的垂直对齐方式；使用对齐按钮调整图像与其他元素的水平对齐方式。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：5.插入鼠标经过图像 选择【插入】|【图像对象】|【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，设置所需的选项，然后单击【确定】按钮。【插入鼠标经过图像】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：6.插入网页背景图像 选择【修改】|【页面属性】命令，弹出【页面属性】对话框，单击【背景图像】选项右侧的【浏览】按钮，在弹出的对话框中选择所需的图片，然后单击【确定】按钮。如果背景图像没有填满整个窗口，Dreamweaver会平铺（重复）背景图像。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：6.插入网页背景图像设置网页背景图像Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：7.编辑图像 调整图像大小（1）调整元素的宽度：拖动右侧的选择控制柄。（2）调整元素的高度：拖动底部的选择控制柄。（3）同时调整元素的宽度和高度：拖动顶角的选择控制点。（4）在调整元素尺寸时保持元素的比例（其宽高比）：按住Shift键拖动顶角的选择控制柄。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：7.编辑图像 裁剪图像选择要裁剪的图像，并单击图像属性检查器中的【裁剪】按钮，或者选择【修改】|【图像】|【裁剪】命令。裁剪图像Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：7.编辑图像 调整图像亮度和对比度选择图像后，可单击图像属性检查器中的【亮度和对比度】按钮，或者选择【修改】|【图像】|【亮度/对比度】命令，弹出【亮度/对比度】对话框，拖动【亮度】和【对比度】滑块。【亮度/对比度】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义二、插入及编辑图像文件：7.编辑图像 锐化图像选择图像后，单击图像属性检查器中的【锐化】按钮，或者选择【修改】|【图像】|【锐化】命令，弹出【锐化】对话框，拖动滑块或在文本框中输入一个0-10之间的值。【锐化】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：1.Flash的文件类型 Flash文件（.fla）Flash SWF文件（.swf）Flash模板文件（.swt）Flash元素文件（.swc）Flash视频文件格式（.flv）Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：2.Flash按钮对象 选择【插入】|【媒体】|【Flash按钮】命令，弹出【插入Flash按钮】对话框，设置所需选项，然后单击【确定】按钮。【插入Flash按钮】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：3.Flash文本对象 选择【插入】|【媒体】|【Flash文本】命令，弹出【插入Flash文本】对话框，在【文本】文本框中输入所需文本，并设置所需选项，然后单击【应用】或【确定】按钮。【插入Flash文本】对话框Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：4.设置Flash对象属性 使用属性检查器。Flash对象的属性检查器Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：5.插入Flash电影 单击【插入】工具栏【常用】类别的【媒体】按钮右侧的箭头，从弹出菜单中选择【Flash】命令，或者选择【插入】|【媒体】|【Flash】命令，弹出【选择文件】对话框，选择所需的Flash影片文件（其扩展名应为.swf），然后单击【确定】按钮，即可在文档窗口中出现一个Flash影片占位符。单击属性检查器中的【播放】按钮，即可在文档窗口中播放此影片。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入Flash对象：5.插入Flash电影 正在播放的Flash影片Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入其他音/视频对象：1.插入Shockwave电影 单击【插入】工具栏【常用】类别中【媒体】按钮右侧的箭头，从弹出菜单中选择【Shockwave】命令，或者选择【插入】|【媒体】|【Shockwave】命令，弹出【选择文件】对话框，从中选择一个Shockwave电影文件，其扩展名为.dcr或.dir。单击【确定】按钮后，网页中即插入一个Shockwave影片的占位符。在属性检查器中单击【播放】按钮，即可播放此文件。为了使网页布局更加合理，还须在属性检查器的【宽】和【高】文本框中指定影片在页面上所占用的宽度和高度。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入其他音/视频对象：2.插入视频 要在页面中包含一个可供用户下载的简短的视频剪辑，首先要将剪辑放入站点文件夹，这些剪辑通常采用AVI或MPEG文件格式。然后，在页面上输入链接文本，并选择该文本，再在属性检查器中单击【链接】文本框右边的文件夹图标，选择并打开该剪辑，使其显示在【链接】文本框中。链接视频剪辑Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入其他音/视频对象：3.插入音频 链接到声音文件要创建指向某一音频文件的链接，首先要选择要用于指向音频文件的链接的文本或图像，然后在属性检查器中单击【链接】选项中的文件夹图标，在弹出对话框中选择该音频文件，或者在【链接】文本框中输入文件的路径和名称。Dreamweaver 应用技术 Dreamweaver 8 实训教程讲义三、插入其他音/视频对象：3.插入音频 嵌入声音文件单击【插入】工具栏【常用】类别中的【媒体】按钮右侧的箭头，在弹出菜单中选择【插件】命令，或者选择【插入】|【媒体】|【插件】命令，弹出【选择文件】对话框，从中选择所需的声音文件，单击【确定】按钮，即可在文档中插入一个插件占位符。然后，在文档窗口中调整插件占位符的大小，或者在属性检查器的【宽】和【高】文本框中输入宽度和高度值，以确定音频控件在浏览器中以多大的大小显示。