网站设计与建设-第03章_图形与Web设计

1、 网 站 设 计 与 建 设 第第3 3章章 图形与图形与WebWeb设计设计 网 站 设 计 与 建 设 2u数字图形的重要性数字图形的重要性u位图和向量图像位图和向量图像 u图像文件的格式图像文件的格式u图像的创建和优化图像的创建和优化 u图像的常用规则图像的常用规则 网 站 设 计 与 建 设 31.1.网站图像的重要性：不同于一般图像网站图像的重要性：不同于一般图像u 网站的徽标、网站艺术体名称、导航、按钮、新网站的徽标、网站艺术体名称、导航、按钮、新闻照片和页面修饰等，无一能离开图像。闻照片和页面修饰等，无一能离开图像。 u 网页中的文字信息分为两种：一种为网页中的文字信息分为两种：

2、一种为HTMLHTML的纯文的纯文本，另一种为图像中的文字信息。本，另一种为图像中的文字信息。u 图像除了给我们视觉冲击效果外，还为网站主体图像除了给我们视觉冲击效果外，还为网站主体表达了寓意。表达了寓意。 u 图像要求：爽心悦目、简洁、展现网站的本质。图像要求：爽心悦目、简洁、展现网站的本质。u 图像重点考虑的问题：文件大小、下载速度、禁图像重点考虑的问题：文件大小、下载速度、禁止滥用图形、协调。止滥用图形、协调。 u IntranetIntranet面向功能；面向功能；InternetInternet面向展示。面向展示。 网 站 设 计 与 建 设 41.1.网站图像的重要性网站图像的重要

3、性 续续 网 站 设 计 与 建 设 52.2.网站图像常用规则网站图像常用规则u 网站徽标网站徽标LogoLogo应适宜大小放在主页左上方应适宜大小放在主页左上方 u 网站标题应放在主页徽标的右边网站标题应放在主页徽标的右边u 网站图像与网站色系协调一致网站图像与网站色系协调一致 u 图像的文件尺寸应该要足够小图像的文件尺寸应该要足够小 u 图像尽量避免使用高分辨率的真彩照片图像尽量避免使用高分辨率的真彩照片 u 使用使用WebWeb标准调色板，避免抖动标准调色板，避免抖动u 尽可能使用纯色，混合颜色会加大文件尽可能使用纯色，混合颜色会加大文件u 在网页中勿滥用图像在网页中勿滥用图像 u I

4、nternetInternet和和IntranetIntranet的图像区别的图像区别 u 切割大幅图像切割大幅图像 网 站 设 计 与 建 设 63.3.数字图像的基本概念数字图像的基本概念u 数字图像可以被看成一个矩阵或一个二维数组数字图像可以被看成一个矩阵或一个二维数组 u 像素：像素：计算机显示器是由行列组成栅格，每一个计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做栅格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元。像素。像素是计算机显示器显示的最小单元。u 颜色深度：颜色深度：使用颜色位数描述颜色的深度，用来使用颜色位数描

5、述颜色的深度，用来度量图像中有多少颜色信息可用于显示或打印像度量图像中有多少颜色信息可用于显示或打印像素。颜色深度决定了每一个像素可以显示多少颜素。颜色深度决定了每一个像素可以显示多少颜色。表示颜色的位值色。表示颜色的位值2 2的指数，即位深度的指数，即位深度: : 2 28 8=256=256，2 21616=65536=65536，2 22424=16,777,216=16,777,216，2 23232=16,777,216+8=16,777,216+8位灰度掩模；位灰度掩模； 网 站 设 计 与 建 设 73.3.数字图像的基本概念数字图像的基本概念 续续1 1u 显示分辨率显示分辨率

6、：屏幕显示图像的精度，分辨率越高屏幕显示图像的精度，分辨率越高，显示的图像越清晰，图像文字越小。最常用的，显示的图像越清晰，图像文字越小。最常用的标准屏幕的分辨率是标准屏幕的分辨率是12801280* *1024(1024(屏幕宽屏幕宽屏幕高屏幕高) )。640640* *480480，800800* *600600，10241024* *768768，12801280* *10241024。u 图像分辨率图像分辨率：以每英寸的像素数以每英寸的像素数(PPI)(PPI)来衡量。来衡量。例如图像分辨率为例如图像分辨率为500PPI500PPI，就是每英寸有，就是每英寸有500500个个像素。分辨

