HTML教程 07第七章.docx
- 文档编号:3249828
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:16
- 大小:1.61MB
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属性,格式为:
这是因为以前网络速度慢,下载一个高解析度的图像可能需要很长时间,用户会等得不耐烦,因此可以先下载一个很小的低解析度的图像,等高解析度的图像下载完毕,再用它来代替低解析度的图像。
两个图像的尺寸大小最好一样。
这个主意的确很妙,可惜并没有写进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】本例以介绍猫科动物为内容,演示了图文混排的效果。
其中,各段前的两个空格是中文全角空格。
它们可都是敏捷的捕猎好手:
悄悄接近猎物,然后猛扑过去。
它们具有出色的立
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML教程 07第七章 HTML 教程 07 第七