《Dreamweaver网页设计》-第4章.ppt

《《Dreamweaver网页设计》-第4章.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Dreamweaver网页设计第4章图像的应用【学习概述】图像和文字都是组成网页的基本元素，与文字相比，图像更加直观、生动。无论是商业网站还是个人网站，都应该是图文并茂的网页。同时一定要注意图像的大小和数量。如果图像文件太大、太多会影响下载速度，这会使浏览者失去信心。本章首先介绍了网页图像基础，然后通过一个精心设计的实例讲解了应用图像的大部分基础内容。读者应该专注于操作图像的基本方法。相信通过本章的学习读者一定能制作出精美的网页。4.1【课堂讲解】网页图像基础计算机图像格式有成百上千种，但网页中使用的只有3中，即JPEG/JPG，GIF和P

2、NG。4.1.1图像格式1.JPEG/JPG格式扩展名是.jpg/.jpeg，其全称为JointPhotograhicExpertsGroup（联合图象专家组，一种压缩标准），JPEG是一种有损压缩格式，当读者将图像保存为JPEG格式时，可以指定图像的品质和压缩级别，应用于网页中的JPEG格式品质一般选中等的，比如在photoshop软件中读者可以选用压缩级别为6。JPEG格式可以支持多达16M种颜色，能很好地实现全彩图像，有利于表现带有渐变色彩且没有清晰轮廓的图像。网络上自然风景图片、鲜花图片多为JPEG格式，比如牡丹花，如图4-1所示。

3、2.GIF格式扩展名是.gif，其全称为GraphicsInterchangeFormat（交换的图像文件格式），GIF采用无损压缩存储，在不影响图像质量的情况下。4.1【课堂讲解】网页图像基础它还支持透明色，可以去掉图像的背景。但是GIF只支持最多256色，因此多用于渐变色彩不明显或者轮廓清晰的图像。GIF最突出的一个特点是可以制作动画图像。网络上很多图标、按钮、漫画卡通图片等多为GIF格式，如图4-2所示。3.PNG格式扩展名是*.png，其全称为PortableNetworkGraphics（可移植的网络图象文件格式），从其名称就可以

4、看出，它是专门为网络而生的图像格式。PNG是一种能存储32位信息的位图文件格式，和GIF格式一样，png也使用无损压缩方式。类似于GIF，PNG可以也可以是动画，比GIF能容纳更多的颜色，如图4-3所示。4.1【课堂讲解】网页图像基础图4-1JPEG图4-2GIF图4-3PNG4.1.2网页图像应用策略读者可以打开一个或多个网页，然后打开“C:DocumentsandSettingsxiaoxingLocalSettingsTemporaryInternetFiles”（网络临时文件）文件夹，如图4-4所示。可以看到这里有各种文件类

5、型，如“.htm”，“.swf”，“.js”，“.css”和图像文件等，也就是说当浏览网页时，浏览器把请求的网页文件都缓冲到“TemporaryInternetFiles”文件夹下，所以文件越大越多下载的时间也越长。一般来说图像文件是比较大的。因此一定要注意图像文件适可而止，同时要讲究一些应用图像的策略。总结：网页的图像格式一般为：gif格式、jpg格式、png格式三种。GIF格式优点为：可以制作动画，其缺点为：最多只可以支持到256色。而JPEG格式的优点为：可以支持真彩色，其缺点为：只能为静态图像。PNG格式的优点为：既可以制作动

6、画又可以支持真彩色，其缺点为：文件大，下载速度慢。当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gif格式文件小；而当所选用图像大时用jpg格式文件小。此时png格式不具备优势。图4-4网络临时文件文件夹针对上面最后一条结论，读者可以做一个试验来证明。选取一幅图像，用软件分别转换为JPEG格式和GIF格式，两者都为4×4像素，且同为256色。但是可以看到JPEG格式图像大小为343字节，如图4-5所示；而GIF格式图像大小仅为46字节，如图4-6所示（图像被放大16倍）。这就印证了“当所选用图像较小时用gif格式文件小”这条准则

7、。网页中背景图像、小图标等文件比较小，所以多为GIF格式图像。图4-5JPEG（343字节）　图4-6GIF（46字节）选取一幅图像，用软件分别转换为JPEG格式和GIF格式，两者都为640×480像素，且同为256色。但是可以看到JPEG格式图像大小仅为23.0KB，如图4-7所示；而GIF格式图像大小为126KB，如图4-8所示。这就印证了“当所选用图像大时用jpg格式文件小”这条准则。图4-7JPEG（23.0KB）图4-8GIF（126KB）4.2.1插入图像在建立了一个站点，比如“eshop”，一般要在站点目录下建立一个图像目录，

8、比如“images”，方法是：在文件面板中选中站点“eshop”（“商城”为站点标签），单击鼠标右键，执行【新文件夹】命令，。然后把文件夹名称“untitled”改为“image