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

技巧|网页

我十分支持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的最小宽度)。我们还有更多的方法。

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

我们来看一个版面和代码结构都非常好的网页 http://www.recyclenow.com 的首页。下面是它的截图和使用 Firefox 的 DOM Inspector插件查看它的DOM结构。
 

时间: 2024-08-04 06:21:11

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

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

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

网页制作小技巧

技巧|网页 网页制作小技巧之二 如何使同一页中的超文本链接呈现不同的颜色 通常在网页的<body>中设置连接的颜色,如:<body link="#FF00FF" vlink="#FF0000" alink="#008080"> 其中:link -- Hyperlink(连接)的颜色 vlink-- visited Hyperlink(已访问过的连接)颜色 alink-- active Hyperlink (当前活动的连接)

DW保持清晰文档结构

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

编辑网页的时候图片是放在html文档里好呢,还是放在css里面好?

问题描述 编辑网页的时候图片是放在html文档里好呢,还是放在css里面好? 本人初学者,现在学到css了,对于图片的加载方式,有的在html的img标签里面,有的在css的background里面,这两种方式那种更好一些呢? 解决方案 1.二者有何区别? 写在css里面的图片是以背景图形式存在的,而写在html里的是以标签形式存在的,在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签是网页结构(内容)的一部分会在加载结构的过程

asp.net在网页中显示上传的Word文档

问题描述 asp.net在网页中显示上传的Word文档内容要怎么做pix文件夹保存的是上传的文件地址存在数据库里(SqlServer2005)datatbledt=BLL.Product.GetProductDetail(id);//读出地址dt.Rows[0]["ProductPix"].ToString()各位老大帮忙了 解决方案 解决方案二:没人理我啊老大些帮忙啊解决方案三:如果要显示word的格式,需要安装插件吧?如果只是显示内容,图片什么的都不要,可以利用程序之间读出来引用m

Word 2010新功能:结构清晰的文档导航

工作中我们常常需要处理一些比较长的文档,想要重新组织文档内容要用鼠标滚轮来回滚动,既麻烦又很容易出错.不过如果你已经用上了Office 2010,就不会再被这个问题困扰了.使用Word 2010组件中新增的"文档导航"功能,再长的文档你也能轻松掌控了. 在Word 2010中打开一篇较长的文档后,切换到"视图"选项卡,勾选"导航窗格". 开启导航窗格 导航功能开启后,在文档左侧会出现一个导航栏. 导航窗格 在导航栏的搜索框中输入要查找的关键字后你

【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这个目录下,在这个目录的应用会被自动加载. 在根目录下会有

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) 头信