第二阶段："用以前的做法，使用透明的GIF图片来控制间距."
如果你已经是一位参加过多个项目的网页设计师，下面的结构是你再熟悉不过的：
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
用表格说话，我们已经习惯于用它了，因为它是我们最基本的"积木块"。例如：用透明的GIF图片来控制间距、用表格的各种属性来控制位置。有人这么解释：表格是可靠的，用表格布局的页面可以向前兼容！没有css敢与表格对抗，表格可以适合所有浏览器等等。
让我们开始一步一步再现整个设计过程。
第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>
我将稍后再考虑如何正确显示这个标题(理想情况下，我们尽可能多的关心内容，尽可能少的关心布局)。其他标题(news，Sightin gs and Membership)将被标识为<h2>。
菜单从根本上讲就是一个无序列表(list)，所以将被标识为list。段落不需要分类(我们
