搜索
第4章图像的处理学习目标理解矢量图和位图的区别，了解常用的Web图像格式。理解Web图像的处理流程，初步掌握基本的Web图像处理操作。掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。矢量图矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。制作矢量格式图像的软件有Freehand、Illustrator、CorelDraw、AutoCAD。位图位图是指用像素一点一点地描述图像的一种图像类型。常用的位图编辑软件有Fireworks、Photoshop、ImageReady、PhotoImpact等常用Web图像格式GIFJPEGPNGGIFGIF（GraphicsInterchangeFormat，图形交换格式）格式的特点：无损压缩最多256色能够使用透明色有所占存储空间小、下载速度快、支持动画等特点JPEGJPEG（JointPhotographicExpertGroup，联合图形专家组）格式的特点：有损压缩24位颜色可以控制压缩比图像质量好，对具有连续色调的图像有最佳效果PNGPNG（PortableNetworkGraphics，可移植的网络图形）格式的特点：无损压缩24位颜色支持透明度•BMP图像文件因为存储空间大，传输不够快，所以并不常用,常用的是jpg文件和gif文件。•对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像,应采用GIF格式•而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。图像使用说明背景图案的设定在网页中可以用图像平铺的方法制作背景。定义背景图像的语法格式如下：bodybackground=image-URL其中，“image-URL”指图像的位置。说明：•注意平铺的效果：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。•尽量不用：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。•img是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。•img没有结束标签，因为当浏览器只有读取到img标签时，会直接显示此标签所代表的图像。1．格式：imgsrc=image-URL网页中插入图形2．说明：src属性是用来指出一个图像的文件名，或是指出URL的路径名。如果图像的显示有问题，应该检查以下内容：①文件名是否书写正确；②图像文件是否是BMP、GIF或JPG格式；③是否已经打开了浏览器的图像下载功能。若上述几项全部正确，图像就能够显示出来。小技巧：如果在同一个文件中需要反复使用一个相同的图像文件时，最好在img标签中使用相对路径名，而不是使用绝对路径名或URL。因为使用相对路径名，浏览器只须将图像文件下载一次，再次使用这个图像时，只要重新显示一遍即可。如果使用的是绝对路径名，每次显示图像时，都要下载一次图像，这将会大大降低图像的显示速度。img标签属性的使用图像的取代文字设定图像的高度和宽度设定图像的边框设定图像的对齐方式设定图像与文本之间的距离img标签中的alt属性：当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。imgsrc=face.gifalt=MYFACE:-)图像的取代文字altimg标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。示例：imagesrc=fh.jpgheight=60width=80设定图像的高度和宽度设定图像的边框borderimg标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。imagesrc=fh.jpgboder=5在img标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下：imgalign=top、middle、bottom、left或right各属性的设置值意义如下表所示：设定图像的对齐方式alignalign属性的设置值图像居右right图像居左left下对齐bottom居中对齐middle上对齐top对齐方式设置值设定图像与文本之间的距离img标签中的vspacr和hspace属性能够调整图像与其他文本之间的距离，两者均取像素值。设定语法如下：imgvspace=nhspave=mn，m为数值，单位为像素。vspace调整图像与上下文本的距离hspace调整图像与左右文本的距离设定图像与文本之间的距离示例：imgsrc=fh.jpgalign=leftvspace=10hspace=20MyFace!brItisalwaysbrsmiling.brHahaha....br把文本排到图像下面如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，普通的换行标签br就不起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在br标签中使用clear属性来满足这一要求：imgsrc=face.gifalign=leftMyFace!brItisalwaysbrclear=allsmiling.brHahaha....br文本在图像下面另起行处一行图像与超链接图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。图像映射（热点）：是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。图像链接的建立：将img标签放在a和/a的中间，这个图像将成为一个可点击的图像，产生一个链接。图像链接提示：利用alt属性，加入提示信息，当浏览者的鼠标移到图像时，显示提示信息。超链接与图形客户端图像映射什么是客户端图像映射在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。右图中的汽车图像映射包括三个热点，每个热点均链接到一个单独的页面，该页面提供有关此特定功能（如挡风玻璃、前灯、或车轮和轮胎）的更多信息。客户端图像映射客户端图像映射的使用（1）定义映射图（2）使用映射图定义映射图：map标记符和area标记符使用映射图：imgusemap=#映射图名称AREA标记符Shape属性（rect、circle、poly）Coords属性Href属性示例：HTMLHEADTITLE图像映射示例/TITLE/HEADBODYMAPname=mymapAREAhref=file1.htmshape=rectcoords=“10,10,50,50AREAhref=file2.htmshape=rectcoords=“50,50,100,100/MAPP请单击以下图像中的不同区域，以便跳转到不同的文件/PPIMGsrc=“fh.jpgusemap=#mymap/P/BODY/HTML在FrontPage2003中创建图像映射在“页面”视图中文档窗口的底部，单击“设计”。单击要为其添加热点的图片。如果“图片”工具栏被隐藏，请右键单击该图片，然后在快捷菜单上单击“显示图片工具栏”。在“图片”工具栏上，单击“长方形热点”、“圆形热点”或“多边形热点”。在FrontPage2003中创建图像映射在该图片上，执行下列操作之一：绘制圆形单击放置圆心，然后拖动鼠标至所需大小。绘制长方形单击以放置一个顶点，然后拖动鼠标至所需大小。绘制多边形单击以放置多边形的每个顶点，然后双击完成该形状。释放鼠标按钮后，即会打开“插入超链接”对话框。查找并选择希望有热点与之链接的文件，然后单击“确定”。图像使用原则在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾：1．在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；2．把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小，也可通过减少图像颜色使图像文件减小；3．为了使不支持图像的浏览器能看到文本，可以同时使用图像和ALT的纯文本格式，这样，能使更多的用户看全这个网页；本章结束