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

《网站设计与建设》第3章图形与Web设计2 u数字图形的重要性u位图和向量图像u图像文件的格式u图像的创建和优化u图像的常用规则概概述述3 1.网站图像的重要性：不同于一般图像u网站的徽标、网站艺术体名称、导航、按钮、新闻照片和页面修饰等，无一能离开图像。u网页中的文字信息分为两种：一种为HTML的纯文本，另一种为图像中的文字信息。u图像除了给我们视觉冲击效果外，还为网站主体表达了寓意。u图像要求：爽心悦目、简洁、贴现网站的本质。u图像重点考虑的问题：文件大小、下载速度、禁止滥用图形、协调。uIntranet面向功能；Internet面向展示。4 1.网站图像的重要性–续5 2.网站图像常用规则u网站徽标应适宜大小放在主页左上方u网站标题应放在主页徽标的右边u网站图像与网站色系协调一致u图像的文件尺寸应该要足够小u图像尽量避免使用高分辨率的真彩照片u使用Web标准调色板，避免抖动u尽可能使用纯色，混合颜色会加大文件u在网页中勿滥用图像uInternet和Intranet的图像区别u切割大幅图像6 3.数字图像的基本概念u数字图像可以被看成一个矩阵或一个二维数组u像素：计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元。u颜色深度：使用颜色位数描述颜色的深度，用来度量图像中有多少颜色信息可用于显示或打印像素。颜色深度决定了每一个像素可以显示多少颜色。表示颜色的位值2的指数，即位深度:28=256，216=65536，224=16,777,216，232=16,777,216+8位灰度掩模；7 3.数字图像的基本概念–续1u颜色分辨率：屏幕显示图像的精度，分辨率越高，显示的图像越清晰，图像文字越小。最常用的标准屏幕的分辨率是800×600(屏幕宽×屏幕高)。640*480，800*600，1024*768，1280*1024。u图像分辨率：以每英寸的像素数(PPI)来衡量。例如图像分辨率为500PPI，就是每英寸有500个像素。分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。u显示器设备分辨率：显示器上每单位长度显示的像素或点的数量，通常以点/英寸(dpi)来表示。大多数新显示器的分辨率大约为96dpi，而较早的MacOS显示器的分辨率为72dpi。8 3.数字图像的基本概念–续2u打印机分辨率：所有激光打印机(包括照排机)产生的每英寸的油墨点数(dpi)。多数桌面激光打印机的分辨率为600dpi，而照排机的分辨率为1200dpi或更高。喷墨打印机产生的是极小的墨粒，而不是实际的点；但大多数喷墨打印机的分辨率均约为300到720dpi。u调色板：在一个窗口可以显示256种颜色，每一副图像都具有独立的256个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着256种颜色。9 3.数字图像的基本概念–续3u抖动：是在图像调色板和系统调色板之间调和，图像调色板上的颜色被和系统调色板上匹配的颜色所替代，如果系统不能找到匹配的颜色，它会使用它认为合适的颜色，这就可能导致异常的颜色组合！为了防止抖动的发生，图像应该使用Web安全颜色调色板上的颜色。uWeb安全的颜色调色板：浏览器仅保证了216种颜色，每一个浏览器最多可以显示256种颜色，操作系统使用其中的40种专属颜色，因此Web图像只可以使用剩余的216种颜色，所有其他的颜色都要抖动，即用这216种相近的颜色所取代。10 3.数字图像的基本概念–续4u图像压缩：是指以较少的比特有损或无损地表示原来的像素矩阵的技术。uWeb图像大小一般应该为几K字节到几十K字节，不应该太大。11 4.位图图像u位图：位图图像(栅格图像)使用颜色网格(像素）来表现图像。每个像素都有自己特定的位置和颜色值。uJPEG、GIF、BMP格式都是位图。u如果增加图像的尺寸，文件的大小就会增加。u当放大查看时，位图由一系列的小方块表示，每一个方块使用同一种颜色。u缺点：原始文件尺寸大，适用于照片阴影等。u位图处理工具：AdobePhotoshopCS3AdobeFireworksCS3Microsoft画图CorelPaintShopProXCorelPainterIX12 5.矢量图形u矢量图形：由被称为矢量的数学对象定义的线条和曲线组成。矢量根据图像的几何特性描绘图像，适用于线、形状和插图。u矢量图形与分辨率无关。u矢量常用工具：AdobeIllustratorCS3AdobeFlashCS3CorelDRAWGraphicsSuiteX313 6.图形文件格式：网页的图像标准文件格式仅包括GIF、JPEG和PNGu.gif：与平台无关的文件格式，限于256色，是一个无损压缩格式(推荐使用)，GIF压缩格式可以“渐显” 。Gif98a动画gif图像文件。透明GIF。u.jpg,.jpeg：联合图像专家组,24位色，有损压缩。缺点：无法控制24位色与256色调色板的映射。JPEG2000采用新的子波压缩技术，减少压缩损失，同时支持有损和无损压缩。JPEG支持渐进式隔行扫描u.png：PNG支持24位图像并产生无锯齿状边缘的背景透明度，PNG保留灰度和RGB图像中的透明度。PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点。PNG是采用无损压缩方式来减少文件的大小，显示速度很快，同样支持透明图像。缺点是不支持动画应用效果。Fireworks默认格式是PNG。14 6.图形文件格式-续u.bmp：Microsoft，支持高达24位的图像，无损格式无压缩图形文件。u.tif：是Mac中广泛使用的图像格式，它由Aldus和微软联合开发，最初是出于跨平台存储扫描图像的需要而设计的。u.PSD：Adobe公司的Photoshop的专用格式，包含图层、通道、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易转化为其他格式。u.swf：Flash制作矢量动画的后缀。可以边下载边观看，因此特别适合网络传输。网上动画的事实标准。u.SVG：目前最火热的图像文件格式，可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。可用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。15第3章小结uWeb图形的重要性uWeb图像图形概念uWeb图像常用规则uWeb常用图形格式uWeb图形常用工具uWeb图形的优化16第3章思考问题endu3-1网站设计中为什么使用图像文字信息？u3-3图像在网站设计中的一般原则如何？u3-6请解释颜色抖动的原因如何？u3-10浏览器支持哪些网页的图像标准文件格式？u3-11GIF、JPEG和PNG的区别是什么？u3-14SWF是一种什么格式的文件？u3-15SVG的含义是什么？uWeb图形与一般图形有何区别？u国内外著名高校使用的Web图形有何差异？17 图像(图片)颜色要与网站色系协调一致返回返回18 网站-图形尺寸尽可能小返回返回19 切割大尺寸图像返回返回20 在不同大小和分辨率的显示器上显示的图像返回返回21 分辨率为72ppi和300ppi的图像返回返回22 返回返回