Dreamweaver网页设计 邢永峰 第4章新.pptVIP

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