网站设计与建设3

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