动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   网页设计 → 阅读文章

 从报纸网站排版中看WEB标准的应用

作者:波希米亚 来源:www.b3inside.com 
阅读 2178 人次 , 2006-2-16 15:00:00 

《San Francisco Examiner》最近成为美国最畅销的报纸之一,其原因是什么呢?答案是,他们完全采用WEB标准来发布站点,利用有效XHTML来替代tables的排版方式。

我在《Examiner》做站点主管有4年多了,并且很多次的重新设计网站。但每次重新设计,HTML代码和JavaScript都显得很笨重、麻烦。最终,还是给我留下令我感到异常复杂、并让人气馁的经历。

之后我发现了WEB标准。然后就频繁地出入于A List Apart ,Douglas Bowman的Stopdesign ,还有Dan Cederholm的SimpleBits 这些站点。与那些依靠着图片和动感为基础的FLASH站点相比,这些站点更注重内容、排版、简洁的制作和更实用的页面架构设计。

这些网站看起来真是太棒了。更重要的是,它们依靠HTML代码和单独的CSS来支撑起整个页面架构。看完这些页子的代码之后,我简直都不想再用table了。

我渐渐的开始将更多的CSS合并到以table为基础的页面中。那还是在几个月前,我打开《San Francisco Examiner》网站广告时就下定决心——要求彻底重新设计。我意识到,这无疑是一个创建完全适应WEB标准站点的完美机会。

整个"旅程"大概要一年时间,并且要经历许多个版本。它不只一次的让我感到灰心和进度缓慢,不过WEB标准的优势是不可否认的。

再见,我的老朋友

一些苦乐参半的小经历就是在利用WEB标准设计的时候,补白图片(spacer.gif)的消失。还记得我最初开始学WEB设计的时候,那是不可思议的方法,利用1像素(1px)透明图片就可以让table变成任何你想得到的样子。但是现在,这种补白图片(spacer.gif)也将"濒临灭绝".我再使用它也是为了查看在《Examiner》站点中的效果有何不同。

三月,当我们的网站还处于table与CSS架构过渡阶段,光是补白图片(spacer.gif)就独占了90MB的带宽,占每月总流量的0.3%.七月,当我们转换到以CSS为基础的站点后,它只占用了2MB(0.004%)不到的当月带宽(那只是一些还没有来得急更新的旧文章)。

不可否认,削减掉不到1%的月流量是无足一提的,但是消失的补白图片(spacer.gif)却显得和抛弃tables转换为CSS与WEB标准的站点一样有趣。当它开始为我们节省带宽的时候,补白图片(spacer.gif)简直就像是冰山一梢。

够简洁,伙计!

这是我们在进行重构之前,最后一年导航栏的基础链接代码。
<tr>
<td class="navmenu" height="18" onClick="javascript:rolloutNav(this);document.location='/home/index.cfm'" onMouseOver="javascript:rolloverNav(this);" onMouseOut="javascript:rolloutNav(this); " colspan="2"><a href="/home/index.cfm" class="nav">HOME</a></td> </tr>
<tr>
<td bgcolor="#EEEEEE" class="navmenuspacer" colspan="2"><img src="../site_images/spacer.gif" width="1" height="2">
</td> </tr>  
 
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:Web网页安全色谱
· 下一篇:网站版面设计的介绍
· 用JavaScript实现变色背景和文字(2)
· 基本配色——流行
· 记录访客的来访次数
· CSS类及id的规范化命名
· HTML中Access Key(存取键)的用法


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077