您现在的位置:首页 > >

最新文档-网站设计与建设第4节1图形与Web设计-PPT精品文档

发布时间:

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


热文推荐
猜你喜欢
友情链接: