本文目的：与您分享如何学习基于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、页面代码容易读懂了。
举一个简单的例子，按以前如果要实现一个页面的布局，一般是使用表格来划分整个页面。请阅读并运行以下代码：
运行代码框
[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%以上，当然这是由于以下原因造成的：
当然以上所谈的特征非常的表面化、也非常的局限，只是就页面代码方面描述了比较浅显的特征，针对于页面制作人员而言,也同时提出了更高的要求，会在后边的文章中做详细的讲解。
有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下，然后再查看这个页面的html代码，是不是觉得的确精短了很多？
到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层，以及如何正确处理三者之间的关系。
三、理解表现与内容相脱离
表现与内容相脱离，这应该算是web标准所提倡的核心了。按w3c提出的标准，将网页划分成了三大块，即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例，来了解这三块内容。您可以在新窗口中打开这个页面。
Html代码：从页面代码的角度上看，我们应该说只能看到这些东西：就是一个标题，以及一个详细列表。所以说在脑海中初步形成的代码应该是：
<h4>标题</h4>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
<li>列表项</li>
</ul>
CSS代码：就是大家看到的视觉效果。通过更换css文件，我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。
Javascript:细心的朋友会发现，标题栏左侧有一个小三角形。通过点击这个图标，我们可以完成一个收缩功能，这就是行为，也是与页面内容无关的东西。
三种角色负责三个不同的分工，尽量不要去相互影响。
一个网页，应该以它的主体内容为根本，所以我主张。先编写html代码，在编写html代码时，我们尽量不去考虑为了迎合它的表现形式，这样才能写出结构化、语义化的页面代码。当然，在CSS实现以及行为脚本时，我们也允许最小程度的去修改现有的html代码，毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站，纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流
【中国下载站】【设为主页】【收藏本页】【打印本文】【回到顶部】【关闭此页】
您现在的位置：
减小字体
增大字体