HTML教程 07第七章.docx

HTML教程 07第七章.docx

《HTML教程 07第七章.docx》由会员分享，可在线阅读，更多相关《HTML教程 07第七章.docx（16页珍藏版）》请在冰豆网上搜索。

HTML教程07第七章

第七章　图像

　　万维网（WWW）与其他类型的网络（如FTP）最大的不同就在于：

它在网页上可呈现丰富的色彩和图像。

图像还可以作为链接来使用，这就让网页更加丰富多彩了。

7.1　图像格式和添加图像的标记

　　图像格式有很多种，在网络中使用的图像格式应该能被各种操作系统所接受才行。

目前，在网上流行的图像格式以GIF和JPEG为主，另外还有一种名为PNG的图像文件格式。

图像文件一般要经过压缩，否则文件就太大了，不利于在网上传输。

它们的简要情况介绍如下：

●GIF格式。

GIF格式的图像文件只包含256色，因此色彩表现力不够，但图像文件可以很小，压缩效率高。

GIF格式适合于商标、新闻式的标题，还可以形成简单的动画效果。

文件的扩展名为.gif。

●JPEG格式。

照片之类的全彩图像一般都以JPEG格式来压缩，因此JPEG格式常用来保存超过256色的图像。

但JPEG的压缩过程会造成图像数据的损失，是一种“有损压缩”。

不过视觉上一般不易察觉。

文件的扩展名为.jpg或.jpeg。

●PNG格式。

PNG（PortableNetworkGraphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩，却又不造成图像失真的技术。

因此它不仅具有GIF图像格式的大部分优点，而且还支持真彩色。

PNG格式是Macromedia公司倡导的。

　　gif格式动画图片并不过时，而且在网页上随处可见。

GIF文件的图片格式的压缩率比JPEG格式要好（因为它只有256色），而且GIF格式图片透明性特别好，加上节省空间，最适网上使用，这也是GIF格式图片之所以能一直被人们喜用而至今不衰的原因所在。

JPEG格式压缩显示全彩图像的效率最高。

虽然PNG格式兼具JPEG和GIF两种格式的优点，但其压缩率毕竟没有它们好，而且PNG不支持动画应用效果，因此三者都各有优点。

　　有了图像文件之后（至于图像文件怎么建立，不在本教程范围之内，Photoshop、Fireworks、Windows的画图程序是最常见的图像编辑软件，不再细说），就可以使用标记把图像插入到网页中了。

标记的主要语法为：

　　各种属性的解释如下：

●src：

用来设置图像文件所在的路径。

可以是相对路径，也可以是绝对路径。

●alt：

当鼠标放在图片上时，显示的小段提示文字，一般用于说明此图片的标题或主要内容。

当图像文件无法在网页中显示时，在图像的位置也会显示alt所设置的文字。

●border：

图像边框的宽度，单位是像素。

在默认情况下图像无边框，即border=0。

●width和height：

图像的宽度和高度，单位是像素。

在默认情况下，如果改变其中一个值，则另一个值也会等比例进行调整，除非同时设置两个属性。

　　【例1】为网页添加图像。

假设现在有一幅林冲的图片linchong.jpg，它本身宽271像素，高341像素，和本网页在同一个目录下，现在以各种方式显示。

参考代码如下。

--当把鼠标放在下幅图片上时，将显示“林冲图片”-->

--但以下两幅图片则没有设置alt属性-->

--下面故意写错文件名，是为了显示alt属性值-->

　　显示结果如下图所示。

　　可以看出，如果不指定width和height属性值，则图像以它的原始大小在网页中显示；如果同时指定width和height值，则一般图像会不等比例地伸缩；如果找不到文件，或者在网络上文件下载速度过慢，则会显示alt属性的值。

　　必须注意的是，src属性在标志中是必须赋值的。

　　以前，Netscape还为定义了一个lowsrc属性，格式为：

，即src属性用来指定图像，lowsrc用来指定低解析度的图像。

