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

原创 2004年12月29日 10:58:00

    嵌套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

理解表现和结构相分离

对于初学者,我们常看见web标准的好处之一是“能做到表现和结构相分离”,那这到底是什么意思呢?我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念:内容、结构、表现和行为。 1.内容...
  • u013770247
  • u013770247
  • 2014年04月09日 15:39
  • 688

结构、表现、行为 分离

WEB标准提倡结构、表现和行为相分离---HTML结构、CSS表现、JavaScript行为 结构和表现分离的重要性: 刚开始的时候理解结构和表现的不同之处可能很困难,特别是如果你不习惯于思考文档...
  • hnh666666
  • hnh666666
  • 2015年10月27日 19:07
  • 3326

【CSS+DIV网页样式与布局】——基础知识总结

前言       很早之前就把CSS+DIV网页样式与布局这部分知识就学完了,为了一味的赶紧度,就忽视了对这一部分知识的总结,真的有一种捡了芝麻丢了习惯的感觉,而且总结有一个包袱压着自己,越往后就越...
  • u013044029
  • u013044029
  • 2015年12月11日 21:31
  • 617

【初级理解】结构、表现、行为分离

为什么都在强调这么一个概念?    1、从代码体量分析:html标签中也可以写内联样式和内部样式,为什么还要写成外部样式引入呢?举个简单例子,钱包都有好几层我们都会习惯性的将不同面值的纸币分开放置,这...
  • u014687692
  • u014687692
  • 2016年11月19日 14:59
  • 711

页面:结构+样式+行为

  • tuhuolong
  • tuhuolong
  • 2013年12月28日 13:07
  • 826

web前端结构与行为的分离

如今的web开发也需要越来越接近MVC框架模式,web的前端可视为由结构+表现+行为组成,根据W3C的标准,使用xhtml+css已经使得结构和表现成功分离。在网上看到越来越多被重构过的网站是件非常令...
  • SmartJavaer
  • SmartJavaer
  • 2007年01月27日 17:38
  • 957

模型和视图分离原则

该原则至少具有两部分:1. 不要将非UI对象直接与UI对象连接或耦合。例如,不要让Sale软件对象(非UI“领域对象”)引用Java Swing JFrame窗口对象。因为窗口与某个应用相关,而(理想...
  • zengqiang1
  • zengqiang1
  • 2016年09月30日 14:10
  • 667

为什么要实现程序指令和程序数据的分离?

就以linux的ELF为例吧, 程序放在text段(你也可以叫它code段), 这是程序指令。  而数据放在data端和bss段, 这是程序数据。 那为什么要实现程序指令和程序数据的分离呢?    ...
  • stpeace
  • stpeace
  • 2016年11月05日 16:19
  • 2627

CQS 命令-查询分离原则

摘自《UML和模式应用》     命令-查询分离原则(Command-Query Separation Principle).     CQS是针对方法的经典OO设计原则. 该原则指出, 任何方...
  • jamie_zhengmin
  • jamie_zhengmin
  • 2011年12月14日 15:34
  • 939

SlidingPanelLayout与ViewPager滑动冲突的解决方法

SlidingPanelLayout是Google在support v4包中新加的用于
  • belows
  • belows
  • 2014年11月10日 23:23
  • 671
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:嵌套DIV布局似乎与“布局结构与内容相分离”的原则冲突!
举报原因:
原因补充:

(最多只允许输入30个字)