山东大学web技术课程教学ppt3

于展现窗口即可。 图像尽量避免使用高分辨率的真彩照片 使用Web标准调色板，避免抖动 尽可能使用纯色，混合颜色会加大文件 在网页中勿滥用图像 Internet和Intranet的图像区别 切割大幅图像
山东大学计算机科学与技术学院
5
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
图像(图片)颜色要与网站色系协调一致
返回
山东大学计算机科学与技术学院
17
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站-图形尺寸尽可能小
返回
山东大学计算机科学与技术学院
18
《网站规划与网页设计》
山东大学计算机科学与技术学院
13
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
7.图像其他文件格式
.bmp：Microsoft，支持高达 24 位的图像，无损格式无压




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

像。每个像素都有自己特定的位置和颜色值，显示速度比 矢量图形快。 PNG、JPEG、GIF格式都是位图。 如果增加图像的尺寸，文件的大小就会增加。 当放大查看时，位图由一系列的小方块表示，每一个方块 使用同一种颜色。 在处理位图像时，所编辑的是像素，而不是对象或形状。 缺点：原始文件尺寸大，适用于照片阴影等。 位图处理工具： Adobe Photoshop CS6 Adobe Fireworks CS6 Microsoft 画图 Corel Paint Shop Pro X Corel Painter IX
3.数字图像的基本概念
数字图像可以被看成一个矩阵或一个二维数组
像素：计算机显示器是由行列组成栅格，每一个栅
格可以显示一个图像元素，这些图像元素叫做像素 。像素是计算机显示器显示的最小单元，每一个像 素在某一时刻只能显示一种颜色 。
颜色深度：使用颜色位数描述颜色的深度，用来度
量图像中有多少颜色信息可用于显示或打印像素。 颜色深度决定了每一个像素可以显示多少颜色。表 示颜色的位值2的指数，即位深度: 28=256， 216=65536，224=16,777,216，232=16,777,216+8位灰 度掩模；
山东大学计算机科学与技术学院
11
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
5.矢量图形
矢量图形：由被称为矢量的数学对象定义的线条
和曲线组成。其缩放图形基本不失真，并且矢量 图形缩放与文件大小无关，但显示 矢量图形与分辨率无关 矢量常用工具：
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
切割大尺寸图像
返回
山东大学计算机科学与技术学院
19
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
在不同大小和分辨率的显示器上显示的图像
返回
山东大学计算机科学与技术学院
20
《网站规划与网页设计》