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