- 本文目的：与您分享如何学习基于web标准的网页制作。
适合人群：网页制作初学者。有一定的页面制作基础，并想学或正在学习web标准的朋友们。
备注：本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂，所以没有任何具体的代码、规范等内容，比如Xhtml的代码规范、CSS样式手册等具体内容我将会在文章的最后“推荐的资源列表”中将我所看到过或学习过的教程一一列出。
一、新形势下的网页制作以及职业定位
随着网络的发展，前几年还只是国外网站以及国内少数个人网站才会去实施的web标准，现在已经是大行其道了。上至新浪、163等门户网站，下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。
网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成Web Designer + Page Builder + Programer 的项目组合作开发模式。正是由于web标准的兴起，“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。
曾在蓝色经典上看到Aether帖出来的土豆网（tudou.com）的招聘信息，感觉这个招聘信息非常的有代表性，原文如下：
引用：
页面工程师，1人
技能要求：
1、对W3C网页标准（Web Standards）有较深理解；
·精通结构层代码（XHTML）和样式层代码（CSS）。
·对语义、结构与内容分离等有深刻理解；
·熟悉Javascript，并对行为层编程机理有一定理解，并了解后台程序制作流程。
2、有成熟作品，目前将主要从事代码方向工作；
3、精通Javascript优先。
工作内容：
配合页面架构（Web Architect，负责总体规划），完成页面制作（Page Builder）。
其上游是页面设计（Web Designer），下游是网站程序员（Programer）。
我非常的认同这种职业定位，所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。
二、基于web标准的网页基本特征
从三年前开始接触网页到现在，我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征，和大家一起分享一下。
1、页面代码容易读懂了。
举一个简单的例子，按以前如果要实现一个页面的布局，一般是使用表格来划分整个页面。请阅读并运行以下代码：
运行代码框：
而我们现在，一般会简化成这样：
<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%以上，当然这是由于以下原因造成的：
- 通常在符合标准的页面中，已经不再直接使用<td bgcolor="red" align="center" ....></td>这种方法直接去控制显示样式了，而是放在网页之外的CSS文件中去表现。
- 抛弃了表格用来布局的做法后，N个表格重复嵌套的冗余代码也就不再出现了。
- 页面上已经不再直接使用图片进行装饰了，而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的，比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。
- 大量的javascript代码也被移植到了网页外部，在页面中将精简成<script type="text/javascript" src="../js/**.js"></script>。
当然以上所谈的特征非常的表面化、也非常的局限，只是就页面代码方面描述了比较浅显的特征，针对于页面制作人员而言,也同时提出了更高的要求，会在后边的文章中做详细的讲解。
有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下，然后再查看下面代码，看看效，果是不是觉得的确精短了很多？