《网页设计语言教程》第4章 图像处理

第4章图像的处理

第4章 图像的处理

学习目标 理解矢量图和位图的区别,了解常用的 wveb图像格式。 ●理解web图像的处理流程,初步掌握基 本的web图像处理操作 掌握在网页中插入图像的方法,理解图 像在网页中的作用和web图像的基本使 用原则

学习目标 • 理解矢量图和位图的区别，了解常用的 Web图像格式。 • 理解Web图像的处理流程，初步掌握基 本的Web图像处理操作。 • 掌握在网页中插入图像的方法，理解图 像在网页中的作用和Web图像的基本使 用原则

矢量图 24:1

矢量图 • 矢量图形是指用线条和填充色等数学信 息来描述图像的一种图像类型。 • 制作矢量格式图像的软件有 Freehand、 Illustrator、CorelDraw、 AutoCAD

位图 3:1 24:1

位图 • 位图是指用像素一点一点地描述图像的 一种图像类型。 • 常用的位图编辑软件有 Fireworks、 Photoshop、ImageReady、 PhotoImpact 等

常用Web图像格式 o GIF O JPEG PNG

常用Web图像格式 • GIF • JPEG • PNG

GIF GIF(Graphics Interchange Format,图形交换格式)格式的特点: 无损压缩 ·最多256色 能够使用透明色 有所占存储空间小、下载速度快、支持动画等特点

GIF GIF（Graphics Interchange Format，图形交换格式）格式的特点： • 无损压缩 • 最多256色 • 能够使用透明色 • 有所占存储空间小、下载速度快、支持动画等特点

JPEG JPEG (Joint PhotographiC Expert Group,联合图形专家组)格式的特点: ·有损压缩 ·24位颜色 ·可以控制压缩比 ·图像质量好,对具有连续色调的图像有最佳效果

JPEG JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： • 有损压缩 • 24位颜色 • 可以控制压缩比 • 图像质量好，对具有连续色调的图像有最佳效果

PNG PNG (Portable Network Graphics 可移植的网络图形)格式的特点: 无损压缩 ·24位颜色 ·支持透明度

PNG PNG（Portable Network Graphics， 可移植的网络图形）格式的特点： • 无损压缩 • 24位颜色 • 支持透明度

图像使用说明 BMP图像文件因为存储空间大,传输不够快,所以并不常用,常 用的是jpg文件和gif文件。 对于徽标、公司厂标等在每一主页显示,要求能快速下载并能 在低配置的系统中查询的图像,应采用GF格式 而对于扫描图片、艺术作品这种对显示质量要求很高的图像则 应采用JPEG格式

•BMP图像文件因为存储空间大，传输不够快，所以并不常用,常 用的是jpg文件和gif文件。 •对于徽标、公司厂标等在每一主页显示，要求能快速下载并能 在低配置的系统中查询的图像,应采用GIF格式 •而对于扫描图片、艺术作品这种对显示质量要求很高的图像则 应采用JPEG格式。 图像使用说明

背景图案的设定 在网页中可以用图像平铺的方法制作背景。 定义背景图像的语法格式如下: 其中,“ i mage-URL”指图像的位置。 示例:ex401html

背景图案的设定 在网页中可以用图像平铺的方法制作背景。 定义背景图像的语法格式如下： 其中，“image-URL”指图像的位置。 示例：ex4-01.html