7、率越高，在每英寸上看见得细节就越像素。分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。清楚，图像越精细，质量越好，数据量也越大。u 显示器设备分辨率：显示器设备分辨率：显示器上每单位长度显示的显示器上每单位长度显示的像素或点的数量，通常以点像素或点的数量，通常以点/ /英寸英寸 (dpi) (dpi) 来表示来表示。大多数新显示器的分辨率大约为。大多数新显示器的分辨率大约为 96 dpi96 dpi，而，而较早的较早的 Mac OS Mac OS 显示器的分辨率为显示器的分辨率为 72 dpi72 dpi。 网 站 设 计 与 建 设 83.3.数字图像的基本概念

8、数字图像的基本概念 续续2 2u 打印机分辨率：打印机分辨率：所有激光打印机所有激光打印机( (包括照排机包括照排机) )产产生的每英寸的油墨点数生的每英寸的油墨点数 (dpi)(dpi)。多数桌面激光打。多数桌面激光打印机的分辨率为印机的分辨率为 600 dpi600 dpi，而照排机的分辨率为，而照排机的分辨率为 1200 dpi 1200 dpi 或更高。喷墨打印机产生的是极小的或更高。喷墨打印机产生的是极小的墨粒，而不是实际的点；但大多数喷墨打印机的墨粒，而不是实际的点；但大多数喷墨打印机的分辨率均约为分辨率均约为 300 300 到到 720 dpi720 dpi。 u 调色板：调色

9、板：在一个窗口可以显示在一个窗口可以显示256256种颜色，每一种颜色，每一副图像都具有独立的副图像都具有独立的256256个调色板，显示时更换个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着统调色板中保存着256256种颜色。种颜色。 网 站 设 计 与 建 设 93.3.数字图像的基本概念数字图像的基本概念 续续3 3u 抖动：抖动：是在图像调色板和系统调色板之间调和，是在图像调色板和系统调色板之间调和，图像调色板上的颜色被和系统调色板上匹配的颜图像调色板上的颜色被和系统调色板上匹配的颜色所替代，如果系统不能找到匹配的

10、颜色，它会色所替代，如果系统不能找到匹配的颜色，它会使用它认为合适的颜色，这就可能导致异常的颜使用它认为合适的颜色，这就可能导致异常的颜色组合！为了防止抖动的发生，图像应该使用色组合！为了防止抖动的发生，图像应该使用WebWeb安全颜色调色板上的颜色。安全颜色调色板上的颜色。u WebWeb安全的颜色调色板安全的颜色调色板：浏览器仅保证了浏览器仅保证了216216种颜种颜色，每一个浏览器最多可以显示色，每一个浏览器最多可以显示256256种颜色，操种颜色，操作系统使用其中的作系统使用其中的4040种专属颜色，因此种专属颜色，因此WebWeb图像图像只可以使用剩余的只可以使用剩余的216216种

11、颜色，所有其他的颜色种颜色，所有其他的颜色都要抖动，即用这都要抖动，即用这216216种相近的颜色所取代。种相近的颜色所取代。 网 站 设 计 与 建 设 103.3.数字图像的基本概念数字图像的基本概念 续续4 4u 图像压缩：图像压缩：是指以较少的比特有损或无损地表示是指以较少的比特有损或无损地表示原来的像素矩阵的技术。原来的像素矩阵的技术。u WebWeb图像大小一般应该为几图像大小一般应该为几K K字节字节到到几十几十K K字节，字节，不应该太大。不应该太大。 网 站 设 计 与 建 设 114.4.位图图像位图图像u 位图：位图：位图图像位图图像( (栅格图像栅格图像) )使用颜色网

