网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

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

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

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

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

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

6

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

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

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

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

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

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

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

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

15

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

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

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

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

20

21

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

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

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

25

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

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

28 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所示。

29

30 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所示。

31