内容优先,布局爱用<code>position</code>

真・懒写于

时下web风行标准,然而许多人目的并不明确,似乎是为了标准而标准。web标准重要意义之一是提高可用性(usability)和易用性(accessibility)。考究网页布局的结构,内容的安排对可用性和易用性的影响,实际上也应该是web标准中的内容。

依本人个人看法,在HTML/XHTML的代码结构上,应该遵循内容优先的原则。举个简单的例子说明。在小屏幕设备上,普通网页的内容往往会很长。如果内容之前有长长的导航、广告等,用户阅读需要不断滚屏才能读到想要的内容。这绝对不是一个好的用户体验。

然后许多人并不使用内容优先的法则来编写(code)HTML/XHTML代码。即使通晓内容优先的法则,人们最常见的做法是,把边栏放前,内容置后。这样做的好处是,可以方便的浮动(float)边栏,以适应布局的需要。这是最典型的为布局而布局,为标准而标准的做法。当然,边栏很少不足影响内容浏览体验的可以反驳我,仁者见仁。

我想举个例子,来证明使用内容优先的法则,在布局上并没有比其他结构更逊色,反而有更大灵活性。内容居中,两侧两栏?内容居左,右边两栏或相反?内容置于两栏之上?都没有问题!至于两栏置于内容之上,也不是不行,只是栏目的液态设计(liquid design)的灵活性受限而已。

我激昂地说到这里时,可惜的是,发现IE6的有严重的bug,我的天!我只好把一个未成品展出,IE6只能部分有效。IE5.x(有些小bug,但不足影响布局),Opera 8.x,Gecko 1.x都没有问题。这是不是让人更期待IE 7?

进入样例查看,选择所愿的布局方式,看看使用relativeabsolute的强大灵活性。