本文目的：與您分享如何學(xué)習(xí)基于web標(biāo)準(zhǔn)的網(wǎng)頁(yè)制作。
適合人群：網(wǎng)頁(yè)制作初學(xué)者。有一定的頁(yè)面制作基礎(chǔ)，并想學(xué)或正在學(xué)習(xí)web標(biāo)準(zhǔn)的朋友們。
備注：本文只是從理解以及概念上去分享網(wǎng)頁(yè)制作的學(xué)習(xí)方法和步驟。力求通俗易懂，所以沒(méi)有任何具體的代碼、規(guī)范等內(nèi)容，比如Xhtml的代碼規(guī)范、CSS樣式手冊(cè)等具體內(nèi)容我將會(huì)在文章的最后“推薦的資源列表”中將我所看到過(guò)或?qū)W習(xí)過(guò)的教程一一列出。

一、新形勢(shì)下的網(wǎng)頁(yè)制作以及職業(yè)定位

隨著網(wǎng)絡(luò)的發(fā)展，前幾年還只是國(guó)外網(wǎng)站以及國(guó)內(nèi)少數(shù)個(gè)人網(wǎng)站才會(huì)去實(shí)施的web標(biāo)準(zhǔn)，現(xiàn)在已經(jīng)是大行其道了。上至新浪、163等門(mén)戶(hù)網(wǎng)站，下至剛從學(xué)校畢業(yè)的大學(xué)生們的個(gè)人網(wǎng)站。到處都是它的蹤影。
網(wǎng)站建設(shè)的分工也從原來(lái)的一人承包(從效果到頁(yè)面到程序代碼)的模式也逐步轉(zhuǎn)變成Web Designer + Page Builder + Programer 的項(xiàng)目組合作開(kāi)發(fā)模式。正是由于web標(biāo)準(zhǔn)的興起，“頁(yè)面工程師”這個(gè)稱(chēng)謂也慢慢走上了舞臺(tái)并擔(dān)任起了相當(dāng)重要的角色。
曾在藍(lán)色經(jīng)典上看到Aether帖出來(lái)的土豆網(wǎng)的招聘信息，感覺(jué)這個(gè)招聘信息非常的有代表性，原文如下：

引用：
頁(yè)面工程師，1人
技能要求：
1、對(duì)W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)（Web Standards）有較深理解；
  ·精通結(jié)構(gòu)層代碼（XHTML）和樣式層代碼（CSS）。
  ·對(duì)語(yǔ)義、結(jié)構(gòu)與內(nèi)容分離等有深刻理解；
  ·熟悉Javascript，并對(duì)行為層編程機(jī)理有一定理解，并了解后臺(tái)程序制作流程。
2、有成熟作品，目前將主要從事代碼方向工作；
3、精通Javascript優(yōu)先。
工作內(nèi)容：
配合頁(yè)面架構(gòu)（Web Architect，負(fù)責(zé)總體規(guī)劃），完成頁(yè)面制作（Page Builder）。
其上游是頁(yè)面設(shè)計(jì)（Web Designer），下游是網(wǎng)站程序員（Programer）。

我非常的認(rèn)同這種職業(yè)定位，所以轉(zhuǎn)了過(guò)來(lái)?；蛟S這將是未來(lái)比較流行的網(wǎng)站制作過(guò)程中的項(xiàng)目組分工合作的模式吧。

#p#

二、基于web標(biāo)準(zhǔn)的網(wǎng)頁(yè)基本特征

從三年前開(kāi)始接觸網(wǎng)頁(yè)到現(xiàn)在，我親身經(jīng)歷了國(guó)內(nèi)大多數(shù)網(wǎng)站的web標(biāo)準(zhǔn)重構(gòu)。自己在不斷的學(xué)習(xí)過(guò)程中也總結(jié)出了一點(diǎn)符合web標(biāo)準(zhǔn)的網(wǎng)頁(yè)的一般特征，和大家一起分享一下。

1、頁(yè)面代碼容易讀懂了。

舉一個(gè)簡(jiǎn)單的例子，按以前如果要實(shí)現(xiàn)一個(gè)頁(yè)面的布局，一般是使用表格來(lái)劃分整個(gè)頁(yè)面。請(qǐng)閱讀并運(yùn)行以下代碼：

運(yùn)行代碼框
<table width="100%" cellpadding="5" cellspacing="1" bgcolor="blue"><tbody><tr><td bgcolor="silver" colspan="2" align="right"><table width="90%"></table></td></tr><tr><td>首頁(yè)</td><td>欄目一</td><td>欄目二</td><td>欄目三</td><td>欄目四</td></tr></tbody></table><table><tbody><tr height="400"><td width="25%" bgcolor="white">左側(cè)內(nèi)容</td><td width="75%" bgcolor="white">右側(cè)內(nèi)容</td></tr><tr><td colspan="2" bgcolor="#f8f8f8" align="center">尾部文字</td></tr></tbody></table>