文档介绍：Dreamweaver 网页设计
第4章 图像的应用
【学习概述】
图像和文字都是组成网页的基本元素,与文字相比,图像更加直观、生动。无论是商业网站还是个人网站,都应该是图文并茂的网页。同时一定要注意图像的大小和数量。如果图像文件太大、太多会影响下载速度,这会使浏览者失去信心。本章首先介绍了网页图像基础,然后通过一个精心设计的实例讲解了应用图像的大部分基础内容。读者应该专注于操作图像的基本方法。相信通过本章的学习读者一定能制作出精美的网页。
【课堂讲解】网页图像基础
计算机图像格式有成百上千种,但网页中使用的只有3中,即JPEG/JPG,GIF和PNG。
图像格式
1. JPEG/JPG格式
/.jpeg,其全称为Joint Photograhic Experts Group(联合图象专家组,一种压缩标准),JPEG是一种有损压缩格式,当读者将图像保存为JPEG格式时,可以指定图像的品质和压缩级别,应用于网页中的JPEG格式品质一般选中等的,比如在photoshop软件中读者可以选用压缩级别为6。JPEG格式可以支持多达16M种颜色,能很好地实现全彩图像,有利于表现带有渐变色彩且没有清晰轮廓的图像。网络上自然风景图片、鲜花图片多为JPEG格式,比如牡丹花,如图4-1所示。
2. GIF格式
,其全称为Graphics Interchange Format(交换的图像文件格式),GIF采用无损压缩存储,在不影响图像质量的情况下。
【课堂讲解】网页图像基础
它还支持透明色,可以去掉图像的背景。但是GIF只支持最多256色,因此多用于渐变色彩不明显或者轮廓清晰的图像。GIF最突出的一个特点是可以制作动画图像。网络上很多图标、按钮、漫画卡通图片等多为GIF格式,如图4-2所示。 3. PNG格式
扩展名是*.png,work Graphics(可移植的网络图象文件格式),从其名称就可以看出,它是专门为网络而生的图像格式。PNG是一种能存储32位信息的位图文件格式,和GIF格式一样,png也使用无损压缩方式。类似于GIF,PNG可以也可以是动画,比GIF能容纳更多的颜色,如图4-3所示。
【课堂讲解】网页图像基础
图4-1 JPEG 图4-2 GIF 图4-3 PNG
网页图像应用策略
读者可以打开一个或多个网页,然后打开“C:\Documents and Settings\xiaoxing\Local Settings\Temporary Files”(网络临时文件)文件夹,如图4-4所示。可以看到这里有各种文件类型,如“.htm”,“.swf”,“.js”,“.css”和图像文件等,也就是说当浏览网页时,浏览器把请求的网页文件都缓冲到“Temporary Files”文件夹下,所以文件越大越多下载的时间也越长。一般来说图像文件是比较大的。因此一定要注意图像文件适可而止,同时要讲究一些应用图像的策略。
总结:网页的图像格式一般为:gif格式、jpg格式、png格式三种。
GIF格式优点为:可以制作动画,其缺点为:最多只可以支持到256色。
而JPEG格式的优点为:可以支持真彩色,其缺点为:只能为静态图像。
PNG格式的优点为:既可以制作动画又可以支持真彩色,其缺点为:文件大,下载速度慢。
当只需要静态图像且色彩要求也不高时:当所选用图像较小时用gif格式文件小;而当所选用图像大时用jpg格式文件小。此时png格式不具备优势。
图4-4网络临时文件文件夹
针对上面最后一条结论,读者可以做一个试验来证明。选取一幅图像,用软件分别转换为JPEG格式和GIF格式,两者都为4×4像素,且同为256色。但是可以看到JPEG格式图像大小为343字节,如图4-5所示;而GIF格式图像大小仅为46字节,如图4-6所示(图像被放大16倍)。这就印证了“当所选用图像较小时用gif格式文件小”这条准则。网页中背景图像、小图标等文件比较小,所以多为GIF格式图像。
图4-5 JPEG(343字节) 图4-6 GIF(46字节)
选取一幅图像,用软件分别转换为JPEG格式和GIF格式,两者都为640×480像素,且同为256色。 KB,如图4-7所示;而GIF格式图像大小为126 KB,如图4-8所示。这就印证了“当所选用图像大时用jpg格式文件小”这条准则。
图4-7 JPEG( KB) 图4-8 GIF(126 KB)
插入图像
在建立了一个站点,比如“eshop”,一般要在站点目录下建立一个图像目录,比如“images”,方法是:在文件面板中选中站点“eshop”