表格对决CSS--一场生死之战(2)
第二阶段："用以前的做法，使用透明的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小时
可恶！因为不能消除下划线，我不能继续制作图片菜单。不过这个实验的规则是我自己制定的，我可以破例违反一下。我用一点点 css来解决，只要放一句style="text-decoration: none;"在链接的地方就可以了，yay!解决了菜单下划线的问题。
好了，我们接下来可以制作主要的2列。正文中的蝴蝶图片我用了2个表格来实现细边框效果，就象这样：
让我们来看看前4个小时的成果在IE6以外浏览器上的效果。噢！在Firefox中非常丑陋，在Opera和Netscape中看起来还不错。
第5小时
继续代码...，调试和修改。
工作中，我认识到<font>标签控制字体尺寸的局限性，我不能定义多种尺寸。真是该死！
News部分的文字排版也遇到了问题，为了缩进，我不得不用更多的表格嵌套来实现效果。为了使正文中的蝴蝶图片排列在文字的右面，我也不得不增加表格来解决。这种“欺骗”式的排版让我感到很无奈。
第6小时
设计结束了，看上去和最初的设计差不多，你可以点击这里看看 。
其中包含了多少表格，点击这里查看。
- 相关文章
