课程主题使用图像图像映射及其他标签设计网页网页客户端技术.pptx

;任务8;图像在网页中的运用;图像在网页中的运用;几种常用图像格式介绍;(2）GIF格式

GIF格式，是GraphicsInterchangeFormat（图形交换格式），采用LZW压缩，是以压缩相同颜色的色块来减少图片的大小。

LZW压缩为无损压缩，且压缩效率高，但GIF格式只支持256色。GIF支持动画、背景透明。GIF格式一般用于很小或较简单的图像，比如网站Logo、按钮和表情等。

GIF格式的文件扩展名为.gif。;(3）PNG格式

PNG格式，即PortableNetworkGraphics，是一种网络图形格式，结合了GIF和JPG的优点。

PNG格式采用无损压缩方案存储，能够显示透明度效果，支持48bit的色彩。PNG格式一般用于需要背景透明显示或对图像质量要求较高的网页上，很多PNG图像用作网页背景。

PNG格式的文件扩展名为.png。;图像相关标签;img图像标签;img图像标签;热区定义标签;热区定义标签;例1-17使用img、map、area标签定义图像地图

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

title使用img、map、area标签定义图像地图/title

/head

body

p请点击图像上的星球，把它们放大。/p

imgsrc=images/eg_planets.jpgborder=0usemap=#planetmapalt=Planets/

mapname=planetmapid=planetmap

areashape=circlecoords=180,139,14href=venus.htmltarget=_blankalt=金星/

areashape=circlecoords=129,161,10href=mercury.htmltarget=_blankalt=水星/

areashape=rectcoords=0,0,110,260href=sun.htmltarget=_blankalt=太阳/

/map

pb注释：/bimg元素中的usemap属性引用map元素中的id或name属性（根据浏览器），所以我们同时向map元素添加了id和name属性。/p

/body

/html;例1-17知识点

img标签usemap属性引用map元素中的id或name属性；

map标签的id或name属性；

area标签的shape属性取值：rect、circle和poly；

rect值对应的coords设置：left、right、top和bottom，即矩形的左上角坐标和右下角坐标；

circle值对应的coords设置：center-x、center-y和半径，即圆心坐标和半径。;