插入图像多媒体.ppt

网页图像网页图像 图像在网页中不仅起点缀的作用，它也是一种信息载体，能够在网页上传递一些文字无法承载的信息 一个好的网页不应该只包括文本文档，而应该是图文并茂的美观的背景和精美的插图会使网页更加生动、有灵气，从而吸引更多的浏览者2024/8/162024/8/162 2西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院插入图像插入图像 本节要点：v  图像的基本格式图像的基本格式v  图像的应用：图像的应用：v  设置图像属性设置图像属性v  网站相册网站相册2024/8/162024/8/163 3西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院一、图像的基本格式一、图像的基本格式 用于网页的图像主要有用于网页的图像主要有JPGJPGJPGJPG、、、、GIFGIFGIFGIF和和和和PNGPNGPNGPNG这三这三种格式这三种格式的图像能被大多数的浏览器种格式这三种格式的图像能被大多数的浏览器支持，符合支持，符合InternetInternet所需的压缩和跨平台的起码所需的压缩和跨平台的起码要求。

要求2024/8/162024/8/164 4西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院—提示： 要插入的图像文件应该存放于当前站点的目录内要插入的图像文件应该存放于当前站点的目录内要插入的图像文件应该存放于当前站点的目录内要插入的图像文件应该存放于当前站点的目录内 如果要插入的图像没有位于本地站点的目录中，则会出现一个对对对对话话话话框框框框，询问是否要将该图像文件复制到本地站点中选择“是是是是”按钮将图像文件保存在本地站点内，以保证文档中对图像文件的正确引用2024/8/162024/8/165 5西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院二、图像的应用二、图像的应用1 1 1 1、插入一般图像，请执行下列操作之一：、插入一般图像，请执行下列操作之一：、插入一般图像，请执行下列操作之一：、插入一般图像，请执行下列操作之一：ØØ““““插入插入插入插入””””菜单菜单菜单菜单→→→→ ““““图像图像图像图像””””命令命令命令命令ØØ““““常用常用常用常用””””子面板子面板子面板子面板→→→→““““图像图像图像图像””””按钮按钮按钮按钮→→→→ 下拉列表中选择下拉列表中选择下拉列表中选择下拉列表中选择““““图像图像图像图像””””ØØ 使用快捷键：使用快捷键：使用快捷键：使用快捷键：Ctrl+Alt+ICtrl+Alt+ICtrl+Alt+ICtrl+Alt+I图像既可以作为网页内容，也可以用于网页背景。

图像既可以作为网页内容，也可以用于网页背景2024/8/162024/8/166 6西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院2 2、创建鼠标经过图像、创建鼠标经过图像 鼠标经过图像也称交互式图像鼠标经过图像也称交互式图像鼠标经过图像也称交互式图像鼠标经过图像也称交互式图像, , , , 使用鼠标经使用鼠标经使用鼠标经使用鼠标经过图像可使页面具有动态性和交互性过图像可使页面具有动态性和交互性过图像可使页面具有动态性和交互性过图像可使页面具有动态性和交互性 操作步骤：操作步骤：操作步骤：操作步骤：““““插入插入插入插入””””菜单菜单菜单菜单→→→→ ““““图像对象图像对象图像对象图像对象”””” →→→→““““鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像””””鼠标经过图像实际上由两个图像组成：鼠标经过图像实际上由两个图像组成：鼠标经过图像实际上由两个图像组成：鼠标经过图像实际上由两个图像组成：ØØ 主图像（当首次载入网页时显示的图像）主图像（当首次载入网页时显示的图像）主图像（当首次载入网页时显示的图像）主图像（当首次载入网页时显示的图像）ØØ 次图像（当鼠标移到主图像上时显示的图像）。

