第6章 旅游网站图像和媒体设置(免费下载).ppt

1、Dreamweaver CS5 网页制作基础教程,本章将介绍有关图像和媒体的基本知识及其在网页中的应用。,第6章 旅游网站图像和媒体设置,学习目标,了解网页中常用图像的基本格式。 掌握插入图像和设置图像属性的方法。 掌握设置网页背景颜色和背景图像的方法。 掌握插入SWF动画、FLV视频和ActiveX视频的方法。,6.1设计思路,本章接着继续制作“崂山旅游”网站的主页面，使用图像和媒体对其进行完善。首先将图像占位符“header”更换为图像，然后将图像占位符“linknav”删除，设置背景图像和链接文本，在网页主体部分的左栏和右栏中继续编排相应的内容，使其图文并茂，在中栏内插入swf动画。通过

2、这些基本操作，网页将显得更美观。,6.2 使用图像,网页图像格式 替换图像占位符 设置背景 插入图像 设置图像属性,网页中图像的作用基本上可分为两种：一种是起装饰作用，如制作网页时使用的背景图像；另一种是起传递信息的作用，如新闻图像、人物图像和风景图像等，它与文本的地位和作用是相似的，甚至文本只有配备了相应的图像，才显得更生动形象。 目前，在网页中使用的最为普遍且被各种浏览器广泛支持的图像格式主要是GIF和JPG格式，PNG格式也在逐步地被越来越多的浏览器所接受。,6.2.1 网页图像格式,一、GIF图像 GIF格式（Graphics Interchange Format，图形交换格式，文件扩

3、展名为“.gif”），是在Web上使用最早、应用最广泛的图像格式，具有图像文件小、下载速度快、下载时隔行显示、支持透明色以及多个图像能组成动画的特点。由于最多支持256种颜色，GIF格式最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像，不适合显示有晕光、渐变色彩等颜色细腻的图像和照片。,二、JPEG图像 JPEG格式（Joint Photographic Experts Group，联合图像专家组格式，文件扩展名为“.jpg”），是目前互联网中最受欢迎的图像格式。由于JPEG支持高压缩率，因此其图像的下载速度非常快。但随着JPEG文件品

4、质的提高，文件的大小和下载时间也会随之增加。不过通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。由于JPEG格式可以包含数百万种颜色，因此非常适合显示摄影、具有连续色调或一些细腻、讲究色彩浓淡的图像。,三、 PNG图像 PNG格式（Portable Network Graphics，可移植网络图形，文件扩展名为“.png”），是目前使用量逐渐增多的图像格式。PNG格式图像不仅没有压缩上的损失，能够呈现更多的颜色，支持透明色和隔行显示，而且在显示速度上比GIF和JPEG更快一些。同时，PNG格式图像可保留所有原始层、矢量、颜色和效果信息，并且在任何时候所有元素都是可以完全编辑

5、的。由于PNG格式图像具有较大的灵活性并且文件较小，因此PNG格式对于几乎任何类型的网页图像都是非常适合的。不过PNG格式还没有普及到所有的浏览器，因此，除非用户是使用支持PNG格式的浏览器，否则最好使用GIF或JPEG以适应更多人的需求。,6.2.2 替换图像占位符,图像占位符是在将最终图像添加到网页之前使用的临时占位符号，在发布站点之前，应该将图像占位符替换成图像文件。 可以在【属性】面板中选中图像占位符，然后单击【源文件】文本框后面的 图标，也可直接双击图像占位符来打开【选择图像源文件】对话框，选择要替换图像占位符的文件。 当然，也可以将图像占位符直接删除，然后再插入需要的图像。,6.2

6、.3 设置背景,通过创建CSS样式设置页面背景和局部区域背景比较方便，不仅能够设置背景图像的重复方式，而且还能够设置重复图像的位置等，可以说比传统的方法要灵活得多。,6.2.4 插入图像,图像除了用作网页背景外，更多的还是直接插入到网页中来传递信息。在【设计】视图中插入图像的方法总结起来主要有以下几种。,选择【插入】/【图像】命令来插入图像。 在【文件】面板中选中图像并拖动到文档中要插入图像的位置。 在【插入】面板的【常用】类别中单击（图像）按钮或将其直接拖动到文档中。 在【资源】面板中单击图标切换到【图像】类别，选中图像并单击（图像）按钮或者直接将图像文件拖动到文档中。,6.2.5 设置图像

7、属性,插入图像后，图像自动处于选中状态，在【属性】面板中将显示图像的相关属性。可以根据需要重新设置图像属性，从而使图像更美观。,6.3 使用媒体,网页媒体类型 插入SWF动画 插入FLV视频 插入ActiveX控件,6.3.1 网页媒体类型,在Dreamweaver CS5中，媒体的类型包括SWF、FLV、Shockwave、Applet、ActiveX和插件等。在使用Dreamweaver CS5来插入使用Adobe Flash创建的内容之前，应熟悉FLA、SWF和FLV文件类型之间的关系。 一、FLA文件：扩展名为“.fla”，是使用Flash软件创建的项目的源文件，此类型的文件只能在Fl

8、ash中打开。因此，在网页中使用时必须首先在Flash 中将它发布为SWF或SWT文件，这样才能在浏览器中播放。,二、SWF文件：扩展名为“.swf”，是FLA文件的编译版本，已进行优化，可以在网页上查看。此文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。 三、FLV文件：扩展名为“.flv”，是一种视频文件，它包含经过编码的音频和视频数据，用于通过Flash Player进行传送。例如，如果有QuickTime或Windows Media视频文件，则可以使用编码器（如Flash CS5 Video Encoder）将视频文件转换为FLV文件。

9、,6.3.2 插入SWF动画,SWF动画是目前互联网上最常见的动画类型。 在菜单栏中选择【插入】/【媒体】/【SWF】命令，打开【选择SWF】对话框，选择SWF动画文件即可。然后在【属性】面板中根据需要设置其相关属性。,6.3.3 插入FLV视频,在开始向网页中添加FLV视频之前，必须有一个经过编码的FLV文件。在Dreamweaver CS5中向网页内插入FLV文件时将首先插入一个SWF组件，当在浏览器中查看时，此组件将显示插入的FLV文件和一组播放控件。 在菜单栏中选择【插入】/【媒体】/【FLV】命令，打开【插入FLV】对话框，根据需要进行参数设置。,6.3.4 插入ActiveX控件,

10、ActiveX控件（以前称作OLE控件）是功能类似于浏览器插件的可重复使用的组件，有些像微型的应用程序，主要作用是扩展浏览器的能力。如果浏览器载入了一个网页，而这个网页中有浏览器不支持的ActiveX控件，浏览器会自动安装所需控件。 Dreamweaver CS5中的ActiveX对象使读者可为浏览器中的ActiveX控件提供属性和参数。在页面中插入ActiveX对象后，可在【属性】面板设置object标签的属性和ActiveX控件参数，单击“参数”按钮可输入未在【属性】面板中显示的属性名称和值。 WMV和RM是网络常见的两种视频格式。其中，WMV影片是Windows的视频格式，使用的播放器是Microsoft Media Player。,在菜单栏中选择【插入】/【媒体】/【ActiveX】命令，系统自动在文档中插入一