当前位置: 首页 > >

网站规划与网页设计-第3章 图形与Web设计

发布时间:

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

第3章 图形与Web设计
山东大学计算机科学与技术学院

《网站规划与网页设计》

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

概 述
? 网站图像的重要性 ? Web图像设计原则 ? 数字图像基本概念 ? 位图和向量图像 ? Web图像文件格式
山东大学计算机科学与技术学院

2

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

1. 网站图像的重要性:不同于一般图像
? 网站的徽标、网站艺术体名称、导航、按钮、新

闻照片和页面修饰等,无一能离开图像。
? 网页中的文字信息分为两种:一种为HTML的纯文

本,另一种为图像中的文字信息。
? 图像除了给我们视觉冲击效果外,还为网站主体

表达了寓意。
? 图像要求:爽心悦目、简洁、贴现网站的本质。 ? 图像重点考虑的问题:文件大小、下载速度、禁

止滥用图形、协调。
? Intranet面向功能;Internet面向展示。
山东大学计算机科学与技术学院
3

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

1. 网站图像的重要性 – 续

山东大学计算机科学与技术学院

4

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

2.Web图像设计原则
? 网站徽标应适宜大小放在主页左上方
? 网站标题应放在主页徽标的右边 ? 网站图像与网站色系协调一致

? 图像的文件尺寸应该要足够小,图像大小适
?

?
? ? ? ?

于展现窗口即可。 图像尽量避免使用高分辨率的真彩照片 使用Web标准调色板,避免抖动 尽可能使用纯色,混合颜色会加大文件 在网页中勿滥用图像 Internet和Intranet的图像区别 切割大幅图像

山东大学计算机科学与技术学院

5

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

3.数字图像的基本概念
? 数字图像可以被看成一个矩阵或一个二维数组

? 像素:计算机显示器是由行列组成栅格,每一个栅

格可以显示一个图像元素,这些图像元素叫做像素 。像素是计算机显示器显示的最小单元,每一个像 素在某一时刻只能显示一种颜色 。
? 颜色深度:使用颜色位数描述颜色的深度,用来度

量图像中有多少颜色信息可用于显示或打印像素。 颜色深度决定了每一个像素可以显示多少颜色。表 示颜色的位值2的指数,即位深度: 28=256, 216=65536,224=16,777,216,232=16,777,216+8位灰 度掩模;
山东大学计算机科学与技术学院
6

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

3.数字图像的基本概念 – 续1
? 显示器分辨率:显示图像的精度,分辨率越高,

显示的图像越清晰,图像文字越小。最常用的标 准显示器的分辨率是800×600 (屏幕宽×屏幕高 )。640*480,800*600,1024*768,1280*1024。 ? 图像分辨率:以每英寸的像素数(PPI)来衡量, 分辨率越高,在每英寸上看见得细节就越清楚, 图像越精细,质量越好,数据量也越大。例如图 像分辨率为500PPI,就是每英寸有500个像素。 ? 显示器设备分辨率:显示器上每单位长度显示的 像素或点的数量,通常以点/英寸 (dpi) 来表示 。大多数新显示器的分辨率大约为 96 dpi,而 较早的 Mac OS 显示器的分辨率为 72 dpi。
山东大学计算机科学与技术学院
7

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

3.数字图像的基本概念 – 续2
? 打印机分辨率:所有激光打印机(包括照排机)产

生的每英寸的油墨点数 (dpi)。多数桌面激光打 印机的分辨率为 600 dpi,而照排机的分辨率为 1200 dpi 或更高。喷墨打印机产生的是极小的 墨粒,而不是实际的点;但大多数喷墨打印机的 分辨率均约为 300 到 720 dpi。 ? 调色板:在一个窗口可以显示256种颜色,每一 副图像都具有独立的256个调色板,显示时更换 调色板便可满足各幅图像的颜色要求。系统在系 统调色板中保存着256种颜色。
山东大学计算机科学与技术学院
8

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

3.数字图像的基本概念 – 续3
? 抖动:是在图像调色板和系统调色板之间调和,

图像调色板上的颜色被和系统调色板上匹配的颜 色所替代,如果系统不能找到匹配的颜色,它会 使用它认为合适的颜色,这就可能导致异常的颜 色组合!为了防止抖动的发生,图像应该使用 Web安全颜色调色板上的颜色。 ? Web安全的颜色调色板:浏览器仅保证了216种颜 色,每一个浏览器最多可以显示256种颜色,操 作系统使用其中的40种专属颜色,因此Web图像 只可以使用剩余的216种颜色,所有其他的颜色 都要抖动,即用这216种相*的颜色所取代。
山东大学计算机科学与技术学院
9

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

