在一些以产品介绍、旅游风光、个人影集展示等为主题的网站中,往往会用到大量的图片。精美的图片可以为网页增添色彩,吸引用户,给人以美的享受。但图片的容量往往都比较大,如果不加处理就放到网页上去,下载速度通常会很慢,吓跑访问者。那么,在实际应用中,如何在网页中显示尽可能多的图片,同时又能够解决下载慢的问题呢?
FrontPage 2000软件提供了一种自动缩略图方式,方便我们解决这一难题。所谓的自
动缩略图,是指FrontPage 2000能自动将图片重新取样,使图片的尺寸减小,并将图片另存,在网页中自动将小图链接到原图。这样,就使带图片的页面在浏览器中打开的速度加快,并且当访问者访问页面时,可以通过浏览缩略图来决定是否需要浏览原图。实际上,FrontPage的自动缩略图技术对图片进行了两方面的处理:一是将比较大的原图另存为一幅体积比较小的图片;二是自动将小图链接到原图。这两方面的处理都是由FrontPage自动完成,极大地提高了网页的制作效率。
下面通过实例来学习如何在FrontPage中创建网页图片自动缩略图。
1.打开要展示图片的页面
启动FrontPage 2000后,打开“文件”选单下的“打开站点”选项,出现“打开站点”对话框,选择准备编辑的相关站点。然后,选中要展示图片的页面,如:tpzs.htm,双击打开该页面,进入页面视图编辑状态。
2.设置页面标题及操作提示信息
在页面视图下输入页面标题“网页图片自动缩略图演示”,并设置该标题的字号为24磅,颜色设为粉红色。再在页面标题下加入一行“双击以下图片可以放大显示”字样的操作提示信息,字号设为普通,颜色设为蓝色。再选择“插入”选单中的“水平线”,在标题下加入一条水平线,单击选择水平线,打开“格式”选单下的“属性”选项,设置水平线的颜色为浅绿色。
3.插入表格来辅助页面布局
将光标放在水平线的下一行,插入一个4行4列的表格以辅助页面布局。选定表格,再通过“表格”选单下的“属性”选项将表格边框粗细设为0。
顺便说明一点,在网页制作中,使用表格辅助页面布局是一种很基本的、很常用的页面布局方法。
4.设置缩略图格式
缩略图到底以什么样的统一格式在页面上显示呢?这可通过FrontPage提供的选单进行设置。设置步骤如下:
单击选单栏中的“工具”选单,然后选择“网页选项”。在出现的“网页选项”对话框中,单击“自动缩略图”标签,打开选项卡,然后进行如下设置(见图1):
1)设置缩略图的大小
在“设置”选项中的下拉选单中有四种选项:宽度、高度、最短的一边、最长的一边。选中“高度”选项,然后在“像素”栏中将其值设置为100(这表示缩略图的高度值是100像素),那么图片其他边的长度就会根据原图大小进行等比例缩小,如果选其他选项进行设置的话变化效果类似。FrontPage提供的这种设置方法不论原图的大小如何,都会使所有的缩略图片的外观一致。
2)设置缩略图的边框粗细
选中“边框粗细”复选框,将“像素”栏的值设置为2,这表示每幅缩略图都加上宽度为2像素的边框。
3)设置缩略图的边缘凹凸效果
选中“边缘凹凸效果”复选框,会使所设置的缩略图呈现成具有立体效果的按钮形状。
图1
5.插入图片
设置好缩略图格式后,就可往表格中插入图片了。将光标放在表格的第一个单元格内,在此插入一幅文件名为tp1.jpg的图片。选中该图片,此时“图片”工具栏被激活,单击其中的“自动缩略图”图标,原图就会缩小为缩略图形式出现在单元格内。按照这个操作,依次将每幅图片插入到表格的单元格内,并设置成缩略图形式。但要注意一点,使用缩略图功能时,原图的大小一定要大于在“网页选项”中所设置的缩略图大小,否则“图片”工具栏中的“自动缩略图”图标会变灰色而不能使用。插入图片后的画面如附图2所示。
图2
6.保存页面
全部插入缩略图后,将页面保存起来。在保存时,FrontPage会自动将原图以缩略图设定的大小另存为一幅较小的图片,如tp1.jpg另存为tp1_small.jpg文件。实际上,在页面上显示的是较小的图片文件tp1_small.jpg,当单击该图片时再链接到tp1.jpg文件。我们可以通过查看图片属性来了解这一点:在tp1.jpg图片上单击鼠标右键,在出现的选单中选择“图片属性”,打开“图片属性”对话框,可以看到图片源的值为“tp1_small.jpg”,默认超链接位置为“tp1.jpg”(如图3)。
图3
通过查看网页代码,可以发现设置缩略图主要是利用了如下形式的设置语句:
<a href="tp1.jpg"><img border="2" src="tp1_small.jpg" alt="tp1.jpg (22242字节)" width="133" height="100"></a>。
7.预览页面
将页面保存后,在浏览器中浏览其效果,或单击FrontPage的“预览”标签,当出现页面时,将光标放在缩略图上并双击,那么在页面中就会打开正常大小的原图片。