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

《网页设计与制作 教学课件 王学军 第4章 使用图像.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、图像与文本一样，是网页制作中不可缺少的重要元素。使用图像不仅可以美化网页，还可以帮助表述网页主题。绚丽的图像，强大的视觉冲击力往往可以更好地表述文字所无法描述的信息。本章将介绍有关图像的基本知识及其在网页中的应用。第4章　使用图像学习目标了解图像的基本格式。掌握设置网页背景的方法。掌握插入图像的方法。掌握设置图像属性的方法。掌握创建网站相册的方法。4.1网页图像格式一、GIF格式GIF格式（GraphicsInterchangeFormat，图像交换格式，文件扩展名为“.gif”）是由Compuserve公司提出的与设备无关的图像存储标准，也是在Web上使用最早

2、、应用最广泛的图像格式。GIF图像格式的优点主要有以下几点。•最大支持256色，图像在大多数浏览器中都能正常显示。•图像使用颜色少，压缩效率高，文件的尺寸较小。•GIF格式的图像支持1bit透明度，可以制作背景透明的文字或图像。•可以将GIF格式的图像制作成动画GIF。•可以对GIF文件交错下载，在下载过程中即可呈现图像内容。4.1网页图像格式GIF图像格式的缺点主要有以下几点。•最大支持256色，不适合于有晕光、渐变色彩等颜色细腻的图像和照片。•保存为GIF格式后，不能通过直接打开来编辑图像。如果确实需要编辑4.1网页图像格式二、JPEG格式JPEG格式（Jo

3、intPhotographicExpertsGroup，联合图像专家组文件格式，文件扩展名为“.jpg”）是目前互联网中最受欢迎的图像格式。JPEG图像格式的优点主要有以下几点。•支持24位图像，能够很好地表现照片等全彩色的图像。•可以生成类似GIF的交错关联图像──渐变JPEG。4.1网页图像格式JPEG图像格式的缺点主要有以下几点。•有损压缩使之不适合表达高清晰度的图像。•最高只能以256色显示的用户可能无法观看JPEG图像。•当图像中包含“fine”字体时，应避免使用JPEG格式，在该字体与纯颜色重叠的轮廓区域会出现模糊的痕迹。•采用JPEG格式对图像进行

4、压缩后，不能直接打开图像对它重新编辑、压缩。如果确实需要重新编辑，应打开最初的24位图像文件，编辑后再保存为JPEG格式。4.1网页图像格式三、PNG图像PNG格式（PortableNetworkGraphics，便携式网络图像，文件扩展名为“.png”）是最近使用量逐渐增多的图像格式，该格式图像的优点是，在压缩方面能够像GIF格式的图像一样没有压缩上的损失，并能像JPEG那样呈现更多的颜色。而且PNG格式也提供了一种隔行显示方案，在显示速度上比GIF和JPEG更快一些。同时PNG格式图像又具有JPEG格式图像没有的透明度支持能力。不过PNG格式图像还没有普及到

5、所有的浏览器，但在未来它有可能是一种非常受欢迎的图像格式。4.1网页图像格式四、GIF和JPEG两种格式图像的区别虽然GIF和JPEG两种格式的图像在网页中可以同时使用，但还是有区别的。•GIF适用于纯颜色、向量式、少于256色的图像，而JPEG在应用于纯色的插图时逊色于GIF。•GIF是制作透明图像和动画的首选格式。•JPEG适用于有渐变色、颜色细腻的图像，如照片、油画等，而GIF在这方面逊色于JPEG，如图4-2所示。在实际操作过程中不但应遵循以上原则，反复对输出图像的格式、大小、压缩比等进行比较，还要把图像的下载速度、显示器的分辨率等各种因素考虑进去，选择

6、最佳方案。4.2设置网页背景在制作网页的时候，页面要经常使用一些图像来装饰，使其更美观。其中方法之一就是设置网页背景，包括背景颜色和背景图像。选择【修改】／【页面属性】命令，打开【页面属性】对话框，设置【背景图像】和【背景颜色】。4.3插入图像插入GIF图像插入PSD图像插入图像占位符4.3.1插入GIF图像在DreamweaverCS3中插入图像，通常可以使用以下方法。选择【插入记录】/【图像】命令。在【插入】/【常用】工具栏中单击（图像）按钮或将其拖动到文档中。在【文件】面板中选中图像并拖动到文档中。在【资源】面板中选中图像并单击【插入】按钮或直接拖动到文档

7、中。4.3.2插入PSD图像作为Adobe家族的新成员，DreamweaverCS3可以无缝地与其他程序进行组合，这其中包括Photoshop。将图像从一个程序移到另一个程序的方法有很多，最直接的方法就是在DreamweaverCS3中打开一个原始的PhotoshopPSD文件。作为源文件，PhotoshopPSD文件不能用于网页。但是，当选择PSD文件时，DreamweaverCS3会自动呈现出【图像预览】对话框，以创建一个准备用于Web的图像。4.3.2插入PSD图像4.3.3插入图像占位符在网页中插入图像，这些图像通常是事先准备好的。如果在网页制作过程中，

8、需要插入的图像当时又没有