|
让我们开始一步一步再现整个设计过程。
第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小时
设计结束了,看上去和最初的设计差不多,你可以点击这里看看 。
其中包含了多少表格,点击这里查看。
第三阶段:我们不需要表格!
下面我们将看看什么是基于web标准的、用CSS布局的设计。我将从内容的标识开始。我将尽量使标识有语义,避免多余的标签。
页头是一个图片,但它也是一个标题,所以我这样写代码:
<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
(阅读次数:)
共6页: 上一页 [1] [2] 3 [4] [5] [6] 下一页
|