网页技巧:如何保持清晰的文档结构
2010-11-08 09:35:20
网页理论
内容摘要:
速读文章内容
我十分支持Web标准,并且认为它提出的文档对象模型(DOM,DocumentObjectModel)是非常合理而且有用的。文档对象模型让我们脱离字符,在结构层面高级
我十分支持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.网址未加载 这样使用:
<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的最小宽度)。我们还有更多的方法。
当需要表现复杂的外观的时候,我们应该怎么办?比如圆角边框,那么就使用图片吧。
我们来看一个版面和代码结构都非常好的网页 http://www.网址未加载 的首页。下面是它的截图和使用 Firefox 的 DOM Inspector插件查看它的DOM结构。
首页
点赞
分享
相关内容
网络广告的特性分析与网络传播
善于使用色彩来设计网页
网页界面设计理念
网页设计师的风格是怎样形成的
经典名片设计欣赏(12)
经典名片设计欣赏(13)
经典名片设计欣赏(14)
经典名片设计欣赏(15)
最新发布
小熊圣诞袜怎么画
艺考
儿童简笔画教程大全
2022/12/3
有关关爱名言警句_名言警句
艺考
名人名言
2022/12/7
蛇颈龙宝宝线稿图片
艺考
少儿美术
2022/12/13
做人要诚信的警句_诚信名言
艺考
名人名言
2022/12/6
我和团团有个约定手抄报一等奖(7张)
艺考
手抄报模板大全
2023/1/6
暑假手抄报英文版手抄报获奖作品5张
艺考
手抄报模板大全
2023/1/1
专题合集
院校库
专业库
招生章程
招生计划
录取分数
录取原则
收费标准
录取查询
通知书
入学指南
新生数据
就业情况
高考人数
高考报名
高考考试
高考试卷
高考作文
高考查分
各批次线
一分一段
志愿填报
录取安排
投档分数
模拟联考
统考考题
统考查分
统考分数
艺考简章
更多省份
艺考培训
-
设计
-
网页素材
-
网页理论
-
网页技巧:如何保持清晰的文档结构