页面制作人员的修练之道

来自：蓝色理想    作者：jxdawei    jxdawei的个人博客：http://www.iwcn.net

http://www.blueidea.com/tech/web/2007/4431.asp

页面制作人员的修练之道 

本文目的：与您分享如何学习基于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、页面代码容易读懂了。

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

运行代码框<TABLE width="100%" cellpadding="5" cellspacing="1" bgcolor="blue"><TR><TD bgcolor="silver" colspan="2" 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%以上，当然这是由于以下原因造成的：

通常在符合标准的页面中，已经不再直接使用<td bgcolor="red" align="center" ....></td>这种方法直接去控制显示样式了，而是放在网页之外的CSS文件中去表现。 抛弃了表格用来布局的做法后，N个表格重复嵌套的冗余代码也就不再出现了。 页面上已经不再直接使用图片进行装饰了，而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的，比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。 大量的javascript代码也被移植到了网页外部，在页面中将精简成<script type="text/javascript"  src="../js/**.js"></script>。

当然以上所谈的特征非常的表面化、也非常的局限，只是就页面代码方面描述了比较浅显的特征，针对于页面制作人员而言,也同时提出了更高的要求，会在后边的文章中做详细的讲解。有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下，然后再查看这个页面的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的现象。时下所流行的一种叫法 “div+css”让很多初学者对web标准产生了严重的误解，认为就是用div去代替以前的table，会产生“满页尽是div”的错误结论。这种表现与内容相脱离的设计思想，对于页面制作人员而言,也同时提出了更高的要求：

抛弃"所见即所得"的网页编辑软件，改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签，原来还有那么多有用而根本没有胜过的标签。 以前只用DW、FP等软件拉出无数个表格然后填充些东西进去就能保存为网页的时代过去了，你要懂每一个html标签它应该布置在网页的什么位置。 页面html代码不负责页面的效果，它只是告诉浏览器我这个页面的结构和内容，所以刚开始时，你会觉得符合标准的页面做出来都比较难看，那是因为你还没有学会CSS，就算学会了，你还没有经过多次的这种html代码与css代码分开编写的实践。 要尽量让页面上的每一个标签都有它的实际意义。不要让html代码为css而活着。

四、重新认识javascript

Javascript是什么？二年前，我说它是一个小丑，因为那时候在很多网页制作人员的眼中，它就约等于特效，比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等，还有专门的网站来收集javascript的特效，并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前 javascript在网页制作领域所处于的小丑地位了。

但现在，如果你还说javascript是小丑，我会反对你。自从AJAX应用的兴起、web标准的提倡，可以说javascript和asp、asp.net、jsp等后台开发语言一样，处于不可轻视的地位。这就是“网页前台开发”。

网页，我认为大致可分为二类：一类为呈现内容型的，如一般的内容页面。另一类就是注重应用型的，如以Gmail为首的。当然，一般的网页都是二者都有的，只是孰轻孰重罢了。在注重用户体验、交互的今天，网页前台脚本开发担任了非常重要的角色。

网页制作行业的分工与合作模式现在还处于摸索阶段，所以说，对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。我觉得应该看各个开发团队的具体情况而定。不管怎么样，作为页面制作人员我觉得还是应该对Javascript以及DOM有所了解的。

五、页面制作人员应该了解的知识

如果说美工只负责出效果图，程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。

XHTML（这是最根本的，也是最重要的。） CSS（不学会这个，你根本没有办法去实现美工所画出来的效果图。） Javascript（虽然说要注重结构、表现、行为的脱离，但很多时候我们也需要如何用javascript和css配合作战。） Dom（文档对象模型，配合javascript使用。）以下内容为个人体会，最重要的是上边四点 SEO（搜索引擎优化，虽然现在有专门的做SEO的公司，但不是每个网站都会去请那些人来做这种事情的，如果你会了你就会知道其实很多优化是页面代码上的优化。） 网站的可用性（比如在NoScript环境下的正常显示等。） 网站的易用性（美工画出来的图是没有行为的，而用户是可以在网页上做事的，所以如何让页面的易用性，这是你应该考虑的，除非你们还有专门的UE人员。） 了解后台程序开发（对后台开发的了解有利于和开发人员进行沟通，不然会很麻烦。）

我所使用的工具软件列表

Editplus：用来编写html代码和javascript代码。 TopStyle：用来编写css代码。 FrontPage ：虽然说大家都说DW比这个要好，但我是一直用着它的，现在基本手写了，但偶尔会用用。有感情了。 Firefox ：浏览器，强大的插件功能吸引了我。 Opera：浏览器，多装几个，看一下你的作品在多种浏览器中是不是一样。 VS.net：项目大多是用vs.net做的，但我不建议你去用2003做前台页面，2005会稍好一点。

我推荐的资源列表

网站：

http://www.w3.orghttp://www.blueidea.comhttp://www.w3cn.orghttp://www.csszengarden.com/http://yuntian.cnblogs.com/http://sheneyan.com/http://andy.andymao.com/http://www.forest53.com/

教程：

样式表中文手册 -苏昱样式表滤镜中文手册 -苏昱文档对象模型中文手册 -苏昱在30天内打造更具亲和力的网站 网站重构《CSS网站布局实录》javascript宝典（第四版）

经典论坛讨论：http://bbs.blueidea.com/thread-2713875-1-1.html