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

  《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）简直就像是冰山一梢。

够简洁，伙计！

这是我们在进行重构之前，最后一年导航栏的基础链接代码。

看看现在的Examiner 的导航栏都是像这样的代码。

那是很大的差别。事实上第一种真是糟透了，我很困窘把它包括在这里。但是我又拿什么去填充那额外的部分？基本上，没有任何东西。用JavaScript产生的滚动效果和用table控制的网格间隙，所有这一切都可以用样式（styles）来解决。

让我们看另外一个例子。这是一个采用标准前，由一个文本片段链接到一篇故事的代码。