学院首页>冲浪宝典>网页浏览>IE 5来了,站点赶快改一改!

IE 5来了,站点赶快改一改!

作者:任向晖 来源:未知 添加时间:2006-5-21 12:25:15

教 学 纲 要 
本文介绍了如何利用IE5.0 的新特性来制作网页,确实不错,感兴趣的朋友可以在自己的主页中试一试 。 

提 速 

用上IE5的朋友一定发现这个版本的浏览器在解读HTML页面时比4.0版本快了许多,有一些网页上的文字能够象机关枪一样扫射出来,而不象过去那样需要长时间的等待,但如果页面代码优化不当,则不能利用到IE5.0先进的页面解释方法。 

用 Fixed Tables来加快表格解读速度 

首先,你必须在所有的表格上使用基于CSS2的fixed-layout风格属性,这一属性能够让浏览器直接在屏幕上描绘表格,而无须事先计算长宽尺寸,加入如下格式的代码不会影响旧版本的浏览器效果。 
<TABLE STYLE="table-layout:fixed">……</TABLE>fixed-table属性参考:http://www.microsoft.com/workshop/author/perf/perftips.asp 

通过缓存减轻服务器负荷 

我们都知道,服务器从缓存中调用图像文件要比从服务器上下载快得多,通过设定EXPIRES HTTP头部,你可以自由控制浏览器对每个页面,甚至网页上的每个图像是否从缓存中读取 

比如,Yahoo的网页头部导航图像是不常变动的,那么,Yahoo可以把这个图像的到期日设定得比较长,甚至设定为永远从缓存中读取,当需要变化图像时,只要把图像文件改一个名字就可以了。 IE5在缓存控制机制上作了很大改进,这一技术被成为Post-check and Pre-check,大致的情形是这样的: 
1.用户第一次访问一 个页面,图像来自服务器,同时被保存在缓存中。 
2.用户第二次访问这个页面,图像先从缓存中读出,然后服务器上的文件对其再次更新。 

当然,另一部分数据,例如股票行情,就不宜缓存,因为它们时刻更新,一旦用户忘记刷新页面将会造成很大的误解,因此,必须将这些数据设为不从缓存调用。你可以从 http://www.microsoft.com/workshop/author/perf/perftips.asp#Use Cache-Control Extensions找到关于缓存控制的细节。 

图像工具 

IE一直没有很好提供对图像信息的控制工具,现在你可以使用IE5.0在图像上右击鼠标,选择"属性"来查看关于这个图像的像素尺寸和文件大校同时,IE5还提供了一个附件程序,你可以从http://www.microsoft.com/Windows/Ie/IE5/custom.asp页面下载Images List.这个工具能够以详细报告的形式列出一 个网页所有的图像文件的具体信息,包括数量,文件大小,像素尺寸,缩图和预估下载时间。 

阿明补充: 建议大家都去下载一个IE5的增强软件 ie5wa.exe,安装后会给IE5增加"open frame in new windows(开新窗口)"、"Image List(页面所用图片列表)"、"Links List(页面所有连接列表)"这三项非常实用的功能。 

更悦目的收藏夹 

几乎所有的站点都希望被加入到用户的收藏夹里,但在过去,无论是IE还是Netscape都只能通过一个长长的文字菜单来标识站点,现在IE5给站点提供了一 个更好的品牌传播机会。不信请现在就到Yahoo!站点,把Yahoo!首页加入收藏夹,再点开收藏夹菜单看一 看,"哇!",Yahoo!文字的左面不再是一 个简单的超文本文件图标,而是一 个火红的"Y!"图标。没错,Yahoo!的确在站点做了手脚,但你也可以为自己的站点做一 个。别忘了给它起名favicon.ico,并存放在Web的根目录下。如果你想针对一 些独特的页面,只要在相应页面中加入一 行: 
<LINK REL="SHORTCUT ICON" href="/path/iconfilename.ico"> 

更容易进入收藏夹 

只要你在页面中加入下面代码,你的站点被访问者加入收藏夹的机会就会比别人多一倍,为什么不试一 试? 
<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE")> 0)
&& (parseInt(navigator.appVersion)>= 4)){
document.write("<U><SPAN STYLE='color:blue;cursor:hand;' 
onclick='window.external.AddFavorite(location.href, document.title);'>
将此页加入你的收藏夹</SPAN>
</U>");
}
//-->
</SCRIPT> 
 
 
站内搜索