W3C标准-网页制作之技巧:保持清晰的文档结构

日期: 2007-12-23 作者:yangguang lan 来源:TechTarget中国

  我十分支持Web标准,并且认为它提出的文档对象模型(DOM,Document Object Model)是非常合理而且有用的。文档对象模型让我们脱离字符,在结构层面高级方式操作文档。

  在网页制作(HTML/XHTML)方面,遵循Web标准可以使网站的结构更加合理。但是,新的标准总会导致一部分旧的网页制作者的排斥,很简单,因为他们无法掌握新的标准或者/同时他们认为不需要新的标准,原来的方式已经够用了。我不跟后一部分的人讨论。
 
  应用标准的时候,有些网页制作者已经走进了一些误区。往往为了一个标准不擅长而且是微不足道的效果而弄得文档结构混乱。这显然已经违反了Web标准的初衷。Web标准就是让我们以清晰的结构来组织文档,好使用DOM方式操作文档。

  举一个例子来说,在网页制作过程中的三栏(一般是3个div标签)布局。很多网页制作者都通过3个div标签的嵌套来达到目的,因为如果不嵌套,在窗口缩小的时候,div标签会向下流动。

  它们是这样的:
  <div id="column1">
  <div id="column2">
  <div id="column3">
  </div>
  </div>
  </div>

  无论从结构还是从内容或者表现上讲,这三栏一般都是等地位的,不应该嵌套。嵌套已经暗示了它们的附属关系。当我们使用xml解析工具如 JDOM,DOM4j 或者 DOM的JavaScript(ECMAScript)绑定 来解析这些内容时,我们就会发生逻辑上的混乱。

  对Web标准抱有偏见的人可能会说,使用表格布局可以轻松实现良好的三栏布局。那我们来看看表格的代码:

  <table>
  <tr>
  <td id="column1"></td>
  <td id="column2"></td>
  <td id="column3"></td>
  </tr>
  </table>

  可能表格在表现上能容易达到三栏布局,但是代码的结构上与上面一样是多层嵌套。<table>和<tr>标签是是冗余的。

  正确的方法应该是下面的代码:

  <div id="column1">
  </div>
  <div id="column2">
  </div>
  <div id="column3">
  </div>

  而 http://www.djangoproject.com 这样使用:

  <div id="subwrap">
  <div id="content-main">
  </div>
  <div id="content-related">
  </div>
  </div>
  <div id="content-extra">
  </div>

  因为它认为第三栏只是额外的(extra)。这种布局从代码上可以看成是两栏布局,然后第一栏再分成两栏,所以表现上是三栏。

  这样,符合结构和内容的关系,表现方面我们可以通过在CSS(级联样式表)中设定每一栏的宽度百分比来完成。或者我们定义每一栏的固定宽度,再定义 body标签的最小宽度(IE6不支持,所以需要把三栏放在一个div–container里,再定义这个div的最小宽度)。我们还有更多的方法。

  当需要表现复杂的外观的时候,我们应该怎么办?比如圆角边框,那么就使用图片吧。

 

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

  • W3C标准-初学Web标准的几个误区

    W3C校验仅仅是帮助你检查XHTML代码的书写是否规范,CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步,不是说通过的校验,我的网页就标准化了。我们不是为了虚名,或者向别人炫耀:“看我的页面通过了校验”而去标准化,我们的目的是为了使自己的网页设计工作更有效率,为了缩小网页尺寸,为了能够在任何浏览器和网络设备中正常浏览。

  • W3C标准-符合web标准的媒体播放器代码

    由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码。

  • 什么是W3C标准,你的企业网站是否符合这个标准?

    目前W3C标准已经成为高端客户设计网站的首选,什么是W3C标准呢?

  • W3C标准-CSS技术在网页设计中的运用

    多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术,可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页,对页面内各部分的修饰能力有限且语句烦锁,CSS正是弥补这一缺陷的有力技术,它语句、文法简单,只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。