网页设计与制作 教学课件 王学军 第4章 使用图像.pptVIP

　　图像与文本一样，是网页制作中不可缺少的重要元素。使用图像不仅可以美化网页，还可以帮助表述网页主题。绚丽的图像，强大的视觉冲击力往往可以更好地表述文字所无法描述的信息。本章将介绍有关图像的基本知识及其在网页中的应用。 * 第4章　使用图像 学习目标 了解图像的基本格式。 掌握设置网页背景的方法。 掌握插入图像的方法。 掌握设置图像属性的方法。 掌握创建网站相册的方法。 4.1　网页图像格式 一、GIF格式 GIF格式（Graphics Interchange Format，图像交换格式，文件扩展名为“.gif”）是由Compuserve公司提出的与设备无关的图像存储标准，也是在Web上使用最早、应用最广泛的图像格式。GIF图像格式的优点主要有以下几点。 ? 最大支持256色，图像在大多数浏览器中都能正常显示。 ? 图像使用颜色少，压缩效率高，文件的尺寸较小。 ? GIF格式的图像支持1bit透明度，可以制作背景透明的文字或图像。 ? 可以将GIF格式的图像制作成动画GIF。 ? 可以对GIF文件交错下载，在下载过程中即可呈现图像内容。 4.1　网页图像格式 GIF图像格式的缺点主要有以下几点。 ? 最大支持256色，不适合于有晕光、渐变色彩等颜色细腻的图像和照片。 ? 保存为GIF格式后，不能通过直接打开来编辑图像。如果确实需要编辑 4.1　网页图像格式 二、JPEG格式 JPEG格式（Joint Photographic Experts Group，联合图像专家组文件格式，文件扩展名为“.jpg”）是目前互联网中最受欢迎的图像格式。JPEG图像格式的优点主要有以下几点。 ? 支持24位图像，能够很好地表现照片等全彩色的图像。 ? 可以生成类似GIF的交错关联图像──渐变JPEG。 4.1　网页图像格式 JPEG图像格式的缺点主要有以下几点。 ? 有损压缩使之不适合表达高清晰度的图像。 ? 最高只能以256色显示的用户可能无法观看JPEG图像。 ? 当图像中包含“fine”字体时，应避免使用JPEG格式，在该字体与纯颜色重叠的轮廓区域会出现模糊的痕迹。 ? 采用JPEG格式对图像进行压缩后，不能直接打开图像对它重新编辑、压缩。如果确实需要重新编辑，应打开最初的24位图像文件，编辑后再保存为JPEG格式。 4.1　网页图像格式 三、PNG图像 PNG格式（Portable Network Graphics，便携式网络图像，文件扩展名为“.png”）是最近使用量逐渐增多的图像格式，该格式图像的优点是，在压缩方面能够像GIF格式的图像一样没有压缩上的损失，并能像JPEG那样呈现更多的颜色。而且PNG格式也提供了一种隔行显示方案，在显示速度上比GIF和JPEG更快一些。同时PNG格式图像又具有JPEG格式图像没有的透明度支持能力。不过PNG格式图像还没有普及到所有的浏览器，但在未来它有可能是一种非常受欢迎的图像格式。 4.1　网页图像格式 四、GIF和JPEG两种格式图像的区别 虽然GIF和JPEG两种格式的图像在网页中可以同时使用，但还是有区别的。 ? GIF适用于纯颜色、向量式、少于256色的图像，而JPEG在应用于纯色的插图时逊色于GIF。 ? GIF是制作透明图像和动画的首选格式。 ? JPEG适用于有渐变色、颜色细腻的图像，如照片、油画等，而GIF在这方面逊色于JPEG，如图4-2所示。 在实际操作过程中不但应遵循以上原则，反复对输出图像的格式、大小、压缩比等进行比较，还要把图像的下载速度、显示器的分辨率等各种因素考虑进去，选择最佳方案。 4.2　设置网页背景 在制作网页的时候，页面要经常使用一些图像来装饰，使其更美观。其中方法之一就是设置网页背景，包括背景颜色和背景图像。选择【修改】／【页面属性】命令，打开【页面属性】对话框，设置【背景图像】和【背景颜色】。 4.3 插入图像 插入GIF图像 插入PSD图像 插入图像占位符 4.3.1 插入GIF图像 在Dreamweaver CS3中插入图像，通常可以使用以下方法。 选择【插入记录】/【图像】命令。 在【插入】/【常用】工具栏中单击（图像）按钮或将其拖动到文档中。 在【文件】面板中选中图像并拖动到文档中。 在【资源】面板中选中图像并单击【插入】按钮或直接拖动到文档中。 4.3.2 插入PSD图像 作为Adobe家族的新成员，Dreamweaver CS3可以无缝地与其他程序进行组合，这其中包括Photoshop。将图像从一个程序移到另一个程序的方法有很多，最直接的方法就是在Dreamweaver CS3中打开一个原始的Photoshop PSD文件。作为源文件，Photoshop PSD文件不能用于网页。但是，当选择PSD文件时，Dreamweaver CS