嵌套DIV布局似乎与“布局结构与内容相分离”的原则冲突！

txf2004

浏览: 6867644 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS XSL XHTML 编程 XML

嵌套DIV布局似乎与“布局结构与内容相分离”的原则冲突！

为了合理实现XHTML+CSS格式的布局，似乎免不了在网页内容的HTML文件中写入嵌套的<div>标记，以实现那些常用的布局形式。比如：
...
<body>
<div id="header">this is header</div>
<div id="main">
<div id="navigater">this is navigater</div>
<div id="content">this is content</div>
</div>
<div id="footer">this is footer</div>
</body>
...
然后在CSS文件定义各个div的风格属性。显然，其中名为"main"的<div>标签纯粹是为了控制"navigater"与"content"两个<div>的布局而加入的。这样一来，就形成了嵌套<div>的HTML代码。
问题是，将来如果更改网页布局，需要把navigater放到别的地方，例如"header"的上面。恐怕在修改CSS文件的同时，还必须修改体现内容的HTML文件以去掉那个嵌套的<div>形式。因为那个嵌套<div>结构其实是为了布局而写入HTML内容中的。
这样一来，就违背了XHTML+CSS标准提倡的“布局与内容分离”的原则！
　　我想，如果把文档结构看作是反映内容的逻辑结构，文档结构就应该是内容的逻辑框架，体现的是内容各个部分之间的逻辑关系，自然是属于内容的一部分。而布局结构应该看作是内容表现形式的物理结构，体现内容之间的排版与显示关系。
　　文档逻辑结构自然会有存在嵌套，比如，“联系信息”一项内容可以由“电话”与“Email”两项内容组成。可是，在表现内容时也许常常把“电话”与“Email”显示在页面不同的区域。如果，那些<div>标签完全根据文档的逻辑嵌套而形成对应嵌套的话，那么将“电话”与“Email”就会匡在一个<div>标签中，分开显示将非常困难。原因在于，<div>标签的嵌套更多关注的是布局结构，也就是表现形式的物理结构。
　　而用<div>标签来布局网页事实上是XHTML+CSS最推荐的布局方式。而且，为了控制布局快之间的结构，嵌套<div>随处可见，有的还是网页设计大师推崇的经验。
　　但，事实上嵌套<div>的确会把布局关系与内容绑在了一起。但不用嵌套<div>标签，恐怕只有在CSS文件中采用绝对定位和绝对尺寸等方法，才能把布局的位置定义好。不过，这样做对于那些需要根据内容来自适应位置和大小的区域又成了问题！
　　从哲学上看，XHTML+CSS是没法跳出布局与内容的连环阵的。似乎要做到真正的“内容”－“布局”－“表现”之间的分离，只有用XML+XSL+CSS才能做到！但那是最终的目标。　　目前，XHTML+CSS方式的可视化开发工具非常罕见，顶多用些CSS设计工具来编写式样表，然后预览调试。因此，XHTML+CSS的开发效率往往比较低。
　　而XSL的编写是纯手工工艺活儿，其更趋向于编写程序的思维。对于那些不熟悉编程的设计师来说，从可视化工具转到纯编码的思维方式有点难度。难说将来会出现CSS甚至XSL的可视化开发工具，但就目前来说，XML+XSL+CSS开发效率会很低！
　　未来是美好的，但过渡是痛苦的，熬吧......

李战(leadzen).深圳 2004-12-29