图片的设置和应用.pptVIP

* 5-1 网页常用的图形文件格式 ——GIF、JPEG、PNG 网页上的图形文件是以GIF、JPEG 为主，而PNG则有逐渐普用的趋势。 5-1-1 GIF图形文件格式 GIF(Graphics Information Format)自1987年提出迄今为止，陆续有3种规格产生——GIF87a、GIF89a、GIF24，其中GIF87a和GIF89a采用的是名叫LZW的非失真压缩技术，因此，GIF图形文件虽然经过压缩，却不会造成失真的现象。 5-1-2 JPEG图形文件格式 JPEG是由Joint Photographic Expert Group所发展，这个组织发展JPEG格式主要的目的是要存储照片。由于照片通常为实物或风景，因此，JPEG支持24-bit真彩色（即166，777，216色）。 5-1-3 PNG图形文件格式 PNG（Portable Network Graphics可携式网络图片）支持48-bit真彩色和65，536层的透明阶层效果，同时采用比GIF更有效率的非失真压缩技术。缺点是图形文件大小比GIF、JPEG图形文件大，不支持动画。 表5-1 GIF、JPEG、PNG比较表 可存储的颜色数 压缩技术 透明色系 动画 扩展名 8-bit 非失真压缩 支持 支持 .gif 24-bit 失真压缩 不支持 不支持 .jpeg .jpg 48-bit 非失真压缩 支持 不支持 .png GIF JPEG PNG 5-2 在网页上插入图片——IMG标记 IMG标记（插入图片） 标记解说：您可以利用IMG标记在HTML文件中插入图片。 属性解说： ALIGN=“{LEFT，RIGHT，TOP，MIDDLE，BOTTOM}” 指定图片的对齐方式 ALT=“…” 指定图片的替代显示文字 BORDER=“n” 指定图片的框线粗细 SRC=“URL” 指定图片的相对或绝对位置 5-2-1设置图片的高度、宽余度、框线 当您想在网页上插入图片时，可以分别使用HEIGHT、WIDTH、BORDER属性指定图片的高度、宽度及框线（以像素点为单位）。 HTML HEAD TITLE设置图片的高度、宽度及框线/TITLE /HEAD BODY IMG SRC=mulan4.gif IMG SRC=mulan4.gif HEIGHT=136 WIDTH=120 IMG SRC=mulan4.gif BORDER=3 /BODY /HTML 框线为3点 高度为136点、宽度为120点 图5-4 图片尺寸 高度为136点、宽度为120点 框线为3点 5-2-2 设置图片的对齐方式 IMG标记的ALIGN属性提供了LEFT（左对齐）、RIGHT（右对齐）、TOP（上对齐）、MIDDLE（居中）、BOTTOM（下对齐）等5种对齐方式。 PIMG SRC=“mulan1.jpg” 图5-5 没有指定对齐方式 采用浏览器默认的对齐方式 现在，我们于插入第1张图片的语句中加上ALIGN=“Left”属性 图5-6a ALIGN=“Right” 图5-6b 5-2-3 设置图片的水平间距、垂直间距、替代显示文字、低分辨率图片 若您要调整图片与左、右两边的间距（水平间距），可以使用IMG标记的HSPACE属性；若您要调整图片与上下段落的间距（垂直间距），可以使用VSPACE属性。 源代码 浏览结果 FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”迪斯尼经典动画/FONT IMG SRC=“mermaid.jpg” FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”小美人鱼/FONT 迪斯尼经典动画 小美人鱼 尚未指定水平间距 源代码 浏览结果 FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”迪斯尼经典动画/FONT IMG SRC=“mermaid.jpg”HSPACE=“30” FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”小美人鱼/FONT 迪斯尼经典动画 小美人鱼 水平间距为30像素点 源代码 浏览结果 FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”迪斯尼经典动画/FONTBR IMG SRC=“mermaid.jpg”VSPACE=“30”BR FONT FACE=“方正舒体 ”COLOR=“Maroon”SIZE=“5”小美人鱼/FONTBR 垂直间距为30像素点 5-3 (一)如何设置图片的超链接与缩略图 设置图片超链接的方法很简单，只要利用我们在第4章介绍过的A…/A标记就可以了，请看下面的范例。 HEAD TITLE设置图片超链接与缩图/TITLE /HEAD BODY A H