次图像（当鼠标移到主图像上时显示的图像）次图像（当鼠标移到主图像上时显示的图像）次图像（当鼠标移到主图像上时显示的图像） 注意：主图像与次图像的大小应该相等注意：主图像与次图像的大小应该相等2024/8/162024/8/167 7西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院3 3、图像占位符、图像占位符 v图像占位符并不是在浏览器中显示的最终图像，图像占位符并不是在浏览器中显示的最终图像，而是在准备将最终图像添加到网页之前使用的而是在准备将最终图像添加到网页之前使用的一种临时图形使用图像占位符可以在没有理一种临时图形使用图像占位符可以在没有理想图像的情况下先制作出页面，等找到合适的想图像的情况下先制作出页面，等找到合适的图像后再将其替换为真正的图像图像后再将其替换为真正的图像操作步骤：操作步骤：操作步骤：操作步骤： “ “ “ “插入插入插入插入””””菜单菜单菜单菜单→→→→ “ “ “ “图像对象图像对象图像对象图像对象” ” ” ” →→→→““““图像占位符图像占位符图像占位符图像占位符””””2024/8/162024/8/168 8西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院 可以在可以在 Dreamweaver 中以可视化的形式调整大小。

中以可视化的形式调整大小这可能会导致用户浏览器中页面下载延迟和图像显示不这可能会导致用户浏览器中页面下载延迟和图像显示不正确建议请先使用图像编辑软件缩放图像建议请先使用图像编辑软件缩放图像 Ø调整图像大小调整图像大小调整图像大小调整图像大小Ø设置图像属性设置图像属性设置图像属性设置图像属性Ø图像编辑功能图像编辑功能图像编辑功能图像编辑功能( ( 限限限限GIFGIF、、、、JPEGJPEG格式文件格式文件格式文件格式文件) )4 4、编辑图像、编辑图像2024/8/162024/8/169 9西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院　　 你可以将图像与同一行中的文本、另一个图像、你可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐还可以设置图像的水平对齐方插件或其它元素对齐还可以设置图像的水平对齐方式Ø对齐图象对齐图象2024/8/162024/8/161010西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院5 5、创建网站相册、创建网站相册 创建网站相册的操作步骤如下：创建网站相册的操作步骤如下：创建网站相册的操作步骤如下：创建网站相册的操作步骤如下： vv1 1 1 1）选择）选择）选择）选择【【【【命令命令命令命令】】】】→→→→【【【【创建网站相册创建网站相册创建网站相册创建网站相册】】】】菜单命令。

菜单命令菜单命令菜单命令vv2 2 2 2）在）在）在）在““““相册标题相册标题相册标题相册标题””””文本域中输入一个标题文本域中输入一个标题文本域中输入一个标题文本域中输入一个标题vv3 3 3 3）单击）单击）单击）单击““““源图像文件夹源图像文件夹源图像文件夹源图像文件夹””””文本域旁的文本域旁的文本域旁的文本域旁的““““浏览浏览浏览浏览””””按按按按钮，选择包含源图像的文件夹钮，选择包含源图像的文件夹钮，选择包含源图像的文件夹钮，选择包含源图像的文件夹 vv4 4 4 4）单击）单击）单击）单击““““目标文件夹目标文件夹目标文件夹目标文件夹””””文本域旁的文本域旁的文本域旁的文本域旁的““““浏览浏览浏览浏览””””按钮，按钮，按钮，按钮，选择（或创建）一个用来存放所有导出的图像和选择（或创建）一个用来存放所有导出的图像和选择（或创建）一个用来存放所有导出的图像和选择（或创建）一个用来存放所有导出的图像和HTMLHTMLHTMLHTML文档的目标文件夹，该文件夹必须位于站点文档的目标文件夹，该文件夹必须位于站点文档的目标文件夹，该文件夹必须位于站点文档的目标文件夹，该文件夹必须位于站点内。

内 2024/8/162024/8/161111西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院创建网站相册创建网站相册( (续续) )vv5 5 5 5）指定缩略图的显示选项）指定缩略图的显示选项）指定缩略图的显示选项）指定缩略图的显示选项 vv6 6 6 6）在）在）在）在““““相片格式相片格式相片格式相片格式””””中选择大尺寸图像的格式中选择大尺寸图像的格式中选择大尺寸图像的格式中选择大尺寸图像的格式大尺寸图像的格式可以不同于缩略图的格式大尺寸图像的格式可以不同于缩略图的格式大尺寸图像的格式可以不同于缩略图的格式大尺寸图像的格式可以不同于缩略图的格式 vv7 7 7 7）选中复选框）选中复选框）选中复选框）选中复选框““““为每张相片建立导览页面为每张相片建立导览页面为每张相片建立导览页面为每张相片建立导览页面””””可可可可以为每个源图像创建一个以为每个源图像创建一个以为每个源图像创建一个以为每个源图像创建一个WebWebWebWeb页页页页 vv8 8 8 8）单击）单击）单击）单击““““确定确定确定确定””””以创建网站相册的以创建网站相册的以创建网站相册的以创建网站相册的HTMLHTMLHTMLHTML和图像和图像和图像和图像文件。