这是因为以前网络速度慢，下载一个高解析度的图像可能需要很长时间，用户会等得不耐烦，因此可以先下载一个很小的低解析度的图像，等高解析度的图像下载完毕，再用它来代替低解析度的图像。

两个图像的尺寸大小最好一样。

　　这个主意的确很妙，可惜并没有写进HTML4.01规范中。

而且随着网速的提高，似乎没有必要把问题复杂化，所以现在并不用了。

7.2　align、hspace和vspace属性

　　标记还有三个比较常用的属性，它们是：

（1）align属性：

指定图像和周围文字的对齐方式。

图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括left、center和right三种，而相对文字对齐方式则是指图像与一行文字的相对位置。

align的取值一共有以下几种。

align的值

含义

top

图像顶部和同行文本的最高部分对齐（可能是文本顶部，也可能是图像顶部）

middle

图像中部和同行文本的中部对齐（通常是文本行的基线，并不是实际的中部）

bottom

图像底部和同行文本的底部对齐

left

使图像和左边界对齐（文本环绕图像）

right

使图像和右边界对齐（文本环绕图像）

texttop

图像顶部和同行中最高的文本的顶部对齐，仅用于Netscape

absmiddle

图像中部和同行中最大项的中部对齐，仅用于Netscape

baseline

图像底部和同行的文本基线对齐，仅用于Netscape

absbottom

图像底部和同行中的最低项对齐，仅用于Netscape

　　【例2】align属性的演示。

猫咪

猫咪

猫咪

猫咪

　　显示结果如下图所示。

　　从图中可以看出，当文本和图片在一行时，图片和文本的几种对齐方式：

top、bottom、middle和left。

这里用到了一个表格，表格的宽度是固定的，并让文本和图片在单元格里演示各种对齐方式。

如果不用表格的话，就不得不用

等标记来换行了，这样网页将会比较长，而且如果缩放浏览器窗口时，可能一行放不下图片和文本，因此图片和文本可能会自动折行，影响演示效果。

（2）hspace属性：

图像与同行文字或对象之间的水平距离，单位是像素。

　　【例3】hspace属性的演示。

　　显示结果如下图所示。

　　从图中可以看出，因为各个图片的hspace属性值不同，所以它们的间距也不同。

　　（3）vspace属性：

图像与上下行文字或对象之间的垂直距离，单位是像素。

　　【例4】vspace属性的演示。

猫科动物形状上十分相似，但

大小不一。

它们可都是敏捷的捕猎好手：

悄悄接近猎物，然后猛扑过去。

它们具有出色的立体视力，善辨颜色，在黑暗中也能看清楚。

在眼睛后部有一个特殊的反光层，称为反光毯，它把光反射回视网膜。

因此，猫科动物在弱光下也能看见。

它们都有夜猎所需的敏感触须。

“小猫”有28个种属。

除体型小外，

跟“大猫”十分相似。

“小猫”会咕噜咕噜叫，但不会吼；“大猫”会吼，但不会咕噜咕噜叫。

家猫的祖先是在欧洲和北非发现的野猫。

美洲山猫和猞猁（山猫）长得特别，尾短，耳有鬣毛。

许多“小猫”像豹猫那样，都有在森林中起伪装作用的斑点。

　　显示结果如下图所示。

　　从图中可以看出，第一幅图片没有设vspace属性值，因此vspace值默认为0；第二幅图片设置的vspace值为40，所以图片和上一行、下一行的距离都是40像素，并且和本行文字也偏离不少。

7.3　实用的图文混排

　　在网页上实现的图文混排效果，一般使用的align=left或right设置，并且还要设置适当的hspace等属性，这样页面比较美观。

　【例5】本例以介绍猫科动物为内容，演示了图文混排的效果。

其中，各段前的两个空格是中文全角空格。

猫科动物

　　猫科动物形状上十分相似，但大小不一。

它们可都是敏捷的捕猎好手：

悄悄接近猎物，然后猛扑过去。

它们具有出色的立