网页设计图像处理.ppt

第 4 章 图 像 的 处 理 ;图 像;学习目标;4.1 图的基本概念;位图;矢量图;常用Web图像格式;GIF;JPEG;PNG;BMP图像文件因为存储空间大，传输不够快，所以并不常用,常用的是jpg文件和gif文件。 对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像,应采用GIF格式 而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。;4.2 HTML中图片的设置;;注意平铺的效果：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。 尽量不用：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。;img是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。 img没有结束标签，因为当浏览器只有读取到img标签时，会直接显示此标签所代表的图像。 1．格式： img src=image-URL; src属性是用来指出一个图像的文件名，或是指出URL的路径名。 如果图像的显示有问题，应该检查以下内容： ① 文件名是否书写正确； ② 图像文件是否是BMP、GIF或JPG格式； ③ 是否已经打开了浏览器的图像下载功能。 若上述几项全部正确，图像就能够显示出来。 ;图像的取代文字 设定图像的高度和宽度 设定图像的边框 设定图像的对齐方式 设定图像与文本之间的距离 ;img标签中的alt属性：当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。 img src=face.gif alt=MY FACE :-) ;img标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。 示例： image src=fh.jpg height=60 width=80; img标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。 image src=fh.jpg border=5 ; 在img标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下： img align=top、middle、bottom、left或right 各属性的设置值意义如下表所示： ;图像居右;img标签中的vspacr和hspace属性能够调整图像与其他文本之间的距离，两者均取像素值。设定语法如下： img vspace=n hspave=m n，m为数值，单位为像素。 vspace 调整图像与上下文本的距离 hspace 调整图像与左右文本的距离;示例： img src=fh.jpg align=left vspace=10 hspace=20My Face!brIt is alwaysbrsmiling.brHahaha....br;把文本排到图像下面;4）图像与超链接;图像链接的建立：将img标签放在a和/a的中间，这个图像将成为一个可点击的图像，产生一个链接。如：a href=“aaa.html”img src=“bbb.jpg”/a 图像链接提示：利用alt属性，加入提示信息，当浏览者的鼠标移到图像时，显示提示信息。 ;5）图像映射;图像映射;AREA标记符;图像映射示例：; 在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾： 1．在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱； ; 2．把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小，也可通过减少图像颜色使图像文件减小； 3．为了使不支持图像的浏览器能看到文本，可以同时使用图像和ALT的纯文本格式，这样，能使更多的用户看全这个网页；;本章结束