1、第6章第1部分 图像的处理,6.1 背景图案的设定 6.2 网页中插入图形 6.3 img标签属性的使用 6.4 把文本排到图像下面 6.5 超链接与图形的应用 6.6 图像使用原则,上一页,下一页,目 录,结 束,本 节,图像可以使Web页面更加生动美观、富有生机。目前浏览器可以显示JPEG、BMP和GIF图像。其中BMP文件因为存储空间大，传输不够快，所以并不常用。常用的是jpg文件和gif文件。其中GIF图像最多只能使用256种颜色（即只能保存为8位颜色），而JPEG格式可保存为24位，对具有连续色调的图像有最佳效果。不过，GIF图像虽然在图像质量上不及JPEG图像，但其却有所占存储空间
2、小、下载速度快、支持动画效果、背景色可透明等特点。因此应视不同情况而决定应使用哪种格式的图像。对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像。应采用GIF格式，而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。,第6章 图像的处理,上一页,下一页,目 录,结 束,本 节,6.1 背景图案的设定,在网页中除了用一种单一的颜色作背景外，还可以用图像平铺的方法制作背景。图像平铺就是把一张小的图像在屏幕上一个一个地拼接起来，构成一个屏幕的完整的背景。定义背景图像的语法格式如下：其中，“image-URL”指图像的位置。在建立这种形式的背景之前，
3、首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。,上一页,下一页,目 录,结 束,本 节,假设已经有了一个图像文件，怎样才能将它显示在网页上呢？在HTML中使用图像的标签是：。是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。没有结束标签，因为当浏览器只有读取到标签时，会直接显示此标签所代表的图像。1格式：,6.2 网页中插入图形,上一页,下一页,目 录,结 束,本 节,2说明：src属性是用来指出一个图像的文件名，或是指出UR
4、L的路径名。如果图像的显示有问题，应该检查以下内容： 文件名是否书写正确； 图像文件是否是BMP、GIF或JPG格式； 是否已经打开了浏览器的图像下载功能。若上述几项全部正确，图像就能够显示出来。如果在同一个文件中需要反复使用一个相同的图像文件时，最好在标签中使用相对路径名，而不是使用绝对路径名或URL。因为使用相对路径名，浏览器只须将图像文件下载一次，再次使用这个图像时，只要重新显示一遍即可。如果使用的是绝对路径名，每次显示图像时，都要下载一次图像，这将会大大降低图像的显示速度。,上一页,下一页,目 录,结 束,本 节,有些浏览器只支持文本，不支持图像，这时我们可以采取一些其他办法来替代图像
5、。标签中的alt属性能够有所帮助。当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。,6.3.1 图像的取代文字alt,上一页,下一页,目 录,结 束,本 节,标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比。小的图像占的磁盘空间较少，在网上传输的时间比较短。因此，可以充分利用这两个属性，先在网页上建立一个比较小的图像，然后再用这两个属性按比例放大，达到所希望的尺寸。但是有一点要记住，放大后图像中的像素也被按比例放大了，所以放大倍数太大的图像可能会显得有些斑驳模糊。为了使网页产生好的图像效果，应尽可
6、能多试几次，从而得到满意的结果。,6.3.2 设定图像的高度和宽度,上一页,下一页,目 录,结 束,本 节,6.3.3 设定图像的边框border,标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。,上一页,下一页,目 录,结 束,本 节,在标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下：各属性的设置值意义如下表所示：,6.3.4 设定图像的对齐方式align,上一页,下一页,目 录,结 束,本 节,align属性的设置值,上一页,下一页,目 录,结 束,本 节,6.3.5 设定图像与文本之间的距离,标签中的
7、vspacr和hspace属性能够调整图像与其他文本之间的距离，两者均取像素值。设定语法如下：n，m为数值，单位为像素。vspace 调整图像与上下文本的距离hspace 调整图像与左右文本的距离,上一页,下一页,目 录,结 束,本 节,6.4 把文本排到图像下面,如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，普通的换行标签就不起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在标签中使用clear属性来满足这一要求：clear=left 文本在图像下面另起一行从此，用于图像在左边的情况clear=right 文本在图像下面另一行从此，用于
8、图像在右边的情况clear=all 文本在图像下面另起行处一行,上一页,下一页,目 录,结 束,本 节,如果将标签放在和的中间，这个图像将成为一个可点击的图像，产生一个链接。可以看出，这个图像被自动 地加上一个蓝色的边框，成为一个可以点击的图像。这里还可以巧妙地利用alt属性，加入提示信息，当浏览者的鼠标移到图像时，显示提示信息。,6.5 超链接与图形的应用,上一页,下一页,目 录,结 束,本 节,6.6 图像使用原则,在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，
9、甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾：1在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可在可无，对于那些不是必需的图像，要舍得忍痛割爱；2把图像尽量做得小一点，小图像在网上的传输速度比较 快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小，也可以通过减少图像颜色使图像文件减小；,上一页,下一页,目 录,结 束,本 节,3为了使不支持图像的浏览器能看到文本，可以同时使用图像和ALT的纯文本格式，这样，能使更多的用户看全这个网页；4设计一般不要宽于450像素值，因为不少浏览器宽度大约为460像素值，许多显示器也不是彩色的，在设计网页时，这些因素都应该考虑进去。,