3.数字图像的基本概念 – 续4
? 图像压缩:是指以较少的比特有损或无损地表示

原来的像素矩阵的技术。 ? Web图像大小一般应该为几K字节到几十K字节, 不应该太大。

山东大学计算机科学与技术学院

10

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

4.位图图像
? 位图:位图图像(栅格图像)使用颜色网格(像素)来表现图

? ? ? ? ? ?

像。每个像素都有自己特定的位置和颜色值,显示速度比 矢量图形快。 PNG、JPEG、GIF格式都是位图。 如果增加图像的尺寸,文件的大小就会增加。 当放大查看时,位图由一系列的小方块表示,每一个方块 使用同一种颜色。 在处理位图像时,所编辑的是像素,而不是对象或形状。 缺点:原始文件尺寸大,适用于照片阴影等。 位图处理工具: Adobe Photoshop CS6 Adobe Fireworks CS6 Microsoft 画图 Corel Paint Shop Pro X Corel Painter IX
山东大学计算机科学与技术学院
11

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

5.矢量图形
? 矢量图形:由被称为矢量的数学对象定义的线条

和曲线组成。其缩放图形基本不失真,并且矢量 图形缩放与文件大小无关,但显示速度比位图慢 。矢量根据图像的几何特性描绘图像,适用于线 、形状和插图。 ? 矢量图形与分辨率无关 ? 矢量常用工具:
Adobe Illustrator CS6 Adobe Flash CS6 CorelDRAW Graphics Suite X6

山东大学计算机科学与技术学院

12

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

6.Web图像标准文件格式:GIF、JPEG和PNG
? .gif :与*台无关的文件格式,限于 256 色,是一个无

损压缩格式 ( 推荐使用 ) , GIF 压缩格式可以“渐显” 。Gif98a动画gif图像文件。透明GIF。 ? .jpg,.jpeg :联合图像专家组 ,24 位色,有损压缩。缺 点:无法控制 24位色与 256 色调色板的映射。 JPEG2000 采用新的子波压缩技术,减少压缩损失,同时支持有损 和无损压缩。JPEG支持渐进式隔行扫描 ? .png : PNG支持 24 位图像并产生无锯齿状边缘的背景透 明度, PNG 保留灰度和 RGB 图像中的透明度。 PNG 是目 前保证最不失真的格式,它汲取了 GIF 和 JPG 二者的优 点。PNG是采用无损压缩方式来减少文件的大小,显示 速度很快,同样支持透明图像。缺点是不支持动画应用 效果。Fireworks默认格式是PNG。
山东大学计算机科学与技术学院
13

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

7.图像其他文件格式
? .bmp : Microsoft ,支持高达 24 位的图像,无损格式无压

?
?

?

?

缩图形文件,占用磁盘空间过大,是不适用于 Web页的。 .tif:是Mac中广泛使用的图像格式,它由Aldus和微软联合 开发,最初是出于跨*台存储扫描图像的需要而设计的。 .PSD:Adobe公司的Photoshop的专用格式,包含图层、通道 、遮罩等多种设计的样稿,便于修改上一次的设计。可轻易 转化为其他格式。 .swf : Flash 制作矢量动画的后缀。可以边下载边观看,因 此特别适合网络传输。高清晰度的画质和小巧的体积,网上 动画的事实标准。 .SVG:目前最火热的图像文件格式,可缩放的矢量图形。它 是基于XML,由W3C联盟进行开发的。可用任何文字处理工具 打开 SVG 图像,通过改变部分代码来使图像具有互交功能, 并可以随时插入到HTML中通过浏览器来观看。
山东大学计算机科学与技术学院
14

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

第3章 小结
? Web图形的重要性
? Web图像图形概念

? Web图像常用规则
? Web常用图形格式

? Web图形常用工具
? Web图形的优化
山东大学计算机科学与技术学院
15

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

第3章 思考问题
? 3-3 图像在网站设计中的一般原则如何?
? 3-6 请解释颜色抖动的原因如何?

? 3-11 GIF、JPEG和PNG的区别是什么?
? 3-16 Web图形与一般图形有何区别?

end

山东大学计算机科学与技术学院

16

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

图像(图片)颜色要与网站色系协调一致

返回

山东大学计算机科学与技术学院

17

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

网站-图形尺寸尽可能小

返回

山东大学计算机科学与技术学院

18

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

切割大尺寸图像

返回

山东大学计算机科学与技术学院

19

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

在不同大小和分辨率的显示器上显示的图像

返回

山东大学计算机科学与技术学院

20

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

分辨率为72ppi和300ppi的图像

返回

山东大学计算机科学与技术学院

21

《网站规划与网页设计》

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材

http://www.lynda.com/hexh.html

返回

山东大学计算机科学与技术学院

22




友情链接: