1、第 4 章 图 像 的 处 理,图 像,在网页中，若能适时地插入一些、影像或是将某些文字叙述改为图片来表示，不但使得该网页一目了然，而且生动活泼。,学习目标,理解矢量图和位图的区别，了解常用的Web图像格式。 理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。,4.1 图的基本概念,位图,位图是指用像素一点一点地描述图像的一种图像类型。 常用的位图编辑软件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等,矢量图,矢量图形是指用线条和填充色等数学信息来描述图像的一
2、种图像类型。 制作矢量格式图像的软件有 Freehand、Illustrator、CorelDraw、AutoCAD 。,常用Web图像格式,GIFJPEGPNG,GIF,GIF（Graphics Interchange Format，图形交换格式）格式的特点： 无损压缩 最多256色 能够使用透明色 有所占存储空间小、下载速度快、支持动画等特点,JPEG,JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 24位颜色 可以控制压缩比 图像质量好，对具有连续色调的图像有最佳效果,PNG,PNG（Portable Network Gr
3、aphics，可移植的网络图形）格式的特点： 无损压缩 24位颜色 支持透明度,BMP图像文件因为存储空间大，传输不够快，所以并不常用,常用的是jpg文件和gif文件。 对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像,应采用GIF格式 而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。,图像使用说明,4.2 HTML中图片的设置,在网页中可以用图像平铺的方法制作背景。 定义背景图像的语法格式如下：其中，“image-URL”指图像的位置。,1）背景图案的设定,注意平铺的效果：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去无痕
4、迹地连接在一起，或者能否产生一种较好的背景效果。 尽量不用：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。,说明,是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。 没有结束标签，因为当浏览器只有读取到标签时，会直接显示此标签所代表的图像。1格式：,2）网页中插入图形,src属性是用来指出一个图像的文件名，或是指出URL的路径名。 如果图像的显示有问题，应该检查以下内容： 文件名是否书写正确； 图像文件是否是BMP、GIF或JPG格式； 是否已经打开了浏览器的图像下载功能。 若上述几项全部正确，图像就能够显示
5、出来。,说明,图像的取代文字 设定图像的高度和宽度 设定图像的边框 设定图像的对齐方式 设定图像与文本之间的距离,3）img标签属性的使用,标签中的alt属性：当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。 ,图像的取代文字alt,标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。 示例： ,设定图像的高度和宽度,标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。 ,设定图像的边框border,在标签中使用align属性，可控制图像相对于文字
6、基准线（文字中线）的水平对齐方式，其语法如下：各属性的设置值意义如下表所示：,设定图像的对齐方式align,align属性的设置值,标签中的vspacr和hspace属性能够调整图像与其他文本之间的距离，两者均取像素值。设定语法如下：n，m为数值，单位为像素。 vspace 调整图像与上下文本的距离 hspace 调整图像与左右文本的距离,设定图像与文本之间的距离,示例： My Face! It is always smiling. Hahaha,设定图像与文本之间的距离,把文本排到图像下面,如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，普通的换行标签就不起作用
7、了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在标签中使用clear属性来满足这一要求： My Face! It is always smiling. Hahaha 文本在图像下面另起行处一行,4）图像与超链接,图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。 图像映射（热点）：是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。,图像链接的建立：将标签放在和的中间，这个图像将成为一个可点击的图像，产生一个链接。 图像链接提示：利用alt属性，加入提示信息，当浏览者的鼠标移到图像时，显示提示信息。,超链接与图形,5）图像
8、映射,什么是图像映射 在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。 右图中的汽车图像映射包括三个热点，每个热点均链接到一个单独的页面，该页面提供有关此特定功能（如挡风玻璃、前灯、或车轮和轮胎）的更多信息。,图像映射,图像映射的使用 （1）定义映射图 （2）使用映射图 定义映射图：标记符和标记符 使用映射图：,AREA标记符,Shape属性（rect、circle、poly） Coords属性 Href属性,图像映射示例：,图像映射示例请单击以下图像中的不同区域，以便跳转到不同的文件,在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往
9、往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾：1在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；,6）图像使用原则,2把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小，也可通过减少图像颜色使图像文件减小；3为了使不支持图像的浏览器能看到文本，可以同时使用图像和ALT的纯文本格式，这样，能使更多的用户看全这个网页；,图像使用原则,4.3 在FrontPa
10、ge中 对图片进行处理,4.3.1 如何编辑图片,在网页上适当插入一些图片，会使网页比较活泼。 一般而言，图片的文件格式有很多种，但是在网页一般使用以下两种： GIF格式：非失真式压缩； JPEG格式：失真式压缩。 （BMP点阵式文件，由于没有压缩文件太大，所以在网络上很少使用。）,1）插入图片的方式,在网页中插入的图片可由下列几种方式获得： （1）直接在自己的网站内挑选。 （2）在光盘中的图库或Microsoft剪贴画中挑选。 （3）在万维网（WWW）上挑选。,2）实 作,插入一张图片到网页中指定位置。 （1）在“网页”视图模式下，移动光标单击要插入图片的位置，插入点移到此处。 （2）执行菜
11、单栏的“插入/图片/来自文件”命令，出现“图片”对话框。,2）实 作,（3）在“图片”对话框中，由文件列表内挑选需要的图案。若想由其他来源插入图片，可单击“取消”按钮。 （4）选定图片文件，单击“确定”按钮，图片就插入到插入点光标处。,3）如何编辑图片,1）图片移动与复制 移动光标到图片上单击鼠标左键选取，使图片四周出现8个小控制点，然后在图片内按住鼠标左键拖曳鼠标，此时图片跟着移动，将图片拖曳到想放置的地方。拖曳时，若按住Ctrl键，表示要做图片复制的操作。,3）如何编辑图片,2）图片缩放 移动光标到图片上单击鼠标左键选取，使图片四周出现8个小控制点，将光标移到一个控制点上，依照箭头方向按住
12、鼠标左键并拖曳鼠标，调整图片的大小，此方式属于粗调。,3）如何编辑图片,2）图片缩放 细调做法：在图片上单击鼠标右键弹出快捷菜单，选择“图片属性”选项，弹出“图片属性”对话框，切换到“外观”标签页，直接在“大小”框架中按“宽度”和“高度”的上下按钮调整图形大小。,3）如何编辑图片,2）图片缩放,4.3.2 图片工具栏的使用,1）图片工具栏的说明,在将图片插入到网页指定位置后，在FrontPage的“网页”视图模式中会出现“图片”工具栏，通过这些工具可以对目前选取的图片做相应的编辑。 当选取图片时，若“图片”工具栏没有出现，可通过菜单栏的“查看/工具栏”命令使其显现。,1）图片工具栏的说明,2）
13、在图片上面加文字,（1）选取图片，此时供选取的图片四周出现8个小控制点。 （2）单击“图片”工具栏的文本按钮 ，在图片处会出现一个文本框，将文字键入文本框中再将鼠标移到文本框处单击即完成。,3）设置透明颜色,在图库中载入一个图片，插入网页中，但若图片的底色和网页的背景色不一样，这时可以使用“图片”工具栏上的 设置透明色按钮，把图片的背景色去除变成透明。 （1）要将图所示图片的灰底色去掉，先用光标选取待处理的图片。 （2）点取 按钮，然后在图片的背景图上点一下，图片的背景色就会消失。,4）裁剪图片 将图片不要的部分剪掉,按下剪裁图片 按钮，图片内出现剪裁框，控制剪裁框以调整剪裁区域的大小。,5）
14、建立缩略图 降低网页下载时间,（1）选取要制作自动缩略图的图片。 （2）按下 自动缩略图按钮，所选取的图片自动缩小，还可以点击图片的小控制点拖曳鼠标改变图片的大小。 （3）浏览时，在缩小图上单击会出现原图,6）图层 改变图片的层次,（1）先选取要改变层次的图片。 （2）按下 按钮将图片上移一层； 按钮将图片下移一层，如图所示将狐狸图图片移至背景之后，让背景覆盖了。,4.3.3文字与图片如何对齐,有时在文件中插入图片后，发现文字和图片在排列上似乎显得不搭配，如图所示，这时可以通过FrontPage的“图文对齐模式”，将文字和图片的搭配调到最适当。,文字与图片如何对齐,（1）选取图片。,文字与图片
15、如何对齐,（2）执行菜单栏的“格式/属性”命令。,文字与图片如何对齐,（3）在“图片属性”对话框中，选取“外观”标签页。,4.3.4 如何为网页加背景图,如何为网页加背景图,（1）执行菜单栏的“文件/属性”命令。,如何为网页加背景图,（2）在上一步弹出的“网页属性”对话框中，选取“背景”标签页。,如何为网页加背景图,（3）选取背景色，按住“背景”的下拉按钮，弹出颜色列表，选择所需颜色。,如何为网页加背景图,（4）如果想套用其他网页图片当背景，可选中“背景图片”前面的复选框，再按“浏览”按钮选取图片。,如何为网页加背景图,图 2-59,1）如何将背景图淡化,颜色太鲜艳的图片不适合当背景图（底图）
16、，不过可以通过“图片”工具栏上的“颜色”按钮下的“冲蚀”选项，将该背景图的颜色调淡。其操作如下：（1）首选要选择背景图片文件（这里为“beijing”）。当按下“打开”按钮后，图案会贴满网页。,如何将背景图淡化,（2）执行菜单栏的“视图/工具栏/图片”命令，出现“图片”工具栏。,如何将背景图淡化,（3）由于背景颜色太鲜艳了，使得前景图看不清楚，选择 “图片”工具栏上的“颜色”按钮下的“冲蚀”选项，就可将背景图的颜色变淡。,2）如何使背景图 不随文字滚动,有一种背景特殊效果，会让背景图不会跟文字一起滚动，就好像水印一般印在背后。其操作步骤如下： （1）选择“文件/属性”，在“网页属性”对话框中，
17、选取“背景”标签页。 （2）单击“浏览”按钮选取图片文件后，选取“水印”前的复选框，将所选的背景图变成水印效果。,4.3.5 图片超链接,图片超链接与文字超链接的使用方式基本相同，其差别只在于做文字超时第一步是将要做超链接的文字选取，同样的，图片超链接的第一步必须选取该图片，其周围会出现8个控制点，其他步骤都跟文字超链接的相同。,图片超链接,图片实作： 还是在前面制作的网页基础上进行说明。 （1）在前面制作的网页上，单击第一个图片，图片上会出现8个控制点，说明被选中。然后单击“常用”工具栏中插入超链接按钮图标 ，打开“插入超链接”对话框。,图片超链接,（2）直接在“插入超链接”对话框的“地址”
18、输入框中键入“http:/”，单击“确定”按钮完成超链接设置。,图片超链接,（3）若要选择其他链接方式，其操作步骤与文字超链接方式相同。,图片超链接,注意：如何消除图片超链接蓝色外框。默认值中图片加入超链接之后会出现蓝色外框，以方便用户在浏览时能分辨出此图片有超链接，不过如果若想要取消蓝色外框，可选取该图片，单击鼠标右键执行“图片属性”命令，在“外观”标签页的“边框粗细”一栏中输入“0”就可以了。,4.3.6 如何制作图像映射,“图像映射”(Image Map)的制作方式和“文字超链接”或“图片超链接”很类似；后者将一行文字或一张图片视为一个对象，且只能做成单一链接。而“图像映射”，它允许在同
19、一张图片上按需要框出不同形状的封闭区域，形成多个热点(Hotspot)，每个热点都可以设一个超链接。,如何制作图像映射,这里以一张包含有台湾省地图的网页为例，当在台北区域内单击，就会链接到另一张台北地形说明网页，再单击台中亦是如此。,如何制作图像映射,图像映射实作导入地图网页，将台北地区框起来设置成热点，超链接至一个HTML文件。 （1）首先选取要制作“图像映射”超链接的图案，此时该图像四周会出现8个控制点。,如何制作图像映射,（2）当使用光标点选图片时，在屏幕上会出现“图片”工具栏，若没有出现此工具栏，可执行菜单栏的“视图/工具栏/图片”命令弹出来。,如何制作图像映射,表 4-3,如何制作图
20、像映射,（3）接下来利用“图片”工具栏的 多边形工具，将台北区框起来建立热点超链接作用区。,如何制作图像映射,（4）当框住台北区的边框时，必须将起点和终点重合在一直，才可以放开鼠标，此时会出现一个“插入超链接”对话框，后续操作步骤同上述超链接的设置步骤，由目前网站中选取“Taipei.htm”网页，然后按“确定”按钮，完成图像映射设置。,如何制作图像映射,（5）接下来保存后再使用IE浏览器浏览一次。,如何制作图像映射,注意： （1）如果使用图像链接工具没有画好，想重画链接作用区，先用鼠标选取该链接作用区，然后按Del键删除即可。,如何制作图像映射,注意： （2）图像映射需要修改时，可按下图片工具栏中的 按钮，将图像映射隐藏，只显现框出的作用区，可轻易看出是否有封闭，以方便修改。,本章结束,
