个人主页过把瘾(6)
第六讲 网页中的图片

  图片在网页中的作用是无可替代的,一幅好的合适的图片,胜过十篇洋洋洒洒的介绍!图文并茂的网页,给访问者带来的感觉是素面朝天的网页无法比拟的。
  图片不只起到装饰的作用,在很多网页中,图片是不可缺少的。如企业网站的产品广告、技术文章的插图、个人艺术作品的发布都不能没有图片。
  虽然图片能美化您的网页,但当您添加图片、动画和视频到自己的站点上时,主页空间的占用将会迅速增加,网页的下载时间也会大大增加,在网速较慢的场合甚至会到不可容忍的地步。若 Internet 服务提供商提供的主页空间大小有限,则图片文件大小就会是重要的考虑因素。因此,网页制作者一定要特别注意图片文件的大小,尽量使用占用空间较小的图片,有时还要适当牺牲图像的质量。
一、图片的基本知识
  大多数浏览器只能显示两种格式的图像。即GIF和JPEG(JPG)。用FrontPage编制网页时,可以插入其它格式的图像文件,并由它将格式转换成上述两种中的一种。
  1)GIF文件
  GIF是一种压缩的8位图像文件,广泛用于网络传输,最多只有256色。
  新的 GIF89a格式,能储存成背景透明化的形式,并且可以将数张图存成一个文件,形成动画效果,还支持位图模式、灰度或索引颜色模式图像。GIF文件相对体积较小,多数用于图标、按钮、滚动条和背景等。
  2、JPEG文件
  JPEG是一种高效率的压缩格式,在存档时能够将人眼无法分辨的资料删除,以节省存储空间。JPEG格式通过选择性地去掉数据来压缩文件,是有损压缩。它比GIF图像色彩比较更丰富逼真,适合保存照片等图像,文件也较小。
  GIF文件和JPEG文件各有优点,如下表所示。采用哪种格式,可根据实际的图片文件来决定。

表 GIF与JPEG格式的比较

  GIF JPG/JPEG

 色彩

 16/256色

 真彩色

 特殊功能  透明背景、动画  无
 压缩是否有损失  无损压缩  有损压缩
 适合情景  颜色有限,主要以漫画图案或线条为主,一般表现建筑结构图或手绘图?  颜色丰富,有连续的色调,一般表现真实的事物

?  虽然GIF文件和JPEG文件是因特网上最基本的图片格式,但这并不是说在FrontPage中只能插入这两种形式的图片,其他诸如PNG、BMP、TIF、WMF、RAS、EPS、PCX、PCD、TARGA等文件都可以在FrontPage中插入。FrontPage内嵌一个图片转换程序,会自动将BMP、TIF等没有压缩的图片格式文件转换成JPEG或GIF格式文件。??
?  近几年,PNG格式文件又开始流行。它的特点是:只需下载图像的1/64,就可以在网页上显示一个低分辨率的图片,随着图片信息的下载,图片也越来越清晰。对于网络日益拥挤的今天,这种图片格式显然更适应当前的形式。
二、插入图片
  现在,我们学习如何将图片放在网页上。在网页中,既可插入图片文件,也可插入剪贴画或用板剪贴将图片粘贴到网页。
  1、在网页中插入图片文件
  插入的图片文件最好是本站点中文件,也可以是本地磁盘中甚至是因特网站点中的图片文件。
  【注意】和Word不同,插入的图片并不包含在网页(HTM)文档中。在网站中还必须有对应的图片文件,而且在因特网上发布时,图片文件和网页文件的相对位置必须和本地站点中一致。所以在插入非本站点中图片文件或用剪贴板粘贴方法插入图片后,保存网页时,会出现“保存嵌入式文件”对话框。提醒您将图片文件保存到本站点中,以备将来上传到因特网服务器。而最简单的方法则是事先将各种所需的图片文件导入(拷贝)到当前网站中。
  将图片或视频导入到站点中将使得您可以快速访问所需文件。举例说,您可以通过将图片添加到网页后保存网页的方式,来将图片一张张地添加到您的站点中。然而,若您知道您将会用到某个图片组,则可以将他们全部一次性导入到在您的站点中所指定的文件夹。然后,当您想要将图片添加到网页中,您能很快地访问它,而不必到文件系统中去查找它。
  如果您选择的是因特网站点中的图片,若没有保存到您的站点中,则在您的网页中此图片只是一个路径引用,如果此图片被从它所在的Web站点上删除,您将不能在您的网页上看到它。
  插入图片文件可通过“插入”菜单中的“图片”/“来自文件”命令,在“图片”对话框上完成。
  1)本站点中文件直接在对话框的文件列表中就可找到所需文件(但要注意对话框的“搜索”路径是否本站点存放图片文件的文件夹);
  2)站点外的本地磁盘中的图像文件则需单击对话框上“从计算机上选择一个文件”按钮,在“选择图片”对话框上选择文件夹及图片文件;
  3)插入因特网站点中的图片则可在“图片”对话框上的“URL”框中直接键入想要插入图片的路径和名称(必须是英文URL)。或单击对话框上“使用Web浏览器来选择网页或文件”按钮。在浏览器中查找到合适的图像图像文件后,这时切换到FrontPage窗口,该图像文件的的地址就会自动在“图片”对话框下的“URL”框中(注意:URL框中出现必须是图片文件路径,不能是包含该图片的网页)。
  【例1】在“迎春接福”网页中插入一个事先引入到本地站点的“福显高照”动画图片(fxgz.gif)。

  1)在FrontPage中打开“迎春接福”网页(ycjf.htm)。
  2)将光标移至需插入图片处,单击“插入”>“图片”>“来自文件”(下左图)。
  3)在“图片”对话框上,选定图片文件“fxgz.gif”,单击“确定”(下右图)。


