html图像技术

一、概述

在设计网页时,常用的两个图像格式是GIF和JPEG/JPG。目前网页上最常见的图片格式还有PNG格式。微软IE浏览器还支持BMP图形格式,Netscape Navigator目前还不支持这种格式的图形文件。我们来看几种主要的图象格式。GIF文件特别适合于图标、线条等简单图象,这是因为GIF最多支持256色,故不适于高度细节化的图像。JPEG则支持任意多的色彩,并且它是一种高压缩方式,故生成的文件比同样的GIF文件小得多。

1. GIF:GIF(Graphics Interchange Format)格式是网页上常用的图像格式之一 。GIF图像是一种压缩格式的图像,它的压缩方式是无损的。但是,它只支持256种颜色。

GIF图像有版本之分,最常见的版本是GIF87a和GIF89a。GIF89a更为流行,这是因为它支持下列几种技术:透明性;交错技术;动画特性。透明性是使GIF文件中某种颜色不可见的功能,当GIF文件在Web页上显示时,图象下的背景可透过图象的透明部分,产生图象浮在背景上的效果。交错功能则能在显示时慢慢加强分辨率而渐渐清晰。GIF89a这两种特性的有效应用可产生漂亮的Web页面。

2. JPEG:JPEG(Joint Photographic Experts Group)格式的图像也是一种压缩格式的图像,它的特点是采用有损压缩算法,获得较小的文件大小,它可以支持16色,24色,32色等真色彩。JPEG是Joint Photographic Experts Group的缩写,由于其先进性,受到越来越多的支持。

3. PNG:PNG是Portable Network Graphic的缩写,中文通常译作便携网络图像。这是一种新的图像格式,它被提议作为将来的一种标准

对图像进行处理的程序中,最有名的工具有PhotoImpact 4.0和Photoshop 5.0。可能还需要一种GIF87转换为GIF89a的小工具GIFTool。它可创建透明的交错储存图像,并且可对一组GIF文件进行批处理(可一次对整个目录下的文件进行转换)。如果想让图像变成动画,那就需要GIFCon32。它可在GIF图象中加入控制,在Web页上不断变化,产生极好的效果。

二、用<IMG>元素嵌入图像

要在网页中插入图像,可以用元素<IMG>或<OBJECT>。<IMG>元素它实际上就是告诉浏览器在哪个地方要放图,<IMG>元素没有内容,所以,它是个空标记,SRC是它的属性,它告诉浏览器,应该上哪儿去找图。<IMG>元素的标准用法如下:

<IMG SRC=“imagefile.gif”>

注意:在网页中,实际上,图不是放在网页中的,而是在网页中表明在哪个地方有图,浏览器应该在哪儿去找图。

<IMG>元素的属性定义

  前面已经讲过,<IMG>元素是空元素,只有起始标记,没有结束标记<IMG>元素有下面几种属性。

  SRC:取URL值型,指定图像资源的位置

  ALT.取值文本类型。对于不能支持图像显示浏览器,ALT属性值给出一段替换文本。

  LONGDESC:取URL值型。指定关于图像描述的文件的链接,图像描述文件是 ALT属性描述文字的补充

  HEIGHT:指定在浏览器窗口内图像显示的高度

  WIDTH:指定在浏览器窗口内图像显示的宽度

  ALIGN:指定图像在页面中的位置及与上-卜文的对齐方式

  BORDER:取整数值。指定图像四周的边框宽度

  HSPACE:取整数值。指定图像左右应留的空

  VSPACE:取整数值。指定图像上下应留的空

  ISMAP,指定图像为服务器端Image map图像映射

  USEMAP,为图像建立客户端Image map图像映射

三、图像与上下文的对齐方式

在<IMG>标记中定义ALIGN属性可以实现图像和文字的混排。语法如下所示:

  <IMG SRC="imgagefile.gif'ALIGN="alignment choice">

属性ALIGN指定如下在页面中的位置及与上下文的对齐方式,其属性值意义如下:Bottom,Top,Middle,Left,Right