12、格使用颜色网格( (像素像素）来表现图像。每个像素都有自己特定的位置）来表现图像。每个像素都有自己特定的位置和颜色值。和颜色值。u JPEGJPEG、GIFGIF、BMPBMP格式都是位图。格式都是位图。u 如果增加图像的尺寸，文件的大小就会增加。如果增加图像的尺寸，文件的大小就会增加。u 当放大查看时，位图由一系列的小方块表示，当放大查看时，位图由一系列的小方块表示，每一个方块使用同一种颜色。每一个方块使用同一种颜色。u 缺点：原始文件尺寸大，适用于照片阴影等。缺点：原始文件尺寸大，适用于照片阴影等。u 位图处理工具：位图处理工具：Adobe Photoshop CS3 Adobe Phot

13、oshop CS3 Adobe Fireworks CS3 Adobe Fireworks CS3 Microsoft Microsoft 画图画图 Corel Paint Shop Pro X Corel Paint Shop Pro X Corel Painter IX Corel Painter IX 网 站 设 计 与 建 设 125.5.矢量图形矢量图形u 矢量图形：矢量图形：由被称为矢量的数学对象定义的线由被称为矢量的数学对象定义的线条和曲线组成。矢量根据图像的几何特性描绘条和曲线组成。矢量根据图像的几何特性描绘图像，适用于线、形状和插图。图像，适用于线、形状和插图。 u 矢量图形

14、与分辨率无关。矢量图形与分辨率无关。u 矢量常用工具：矢量常用工具：Adobe Illustrator CS3 Adobe Illustrator CS3 Adobe Flash CS3 Adobe Flash CS3 CorelDRAW Graphics Suite X3CorelDRAW Graphics Suite X3 网 站 设 计 与 建 设 136.6.图形文件格式：网页的图像标准文件图形文件格式：网页的图像标准文件格式仅包括格式仅包括GIFGIF、JPEGJPEG和和PNG PNG u .gif.gif：与平台无关的文件格式，限于与平台无关的文件格式，限于256256色，是一个

15、无色，是一个无损压缩格式损压缩格式( (推荐使用推荐使用) )，GIF GIF 压缩格式可以压缩格式可以“渐显渐显” ” 。Gif98aGif98a动画动画gifgif图像文件。透明图像文件。透明GIFGIF。u . .jpg,.jpegjpg,.jpeg：联合图像专家组联合图像专家组,24,24位色，有损压缩。缺位色，有损压缩。缺点：无法控制点：无法控制2424位色与位色与256256色调色板的映射。色调色板的映射。JPEG2000JPEG2000采用新的子波压缩技术，减少压缩损失，同时支持有损采用新的子波压缩技术，减少压缩损失，同时支持有损和无损压缩。和无损压缩。JPEGJPEG支持渐进式

16、隔行扫描支持渐进式隔行扫描u . .pngpng：PNGPNG支持支持2424位图像并产生无锯齿状边缘的背景透位图像并产生无锯齿状边缘的背景透明度，明度，PNG PNG 保留灰度和保留灰度和RGBRGB图像中的透明度。图像中的透明度。PNGPNG是目前是目前保证最不失真的格式，它汲取了保证最不失真的格式，它汲取了GIFGIF和和JPGJPG二者的优点。二者的优点。PNGPNG是采用无损压缩方式来减少文件的大小，显示速度是采用无损压缩方式来减少文件的大小，显示速度很快，同样支持透明图像。缺点是不支持动画应用效果很快，同样支持透明图像。缺点是不支持动画应用效果。FireworksFireworks

17、默认格式是默认格式是PNGPNG。 网 站 设 计 与 建 设 146.6.图形文件格式图形文件格式 - - 续续 u .bmp.bmp：MicrosoftMicrosoft，支持高达，支持高达 24 24 位的图像，无损格式无压位的图像，无损格式无压缩图形文件。缩图形文件。u . .tiftif：是是MacMac中广泛使用的图像格式，它由中广泛使用的图像格式，它由AldusAldus和微软联合和微软联合开发，最初是出于跨平台存储扫描图像的需要而设计的。开发，最初是出于跨平台存储扫描图像的需要而设计的。 u .PSD.PSD：AdobeAdobe公司的公司的PhotoshopPhotoshop

18、的专用格式，包含图层、通道的专用格式，包含图层、通道、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易转化为其他格式。转化为其他格式。 u . .swfswf：FlashFlash制作矢量动画的后缀。可以边下载边观看，因制作矢量动画的后缀。可以边下载边观看，因此特别适合网络传输。网上动画的事实标准。此特别适合网络传输。网上动画的事实标准。 u .SVG.SVG：目前最火热的图像文件格式，可缩放的矢量图形。它目前最火热的图像文件格式，可缩放的矢量图形。它是基于是基于XMLXML，由，由W3CW3C联盟进行开发的。可用任何文字处理工具联盟进行开发的。可用任何文字处理工具打开打开SVGSVG图像，通过改变部分代码来使图像具有互交功能，图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到并可以随时插入到HTMLHTML中通过浏览器来观看。中通过浏览器来观看。 网 站 设 计 与 建 设 15第第3 3章章 小结小结uWebWeb图形的重要性图形的重要性uWebWeb图像图形概念图像图形概念uWebWeb图像常用规则图像常用规则 uWebWeb常用图形格式常用图形格式uWebWeb图形常用工具图形常用工具uWebWeb图形的优化图形的优化 网 站 设 计 与 建 设 16第第3 3章章 思考问题思考问题endend