“插入图片”菜单


“图片”对话框

  4)下图是在浏览状态下插入了图片的网页:


浏览状态下插入了图片的网页

  【例2】在“图片练习”网页中插入老顽童网站中的“三江口新貌”图片。

  1)在FrontPage中打开本地站点“网页练习”,并单击工具栏中的“新建”按钮,新建一个网页。
  2)在新网页中输入标题“图片练习”。
  3)单击“插入”>“图片”>“来自文件”。在“图片”对话框上,单击“使用Web浏览器来选择网页或文件”按钮。这时会出现如下图所示的IE窗口。

  4)在IE浏览器中找到老顽童网站,并在“老年乐园/美术园地”中找到“三江口新貌”图片。并单击浏览器的地址栏,使该图片的URL被选中。
  5)回到FrontPage窗口,在“图片”对话框上,“URL”框中就会自动出现该图像文件的的地址“http://oldchild.nbc.net.cn/sjk.JPG”。

  6)单击“确定”按钮,在新网页中就会显示“三江口新貌”图片。

  7)单击常用工具栏上的“保存”按钮,在“另存为”对话框中给新网页文件起名“tplx.htm”。单击“确定”按钮后即保存好此网页文件,同时出现如下图所示的“保存嵌入式文件”对话框。

若选择“确定”则会将图片文件保存到本地站点中,我们选择“取消”。这时本地站点中并没有此图片文件,图片文件还在老顽童网站中。若某种原因老顽童网站打不开或此文件被老顽童网站删除,则此图片就无法显示。

  2、给网页添加剪贴画(Office 2000自带的图片)
  FrontPage 2000 包含 Microsoft 剪辑库。您可以预览剪辑库中的图片,然后选用在您的网页上。
  在“插入”菜单上,指向“图片”,然后单击“剪贴画”。在“剪贴画库”对话框中找到您想要用的剪贴画,在图形上单击鼠标右键,然后单击快捷菜单上的“插入”即可。
  由于插入的剪贴画不在本地站点中,所以在保存网页文件时也会出现前面所示的“保存嵌入式文件”对话框。必须选择“确定”则会将图片文件保存到本地站点中。
  【例】在“图片练习”网页中插入剪贴画图片。
  1)在FrontPage中打开“图片练习”网页。
  2)将光标移至需插入图片处,单击“插入”>“图片”>“剪贴画”(下左图)。
  3)在“剪贴画库”对话框中选择(单击)“动物”类别(下右图)。


插入剪贴画菜单

“剪贴画库”对话框(类别)

  4)在“剪贴画库”对话框中选择找到剪贴画“马头”,在其上右击鼠标,然后单击快捷菜单上的“插入”即插入此剪贴画。


