第 3 章图形与 web 设计

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材

山东大学计算机科学与技术学院

第 3 章图形与 Web设计




2

网站图像的重要性 Web图像设计原则数字图像基本概念位图和向量图像

Web图像文件格式

概述概述




3

1.网站图像的重要性：不同于一般图像网站的徽标、网站艺术体名称、导航、按钮、新

闻照片和页面修饰等，无一能离开图像。网页中的文字信息分为两种：一种为 HTML的纯

文本，另一种为图像中的文字信息。图像除了给我们视觉冲击效果外，还为网站主体

表达了寓意。图像要求：爽心悦目、简洁、贴现网站的本质。图像重点考虑的问题：文件大小、下载速度、禁

止滥用图形、协调。 Intranet面向功能； Internet面向展示。




4

1.网站图像的重要性 – 续




5

2.Web图像设计原则网站徽标应适宜大小放在主页左上方网站标题应放在主页徽标的右边网站图像与网站色系协调一致图像的文件尺寸应该要足够小，图像大小适于

展现窗口即可。图像尽量避免使用高分辨率的真彩照片使用 Web标准调色板，避免抖动尽可能使用纯色，混合颜色会加大文件在网页中勿滥用图像 Internet和 Intranet的图像区别切割大幅图像




6

3.数字图像的基本概念数字图像可以被看成一个矩阵或一个二维数组像素：计算机显示器是由行列组成栅格，每一个栅

格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元，每一个像素在某一时刻只能显示一种颜色。

颜色深度：使用颜色位数描述颜色的深度，用来度量图像中有多少颜色信息可用于显示或打印像素。颜色深度决定了每一个像素可以显示多少颜色。表示颜色的位值 2 的指数，即位深度 : 28=256 ， 216=65536 ， 224=16,777,216 ， 232=16,777,216+8位灰度掩模；




7

3.数字图像的基本概念 – 续 1 显示器分辨率：显示图像的精度，分辨率越高，显示

的图像越清晰，图像文字越小。最常用的标准显示器的分辨率是 800×600 (屏幕宽×屏幕高 ) 。 640*480， 800*600， 1024*768， 1280*1024。

图像分辨率：以每英寸的像素数 (PPI)来衡量，分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。例如图像分辨率为500PPI，就是每英寸有 500个像素。

显示器设备分辨率：显示器上每单位长度显示的像素或点的数量，通常以点/ 英寸 (dpi) 来表示。大多数新显示器的分辨率大约为 96 dpi，而较早的 Mac OS 显示器的分辨率为 72 dpi。




8

3.数字图像的基本概念 – 续 2

打印机分辨率：所有激光打印机 ( 包括照排机 )产生的每英寸的油墨点数 (dpi)。多数桌面激光打印机的分辨率为 600 dpi，而照排机的分辨率为 1200 dpi 或更高。喷墨打印机产生的是极小的墨粒，而不是实际的点；但大多数喷墨打印机的分辨率均约为 300 到 720 dpi。

调色板：在一个窗口可以显示 256种颜色，每一副图像都具有独立的 256个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着 256种颜色。




9


抖动：是在图像调色板和系统调色板之间调和，图像调色板上的颜色被和系统调色板上匹配的颜色所替代，如果系统不能找到匹配的颜色，它会使用它认为合适的颜色，这就可能导致异常的颜色组合！为了防止抖动的发生，图像应该使用 Web安全颜色调色板上的颜色。

Web安全的颜色调色板：浏览器仅保证了 216种颜色，每一个浏览器最多可以显示 256种颜色，操作系统使用其中的 40种专属颜色，因此 Web图像只可以使用剩余的 216种颜色，所有其他的颜色都要抖动，即用这 216种相近的颜色所取代。




10


图像压缩：是指以较少的比特有损或无损地表示原来的像素矩阵的技术。

Web图像大小一般应该为几 K 字节到几十 K 字节，不应该太大。




11

4.位图图像位图：位图图像 ( 栅格图像 ) 使用颜色网格 ( 像素）来表

现图像。每个像素都有自己特定的位置和颜色值，显示速度比矢量图形快。

PNG、 JPEG、 GIF格式都是位图。如果增加图像的尺寸，文件的大小就会增加。当放大查看时，位图由一系列的小方块表示，每一个方块

使用同一种颜色。在处理位图像时，所编辑的是像素，而不是对象或形状。缺点：原始文件尺寸大，适用于照片阴影等。位图处理工具：Adobe Photoshop CS6 Adobe Fireworks CS6 Microsoft 画图 Corel Paint Shop Pro X Corel Painter IX




12

5.矢量图形矢量图形：由被称为矢量的数学对象定义的线条

和曲线组成。其缩放图形基本不失真，并且矢量图形缩放与文件大小无关，但显示速度比位图慢。矢量根据图像的几何特性描绘图像，适用于线、形状和插图。

矢量图形与分辨率无关矢量常用工具：

Adobe Illustrator CS6 Adobe Flash CS6 CorelDRAW Graphics Suite X6




13

6.Web图像标准文件格式： GIF 、 JPEG 和PNG

.gif：与平台无关的文件格式，限于 256色，是一个无损压缩格式 ( 推荐使用 ) ， GIF 压缩格式可以“渐显” 。 Gif98a动画 gif图像文件。透明 GIF。

.jpg,.jpeg：联合图像专家组 ,24位色，有损压缩。缺点：无法控制 24 位色与 256 色调色板的映射。 JPEG2000采用新的子波压缩技术，减少压缩损失，同时支持有损和无损压缩。 JPEG支持渐进式隔行扫描

.png ： PNG支持 24位图像并产生无锯齿状边缘的背景透明度， PNG 保留灰度和 RGB图像中的透明度。 PNG是目前保证最不失真的格式，它汲取了 GIF 和 JPG二者的优点。 PNG是采用无损压缩方式来减少文件的大小，显示速度很快，同样支持透明图像。缺点是不支持动画应用效果。 Fireworks默认格式是 PNG。




14

7.图像其他文件格式 .bmp ： Microsoft，支持高达 24 位的图像，无损格式无压缩图形文件，占用磁盘空间过大，是不适用于 Web页的。

.tif：是 Mac中广泛使用的图像格式，它由 Aldus和微软联合开发，最初是出于跨平台存储扫描图像的需要而设计的。

.PSD ： Adobe公司的 Photoshop的专用格式，包含图层、通道、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易转化为其他格式。

.swf ： Flash制作矢量动画的后缀。可以边下载边观看，因此特别适合网络传输。高清晰度的画质和小巧的体积，网上动画的事实标准。

.SVG：目前最火热的图像文件格式，可缩放的矢量图形。它是基于 XML，由 W3C联盟进行开发的。可用任何文字处理工具打开 SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到 HTML中通过浏览器来观看。




15

第 3 章小结 Web图形的重要性 Web图像图形概念 Web图像常用规则 Web常用图形格式 Web图形常用工具 Web图形的优化




16

第 3 章思考问题

end

3-3 图像在网站设计中的一般原则如何？

3-6 请解释颜色抖动的原因如何？

3-11 GIF、 JPEG和 PNG的区别是什么？

3-16 Web图形与一般图形有何区别？




17

图像 ( 图片 ) 颜色要与网站色系协调一致

返回返回




18

网站 - 图形尺寸尽可能小

返回返回




19

切割大尺寸图像

返回返回




20

在不同大小和分辨率的显示器上显示的图像

返回返回




21

分辨率为 72ppi 和 300ppi的图像

返回返回




22

http://www.lynda.com/hexh.html

返回返回

第 3 章 图形与 web 设计

Documents

第 3 章图形与 web 设计