《网站设计与建设第4节1图形与Web设计.ppt》由会员分享，可在线阅读，更多相关《网站设计与建设第4节1图形与Web设计.ppt（19页珍藏版）》请在三一办公上搜索。
1、第4节 图形与Web设计,概 述,数字图形的重要性位图和向量图像 图像文件的格式图像的创建和优化 图像的常用规则,2,3,网站图像的重要性,网页中的文字信息分为两种：一种为HTML的纯文本，另一种为图像中的文字信息。网站的徽标、网站艺术体名称、导航、按钮、新闻照片和页面修饰等，无一能离开图像。图像重点考虑的问题：文件大小、下载速度、禁止滥用图形、协调。,4,网站图像的重要性 续,返回,网站图像常用规则,网站徽标应适宜大小放在主页左上方 网站标题应放在主页徽标的右边网站图像与网站色系协调一致 图像的文件尺寸应该要足够小 一般50K左右使用Web标准调色板，避免抖动,5,3.数字图像的基本概念,像
2、素：计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元。颜色分辨率：屏幕显示图像的精度，分辨率越高，显示的图像越清晰，图像文字越小。最常用的标准屏幕的分辨率是800600(屏幕宽屏幕高)。640*480，800*600，1024*768，1280*1024。,6,3.数字图像的基本概念,图像分辨率：以每英寸的像素数(PPI)来衡量。例如图像分辨率为500PPI，就是每英寸有500个像素。分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。显示器设备分辨率：显示器上每单位长度显示的像素或点的数量，通常以点
3、/英寸(dpi)来表示。大多数新显示器的分辨率大约为 96 dpi，而较早的 Mac OS 显示器的分辨率为 72 dpi。,7,4.位图图像（bitmap）,位图：位图图像(栅格图像)使用颜色网格(像素）来表现图像。每个像素都有自己特定的位置和颜色值。JPEG、GIF、BMP格式都是位图。位图图像和分辨率有关。缺点：原始文件尺寸大，适用于照片阴影等。位图处理工具：,8,Adobe Photoshop CS3 Adobe Fireworks CS3 Microsoft 画图 Corel Paint Shop Pro X Corel Painter IX,5.矢量图形（vector）,矢量图形：
4、由被称为矢量的数学对象定义的线条和曲线组成。矢量根据图像的几何特性描绘图像，适用于线、形状和插图。矢量图形与分辨率无关。矢量常用工具：,9,Adobe Illustrator CS3 Adobe Flash CS3 CorelDRAW Graphics Suite X3,6.图形文件格式：网页的图像标准文件格式仅包括GIF、JPEG和PNG,.gif：优点：广泛支持Internet标准，与平台无关的文件格式，无损压缩和透明支持，GIF 压缩格式可以“渐显”，尺寸小，下载速度快，动态GIF可以支持动画程序。缺点：仅能显示256色，不能显示实景图像，有限的透明度，不能设置GIF图像的压缩量。.jp
5、g,.jpeg：联合图像专家组优点：广泛支持Internet标准，可以调节图像质量和大小，尺寸小，下载速度快。缺点：无法控制24位色与256色调色板的映射，有损压缩会降低图像质量。JPEG2000采用新的子波压缩技术，减少压缩损失，同时支持有损和无损压缩。JPEG支持渐进式隔行扫描.,10,6.图形文件格式,png：PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点。PNG支持24位图像并产生无锯齿状边缘的背景透明度，PNG 保留灰度和RGB图像中的透明度。PNG是采用无损压缩方式来减少文件的大小，显示速度很快，同样支持透明图像。缺点：是不支持动画应用效果。Fireworks默认
6、格式是PNG。,11,6.图形文件格式,.swf：Flash制作矢量动画的后缀。可以边下载边观看，因此特别适合网络传输。网上动画的事实标准。.bmp：Microsoft，支持高达 24 位的图像，无损格式无压缩图形文件。.tif：是Mac中广泛使用的图像格式，它由Aldus和微软联合开发，最初是出于跨平台存储扫描图像的需要而设计的。.PSD：Adobe公司的Photoshop的专用格式，包含图层、通道、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易转化为其他格式。.SVG：目前最火热的图像文件格式，可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。可用任何文字处理工具打开SVG图像
7、，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。,12,第3章 小结,13,Web图形的重要性Web图像图形概念Web图像常用规则 Web常用图形格式Web图形常用工具,第3章 思考问题,end,14,3-3 图像在网站设计中的一般原则如何？3-6 请解释颜色抖动的原因如何？3-10 浏览器支持哪些网页的图像标准文件格式？3-11 GIF、JPEG和PNG的区别是什么？3-14 SWF是一种什么格式的文件？3-15 SVG的含义是什么？,图像(图片)颜色要与网站色系协调一致,15,返回,网站-图形尺寸尽可能小,16,返回,在不同大小和分辨率的显示器上显示的图像,17,返回,分辨率为72ppi和300ppi的图像,18,返回,http:/,19,返回,
