网页设计与制作 Dreamweaver CS6 标准教程 第4章 图像与多媒体 网页设计与制作 Dreamweaver CS6 标准教程

本章学习的主要内容： 1. 图像的插入 2. 调整图像 3. 网页中的多媒体

4.1 图像插入 图像是网页设计中一个非常重要的元素，它使 页面更美观，更具有吸引力。在网页中插入图 像也是Dreamweaver网页设计中必须掌握的技 术。

4.1 图像插入 4.1.1 课堂案例—茶叶网站 4.1.2 插入图像 4.1.3 图像源文件 4.1.4 替换文本 4.1.5 图像占位符

4.1.1 CSS样式标准 案例学习目标：学习使用多种方法在网页中插入 图像。 案例知识要点：使用【插入】面板、【插入】| 【图像】菜单和直接拖曳图像等方法将图像插入 到网页指定位置。 素材所在位置：光盘/案例素材/ch04/课堂案例- 茶叶网站。 案例效果如图4-1所示。

4.1.2 插入图像 网站中的图像必须放在站点文件夹内才能在网 页中正确显示，所以在建立网站时要在站点文 件夹内建立一个专门存放该站点图像的文件夹， 通常命名为“images”，然后将网站所需的 图像都放置其中。

4.1.2 插入图像 在Dreamweaver中，可以通过以下三种方法在网页 中插入图像。 （1）选择菜单【插入】|【图像】，在【选择图像源文 件】对话框中找到并选择所需的图像，单击【确定】按 钮完成图像插入。 （2）选择【插入】面板中【常用】选项卡，单击【图 像】按钮 上的黑色三角形，在下拉菜单中选择“图像” 选项，在【选择图像源文件】对话框中找到并选择所需 的图像，单击【确定】按钮完成图像插入。 （3）打开【文件】面板，展开显示图像文件夹中的所 有文件，在需要插入的图像名称上按住鼠标左键拖曳到 【文档】窗口的相应位置，松开鼠标，完成图像插入。

4.1.3 图像源文件 图像源文件是指插入的图像文件所在的位置， 可以是本地的图像也可以是网络上的图像，如 果插入的图像位于站点文件夹内，【属性】面 板中【源文件】文本框中会显示相对路径。 如果要插入的图像不在站点文件夹内，那么会 出现提示对话框，询问是否将图像复制到站点 文件夹内，选择单击【确定】按钮即可。 也可以直接在【属性】面板【源文件】文本框 中修改网页中显示的图像的路径和文件名。

4.1.4 替换文本 如果网页中有的图像不能正常显示（如图像 源文件路径错误或浏览器图像显示被关闭等） 就会导致浏览者看不到图像。使用图像【属 性】面板中的【替换】文本框，可以给看不 到的图像设置说明性文字。

4.1.5 图像占位符 图像占位符是指在将最终图像插入到网页中之前所使用的 替代图像，以便在不确定图像时对网页进行布局。图像占 位符可以设置不同尺寸、颜色和文字来替代图像。 插入图像占位符的步骤如下。 将光标置于要插入图像占位符的位置。 单击菜单【插入】|【图像对象】|【图像占位符】，打开 【图像占位符】对话框。 输入名称、宽度、高度、颜色等属性值，单击【确定】按 钮，插入图像占位符，通过适当调整，使其满足设计需求。 当需要插入真正的图片时，只需双击该位置的图形占位符， 在【选择图像源文件】对话框中找到并选择需要的图像，单 击【确定】按钮完成插入。

4.2 调整图像 网页中的图像为了满足布局要求，经常需要进行 调整，利用【编辑图像设置】等功能可以对图像 尺寸、类型和色彩等进行调整。

4.2 CSS样式控制面板 4.2.1 课堂案例—墙体装饰 4.2.2 图像效果

4.2.1 课堂案例—墙体装饰 案例学习目标：学习网页中图像调整的基本操作，包 括裁剪、尺寸调整、亮度和对比度、锐化等效果调整。 案例知识要点：在【属性】面板中，选择【编辑图像 设置】、【裁剪】、【亮度和对比度】、【锐化】等 按钮调整图像效果。 素材所在位置：光盘/案例素材/ch04/课堂案例-墙体 装饰。 案例效果如图4-15所示。

