HTML教程 07第七章.docx

1、HTML教程 07第七章第七章图像万维网（WWW）与其他类型的网络（如FTP）最大的不同就在于：它在网页上可呈现丰富的色彩和图像。图像还可以作为链接来使用，这就让网页更加丰富多彩了。7.1图像格式和添加图像的标记图像格式有很多种，在网络中使用的图像格式应该能被各种操作系统所接受才行。目前，在网上流行的图像格式以GIF和JPEG为主，另外还有一种名为PNG的图像文件格式。图像文件一般要经过压缩，否则文件就太大了，不利于在网上传输。它们的简要情况介绍如下： GIF格式。GIF格式的图像文件只包含256色，因此色彩表现力不够，但图像文件可以很小，压缩效率高。GIF格式适合于商标、新闻式的标题，还可以

2、形成简单的动画效果。文件的扩展名为.gif。 JPEG格式。照片之类的全彩图像一般都以JPEG格式来压缩，因此JPEG格式常用来保存超过256色的图像。但JPEG的压缩过程会造成图像数据的损失，是一种“有损压缩”。不过视觉上一般不易察觉。文件的扩展名为.jpg或.jpeg。 PNG格式。PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩，却又不造成图像失真的技术。因此它不仅具有GIF图像格式的大部分优点，而且还支持真彩色。PNG格式是Macromedia公司倡导的。gif格式动画图片并不过时，而且在网页上随处

3、可见。GIF文件的图片格式的压缩率比JPEG格式要好（因为它只有256色），而且GIF格式图片透明性特别好，加上节省空间，最适网上使用，这也是GIF格式图片之所以能一直被人们喜用而至今不衰的原因所在。JPEG格式压缩显示全彩图像的效率最高。虽然PNG格式兼具JPEG和GIF两种格式的优点，但其压缩率毕竟没有它们好，而且PNG不支持动画应用效果，因此三者都各有优点。有了图像文件之后（至于图像文件怎么建立，不在本教程范围之内，Photoshop、Fireworks、Windows的画图程序是最常见的图像编辑软件，不再细说），就可以使用标记把图像插入到网页中了。标记的主要语法为：各种属性的解释如下：

4、 src：用来设置图像文件所在的路径。可以是相对路径，也可以是绝对路径。 alt：当鼠标放在图片上时，显示的小段提示文字，一般用于说明此图片的标题或主要内容。当图像文件无法在网页中显示时，在图像的位置也会显示alt所设置的文字。 border：图像边框的宽度，单位是像素。在默认情况下图像无边框，即border = 0。 width和height：图像的宽度和高度，单位是像素。在默认情况下，如果改变其中一个值，则另一个值也会等比例进行调整，除非同时设置两个属性。【例1】为网页添加图像。假设现在有一幅林冲的图片linchong.jpg，它本身宽271像素，高341像素，和本网页在同一个目录下，现在

5、以各种方式显示。参考代码如下。 itsway - 图像 显示结果如下图所示。可以看出，如果不指定width和height属性值，则图像以它的原始大小在网页中显示；如果同时指定width和height值，则一般图像会不等比例地伸缩；如果找不到文件，或者在网络上文件下载速度过慢，则会显示alt属性的值。必须注意的是，src属性在标志中是必须赋值的。以前，Netscape还为定义了一个lowsrc属性，格式为：，即src属性用来指定图像，lowsrc用来指定低解析度的图像。这是因为以前网络速度慢，下载一个高解析度的图像可能需要很长时间，用户会等得不耐烦，因此可以先下载一个很小的低解析度的图像，等高解

6、析度的图像下载完毕，再用它来代替低解析度的图像。两个图像的尺寸大小最好一样。这个主意的确很妙，可惜并没有写进HTML 4.01规范中。而且随着网速的提高，似乎没有必要把问题复杂化，所以现在并不用了。7.2align、hspace和vspace属性标记还有三个比较常用的属性，它们是：（1）align属性：指定图像和周围文字的对齐方式。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括left、center和right三种，而相对文字对齐方式则是指图像与一行文字的相对位置。align的取值一共有以下几种。align的值含义top图像顶部和同行文本的最高部分对齐（可能是文本顶部，也可能是图

7、像顶部）middle图像中部和同行文本的中部对齐（通常是文本行的基线，并不是实际的中部）bottom图像底部和同行文本的底部对齐left使图像和左边界对齐（文本环绕图像）right使图像和右边界对齐（文本环绕图像）texttop图像顶部和同行中最高的文本的顶部对齐，仅用于Netscapeabsmiddle图像中部和同行中最大项的中部对齐，仅用于Netscapebaseline图像底部和同行的文本基线对齐，仅用于Netscapeabsbottom图像底部和同行中的最低项对齐，仅用于Netscape【例2】align属性的演示。 itsway - 图像 猫咪 猫咪 猫咪 猫咪 显示结果如下图所示。

8、从图中可以看出，当文本和图片在一行时，图片和文本的几种对齐方式：top、bottom、middle和left。这里用到了一个表格，表格的宽度是固定的，并让文本和图片在单元格里演示各种对齐方式。如果不用表格的话，就不得不用、或等标记来换行了，这样网页将会比较长，而且如果缩放浏览器窗口时，可能一行放不下图片和文本，因此图片和文本可能会自动折行，影响演示效果。（2）hspace属性：图像与同行文字或对象之间的水平距离，单位是像素。【例3】hspace属性的演示。 itsway - 图像 显示结果如下图所示。从图中可以看出，因为各个图片的hspace属性值不同，所以它们的间距也不同。（3）vspace

9、属性：图像与上下行文字或对象之间的垂直距离，单位是像素。【例4】vspace属性的演示。 itsway - 图像 猫科动物形状上十分相似，但 大小不一。它们可都是敏捷的捕猎好手：悄悄接近猎物，然后猛扑过去。它们具有出色的立体视力，善辨颜色，在黑暗中也能看清楚。在眼睛后部有一个特殊的反光层，称为反光毯，它把光反射回视网膜。因此，猫科动物在弱光下也能看见。它们都有夜猎所需的敏感触须。 “小猫”有28个种属。除体型小外， 跟“大猫”十分相似。“小猫”会咕噜咕噜叫，但不会吼；“大猫”会吼，但不会咕噜咕噜叫。家猫的祖先是在欧洲和北非发现的野猫。美洲山猫和猞猁（山猫）长得特别，尾短，耳有鬣毛。许多“小猫”

10、像豹猫那样，都有在森林中起伪装作用的斑点。 显示结果如下图所示。从图中可以看出，第一幅图片没有设vspace属性值，因此vspace值默认为0；第二幅图片设置的vspace值为40，所以图片和上一行、下一行的距离都是40像素，并且和本行文字也偏离不少。7.3实用的图文混排在网页上实现的图文混排效果，一般使用的align = left或right设置，并且还要设置适当的hspace等属性，这样页面比较美观。【例5】本例以介绍猫科动物为内容，演示了图文混排的效果。其中，各段前的两个空格是中文全角空格。 itsway - 图像 猫科动物 猫科动物形状上十分相似，但大小不一。它们可都是敏捷的捕猎好手：悄悄接近猎物，然后猛扑过去。它们具有出色的立