Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Frontpage教程 >> 正文

在FrontPage中创建自动缩略图

文章来源:中国计算机报 许锦新

在一些以产品介绍、旅游风光、个人影集展示等为主题的网站中,往往会用到大量的图片。精美的图片可以为网页增添色彩,吸引用户,给人以美的享受。但图片的容量往往都比较大,如果不加处理就放到网页上去,下载速度通常会很慢,吓跑访问者。那么,在实际应用中,如何在网页中显示尽可能多的图片,同时又能够解决下载慢的问题呢?

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的“预览”标签,当出现页面时,将光标放在缩略图上并双击,那么在页面中就会打开正常大小的原图片。

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有