“剪贴画库”对话框(右击剪贴画的快捷菜单)

  5)单击单击常用工具栏上的“保存”按钮,保存“图片练习”网页。网页文件保存好后,出现如上例所示的“保存嵌入式文件”对话框。
  6)单击“保存嵌入式文件”对话框上的“改变文件夹”按钮,出现“改变文件夹”对话框。

  7)单击文件夹“images”,再单击“确定”,回到“保存嵌入式文件”对话框(如下图)。“文件夹”下面的字段已变成“images/”,即将该图片文件保存到“images”文件夹中。单击“确定”即可完成图片文件的保存。您也可以单击“重命名”来修改图片文件名,但是文件名中不应有中文及中文符号。


  【注意】在保存图片是时,FrontPage会根据图片内容自动地转换成 GIF格式或 JPEG 格式。若有图片为 256色或更少颜色,会转换成 GIF格式,而所有其它的图片会转换成 JPEG 格式。
  3、通过给剪贴板给网页加上图片
  和 Windows 的所有应用软件一样,可以通过剪贴板将其它窗口的图片粘贴到网页上。这里简单介绍一下操作方法:在 Windows 的其它窗口选择一幅中意的图片,用鼠标右击,在弹出的快捷菜单中选择“复制”。然后用FrontPage打开网页文件,将光标移至需插入图片处,鼠标右击,在快捷菜单中选择“粘贴”,即可将图片插入。
  和插入剪贴画一样,在保存网页文件时需将图片文件保存到本地网站中。
三、改变图片的大小和位置
  在FrontPage中改变图片的大小和位置的方法与Word一样。
  1、改变图片大小
  单击(选中)图片,将鼠标移到图片四边及四角的控制点(小方块)上,当鼠标指针变成双箭头时,按下左键拖动即可改变图片大小。
  【注意】改变图片大小只改变了它在网页中所占的平面空间,并不能改变图片文件的大小。
  2、改变图片大小
  鼠标移到图片上,按下左键拖动即可改变图片的位置。
四、设置背景图片
  可以采用合适的图片做网页的背景,使网页更漂亮。下面我们举例说明给“网页练习”本地网站中的主页加一个背景图片的具体步骤:
  1)单击“格式”菜单,在下拉菜单中选择“背景”(下左图),出现如下右图所示的“网页属性”对话框(“背景”选项卡)。
  2)用鼠标单击对话框中“背景图片”前的方框,使这个小方框中出现一个对勾 (称为“选中”)。


“网页属性”/“背景”对话卡

  3)单击“浏览(B)”,打开“选择背景图片”对话框(下图)。


“选择背景图片”对话框

  4)在该对话框中打开“images”文件夹,选择“0002.jpg”作为背景图片,单击“确定”按钮,返回“网页属性”对话框,在“网页属性”对话框中单击“确定”按钮。就可得到如下图所示的有背景的网页。


在浏览器中的有背景的主页

五、插入视频
  在网页上不仅仅可以设置动听的音乐,而且还可以在网页上设置一段小电影(视频文件),如果你有摄像头,能够摄制录像,那么参观网页的人不仅能听到你的声音,看到你的图片,更可以看到你的表演!但是视频文件都比较大,一般都有几 MB。大家在使用视频文件时要注意服务器的空间。
  现在,我们就在“网页练习”本地网站中的主页上插入一段视频。注意,最好将小电影的内容转化为扩展名为AVI的视频文件。
  首先,将视频文件导入到当前站点。在主页中,确定好光标的位置。单击“插入”菜单,在下拉菜单中选择“图片”,当出现下级菜单时,单击“视频”(下左图),打开“视频”对话框(下右图)。


插入视频

“视频”对话框

   在“视频”对话框中,打开“images”文件夹,选中“fox.avi”,单击“确定”按钮,视频文件即被插入。和图片一样,我们可以调整一下视频文件播放窗口的大小。
  刚插入的视频文件看起来更像一幅图片,通过设置可以为视频文件添加播放控件。将鼠标移动到视频文件上,单击鼠标右键,弹出快捷菜单,在快捷菜单中选择“图片属性”,打开“图片属性”对话框,如下图所示。


“图片属性”对话框

  在“图片属性”对话框中,选中“在浏览器中显示控件”;在“重复”区域选中“不限次数”在“播放”区域选中“打开文件时”,单击“确定”。就得到如下图所示的结果。
  保存网页后,单击“文件”菜单,在下拉菜单中选择“在浏览器中预览”,在IE浏览器中将网页打开,就可以欣赏带一个旋转地球视频的网页了。


已经加上控件的视频文件

  【注意】和在第三讲中所述的“播放网页中的声音”相同,假如在在IE浏览器无法播放视频,可重新设置IE浏览器“Internet选项”的“高级”选项,在其中选中“多媒体”类的“播放网页中的视频”。

【练一练】
  为自己的网页插入一些图片,并给主页加一个背景图片。

回上讲 老顽童撰写 下一讲