文件 提示提示:安装了安装了Fireworks才能使用才能使用”创建网站相册创建网站相册”命令命令.2024/8/162024/8/161212西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院图像无法正确预览的原因：图像无法正确预览的原因： 1.1.图像格式不正确图像格式不正确. . 2. 2.图像没有在站点中图像没有在站点中. . 3. 3.网页文件不在站点中网页文件不在站点中. . 4. 4.图像文件或图像所在文件夹用中文命名图像文件或图像所在文件夹用中文命名. . 5. 5.图像的链接是站点内绝对链接图像的链接是站点内绝对链接. .2024/8/162024/8/161313西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院2024/8/162024/8/161414西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院使用多媒体对象使用多媒体对象多媒体对象多媒体对象　　 各式各样的媒体对象点缀在页面上，使得页面各式各样的媒体对象点缀在页面上，使得页面更加精美绝伦。

利用更加精美绝伦利用Macromedia Macromedia DreamweaverDreamweaver MX MX 20042004的相关功能你可以快速而方便地在网页中插入的相关功能你可以快速而方便地在网页中插入声音和影片，声音和影片，FlashFlash对象和对象和ShockwaveShockwave影片等，并将影片等，并将之结合为一体之结合为一体　　　　现在多媒体技术的发展使网页的设计者能轻现在多媒体技术的发展使网页的设计者能轻松自如的在页面中加入声音、动画、影片等内容，松自如的在页面中加入声音、动画、影片等内容，使制作的网页充满了乐趣，更给网页的访问者增添使制作的网页充满了乐趣，更给网页的访问者增添了几分欣喜了几分欣喜2024/8/162024/8/161616西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院本节主要内容本节主要内容v 网页中插入媒体网页中插入媒体v 插入插入FlashFlash按钮、按钮、 FlashFlash文本及文本及FlashFlash动画动画v 插入插入ShockwaveShockwave电影电影v 添加声音添加声音使用多媒体对象使用多媒体对象 2024/8/162024/8/161717西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院二、插入媒体对象二、插入媒体对象  在在在在““““插插插插入入入入””””面面面面板板板板中中中中，，，，选选选选择择择择““““媒媒媒媒体体体体””””类类类类别别别别，，，，然然然然后单击要插入的对象类型按钮，后单击要插入的对象类型按钮，后单击要插入的对象类型按钮，后单击要插入的对象类型按钮，  或将按钮直接拖入到文档窗口中或将按钮直接拖入到文档窗口中或将按钮直接拖入到文档窗口中或将按钮直接拖入到文档窗口中；；；；  或或或或选择菜单命令【插入】选择菜单命令【插入】选择菜单命令【插入】选择菜单命令【插入】→→→→【媒体】或者【【媒体】或者【【媒体】或者【【媒体】或者【插入】插入】插入】插入】→→→→【交互式图像】，从子菜单中选择适当的【交互式图像】，从子菜单中选择适当的【交互式图像】，从子菜单中选择适当的【交互式图像】，从子菜单中选择适当的对象。

对象 2024/8/162024/8/161818西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院1 1、插入、插入FlashFlash对象对象 插插入入Flash Flash Flash Flash 按按按按钮钮钮钮、、、、 Flash Flash Flash Flash 文文文文本本本本、、、、FlashFlashFlashFlash电电电电影影影影，，执执行下列操作之一：行下列操作之一： vv 【【插入插入】】菜单菜单→→【【交互式图像交互式图像】】→→【【Flash Flash 按钮按钮】】/ / 【【【【Flash Flash Flash Flash 文本文本文本文本】】】】/ / / /【【【【FlashFlashFlashFlash】】】】命令命令 v 或或““插入插入””面板面板→“→“媒体媒体””类别类别→“→“Flash Flash 按钮按钮””/ / ““““Flash Flash Flash Flash 文本文本文本文本””””/“/“/“/“FlashFlashFlashFlash””””图标图标v 或直接将该图标拖入文档中或直接将该图标拖入文档中 。

