下载
第14学时添加图片和图片背景
图片就像盐：以合适的方式添加合适的量，这样，网页就会更加吸引人—但是如果加
得太多，访问者就会从因特网上撤退，然后找一杯苏打水。
在本学时中，不仅会学习到如何给网页添加图像(和图像背景)，以及如何控制这些图像的
外观，而且还会学习如何更聪明地运用图像以获得最好的效果。在本学时结束的时候，你将
能够回答如下的问题：
?如何在网页中插入图像？
?能够控制对齐方式、间隔、甚至于图像的大小吗？
?如何才能为那些使用不能够显示图片的浏览器的用户创建图像的“替换”？
?如何才能够让一幅图像成为一个链接？
?如何能够添加一个背景图像？
?能够创建精美的项目符号和一流的水平线吗？
14.1在FrontPageExpress中插入一个GIF或者JPEG图像
开始在一个网页中插入一幅图像的步骤之前，首先准备好图像文件或在第13学时“为网
页找到图片”中所讨论的文件。确定图像文件是和要插入的网页文件存储于同一个文件夹(如
果它不是，在开始“动手实践”之前先将此文件移动或者拷贝到那里)。
如果你要插入的图像不是GIF或者JPEG格式的话，你仍然可以插入
它。
在下面的“动手实践”的第3步中，单击“浏览”。在打开的对话框
中，打开“文件类型”列表然后选择那个图片目前所存储的格式(如果那
个文件的类型没有被列在“文件类型”列表之中的话，FrontPageExpress
就不能够使用它)。然后，你就可以用对话框的“搜寻”列表来找到包含
那个图片的文件夹并选中它。
当你下次保存此网页的时候，FrontPageExpress将提供选择将此文件
转换为GIF并将这个新的GIF文件保存在和网页相同的目录中。
动手实践：在一个网页中放置一幅图像
1)在网页中单击你想要插入图片的点。
2)单击标准工具栏上的“插入图像”按钮，见图14-1。
图14-1第2步：单击“插入
图像”
插入图像按钮
3)输入图像的文件名，见图14-2。
4)单击“确定”。
在插入了一幅图像之后，如果要移动它，只要指向它并保持住，然
后拖动到新的位置释放即可。
你也可以用“剪切”和“粘贴”来移动一幅图像，就像文本一样。
单击此图像来选中它，单击“剪切”按钮，在新的位置单击，然后单击
“粘贴”按钮。
14.2改变图像的尺寸
在FrontPageExpress中，你可以改变一幅图像的尺寸和外形，使它伸展或者挤压(并使之
变形)，正如你马上就会学习到的。但是，首先??
作为一种规则，如果你在创建那个图像的程序，或者在一个好的图像编辑应用程序(比如
说PaintShopPro)内选择大小和外形，而不是在FrontPageExpress或者大多数的网页编写应用
程序中，你就会得到更好的结果。
为什么？事实上，FrontPageExpress不能够真正地改变图像的尺寸。相反，它在HTML文
件中提供一些标记，浏览器可以利用这些标记在图像显示的时候改变其尺寸。一个浏览器并
没有一个真实的图像编辑应用程序所有的那么复杂的图像级别，它在一个排列的图像(Scaled
image)中出现难看的“人造品”(比如说图像中的斑纹)或者使一个透明GIF文件失去透明的可
能性是很大的。
了解了这个警告之后，如下的“动手实践”显示了如何在FrontPageExpress中改变图像的
大小和/或外形，这样做时似乎需要一些谨慎。
动手实践：改变一幅图像的大小和外形
1)单击此图像以选中它。当一幅图像被选中后，一个临时的边界就出现在它的周围，点
缀一些叫做控制柄的小方块(注意到有些控制柄是在边界的角落上，而其它则是在边界线上)，
见图14-3。
2)要改变一幅图像的大小(而不改变或者扭曲其整体的外形)。单击任何角落上的控制柄
162分分第四部分分用多媒体来增添些生气下载
图14-2第3步：输入此图像
的文件名
并保持住，然后拖动以更改此图像的大小，见图14-4。
朝图像的中央拖拉一个角落的控制柄就会减小(收缩)此图像，而朝图
像外拖拉一个角落的控制柄则会扩大此图像。
3)要垂直伸展或者挤压此图像的话(见图14-5)，拖拉一个顶部或者底部的控制柄。
4)要水平拓宽或者挤窄此图像，拖拉一个侧面的控制柄。
5)在更改完一幅图像的大小和外形之后，要去除对它的选中，单击网页中除了此图像外
的任何一处即可。
如果你觉得不喜欢刚刚更改的外形和大小的话，你可以很容易地将
此图像恢复到原来的大小和外形，这是通过单击“取消”按钮来实现的。
以后，当你已经无法使用“取消”时，你仍然可以在任何时候将一
幅图像恢复到它原来的大小和形状。右击此图像，然后在出现的菜单中
选择“图像属性”。在“图像属性”对话框的“外观”标签上，清除“指
定大小”的复选框，然后单击“确定”。
要了解更多有关“图像属性”对话框上的选项，见本学时后面的
“选择一幅图像的布局选项和其它一些属性”。
14.3多次使用同一幅图像
如果你想在一个网页中多次使用同一幅图像的话，你不需要此图像的不同文件名的多份
第14学时从添加图片和图片背景从从163下载
图14-3第1步：单击此图像
以选中它，进而显
示它的控制柄
图14-4第2步：要改变大小，
拖拉一个角落的控
制柄
图14-5第3步：要改变外形，
拖拉一个不是角落
的控制柄即可
角控制柄
控制柄
拷贝。
一幅图像的一个单独拷贝可以出现在同一个网页上—或在若干个网页上—任意多的
次数。只要在插入此图像的每一个拷贝时选择同一个文件名，或者用“拷贝”和“粘贴”来
插入同一幅图像的多个拷贝。这种技术在你在一个列表中使用图形的项目符号时尤其有用(见
本学时后面的“插入精美的项目符号和线条”)。
要用“拷贝”和“粘贴”插入一次本图像，只需单击并选中它，然后单击标准工具栏上
的“拷贝”按钮。单击你希望此拷贝要进入的那个网页，然后单击“粘贴”按钮即可。
你可以粘贴任意多次的拷贝而无须再次单击“拷贝”。直到你下一次
单击“拷贝”，此图像就会仍然停留在Windows的剪贴板，以备粘贴在你
希望的地方。
14.4删除一幅图像
要删除一幅图像，单击它一次以选中它，然后按下Delete键或者单击工具栏上的“剪切”
按钮。
注意，只是单纯地从网页上删除一幅图像—文件本身并没有被删除，它仍然在硬盘上
以备以后再用。
14.5选择一幅图像的布局选项和其它一些属性
在你已经插入一幅图像之后，你可以用很多方式来改变它的外观，都是通过选择在“图
像属性”对话框(见图14-6)中的选项来实现的。
要打开“图像属性”对话框，单击此图像来选中它，然后选择“编辑”、“图像属性”。
(你也可以通过右击此图像然后在出现的菜单上选择“图像属性”。)
下面的几页内容描述了你可以用“图像属性”对话框来改变一个图片的外观的一些方法。
“图像属性”对话框中的“视频”标签只是用来控制内嵌的视频剪辑
的显示，参见第15学时“用声音、视频和特效来提升网页”，来学习更多
的有关“视频”标签的内容。
164分分第四部分分用多媒体来增添些生气下载
图14-6用“图像属性”对
话框来改变一幅图
像在网页的布局中
的角色
14.5.1选择一个图片的“对齐”、“间隔”和“边框线”
在一个“图像属性”对话框的“外观”标签上(见图14-7)，你可以选择很多的选项，它们
在网页的布局内控制图像的位置和外观。
1.控制“对齐”
一个图片的“对齐”描述了它在网页上的位置，而且包括它是如何与任何靠近它的文本
相关的。
缺省情况下，一个图片是对齐在网页的左边的(就像左对齐的文本一样)。任何紧接着此图
片的文本的第一行都出现在图片的右边，并靠近其底部。如果文本不止一行而且没有插入一
个段落标志，在第一行之后的所有的行都出现在此图像的下面。这个缺省的对齐方式叫做
“下”对齐(见图14-8)。
第14学时从添加图片和图片背景从从165下载
图14-7在“图像属性”对
话框的“外观”标
签上，你可以控制
图片在网页的布局
中的角色
图14-8“下对齐”的缺省
的图像对齐方式
要理解对齐选项，你须要理解什么是文本的“基线(baseline)”。基线
是在你写字符的时候，它们下面的那条线。大多数字符完全显现在这条线
的上方，但是有少许—比如说小写的j和y—有位于基线下面的笔画。
缺省情况下，“下对齐”将基线和图像的底部对齐，从而使任何伸出
基线的笔画其实比图像的底部要低。
以字符abs(absolute的缩写)来开始对齐选项就会忽略这个基线，并将
图片和文本的最底部或者中央对齐。比如说，“absbottom”将图像和文本
的实际底部对齐，使伸出基线的任何笔画都不会在图像的下方。
要改变一个图片的对齐方式，选择在“外观”标签上的“对齐”列表中的选项。其它的
选项(包括“下”对齐)分别是：
?“中”对齐在图像右边显现第一行文本，文本的基线和图像的垂直中央对齐。第一行
之后的任何一行的文字都出现在图像的下面。
?“上”对齐第一行文本出现图像的右上方，文本的顶部和图像的顶部对齐。第一行之
后的任何一行的文字都出现在图像的下面。
?“正下方”对齐就像“下”对齐一样，只是图像的底部所对齐的是文本的绝对底部，
而不是基线。
?“正中央”对齐就像“中”对齐一样，只是图像的垂直中央所对齐的是文本高度的绝
对中央，而不是基线。
?“文本上方”对齐文本的第一行出现在图像的右上方。最高的字符的顶部和图像的顶
部对齐。第一行之后的任何一行的文字都出现在图像的下面。
底部的两个对齐选项，“左”和“右”，是特殊的“包围”选项。不像其它所有的选项，
那些选项只能够将文本的第一行放置在图像旁边，而“左”和“右”允许文本的多行出现在
一个图片的旁边，如图14-9所示。
?“左”对齐文本包围此图像，此时图像位于文本的左边(文本在右边)。
?“右”对齐文本包围此图像，此时图像位于文本的右边(文本在左边)。
166分分第四部分分用多媒体来增添些生气下载
图14-9左对齐和右对齐(这
里所显示的)允许多
个文本行包围一幅
图像
所有的对齐选项在FrontPageExpress的网页中都是相当精确地表达出
来，但是有时表达也不是百分之百的准确。要评价对齐格式，应该在一
个Web浏览器中来查看此网页。
2.控制“间隔”和“边框线”
要在一个图片周围添加“边框线”，或者改变图像和它周围的东西之间的“间隔”，使用
在“外观”标签上的“布局”部分里的“边框线宽度”、“水平间隔”和“垂直间隔”选项。
?要在图像的周围添加一个黑色的边框(见图14-10)，在“边框线宽度”中输入此边框线宽
度的一个以像素计的数值。
?要增加图像的顶部和底部与邻近的文本、表格或者其它事物之间的间隔，在“垂直间隔”
中输入一个以像素计的数值。
?要增加图像的侧面与邻近的文本、表格或者其它事物之间的间隔，在“水平间隔”中输
入一个以像素计的数值。
14.5.2可替换的表示方式
你可以帮助某些访问者来应付图像，这有两种特殊的选项，它们都是在“图像属性”对
话框中的“常规”标签内(见图14-11)：
?低分辨率当你计划要在一个网页中使用一个特别大的图像的时候，你也许会选择在这
里提供另一个文件名，它是此图像文件的一个小点的版本。比如说，如果网页中有一个
很大的GIF文件—就算是100KB或者更多—你可以用图形应用程序来保存一个此图
像的一个版本，通过降低分辨率以及其它一些属性使得它小于10KB。浏览器总是先显
示列在低分辨率处的图片，然后继续下载主要的图像。这个低分辨率版本可以让访问者
在等的时候能够看到些什么。
第14学时从添加图片和图片背景从从167下载
图14-10与14-9中完全相同
的一个网页，但是
在图像周围有附加
的间隔(左右都是
30像素)，而且还
显示有一个4像素
宽的边框线
在今天，低分辨率版本并不是那么重要。这是因为大多数的人们使
用的是非常快的因特网连接，而且交错的GIF和渐进的JPEG图片可以让
人们在下载的时候就可以看到一些。
如果你计划显示一幅如此大的图像，以致你认为一个低分辨率的替
代物是有必要的，我建议两种替代的解决方案：
?试试减小此图片文件的大小。你可以在图像编辑应用程序中通过降
低分辨率或者颜色数，或者减小图像的总体面积来实现此目标。如
果此文件是一个JPEG文件，你也可以通过降低质量设置来减小其大
小(参见第13学时“为网页找到图片”)。
?提供这个大图像文件，不是网页布局的一部分，而是作为一个外部
媒体。对网页本身，使用此图片的一个极小的版本，可以使它作为
显示此大图片的链接的资源，参见第15学时。
?文本这里你可以输入在那些不支持图像的浏览器中取代图像的文本。试试用信息丰富
的文本来取代原来由图像传递的思想。同样，如果你不提供一个文本的可替代的表示方
式时，很多支持替代文本的浏览器会显示一个图像的占位符，有点像一个“”。
在这样的浏览器中，替代的文本不仅含有大量信息，而且也更好看。
在“图像属性”对话框中的“常规”标签中，你将看到一个“类型”
区域，其中包含一些用于选择交错和透明(如果此图像是一个GIF89a文件)
和JPEG质量设置(如果此图像是一个JPEG文件)的选项。
这些选项并不是工作得很好，我建议不要管这些设置。
如果你想要过分讲究GIF交错和透明或者JPEG的质量的话，请在图像
编辑应用程序中先做好，然后再将此图片插入到FrontPageExpress中。
14.6自动地找到正确的文件类型、正确的文件夹
不管什么时候，当你插入一个还不是GIF或者JPEG的图片时，FrontPage不仅会提供对文
168分分第四部分分用多媒体来增添些生气下载
图14-11你可以运用“常规”
中的“可替换的表
示方式”来帮助某
些访问者，它们要
么连接较慢，要么
是非图形的浏览器
件的转换，而且还会将此转换的文件保存在和网页相同的文件夹中。我建议当此特性弹出时
就利用它，这样可以保证图片和网页文件是在一起的，从而快速完成文件转换。
在插入此图像之前，你第一次保存此网页的时候，FrontPageExpress会显示类似于图14-
12中的一个消息，告诉你“是否将该图像保存到文件？”如果你单击对话框上的“是”，转换
的图像文件将被保存在和网页文件相同的文件夹中(它的新文件名和原来的是一样的，只是文
件的扩展名被改变为.gif)。注意所有的格式都转换成GIF(永不JPEG)，而JPEG文件根本不转
换(那个是可以的)。
自从你上次保存过之后，如果你插入多个需要转换并拷贝到网页所
在的文件夹的图像时，你可以单击在图14-12中所显示的对话框中的“全
部”按钮。
“全部”告诉FrontPageExpress自动地将所有的非GIF/非JPEG文件转
换成GIF，然后将所有转换后的图像文件保存在网页文件所在的文件夹中，
而无须再提醒你。
14.7在一个表单元中输入图像
你在一个表单元中输入一幅图像(参见第8学时“用表格和线来组织文本”)就完全和你在
一个网页中输入一幅图像一样。唯一的区别在于你必须首先在那个单元中单击一下，从而将
编辑光标移至那里。然后，你就可以单击“插入图像”按钮并用和你在网页中其它任何地方
插入图片一样的方法来插入此图像，如图14-13所示。
14.8插入精美的项目符号和线条
毫无疑问，你肯定看到过一些夸张的网页，上面有一些很酷的、多种色彩的图像项目符
号和水平线。这些事实上不是你用“带项目符号的列表”、“插入水平线”所创建的真正的项
目符号和线。相反，它们只是一些看上去像项目符号和线的内嵌图像(见图14-14)。
线形的图像，有时叫“条”，就是直接插在段落之间。而项目符号是插在单独的文本行之
前，使用除了列表之外的任意段落格式(如果你使用列表，在得到很酷的项目符号同时，还会
第14学时从添加图片和图片背景从从169下载
图14-12当你保存一个包含
有非GIF或者JPEG
格式图像的文件
时，FrontPage
Express会提示改
正那个情形
图14-13在一个表单元中插
入一个图片，在单
击“插入图像”之
前单击此单元
加上列表的项目符号或数字，很难看)。
在插入一个图像的项目符号时，要想得到最好的结果，须要将此图
像设置为“中”或“正中”对齐。
你将在本书后面的CD-ROM中发现大量的可以用于精美的项目符号
和线的GIF图像文件。
14.9用一幅图像来作为一个链接
正如你在第9学时“理解链接”中所学习到的那样，每一个链接都有两个部分：链接源
(访问者所看到并单击的东西)和此链接源被单击时浏览器所要去的URL(或者本地路径与文件
名)。
将一幅图像制作成一个链接只是将URL附在此图像上。事实上，这几乎完全和一个文本
的链接一模一样。唯一的区别在于单击“创建或编辑超级链接”按钮之前，你所选择的是一
幅图像，而不是一块文字。
动手实践：用一幅图像来作为一个链接
1)单击你要制作为一个链接的图像，从而选中它。
2)单击标准工具栏上的“创建或编辑超级链接”按钮。
3)使用对话框来创建你在第11学时“更多链接的方式”中学习到的链接类型—到一个
网页的链接、电子邮件、书签等等，见图14-15。
4)单击“确定”。
170分分第四部分分用多媒体来增添些生气下载
图14-14精美的项目符号和
线其实是一些代替
水平线和列表项目
符号的图像文件
14.10添加一个图片背景
作为背景色(你在第5学时“选择一个标题、文本颜色和其它一些网页基本属性”中已经
学习过)的一个替代物，你可以将一个平铺的图像：一个在整个背景上不断重复的图像文件
(GIF或者JPEG)，用作背景。
当这个图像被精心地设计成和四个角落完美地配合在一起，这个平铺就创建了一个无缝
的“纹理”效果，就像它是一个覆盖在背景上的一幅很大的图像(见图14-16)。所幸的是，这
个效果是由很小的图像所创造出来的，访问一个大得能够覆盖一个网页的图像文件将会使得
大多数因特网连接发生阻塞。
你将在本书后面的CD-ROM中发现大量可以用于做背景纹理的图像
文件。
第14学时从添加图片和图片背景从从171下载
图14-15第3步：如同一个
文本链接一样为一
个图像链接填写
“创建和编辑超级
链接”对话框
图14-16一个平铺的背景纹
理
作为背景纹理的替代，你可以选择平铺一幅和边界结合得不是很好的图像。使用这种技
术，你可以创建一些有意思的背景效果，正如在图14-17中显示的那样。
最后，你可以用一个单独的大图像来做背景，它覆盖了整个页面背景(从而不需要平铺)。
在使用这种技术时，要用一个低分辨率和少量颜色的图像，从而保持图像尺寸较小，网页可
以快速显现。
大多数“全网页”的背景图像实际上并不覆盖整个背景；它们一般是从上到下的窄条，
就像在图14-18中所显示的那样。因为这个条是如此高，所以浏览器并不对它进行平铺，并且
让它在网页中左对齐。此文件本身是相当小的(在图14-18中所显示的那个图像仅有大约2KB)，
然而却给整个网页增添了图像能力，且没有使得文本含糊不清。
平铺的背景图像自动地取代背景色，因为它们覆盖整个背景。
但是如果你使用一个非平铺的图像，比如说在图14-18中所显示的那
个，而且此图像正好不能覆盖整个背景的话，你也许可以同时用一个背
景色。背景色只影响没有被此图像所覆盖的部分。
小心对待背景。如果你不仔细选择，你可能会让文本模糊而难读，
或者至少看得比较艰难。
使用自定义的文本颜色(参见第5学时)来使得文本和背景对比明显。
使用浅色来针对深色的背景，而使用深色来衬以浅色的背景。
即使有这些预防措施，当显现在很多文本后面时，一个平铺的图像
背景也常常是不能接受的。解决的一种办法是在标志(Logo)或者在首页的
一小段文字下面用最好的平铺的背景，然后在首页所链接的那个文本很
多的网页上转换成纯色的背景或者干脆没有背景。
172分分第四部分分用多媒体来增添些生气下载
图14-17一个由平铺的图像
组成的有趣的背景
动手实践：添加一个图像背景
1)将你想要用于背景的GIF图像保存在将要用此图像的那个网页所在的文件夹中。
2)在FrontPageExpress中，打开你要添加一个背景的网页，然后单击“格式”，“背景”，
见图14-19。
3)单击在“背景图像”旁边的复选框，从而在那里放置一个选中符号，见图14-20。
4)单击“背景图像”对话框下面的输入框，然后输入你想要用的GIF图像的文件名(或者
单击“浏览”来找到它)。
5)单击“确定”。
第14学时从添加图片和图片背景从从173下载
图14-18一个单独的图像，
非平铺的背景
图14-19第2步：选择“格
式”、“背景”
图14-20第2和3步：检查背
景图像，然后输入
此图像文件的名字
一个图像背景自动地替代一个背景色。如果你创建一个图像的背景，
你所选择的任意背景色都是不相关的。
14.11课时小结
我们把网页比作一个小甜饼，那么在这个甜饼中，图像就像巧克力豆。而正如我们所知
道的那样，最好的小甜饼就是达到最佳的“豆与饼”比率的那种—很多豆豆和没有豆豆一
样不好(代替你最喜欢的比率-平衡类比：比萨饼，乳酪；花生油，果冻；RAM，处理器速
度；长寿，娱乐等等)。
问题不是你是否要用图像，或者你用多少，而是为什么你要它们。这些图像是否给网页
增添了一些有用的东西—像网页制作者或者网页相关的人士的照片，或者描述产品和地点
的图像—或者它们只是装饰而已？出于风格考虑而增加一两幅图像是值得的，但是此图像
必须能够成功地加强风格。如果它看上去只是一个一般的图像，放在那里也只是为了有个图
像，那就丢掉它。给网页配上精细的文本格式、坚固组织的自然的优美、以及优良的书法。
14.12专家答疑
问题：你肯定对于图像很冷淡。但是，在最酷的一些得奖网页上，我看到了很多的图像。
这里你是不是有点过于严谨了？
解答：也许是的，的确有一些很棒的充满图像的站点。除了那每一个制作巧妙的得奖站
点外，有很多其它的站点，它们过度使用无用的图像或者由于选择不好的背景纹理而淹没了
文本。得奖的人巧妙地运用了图像，而且是有明确目的的。
我的观点不是劝大家不要图像。我只是希望你在将任何陈旧的图像放到网页上之前，问
自己正确的问题。可以打赌得奖者是这么做的。
174分分第四部分分用多媒体来增添些生气下载
|
|
