1、网 站 设 计 与 建 设 Website design and developments,第3章 图形与Web设计,第一部分 Web基础知识,31 网站图像的重要性,图像地图导航、图形按钮、 徽标 何纯文本相比，图像更加直观、生动、易于理解和接受。 图像可以将那些文字无法表达的信息传达出来。 文字的精确性 图像的模糊性 在修饰网站和表达网站主题达到了文字不可替代的作用，,32 网站图像常用规则,网站徽标应适宜大小放在主页左上方 屏幕的左上方是最醒目和最吸引人的位置， 徽标不易过大，应该与标题文字大小以及网页顶部预留空间相匹配。 网站标题应放在主页徽标的右边 一般放在主页的最上方，位于网站徽标
2、的右侧， 绝大部分都是特殊的艺术字或名人手写体，应该使用图像文字 图像(图片)颜色要与网站色系协调一致,图像的文件尺寸应该要足够小 图像尽量避免使用高分辨率的真彩照片 在网页中勿滥用图像 Internet和Intranet的图像区别 切割大幅图像 对于一个网页确实需要一幅大尺寸的图像，可以使用一些图形处理工具例如Photoshop,33 数字图像,1像素 计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做像素。 像素是计算机显示器显示的最小单元 每一个像素在某一时刻只能显示一种颜色 3颜色分辨率 显示器的分辨率决定了屏幕显示图像的精度。 屏幕分辨率由显示器高度和宽度
3、表示屏幕区域的像素数目决定 1024X768,4图像分辨率 图像分辨率以每英寸的像素数(PPI， Pixels Per Inch)来衡量。 例如图像分辨率为500PPI，就是每英寸有500个像素。 ，,5显示器设备分辨率 显示器上每单位长度显示的像素或点的数量，通常以点/英寸 (dpi) 来表示 显示器有两个重要指标：显示器大小和点距， 例如17英寸显示器(指荧光屏对角线长度为17英寸)，点距0.25mm。 那么该显示器分辨率约为100DPI：25.3995（mm/inch）/0.25（mm/Dot）100(Dot/inch) 6打印机分辨率 通常以点/英寸 (dpi) 来表示,2颜色深度(像
4、素深度) 使用颜色位数描述颜色的深度，用来度量图像中有多少颜色信息可用于显示或打印像素。 颜色深度决定了每一个像素可以显示多少颜色。,7调色板 在一个窗口可以显示256种颜色，每一副图像都具有独立的256个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着256种颜色。,8抖动 抖动是在图像调色板和系统调色板之间调和，图像调色板上的颜色被和系统调色板上匹配的颜色所替代，如果系统不能找到匹配的颜色，它会使用它认为合适的颜色，这就可能导致异常的颜色组合,9Web安全的颜色调色板 Web 安全颜色是浏览器使用的由8位显示器支持的 216 种颜色，与平台无关。 在 8 位屏幕
5、上显示颜色时，浏览器将图像中的所有颜色更改成这些颜色。,10图像压缩 以较少的比特有损或无损地表示原来的像素矩阵的技术,34 位图图像和矢量图形,1.位图图像(Bitmap) 位图图像（技术上称为栅格图像）使用颜色网格（也就是常说的像素）来表现图像。 每个像素都有自己特定的位置和颜色值。 JPEG和GIF格式都是位图。 如果增加图像的尺寸，文件的大小就会增加。 当放大查看时会呈现锯齿状。 位图图像很适合于照片、投射阴影的效果，以及软化、镶边或者模糊边缘。,常用的位图图像工具有： Adobe Photoshop Adobe Fireworks Microsoft 画图 Corel Paint S
6、hop Pro X Corel Painter IX,Photoshop人物照片换头术,使用“套索工具”围绕头部绘制一个如图3所示的选区。,复制 粘贴,适当调整头像的大小和位置,选择工具箱中的“橡皮擦工具”，设置合适的画笔大小(可以按快捷键或来改变画笔大小)，适当放大视图，然后沿头像的面部边缘擦除多余的像素，,选择工具箱中的“仿制图章工具”，如果此前擦除像素后露出了底部图层中的耳朵，则现在需要将它去除。克隆背景像素，将耳朵掩盖掉,选择菜单命令“图像|调整|色相/饱和度” ，对两个图层都进行色相/饱和度调整，以使得两部分的色调能够互相吻合，使人看不出破绽。,2.矢量图形(Vector) 矢量图形
7、由被称为矢量的数学对象定义的线条和曲线组成。 矢量根据图像的几何特性描绘图像。 调整其大小或更改其颜色时不会降低图形的品质，,常用的矢量图形工具有： Adobe Illustrator CS3 Adobe Flash CorelDRAW Graphics Suite X3,Adobe Illustration,35 常用图形文件格式,网页的图像标准文件格式仅包括GIF、JPEG和PNG，其他的文件格式必须使用插件才能浏览。 图形类型、文件大小、图形文件的显示尺寸以及图像的下载方式来确定最佳格式。,1) GIF 与平台无关的文件格式 GIF具有8位的色彩信息，即最多支持 256 种颜色 不能显示
8、实景图象 无损压缩。 GIF与只包含少数清晰颜色的图像（如线条画和黑白图像）一起使用时，GIF 格式的图形为最佳选择。 GIF 压缩格式的优点之一是可以“渐显”，从而改善了浏览器下载体验。 Gif98a动画gif图像文件。 透明GIF。,2)JPEG JPEG文件的扩展名为.jpg或.jpeg， 有损压缩方式 渐进式 JPEG 支持隔行扫描。可以通过更改图形质量来控制文件的压缩比例，设置图像的质量越低，压缩比例就越高，文件就会越小。 JPEG件可以包含最多24位的颜色信息(1670万种颜色)， 特别适于具有丰富色彩的实景图形和照片， 建议Web中使用的JPEG图像使用8位颜色(256种颜色)。
9、 浏览器只能从顶行到底行线性地下载 JPEG 格式的图形。 优点：广泛支持 Internet 标准，有损压缩，隔行扫描，通过调节图像压缩比，可以调节图像质量和文件大小，文件尺寸较小，下载速度快。 缺点：有损压缩会降低图像质量，设计者不能控制24位颜色被映射到客户显示使用的256色的调色板。,3)JPEG2000 JPEG2000同样是由JPEG 组织负责制定的，与JPEG相比，它具备更高压缩率以及更多新功能的新一代静态影像压缩技术。 JPEG2000 作为JPEG的升级版，其压缩率比JPEG高约30%左右。与JPEG不同的是，JPEG2000 同时支持有损和无损压缩，而 JPEG 只能支持有损
10、压缩。 实现渐进传输，即先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图象由朦胧到清晰显示 JPEG2000还支持所谓的“感兴趣区域”特性，可以任意指定影像上感兴趣区域的压缩质量，还可以选择指定的部份先解压缩。 JPEG 2000 和 JPEG 相比优势明显，且向下兼容 JPEG2000可应用于传统的JPEG市场，如扫描仪、数码相机等，亦可应用于新兴领域，如网路传输、无线通讯等等。,4)PNG 流式网络图形格式(Portable Network Graphic Format 位图格式 支持 24 位图像并产生无锯齿状边缘的背景透明度，PNG 保留灰度和 RGB 图像中的透明度。 PN
11、G格式是将GIF和JPEG的优点结合形成的一种格式，也是一种有损压缩格式 无损压缩方式 W3c 96年推荐。IE浏览器从4.0版本开始支持png图像浏览 显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像； PNG的缺点是不支持动画应用效果 Macromedia公司的Fireworks软件的默认格式就是PNG。,5) BMP BMP是英文Bitmap（位图）的简写 不支持文件压缩 不适用于 Web页的。 它是Windows操作系统中的标准图像文件格式，是由一系列小点组成的图片，且支持高达 24 位的图像。,6)TIFF Tag lmage File Format , Mac
12、中广泛使用的图像格式 aldus和Microsoft公司为桌上出版系统研制开发的一种较为通用的图像文件格式。 特点是图像格式复杂、存贮信息多。正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。 该格式有压缩和非压缩二种形式，其中压缩可采用LZW无损压缩方案存储。 TIFF格式灵活易变，它又定义了四类不同的格式： TIFF-B适用于二值图像： TIFF-G适用于黑白灰度图像； TIFF-P适用于带调色板的彩色图像： TIFF-R适用于RGB真彩图像。,7)PSD Photoshop的专用格式Photoshop Document（PSD）。 包含有各种图层、通
13、道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。 8)SWF 利用Flash可以制作出一种后缀名为SWF（Shockwave Format）的动画， 这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。 SWF动画是基于矢量技术制作的,9)SVG： 缩放向量图形 Scalable Vector Graphics 。它是基于XML，由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。 SVG提供了目前网络流行格式GIF和JPEG无法具备了优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；文字在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPG和GIF格式的文件要小很多，因而下载也很快。 http:/, 圆形实例 ,
