页面制作人员的修练之道（二）基于web标准的网页基本特征

从三年前开始接触网页到现在，我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征，和大家一起分享一下。

1、页面代码容易读懂了。

举一个简单的例子，按以前如果要实现一个页面的布局，一般是使用表格来划分整个页面。请阅读并运行以下代码：


HTML代码
<TABLE width="100%" cellpadding="5" cellspacing="1" bgcolor="blue">
<TR>
<TD bgcolor="silver" colspan="2" align="center" align="right">
<TABLE width="90%">
<TR>
<TD>首页</TD>
<TD>栏目一</TD>
<TD>栏目二</TD>
<TD>栏目三</TD>
<TD>栏目四</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR height="400">
<TD width="25%" bgcolor="white">左侧内容</TD>
<TD width="75%" bgcolor="white">右侧内容</TD>
</TR>
<TR>
<TD colspan="2" bgcolor="#f8f8f8" align="center">尾部文字</TD>
</TR>
</TABLE>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

而我们现在，一般会简化成这样：

程序代码

<div id="header">

<menu>

<li>首页</li>

<li>栏目一</li>

<li>栏目二</li>

<li>栏目三</li>

<li>栏目四</li>

</menu>

</div>

<div id="left">左侧内容</div>

<div id="right">右侧内容</div>

<div id="bottom">尾部内容</div>

然后再通过外部的CSS对页面上的元素进行布局以及美化效果，这样的代码相对于前一段应该说更精短，更易读懂。而且这个易读性，你还可以理解成搜索引擎也比较容易读懂你的内容、聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容、用手机wap上网也能比较顺畅地访问你的页面。

2、页面变小了

同样的网页在新的标准下制作和以前的传统制作相比，代码一般能节约40%以上，当然这是由于以下原因造成的：

a.通常在符合标准的页面中，已经不再直接使用<td bgcolor="red" align="center" ....></td>这种方法直接去控制显示样式了，而是放在网页之外的CSS文件中去表现。

b.抛弃了表格用来布局的做法后，N个表格重复嵌套的冗余代码也就不再出现了。

c.页面上已经不再直接使用图片进行装饰了，而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的，比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。

d.大量的javascript代码也被移植到了网页外部，在页面中将精简成<script type="text/javascript" src="../js/**.js"></script>。

当然以上所谈的特征非常的表面化、也非常的局限，只是就页面代码方面描述了比较浅显的特征，针对于页面制作人员而言,也同时提出了更高的要求，会在后边的文章中做详细的讲解。

到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层，以及如何正确处理三者之间的关系。