四,HTML图像映射:

1,图像映射是指可点击的图形,它将访问者从一个URL连接到另一个,无论目的地是你的站点的其它网页还是互联网其它的什么地方。常见的例子包括导航按钮和站点映射。

2,客户端图像映射允许你提供不依赖于CGI、Web服务器、HTTP(超文本传输协议)或是你的Internet供应上的可点击的图像。当你创建客户端的图像时,你直接在你的Web文档中放置映射的坐标信息。所有的过程在访问者的PC上完成。 传统的图像映射依赖于Web服务器处理映射信息并指挥浏览器该往哪里去,而客户端图像映射过程由客户完成,因此它是独立于服务器的。但是客户端图像映射需要访问者的浏览器支持。最新版本Internet Explorer 和 Netscape支持客户端图像映射。

3,建立客户端图像映射

图像坐标映射格式

形状类型

坐标格式

RECT(矩形)

左上角x,左上角y,右下角x,右下角y

POLY()(多边形)

x1, y1, x2, y2, 等

CIRCLE(圆形)

圆心x,圆心y,半径

<IMG SRC="3C.gif" USEMAP="#ThreeColorMap"> <IMG SRC="Flag.Gif" USEMAP="ThreeColorMap"> <MAP NAME="ThreeColorMap"> <AREA SHAPE="RECT" COORDS="3,4,85,197" =>HREF="blue.html"> <AREA SHAPE="RECT" COORDS="86,4,212,197" =>HREF=white.html"> <AREA SHAPE="RECT" COORDS="212,4,327,197" =>HREF=red.html"> </MAP>

五,透明图像

一幅透明图像包含自动与HTML页面背景颜色相融合的成分。网页背景能够透过图像的透明部分很容易地展现出来。

Web格式唯一支持透明颜色的是G1F89a和PNG,而GIF89a格式最流行。从技术上来说, 只有89a版本的GIF格式支持透明图像,但一些图形编辑程序允许我们把GIF89a存为87a 同时保留透明信息。

工业标准图表应用软件,例如Adobe photoshop(http:\\www.adobe.com)可以改变图像及创造透明颜色。较少数量的强有力的软件JASC Paintshop pro(http:\\www.asc.com)也只有这种功能。

六,交错技术

有很多用户上网的速度很慢,有时候显示一张图片时,等很久都不能显示图,如果,没用交错技术的话。那么用户要等图全下载完了才能看见。有交错技术那么图可以一部分一部分的显示出来。让用户可以提前知道内容。

图像隔行扫描:电视是隔行扫描,而电脑屏幕是逐行扫描,De-Interlace(隔行扫描)就是用来模拟电视屏幕的显示方式的。包括隔行GIF和逐级JPG方式。

1,交错图:如果图像是一幅交错图,则它在页面上逐步出现的时候,会以类似百叶窗的效果显示。

注意:一般默认情况下,图是以50%为单位显示。

PNG图像和GIF图像都支持这种交错格式。

隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。

2,渐进图:如果图像是一幅渐进图,则它在页面上逐步出现的时候,会首先显示较模糊的整幅图像,然后逐渐变得清晰。这样,浏览者可以在下载过程中尽早了解图像的大致轮廓。

JPG/JPEG图像支持这种渐进格式。

逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。

3,还有一种让浏览者可以耐心等待图像显示出来的办法,那就是使用预览图像。即在显示原图之前,先显示一幅字节数比较小,画面质量相对较差的图片。由浏览者决定是否浏览原图。通常,预览图像都是主图像的低分辨率、高压缩率的版本。使用预览图像的方法是:<IMG SRC=“temp.gif” LOWSRC= “preview.gif”>,其中temp.gif是原图,而preview.gif是预览图。

七,动画图像(GIF) :GIF格式的图片如此流行的一个原因就是因为它能够让我们把几幅GIF图放在一起而达到动画片的效果。GIF动画就是动态的GIF图片,它实际上就是通过某种机制,将多幅图片连接在-起,然后顺序播放,看着就象是连续的一样。