4.2.2 图像效果 1．图像裁剪 2．亮度和对比度 3．图像锐化

4.3 网页中的多媒体 网页不仅由图像和文字组成，而且音频、视 频等多媒体也越来越广泛地应用在网页设计 中，目前网页中可以插入的多媒体包括动画、 视频、Java Applet对象和ActiveX控件等。 虽然应用多媒体能丰富网页内容，但可能影 响浏览速度，所以一般情况下网页中不会大 量使用多媒体元素。

4.3 CSS属性 4.3.1课堂案例—度假村 4.3.2插入Flash动画 4.3.3插入Flv影片 4.3.4插入插件—瑜伽会所 4.3.5插入Applet程序

4.3.1课堂案例-度假村 案例学习目标：学习在网页中插入动画、FLV 视频等元素。 案例知识要点：使用【插入】面板的【媒体】 |【SWF】和【FLV】按钮插入多媒体元素。 素材所在位置：光盘/案例素材/ch04/课堂案 例-度假村。 案例效果如图4-25、图4-26所示。

4.3.2插入Flash动画 插入Flash动画的步骤如下。 在【文档】窗口中单击要插入Flash动画的位置。 单击菜单【插入】|【媒体】|【SWF】，打开 【选择SWF】对话框中，查找并选择需要插入的 Flash动画文件，再单击【确定】按钮。 插入的Flash动画显示在设计窗口中显示为占位 符形式，单击【属性】面板的【播放】可以播放 动画。

4.3.3插入Flv影片 在Dreamweaver中插入Flash视频的操作步骤如下。 在【文档】窗口中单击要插入Flash视频的位置。 单击菜单【插入】|【媒体】|【FLV…】，打开 【插入FLV】对话框，选择【视频类型】，在【URL】 属性单击【浏览…】查找并选择要插入的Flv影片文 件，选择【外观】，再设置FLV视频的【高度】和 【宽度】，根据需要选择勾选【自动播放】和【自动 重新播放】复选框。单击【确定】按钮，完成FLV影 片插入。

4.3.4插入插件—瑜伽会所 案例学习目标：学习在网页中使用插入插件方 式插入视频和背景音乐。 案例知识要点：使用【插入】面板的【媒体】| 【插件】按钮插入多媒体元素。 素材所在位置：光盘/案例素材/ch04/课堂案 例-瑜伽会所。 案例效果如图4-36所示。

4.3.5插入Applet程序 在网页中插入Applet程序操作步骤如下。 在【文档】窗口中单击要插入Applet程序的位 置。 选择菜单【插入】|【媒体】|【Applet】，在 【选择文件】对话框中查找并选择一个Java Applet程序文件，单击【确定】按钮完成插入。

4.4练习案例 4.4.1练习案例-五金机械 4.4.2练习案例-心缘咖啡屋

4.4.1练习案例-五金机械 案例练习目标：练习图像的插入和图像的调整。 案例操作要点： 1．在中间单元格中插入图像，图像1.jpg的尺 寸调整为宽117高105，亮度值为14，图像 2.jpg尺寸为宽110高px，对比度值为26，图 像3.jpg尺寸为宽110高89，锐化值为2。 2．右上角客服图片裁剪后尺寸调整为宽110 高147，并且在单元格中水平方向居中对齐。 素材所在位置：光盘/案例素材/ch04/五金机 械，效果如图4-45所示。

4.4.2练习案例-心缘咖啡屋 案例练习目标：练习FLV影片和多媒体插件的插入 和调整。 案例操作要点： 1．在网页文档index.html中，插入1.FLV文件， 尺寸调整为宽510高383，外观选择Clear Skin 3 （最小宽度：260），自动和循环播放，原名保存。 2．在网页文档index1.html中，使用插入插件的 方式插入文件1.wmv，在代码窗口设置插件尺寸 宽510高383，自动和循环播放，原名保存。 素材所在位置：光盘/案例素材/ch04/心缘咖啡 屋，效果如图4-46所示。