分享
 
 
 

FrontPage中创建自动缩略图

王朝html/css/js·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有