好了，现在可以开始代码了。

第二阶段："用以前的做法，使用透明的GIF图片来控制间距."

如果你已经是一位参加过多个项目的网页设计师，下面的结构是你再熟悉不过的：

用表格说话，我们已经习惯于用它了，因为它是我们最基本的"积木块"。例如：用透明的GIF图片来控制间距、用表格的各种属性来控制位置。有人这么解释：表格是可靠的，用表格布局的页面可以向前兼容！没有css敢与表格对抗，表格可以适合所有浏览器等等。

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

第1小时

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

第2小时

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

JavaScript这样写:

除了我对老设计方法有点忘记以外，整个进度还是相当快的。虽然，我尽量减少表格的嵌套，但代码看上去还是有些复杂，所以我加了一些注释上去，以方便找到我们需要修改的地方。

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

第3小时

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

第4小时

可恶！因为不能消除下划线，我不能继续制作图片菜单。不过这个实验的规则是我自己制定的，我可以破例违反一下。我用一点点 css来解决，只要放一句style="text-decoration: none;"在链接的地方就可以了，yay!解决了菜单下划线的问题。

好了，我们接下来可以制作主要的2列。正文中的蝴蝶图片我用了2个表格来实现细边框效果，就象这样：

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

第5小时

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

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

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

第6小时

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

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