2024/8/162024/8/161919西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院插入插入FlashFlash按钮按钮2024/8/162024/8/162020西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院插入插入FlashFlash文本文本2024/8/162024/8/162121西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院设置设置FlashFlash对象属性对象属性 Flash Flash 对象（按钮和文本）的属性检查器对象（按钮和文本）的属性检查器如下图所示：如下图所示：提示：提示：文件名不能为中文，存储的路径中也不能有中文，文件名不能为中文，存储的路径中也不能有中文，文件名不能为中文，存储的路径中也不能有中文，文件名不能为中文，存储的路径中也不能有中文，且必须保存在与该网页相同等级的路径中且必须保存在与该网页相同等级的路径中且必须保存在与该网页相同等级的路径中且必须保存在与该网页相同等级的路径中2024/8/162024/8/162222西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院2 2、插入、插入ShockwaveShockwave电影电影 执行下列操作之一执行下列操作之一: :v““插入插入””面板面板→“→“媒体媒体””类别类别→“→“ShockwaveShockwave””图标，图标，v或直接将该图标拖入到文档中或直接将该图标拖入到文档中v或选择菜单命令或选择菜单命令【【插入插入】】→→【【媒体媒体】】→→【【ShockwaveShockwave】】 2024/8/162024/8/162323西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院2024/8/162024/8/162424西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院3 3、添加声音文件、添加声音文件 目前较常用声音文件的格式：目前较常用声音文件的格式：目前较常用声音文件的格式：目前较常用声音文件的格式： . . . .midi(.midmidi(.midmidi(.midmidi(.mid) ) ) ) .wav.wav.wav.wav . . . .aifaifaifaif .mp3.mp3.mp3.mp3 . . . .rararara .ram.ram.ram.ram .rpm .rpm .rpm .rpm Real Audio Real Audio Real Audio Real Audio 格式。

格式• •““““插入插入插入插入””””面板面板面板面板→→→→ “ “ “ “媒体媒体媒体媒体””””类别类别类别类别→→→→““““插件插件插件插件””””图标，图标，图标，图标，• •或直接该图标拖入到文档中或直接该图标拖入到文档中或直接该图标拖入到文档中或直接该图标拖入到文档中• •或选择菜单命令或选择菜单命令或选择菜单命令或选择菜单命令【【【【插入插入插入插入】】】】→→→→【【【【媒体媒体媒体媒体】】】】→→→→【【【【插件插件插件插件】】】】 2024/8/162024/8/162525西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院小结小结 本节着重介绍了如何在网页中添加多媒本节着重介绍了如何在网页中添加多媒本节着重介绍了如何在网页中添加多媒本节着重介绍了如何在网页中添加多媒体对象，适当地在网页中增加多媒体对象，体对象，适当地在网页中增加多媒体对象，体对象，适当地在网页中增加多媒体对象，体对象，适当地在网页中增加多媒体对象，可使网页更具表现力和吸引力在网页可以可使网页更具表现力和吸引力。

在网页可以可使网页更具表现力和吸引力在网页可以可使网页更具表现力和吸引力在网页可以使用的多媒体对象主要有：使用的多媒体对象主要有：使用的多媒体对象主要有：使用的多媒体对象主要有：FlashFlashFlashFlash的按钮、的按钮、的按钮、的按钮、FlashFlashFlashFlash的文本和的文本和的文本和的文本和FlashFlashFlashFlash的电影、的电影、的电影、的电影、ShockwaveShockwaveShockwaveShockwave电电电电影和声音文件等，本章详细介绍了在网页中影和声音文件等，本章详细介绍了在网页中影和声音文件等，本章详细介绍了在网页中影和声音文件等，本章详细介绍了在网页中使用这些多媒体文件的方法使用这些多媒体文件的方法使用这些多媒体文件的方法使用这些多媒体文件的方法 2024/8/162024/8/162626西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院西南财经大学天府学院。