第4章 图片.docx
《第4章 图片.docx》由会员分享,可在线阅读,更多相关《第4章 图片.docx(13页珍藏版)》请在冰豆网上搜索。
第4章图片
第四章图片
可以在网页上使用图片显示信息或公司徽标。
建立个人主页时,也可将照片扫描到网页中以表现个人形象:
企业也可将产品的照片放在网页中以宣传自己的产品。
比起文字,图片具有很好的装饰效果。
另外,图片对于导航按钮等项目也很有用。
本章主要介绍在网页中使用图片的技巧,内容包括:
基本知识:
减少图片的下载时间:
在网页中使用图片:
编辑图片:
设置图片格式:
图像映射:
4.1基本知识
下面介绍在网页中布置图片的方式及图片格式类型。
4.1.1网页中布置图片的方式
在MicrosoftFrontPage中,可以使用多种方法布置Web页上的图形,
4.1.2图片格式的类型
图片文件的格式有几十种,如GIF,JPEG,BMP,EPS,PCX,PNG,FAS,TGA,TIFF,WMF等。
而网页中常用的格式为GIF和JPEG.
GIF图片:
其全称是GraphicalInterchangeFormat。
GIF图片是网页中使用最多的一种图片,它包含多达256种颜色。
其突出优点是采用无损耗压缩方案,图片压缩后不会有细节上的损失。
另外,它支持透明特性,其背景可以是透明的,图片的背景和网页北景色相同,使网页看起来非常协调。
GPEG图片:
其全称为JoinPhotographicExpertsGroup.JPEG格式常用于包含成千上万或上百万种颜色的相片实景图形。
GPEG图形很有用,因为可以通过更改图形质量来控制文件的压缩比例。
设置的质量越低,压缩比例就越高,这样,文件就变小了。
此外,网页中还可以添加下列文件格式的图片:
BMP:
Microsoftwindows环境自带的位图格式。
图片由一系列小点组成,支持高达24位的图像。
TIFF:
带标记的图像文件格式。
高分辨率、基于标记的文件格式,用于数字图形之间的转换。
TGA:
TruevisionTargaGraphicsAdaptor文件格式。
支持1到32位的图像和专业功能。
RAS:
Raster格式。
稍稍微太缩,支持多达36位图像。
EPS:
内嵌的PostScript文件格式。
PostGraphic文件格式的扩展,使PostScript图形文件可以合并到其他文档。
PNG:
可移植网络格式,GIF(该格式支持在包含上千或上百万种颜色的图片中使用透明色)格式的代替形式。
不过,有的Web浏览器如果没有特殊的插件就不能显示PNG图形。
WMF:
MicrosoftWindows图元文件格式。
支持位图、向量和内嵌的PostScript数据。
在网页上添加非GIF或JPEG格式的图片然后将其保存时,MicrosoftFrontPage会自动将少于8位颜色的图片转换为GIF格式,将多于8位的图片转换为JPEG格式。
在网页中使用图片主要应考虑两方面的总是:
一是下载速度的问题,如果图片较大,下载时间就很长,下载一幅图片往往要几分钟甚至更长,这种网页显示没人愿意浏览;第二个就是颜色问题。
当然颜色越丰富效果越好,网页也越漂亮。
但颜色值越多,图片文件就越大,下载速度就越慢。
所以一般若无特殊需要,更好用256的GIF色图片。
若有特殊的颜色要求,则最好使用JPEG图片。
4.2减少图片的下载时间
图片可以使网页作得很漂亮,但也给使用图片的网页带来一些负面影响,如增加网页大小,使网页的下载很慢等。
将图形(例如图像、动画和视频)添加到Web站点上时,Web站点的大小将会迅速增加。
考虑到要添加图形大小、质量、类型、和数量很重要,尤其是当Internet服务提供商对Web站点大小有所限制时。
下载图形可能需要很长的时间,尤其是对于那些使用低速的Internet连接的站点访问者。
下面的方法可以使站点访问者能够较容易地下载包含图形的网页:
调整图形大小:
可以通过更图形的高度和宽度属性来调整图形大小,也可在网页上直接调整其大小。
调整图形大小会更改HTML标记,该标记用来告诉Web浏览器如何显示图形。
而实际的图形文件并不会更改。
如果只调整图形的大小,则图形在站点访问者的屏幕上会显示在较小的区域中,但是其文件大小和下载时间并不改变。
若要减小图形的文件大小及其下载时间,需要在调整其大小后对其重新取样。
重新对图形取样:
重新对图形取样将更改图形的像素大小,以便与图形当前的显示大小相匹配。
重新对图形取样时,文件大小会减少,从而与较小的尺寸相匹配。
将图形转换为JPEG格式并降低质量设置时,文件的压缩率会弱加,而文件大小会减小。
降低图形分辨率:
如果图形分辨详细较高,请道德生成该图形的一个副本,然后通过使用绘图程序,来降低其分辨率。
下载图形的最终版本时,显示它的低分辨率版本:
在绘图程序中,创建图形、视频或动态GIF的低分辨率版本。
方法是在绘图程序中打开图形,并降低图形的颜色深度。
为低分辨率版本的图形指定的颜色越少,其在Web浏览器中显示的速度就越快,因为低分辨率图形是用做高分辨率图形的占位符的,所以不应该更改图形的高度或宽度。
然后将MicrosoftFrontPage 设置为在下载原始图形的过程中显示此图形的低分辨率版本。
虽然该选项不会减少图形下载所需的时间,但是却可以让站点访问者在下载时可以看到一些内容。
创建缩略图:
缩略图是能快速下载的图形的缩小版本。
通过查看缩略图,站点访问者可决定是否要下载图形的完整版本。
使用“自动缩略图”功能可以自动创建缩略图,其中包含指向原始图形的超链接。
显示ALT文字:
可选文字或ALT文字是图形下载过程中替代图形显示的文本。
它可以使点站访问者了解将要看到的内容。
将鼠标指针移到该 图形上可以看到其ALT文字。
4.3在网页中的使用图片
在FrontPage2002网页中,不仅可以插入FrontPage 自带的剪贴画,还可以插入来自Internet的图片,还能对插入的图片进行编辑等操作,从而使网页达到图文并茂的效果。
4.3.1手稿剪贴画
FrontPage 自带了许多图片库存,这些图片大多数以卡通或漫画形式存在,而且都是GIF图片,它们称为剪贴画,若要在网页中插入剪贴画,可按以下步骤进行:
(1)在网页中要插入剪贴画的位置单击定位光标。
(2)单击插入菜单中图片子菜单的剪贴画命令。
(3)系统随之在窗口右侧显示插入剪贴画任务窗口,在其中搜索文字框中键入描述所需剪贴画的词或短语后单击搜索按钮。
(4)在结果列表中,单击要插入的剪贴画。
(5)若要执行其他搜索,请单击结果列表下方的修改。
(6)单击任务窗口底部的剪辑管理器,可以分类查看整个剪辑管理器中的剪贴画集。
4.3.2插入来自文件的图片
若要在网页中插入来自文件的图片,可按以下步骤:
(1)在网页中要插入图片的位置单击定位光标。
(2)单击插入菜单中的图片子菜单的来自文件命令或单击常用工具栏中的插入文件中的图片按钮。
打开图片对话框。
(3)在其中的文件类型下拉列表框中选择要插入图片的文件类型,通常为所有图片在查找范围下列表框中选择包含所需图片文件的文件夹。
(4)选中其个图片文件后,单击确定按钮或直接双击该图片文件,即可将该图片插入到网页中。
(5)将网页文件保存起来,然后单击常用工具栏中的在浏览器中预览按钮,可在浏览器中浏览其效果。
4.3.3 从全球广哉网上的站点添加图片
可以从全球广域网上的站点添加图片。
如果选择保存到的站点,图片能添加到站点中。
可以选择不将图片保存到站点,那么对此图片的引用就会创建到网页中。
然而,如果此图片被从它所在的Web站点上删除,将不会在网页上看到它。
若要从全球广域网上的站点添加图片,可按以下步骤进行:
(1)在网页视图模式下,将手稿点放置到插入图片的位置。
(2)单击常用工具栏上的插入文件中的图片按钮,打开图片对话框。
(3)在对话框里的URL文本框中,键入想要插入的图片的正确位置和名称。
(4)如果使用的是MicrosoftInternetExplorer 4.x或更高版本,用鼠标右键单击图形,再单击快捷菜单上的复制。
切换回MicrosoftFrontPage。
再次用鼠标右键单击,并从快捷菜单上选择粘贴把图形直接添加到网页中。
这会在网页上插入对Web站点上的图片的引用。
(5)如果使用的是NetscapeNavigator4.x 或更高版本,请用鼠标右键单击图形,再单击快捷菜单上的复制图像位置,并切换回FrontPage,然后粘贴覆盖URL框中的文本。
注意:
1保存网页时,MicrosoftFrontPage会提示把图形保存到Web站点。
使用256色或颜色清晰度更低的图形将会自动转换为GIF,而所有其他图形都会转换为JPEG。
2可以选择不将图形保存到Web站点,在这种情况下,会在网页上创建一个对其他Web站点上的图形的引用。
不过,如果该图形从其他Web站点中删除了,就再也无法在自己的网页中看到该图形。
4.3.4将图形导入到站点中
将图片导入到站点中,使得可以快速访问所需文件。
举例说,可以通过将图片添加到网页后保存网页的方式,将图片一张张地添加到站点中。
然而,若知道将会用到某个图片组,则可将他们全部一次性导入到站点中所指定的文件夹。
然后,当想要将图片添加到网页中时,能很快地访问它,而不必到文件系统中去查找它。
若要将图形导入到站点中,可按以下步骤进行:
(1)在Windows的资源管理器中,选择想要导入的图形。
可以通过单击第一个文件,然后按下Shift键并单击列表中的最后一个文件来选择文件列表或者分别选择各个文件可按下Ctrl键不放,然后单击要选择的文件。
(2)单击文件菜单中的导入命令,打开导入对话框,
(3)单击对话框中的添加文件或添加文件夹按钮。
(4)在随之打开的对话框里,选择要到导入的文件或文件夹后单击打开按钮。
(5)设置完成后单击确定按钮即可。
提示:
也可以用单击并托运文件的方式将图片导入到文件夹列表或FrontPage 的内容窗口中。
4.4 编辑图片
使用图片工具栏可以非常方便地编辑图片。
4.4.1图片工具栏
插入在网页中的图片可使用图片工具栏进行编辑,不过,在编辑前一定要先选定该图片。
如果图片工具栏没有显示出来,可单击视图菜单中工具栏子菜单的图片命令进行打开,图片工具栏上的按钮从左至右依次是:
插入文件中的图片按钮:
单击该按钮可在文档中插入来自文件的图片。
文本按钮:
在图片中加入文本,此操作的前提是图片必须是GIF格式,如果不是,FrontPage 会自动将其转换为GIF格式
自动缩略图按钮:
用于将选中的图片生成一个图片的缩略图,并在缩略图中建立一个链接到这幅图片的超链接。
绝对定位按钮:
在定义层时用于设置图片在当前层的绝对位置。
上移一层按钮:
在定义层时用于将图片上移一层。
下移一层按钮:
在定义层时用于将图片下移一层。
向左旋转按钮:
将图片向左旋转90度。
向右旋转按钮:
将图片向右旋转90度。
水平翻转按钮:
将图片沿垂直线对称翻转。
垂直翻转按钮:
将图片沿水平线对称翻转。
增加对比度按钮:
增加图片前景色和背景色的对比度。
降低对比度按钮:
减低图片前景色和背景色的对比度。
增加亮度按钮:
增加图片的明亮度。
降低亮度按钮:
减低图片的明亮度。
裁剪按钮:
单击此按钮可对图片进行剪裁,从而可以删除不想用到的图片区域。
裁剪也可以改变图片的缩放比例。
线型按钮:
单击该按钮可设置图片的线型。
设置图片格式按钮:
单击该按钮可设置处处的格式。
设置透明色按钮:
单击该按钮可将图片中的某种颜色变成透明色,从而使图片中设置透明色的区域与页面浑然一体。
颜色按钮:
单击该按钮,会打开一个菜单,其中有自动、灰度、黑白、冲蚀命令选择某个命令可将图片设置成所需要的颜色,便如黑白可将彩色的图片转换为黑白图片,冲蚀可使图片冲蚀,从而减少图片的对比度并且增加其亮度。
当想要创建一个水印或使用图片作为背景时,这个功能是很有用的。
凸凹效果按钮:
将图片变为3D(三维)图片,也就是将图片边界凹凸化。
重新取样按钮:
当图片过大或过小时,需要对图片重新进行调整,调整之后再对图片重新进行采样,即可获得调整后的图片数据。
选定按钮:
用于选定图片。
长方形热点按钮:
用于在图片中定义长方形热点,然后可以在长方形热点上定义超链接。
圆形热点按钮:
用于在图片中定义圆形热点,然后可以在圆形热点上定义超链接。
多边形热点按钮:
用于在图片中定义任意多边形热点,然后可以在多边形点上定义超链接。
突出显示热点按钮:
用于在图片中突出显示热点。
还原按钮:
取消对图片各种编辑操作,恢复为原样。
4.4.2使用图片工具栏编辑图片
若要使用图片工具栏编辑图片,可先单击图片使其处于先中状态,然后根据需要单击工具栏上的相应按钮即可。
可以将下列的一种或多种效果应用于图形中。
裁剪:
通过裁剪图形,可以删除图形中不想使用的区域,如图4.10所示。
裁剪也允许更改图形的比例例如,可以将图形裁剪得更短。
添加文本:
可以在图形顶端添加文本,所添加的文本不会影响Web站点中文件的大小。
亮度和对比度:
可以提高或降低图形的亮度,也可以提高或降低图形中颜色的对比度,例如,使图形对比度加深。
应用灰度或冲蚀效果:
可以把图形转换为黑白色(灰度),也可以冲蚀图形的颜色,这样会降低图形的对比度并提高其亮度。
要创建水印或将图片用做背景时,这个功能是很有用的。
边框:
可以为图形添加凹凸效果边框,使其具有凸起的三维外观。
如果要将图形用做按钮,这个功能将非常有用。
也可以在图形周围添加一到四个边的边框,并选择其样式和颜色。
如果图形有默认超链接,边框将会具有为超链接指定的颜色。
设置透明色:
可以选择图形中的一种颜色,使其为透明,然后无论该颜色出现何处,背景都可以透过该颜色显示出来。
图形只能有一种透明色。
如果为一个已经指定了透明色的图片选择透明色,则原始的透明色就不会再是透明的。
旋转和翻转:
可以将图形顺时针或逆时旋转90,也可以将图形水平翻转(将图形上下倒置)或垂直翻转(生成一个镜像图像,)
注意:
如果尝试了一些效果之后,发现不喜欢所做的更改,则总可以将该图形还原到其上次保存的版本。
4.4设置图片格式
插入到网页中的图片可以进行边框、大小、对齐方式及间距等属性的设置。
4.5.1设置图片边框
可以将边框添加到图片上。
若为图片设置默认超链接,MicrosoftFrontPage 会自支架 在图片上放入边框,作为一个提示站点访问者可以单击图片的方法。
可以设置边框的宽度或若不想要边框的话,可以删除它。
边框认为黑色,然而,图片有默认的超链接,边框将是为超链接指定的颜色(这些颜色是在网页属性对话框中设置的)
若要设置图片的边框属性,可按以下步骤进行:
(1)在网页视图模式下,在图片上单击鼠标右键,并在弹出的快捷菜单上单击图片属性命令,打开图片属性对话框。
(2)在外观选项卡中的边框粗细微调框中,以像素为单位键入或调整数值给出边框的宽度。
(3)若要删除边框,可在边框粗细微调框中键入0。
(4)设置完成后单击确定按钮即可。
4.5.2设置图片大小属性
在FrontPage中,当在网页中加入一幅图片后,图片大小默认为其原来的大小。
可以通过改变图片的高度和宽度属性来调整图片大小,或者在网页上直接高速其大小,
高速图片大小会更改HTML标记符(用来告诉WEB浏览器如何显示图片),实际的文件并不会更改。
例如,可减少含有大图片的网页的下载时间。
若只调整图片大小,它将会在站点访问者的屏幕上显示出较小的区域,但其文件大小和更改的。
要减少图片的文件大小和下载时间,重置它的大小后还需要进行重新取样。
若要设置图片大小 属性,可按以步骤进行:
(1)在网页视图模式下,在图片上单击鼠标右键,并在弹出的快捷单击图片属性命令,打开图片属性对话框。
(2)选中外观先项卡中的指定大小大小选框。
(3)若要求保持图片的高度与宽度比例,可选中保持纵横比复选框。
若在选择该复选取框后在宽度或高度框中输入像素值,MicrosoftFrontPage会自动更改其他框中的数值以保持图形的比例。
(4)指定是否要更改大小(像素值或百分比),然后在宽度和高度框中输入数值。
若指定按百分比缩放,则对于不同大小的浏览器,总可以全部看到或部分看到图片的外观。
这对于一些网页十分有用,比如对于不同分辨率的浏览器窗口,不管是800*600的窗口还是1024*768的窗口,同一个网页在它们之中的浏览效果都相同。
(5)设置完成后单击确定按钮即可。
提示:
也可以直接调整图形大小。
单击图形使其周围出现控制点,然后将鼠标指针移到控点上按住左键拖动可调整图片大小。
在调整图片大小时要保持其纵横比,可拖动角部的控点。
拖拉侧边控点时,该图形将会变形。
4.5.3设置图片的对齐方式和间距
可以通过设置图片的对齐方式、水平及垂直音距来指定图片在当前网页上的出现方式。
例如,可以选择一个对齐方式的先项,将图片放置在网页右边,而文本放在左边。
或者将水平间距设置为10也就是在图形的左边和右边设置10像素宽的边距。
若要设置图片的对齐方式和间距,可按以下步骤进行:
(1)在网页视图模式下,在图片上单击鼠标右键,并在弹出的快捷菜单上单击图片属性命令,打开图片属性对话框。
(2)在外观选项卡的对齐方式下拉列表框里,单击某先项来指定图形在网页上的对齐方式。
例如,要使图片对齐网页左边,而文本接在右边,可先中左对齐。
(3)在水平间距框中,输入想要多少像素的间距来显示在图形的左边和右边。
在垂直间距框中,输入想要多少像素的间距来显示在图形的上边和下边
(4)设置完成后单击确定按钮即可。
4.5.5设置图片别名
经常上网的人会发现,当网页中一幅图片下载时间较长时,图片所在处会出现一些文字。
这些文字可能是图片本身的文件名称,也可能是别的提示信息,它就是图片的别名,也就是所说的ALT文本。
图片的别名无论图片下载时间长短都会出现在屏幕上,只不过时间太短时不容易看清楚。
图片别名一般用于存放一些提示提示信息,如图片的文件名、图片的大小、文件类型等。
下面给出一个设置图片别名的实例,其操作步骤如下:
(1)新建一个空白网页文件,将光标定位在网页的开始位置,并插入一幅图片。
(2)选中这幅图片,然后右击鼠标,并在弹出的快捷菜单中选择图片属性命令,打开图片属性对话框。
(3)在常规先项卡的替代表示栏的文本文本框中,输入风景画,然后单击确定按钮。
(4)将网页文件保存起来,并在浏览器中浏览。
4.5.6使用图片代替水平线
单击插入菜单中的水平线命令,可在网页中插入水平线,但这种水平线较单调,因此在网页中经常使用另外一种水平线,这就是本节将要介绍的图片水平线。
图片水平线实际上并非水平线,它只是长条形的图片来代替水平线。
下面给出一个使用图片水平线的实例,其操作步骤如下:
(1)新建军一个空白网页,将光标定位在网页的开始位置。
(2)输入图片水平线并选中,将其设置成7号字体和居中格式。
(3)按回车键另起一行,单击插入菜单中的图片子菜单的剪贴画命令,在打开的剪贴画库里单击WEB标题项,从中选择一幅长条形图片。
(4)将插入的长条形图片的宽度设置为100%。
(5)设置完成后单击确定按钮即可。
4.5.7将图片转换成GIF,JPEG格式
可以将图片转换成GIF,JPEG格式。
例如,若想要为JPEG图片设置透明颜色,道德必须将图片转换成GIF格式。
若要将图片转换成GIF,JPEG格式,可按以下步骤进行:
(1)在网页视图模式下,在图片上单击鼠标右键,然后单击快捷菜单中的图片属性命令。
(2)在图片属性对话框里单击常规选项卡。
(3)若要将图片转换成GIF格式,可选中GIF单选钮。
若想在下载图片时图片所显示的细节逐渐增加,可选择交错复选框。
不能在该对话框高透明颜色,但如果不想让图片具有透明色,则可清除透明复先框。
(4)若要将图片转换成JPEG格式,可单击JPEG单选钮。
也可通过在质量框中输入从1到100的值来指定JPGE图片的质量,该数值越大,文件的压缩率就越小,文件就越大。
在渐进式变化框中,可指定WEB浏览器在下载图片时解析图片的变化次数,但某些WEB浏览器不支持渐进式变化。
(5)设置完成后单击确定按钮即可。
4.5.8指定图形的代低分辨率版本
可以在站点访问者的WEB浏览器下载最后的版本时,同时显示图形的低分辨率版本。
对于大型图片或高分辨率图片该功能很有用。
如果图片是图像映射,则使用低速Internet连接的站点访问者能单击基于低分辨率图片的热点,而不用去等待整个高分辨率图片完成下载。
首先必须创建图片的低分辨率版本。
在绘图程序中打开图片,例如photodraw,并减少图片中的颜色深度(颜色数目。
)为低分辨率版本图片指定的颜色越少,在WEB浏览器中它就会显示得越快。
因为低分辨率的图片是用来为高分辨率图片占位的,所以不应该更改图片的高度或宽度。
注意:
某些WEB浏览器不支持该功能。
若要指定图形的低分辨率版本,可按以下步骤进行:
(1)在网页视图模式下,在图片上单击鼠标右键,并选择快捷菜单中的图片属性命令。
(2)在打开的图片属性对话框里单击常规选项卡。
(3)在低分辨率文本框中,键入另一氏分辨率图片的文件名或单击浏览按钮
(4)设置完成后单击确定按钮即可。
4.5.9为图形设置默认超链接
可以为图片设置默认超链接。
当站点访问者单击该图片时,WEB浏览器会显示超链接的目的地。
例如,要创建一个显示主页的按钮,可先在网页中添加一个按钮图形,然后为它设置到主页的默认超链接。
若在图形上放置了热点,默认超链接使用在没有热点的区域上。
若要为图片设置默认超链接,可按以下步骤进行:
(1)在网页视力模式下,在图片上单击鼠标右键,并在弹出的快捷菜单中单击图片属性命令。
(2)在打开的图片属性对话框里单击常规选项卡。
(3)在默认超链接选项下的位置文本框中键入用做默认超链接的目的地。
(4)若想要超链接的目的地显示在指定的框架中,可单击按钮……,并框架。
(5)设置完成后单击确定按钮即可。
4.6图像映射
比起图像超链接,图像映射具有很大的优越性。
它不仅可以实现图像超链接的功能,还可以充分利用图像的内在制作出非常漂亮的网页。
4.6.图像映射的概念
在网上浏览网页时有时会发现一个比较奇怪的现象,即在某些网页中,一幅图像中不同的位置可以存在链接到不同网页上的肀链接,这种技术就是所谓的“图像映射”,通俗地讲,图像映射就是在图像的一个局部区域上定义一个链接到其他网页上的超链接,就好像将这个局部区域映射到一个WEB网页或其他目标上一样。
例如,有一个关于公司的WEB页。
该WEB页上有一个产品图形,其中包含了有关该产品每个特性的热点。
当站点访问者单击产品的某个区域时,就会显示一个网页,详细说明产品的那个方面。
图像映射与一般的图像超链接不同。
一般的图像超链接是以整个图片作为一个超链接,而图像映射则不仅可以将整个图片作为一个超链接,并且各个超链接,之间互不影响。
由于早期的InternetExplorer和Netscape不支持图像技术,所以虽然当时HTML已经支持这一技术,但还是很少有人使用。
而现在的InternetExplorer和Netscape高版本都支持图像映射技术。
网页中使用图像映射主要有两大优点:
一个是美化网页,由于网页中的各种超链接都定义在同一幅图片中,网页显得协调一致且没有多余的内容;另一个是表达内容更加直观。
例如,在一个公司的主页中,可以放入一幅公司的图片,在图片中相应的各部分定义一个图像映射,这样浏览者既可以直接看到公司整体形象,又可以很方便地通过图像映射中的超链