大伟的博客

[写本文的目的]：与您分享如何学习基于web标准的网页制作。
[本文适合人群]：网页制作初学者。有一定的页面制作基础，并想学或正在学习web标准的朋友们。
[文章内容摘要]：
1、前言-新形势下的网页制作以及职业定位。
2、基于web标准的网页有哪些基本特征。
3、如何理解结构层、表现层、行为层代码的脱离。
4、编写符合标准的(x)html代码的一般方法。
5、用CSS美化页面。
6、正确认识Javascript。
7、网页制作人员需要了解哪些知识。
8、我常用的工具软件介绍。
9、推荐的网站列表。
[备注]：
本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂，所以没有任何具体的代码、规范等内容，比如Xhtml的代码规范、CSS样式手册等具体内容我将会在文章的最后“推荐的资源列表”中将我所看到过或学习过的教程一一列出。

新形势下的网页制作以及职业定位。

随着网络的发展，前几年还只是国外网站以及国内少数个人网站才会去实施的web标准，现在已经是大行其道了。上至新浪、163等门户网站，下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。
网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成Web Designer + Page Builder + Programer 的项目组合作开发模式。正是由于web标准的兴起，“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。
曾在蓝色经典上看到Aether帖出来的土豆网（tudou.com）的招聘信息，感觉这个招聘信息非常的有代表性，原文如下：[quote]
页面工程师，1人
技能要求：
1、对W3C网页标准（Web Standards）有较深理解；
·精通结构层代码（XHTML）和样式层代码（CSS）。
·对语义、结构与内容分离等有深刻理解；
·熟悉Javascript，并对行为层编程机理有一定理解，并了解后台程序制作流程。
2、有成熟作品，目前将主要从事代码方向工作；
3、精通Javascript优先。
工作内容：
配合页面架构（Web Architect，负责总体规划），完成页面制作（Page Builder）。
其上游是页面设计（Web Designer），下游是网站程序员（Programer）。
[/quote]
我非常的认同这种职业定位，所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。

本文讨论的是如果开发一个符合w3c标准的web站点，重点探讨在新的设计与开发模式下，web项目组中的美工/页面制作人员/后台程序员三者之间如何有效地配合。为了便于阅读，制作了一个微缩型的项目。大家可以先预览一下最终效果。

本文适合于对web标准已经有了初步了解的同行共同研究。对此感兴趣的朋友欢迎在博客里发表您的评论。

项目内容：首页上的一个新闻列表。

项目人员：网站美工一名/页面制作人员一名/程序员一名。（有很多人是三者合一的，哈哈。）

美工主要负责出效果图，截图。如下图：

然后对该图进行提取，得到相应的背景图片，见项目img文件夹。

程序员的工作有几下几点：

• 根据需求设计网站数据库结构。
• 定义底层相应的对象，如：user/news等等。
• 定义数据访问层，包括访问数据库、编写存储过程等。
• 提供表现层读取数据的方法供调用。

我这里定义的程序员几乎可以不了解html代码/javascript脚本/css样式。相对比较独立。
项目中的程序员工作部分被我简化了，想了解的朋友可参考vs.Net2003中自带的几个例子，分层做得很有借鉴价值。

页面制作人员的工作：（PS:我给页面制作人员的定义可能有些超纲了。）
一：对美工的效果图进行初步的页面实现，如根据上边的效果图，初步可写成以下代码：

<h4>八卦新闻</h4>
<ul>
<li>大学生为啥争当农民</li>
<li>TVB制造8大极品女明星</li>
<li>上流社会秘密旅馆的真相</li>
<li>大学生洗鸳鸯浴被曝光</li>
<li>男明星性感阳刚露点</li>
<li>明星挖鼻抠脚丑态</li>
<li>陈好是怎样变成美女的</li>
<li>X光揭秘魔术师&#34;吞剑&#34;</li>
<li>西安一村“喝尿”强身</lil>
<li>汪明荃青春惊艳旧照片 </li>
</ul>

二：将需要动态生成的部分换成程序员提供的相应接口，如例子中的代码为：

<ul>
<%
Call LoadTopNews()
%>
</ul>

如果程序员对html代码不熟悉，表现层的很多程序代码也应该由页面制作人员来实现，如上边的LoadTopNews()中涉及到了html代码，此部分如页面制作人员完成不了，也应该与程序员共同协商。根据页面制作人员的需要写出相应的程序代码。

三：CSS的页面效果实现。（略）

四：Javascript脚本的编写。本例子中仅设计了新闻的折叠显示功能，详见项目中js/common.js。（略）

写得有点粗糙，欢迎同行一起探讨！

源代码下载：一个简单的基于标准的web项目。