DW保持清晰文档结构

我十分支持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>

而 这样使用:

 代码如下 复制代码
<div id="subwrap">
        <div id="content-main">
        </div>
        <div id="content-related">
        </div>
</div>
<div id="content-extra">
</div>

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

 

时间: 2024-09-30 17:32:51

DW保持清晰文档结构的相关文章

Web标准学习:保持清晰的文档结构

web|web标准 我十分支持Web标准,并且认为它提出的文档对象模型(DOM,Document Object Model)是非常合理而且有用的.文档对象模型让我们脱离字符,在结构层面高级方式操作文档. 在网页制作(HTML/XHTML)方面,遵循Web标准可以使网站的结构更加合理.但是,新的标准总会导致一部分旧的网页制作者的排斥,很简单,因为他们无法掌握新的标准或者/同时他们认为不需要新的标准,原来的方式已经够用了.我不跟后一部分的人讨论. 应用标准的时候,有些网页制作者已经走进了一些误区.往

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

技巧|网页 我十分支持Web标准,并且认为它提出的文档对象模型(DOM,Document Object Model)是非常合理而且有用的.文档对象模型让我们脱离字符,在结构层面高级方式操作文档. 在网页制作(HTML/XHTML)方面,遵循Web标准可以使网站的结构更加合理.但是,新的标准总会导致一部分旧的网页制作者的排斥,很简单,因为他们无法掌握新的标准或者/同时他们认为不需要新的标准,原来的方式已经够用了.我不跟后一部分的人讨论. 应用标准的时候,有些网页制作者已经走进了一些误区.往往为了一

WML教程8:WML文档结构祥解

教程 WML 文档结构祥解1.声明(Prologue)<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.com/DTD/wml_1.1.xml"> 2.元素(Element) WML首先定义一个Deck,然后在Deck内封装信息和Card. 3.文件头(Head Element) 头信

MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并 不完全对等.表的结构是固定的,MongoDB集合并没有这个约束:另外,存入集合的文档对象甚至可以嵌入子文档,或者"子集合".他们最终都可以用类似 于BJSON的格式描述.我们今天就来分析MongoDB这一特性带来的独特数据管理方式.我们还是以samus驱动为例来分析,samus驱动支持两种 方式访问数据库,基本方式和linq方式,基本方式在上篇以介

unigine-请教android工程使用ant打包时的文档结构问题

问题描述 请教android工程使用ant打包时的文档结构问题 我最终需要用Unigine这个图像仿真引擎来开发一个Android端应用(我也不想用Unigine,是指定的-.-),是在pc上开发,然后Unigine sdk有提供针对android移植的部分,我按照文档来对Unigine提供的工程进行打包生成默认apk(这个apk安装之后也是之后我自己程序的入口). 但我手头这个版本的Unigine提供的工程文档结构貌似有些问题,它的项目工程下面有三个目录,分别是activity.client和

软件-word 文档结构视图如何开发

问题描述 word 文档结构视图如何开发 我想做一个类似word软件中的文档结构视图,我知道它类似树控件,但是每个标题的缩进怎么整? 解决方案 如果在Web中开发这个东西,就是把列表嵌套就可以了,li里面再包含ul. 解决方案二: 谢谢!我现在是在MFC中,C++开发的应用程序

【Win 10应用开发】Adaptive磁贴模板的XML文档结构

原文:[Win 10应用开发]Adaptive磁贴模板的XML文档结构 在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win 10的API中也是支持的,此外,Win10 App还支持全新的自适应磁贴模板,本文老周就给大家先讲一下基本结构,下一篇文章中咱们再说一说复杂排版.   应用程序的图标可以分为两类:第一类是应用商店上专用的,就是你的应用提交到商

JSP程序运行原理、文档结构及简单输入输出实例分析_JSP编程

本文实例讲述了JSP程序运行原理.文档结构及简单输入输出.分享给大家供大家参考.具体如下: 目标: 掌握Web应用的文档结构: 掌握JSP的运行原理: 掌握JSP的简单输入和输出. 主要内容: 通过一个简单实例介绍Web应用的文档结构和运行原理: 通过一个简单的注册功能介绍基本的输入输出. 实现内容:客户端验证. 1. 文档结构 每个应用都有一个根目录,例如ch2:理论上可以放在任何地方,但是需要配置,简单的做法,直接放在了webapps这个目录下,在这个目录的应用会被自动加载. 在根目录下会有

【Win10 应用开发】自适应Toast通知的XML文档结构

原文:[Win10 应用开发]自适应Toast通知的XML文档结构 老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6只需要20秒,不信的话,老周笔划笔划一下,你就明白了.   1.属性自动初始化.在4.0中引入了这样声明属性: public int VVVV { get; set;} 以前是属性包装一个字段,在初始化属性时只要对字段赋值即可,这个