让我们开始一步一步再现整个设计过程。

　　第1小时

　　噢。好象时光倒流，不用CSS我们用什么来定义背景颜色?哦，对...是bgcolor，谢谢提示。好，开始制作表格，预览效果。我定义了"align=center"，这样就可以在所有浏览器中居中，太好了，这多么简单！表格看上去好象并不坏，我有与老友重逢的感觉。我熟练地使用透明的GIF图片来控制间距，工作飞速前进！恩？在header和菜单之间怎么会出现空白呢？哦，原来在images代码后面多了一个空格，IE浏览器会把它显示出来。这改起来简单，删除空格就好了。

　　第2小时

　　我使用javaScript制作导航菜单的翻转效果：

　　<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript这样写:

　　function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
除了我对老设计方法有点忘记以外，整个进度还是相当快的。虽然，我尽量减少表格的嵌套，但代码看上去还是有些复杂，所以我加了一些注释上去，以方便找到我们需要修改的地方。

　　遇到了一个小问题：不用css就无法消除链接的下划线。也许有解决办法，让我们用google来搜索一下。

　　第3小时

　　google搜索后还是没有找到办法，如何才能制作没有下划线的链接？一定有一个解决办法！

　　第4小时

　　让我们来看看前4个小时的成果在IE6以外浏览器上的效果。噢！在Firefox中非常丑陋，在Opera和Netscape中看起来还不错。

　　第5小时

　　继续代码...，调试和修改。

　　工作中，我认识到<font>标签控制字体尺寸的局限性，我不能定义多种尺寸。真是该死！

　　News部分的文字排版也遇到了问题，为了缩进，我不得不用更多的表格嵌套来实现效果。为了使正文中的蝴蝶图片排列在文字的右面，我也不得不增加表格来解决。这种“欺骗”式的排版让我感到很无奈。

　　第6小时

　　设计结束了，看上去和最初的设计差不多，你可以点击这里看看 。

　　其中包含了多少表格，点击这里查看。

　　第三阶段：我们不需要表格！

　　下面我们将看看什么是基于web标准的、用CSS布局的设计。我将从内容的标识开始。我将尽量使标识有语义，避免多余的标签。  

　　页头是一个图片，但它也是一个标题，所以我这样写代码：

　　<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
（阅读次数：）