頁(yè)面制作人員的修練之道
本文目的：與您分享如何學(xué)習基于web標準的網(wǎng)頁(yè)制作。
適合人群：網(wǎng)頁(yè)制作初學(xué)者。有一定的頁(yè)面制作基礎，并想學(xué)或正在學(xué)習web標準的朋友們。
備注：本文只是從理解以及概念上去分享網(wǎng)頁(yè)制作的學(xué)習方法和步驟。力求通俗易懂，所以沒(méi)有任何具體的代碼、規范等內容，比如Xhtml的代碼規范、CSS樣式手冊等具體內容我將會(huì )在文章的最后“推薦的資源列表”中將我所看到過(guò)或學(xué)習過(guò)的教程一一列出。
一、新形勢下的網(wǎng)頁(yè)制作以及職業(yè)定位
隨著(zhù)網(wǎng)絡(luò )的發(fā)展，前幾年還只是國外網(wǎng)站以及國內少數個(gè)人網(wǎng)站才會(huì )去實(shí)施的web標準，現在已經(jīng)是大行其道了。上至新浪、163等門(mén)戶(hù)網(wǎng)站，下至剛從學(xué)校畢業(yè)的大學(xué)生們的個(gè)人網(wǎng)站。到處都是它的蹤影。
網(wǎng)站建設的分工也從原來(lái)的一人承包(從效果到頁(yè)面到程序代碼)的模式也逐步轉變成Web Designer + Page Builder + Programer 的項目組合作開(kāi)發(fā)模式。正是由于web標準的興起，“頁(yè)面工程師”這個(gè)稱(chēng)謂也慢慢走上了舞臺并擔任起了相當重要的角色。
曾在藍色經(jīng)典上看到Aether帖出來(lái)的土豆網(wǎng)（tudou.com）的招聘信息，感覺(jué)這個(gè)招聘信息非常的有代表性，原文如下：
引用：
頁(yè)面工程師，1人
技能要求：
1、對W3C網(wǎng)頁(yè)標準（Web Standards）有較深理解；
·精通結構層代碼（XHTML）和樣式層代碼（CSS）。
·對語(yǔ)義、結構與內容分離等有深刻理解；
·熟悉Javascript，并對行為層編程機理有一定理解，并了解后臺程序制作流程。
2、有成熟作品，目前將主要從事代碼方向工作；
3、精通Javascript優(yōu)先。
工作內容：
配合頁(yè)面架構（Web Architect，負責總體規劃），完成頁(yè)面制作（Page Builder）。
其上游是頁(yè)面設計（Web Designer），下游是網(wǎng)站程序員（Programer）。
我非常的認同這種職業(yè)定位，所以轉了過(guò)來(lái)?；蛟S這將是未來(lái)比較流行的網(wǎng)站制作過(guò)程中的項目組分工合作的模式吧。
二、基于web標準的網(wǎng)頁(yè)基本特征
從三年前開(kāi)始接觸網(wǎng)頁(yè)到現在，我親身經(jīng)歷了國內大多數網(wǎng)站的web標準重構。自己在不斷的學(xué)習過(guò)程中也總結出了一點(diǎn)符合web標準的網(wǎng)頁(yè)的一般特征，和大家一起分享一下。
1、頁(yè)面代碼容易讀懂了。
舉一個(gè)簡(jiǎn)單的例子，按以前如果要實(shí)現一個(gè)頁(yè)面的布局，一般是使用表格來(lái)劃分整個(gè)頁(yè)面。請閱讀并運行以下代碼：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
而我們現在，一般會(huì )簡(jiǎn)化成這樣：
<div id="header">
<menu>
<li>首頁(yè)</li>
<li>欄目一</li>
<li>欄目二</li>
<li>欄目三</li>
<li>欄目四</li>
</menu>
</div>
<div id="left">左側內容</div>
<div id="right">右側內容</div>
<div id="bottom">尾部?jì)热?lt;/div>
然后再通過(guò)外部的CSS對頁(yè)面上的元素進(jìn)行布局以及美化效果，這樣的代碼相對于前一段應該說(shuō)更精短，更易讀懂。而且這個(gè)易讀性，你還可以理解成搜索引擎也比較容易讀懂你的內容、聾啞等有障礙人士也能通過(guò)一些特殊設備來(lái)讀懂你的內容、用手機wap上網(wǎng)也能比較順暢地訪(fǎng)問(wèn)你的頁(yè)面。
2、頁(yè)面變小了
同樣的網(wǎng)頁(yè)在新的標準下制作和以前的傳統制作相比，代碼一般能節約40%以上，當然這是由于以下原因造成的：
當然以上所談的特征非常的表面化、也非常的局限，只是就頁(yè)面代碼方面描述了比較淺顯的特征，針對于頁(yè)面制作人員而言,也同時(shí)提出了更高的要求，會(huì )在后邊的文章中做詳細的講解。
有興趣的朋友可以照著(zhù)下邊的這個(gè)效果圖去用傳統的方法試著(zhù)做一下，然后再查看這個(gè)頁(yè)面的html代碼，是不是覺(jué)得的確精短了很多？
到底如何去培養自己去編寫(xiě)精練的、有語(yǔ)義的、結構非常清晰的html代碼呢。在下一節中我們來(lái)討論如何將一個(gè)美工畫(huà)出來(lái)的效果圖拆分成結構層、表現層以及行為層，以及如何正確處理三者之間的關(guān)系。
三、理解表現與內容相脫離
表現與內容相脫離，這應該算是web標準所提倡的核心了。按w3c提出的標準，將網(wǎng)頁(yè)劃分成了三大塊，即結構層、表現層、行為層。下邊我們還是以上一節中的效果圖為例，來(lái)了解這三塊內容。您可以在新窗口中打開(kāi)這個(gè)頁(yè)面。
Html代碼：從頁(yè)面代碼的角度上看，我們應該說(shuō)只能看到這些東西：就是一個(gè)標題，以及一個(gè)詳細列表。所以說(shuō)在腦海中初步形成的代碼應該是：
<h4>標題</h4>
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
...
<li>列表項</li>
</ul>
CSS代碼：就是大家看到的視覺(jué)效果。通過(guò)更換css文件，我們可以在不修練html代碼的基礎上任意變換這個(gè)頁(yè)面的視覺(jué)效果。所有的效果應該是與html內容本身沒(méi)有關(guān)系的。因為視覺(jué)效果僅僅是為了讓頁(yè)面更漂亮、更容易讓用戶(hù)去接受。
Javascript:細心的朋友會(huì )發(fā)現，標題欄左側有一個(gè)小三角形。通過(guò)點(diǎn)擊這個(gè)圖標，我們可以完成一個(gè)收縮功能，這就是行為，也是與頁(yè)面內容無(wú)關(guān)的東西。
三種角色負責三個(gè)不同的分工，盡量不要去相互影響。
一個(gè)網(wǎng)頁(yè)，應該以它的主體內容為根本，所以我主張。先編寫(xiě)html代碼，在編寫(xiě)html代碼時(shí)，我們盡量不去考慮為了迎合它的表現形式，這樣才能寫(xiě)出結構化、語(yǔ)義化的頁(yè)面代碼。當然，在CSS實(shí)現以及行為腳本時(shí)，我們也允許最小程度的去修改現有的html代碼，畢竟還有很多客觀(guān)因素在制約著(zhù)。但這絕不意味著(zhù)像某些網(wǎng)站，純粹為了通過(guò)w3c驗證、為了實(shí)現某些不合理的效果圖去寫(xiě)出類(lèi)似于N個(gè)div嵌套、滿(mǎn)頁(yè)都是div的現象。時(shí)下所流行的一種叫法 “div+css”讓很多初學(xué)者對web標準產(chǎn)生了嚴重的誤解，認為就是用div去代替以前的table，會(huì )產(chǎn)生“滿(mǎn)頁(yè)盡是div”的錯誤結論。
這種表現與內容相脫離的設計思想，對于頁(yè)面制作人員而言,也同時(shí)提出了更高的要求：
四、重新認識javascript
Javascript是什么？二年前，我說(shuō)它是一個(gè)小丑，因為那時(shí)候在很多網(wǎng)頁(yè)制作人員的眼中，它就約等于特效，比如跑馬燈效果、彈出窗口、網(wǎng)頁(yè)關(guān)閉時(shí)彈出一個(gè)歡迎再來(lái)等等，還有專(zhuān)門(mén)的網(wǎng)站來(lái)收集javascript的特效，并將其歸類(lèi)為窗口特效、文字特效、圖片特效等。這足以說(shuō)明幾年前 javascript在網(wǎng)頁(yè)制作領(lǐng)域所處于的小丑地位了。
但現在，如果你還說(shuō)javascript是小丑，我會(huì )反對你。自從AJAX應用的興起、web標準的提倡，可以說(shuō)javascript和asp、asp.net、jsp等后臺開(kāi)發(fā)語(yǔ)言一樣，處于不可輕視的地位。這就是“網(wǎng)頁(yè)前臺開(kāi)發(fā)”。
網(wǎng)頁(yè)，我認為大致可分為二類(lèi)：一類(lèi)為呈現內容型的，如一般的內容頁(yè)面。另一類(lèi)就是注重應用型的，如以Gmail為首的。當然，一般的網(wǎng)頁(yè)都是二者都有的，只是孰輕孰重罷了。在注重用戶(hù)體驗、交互的今天，網(wǎng)頁(yè)前臺腳本開(kāi)發(fā)擔任了非常重要的角色。
網(wǎng)頁(yè)制作行業(yè)的分工與合作模式現在還處于摸索階段，所以說(shuō)，對于行為層代碼的編寫(xiě)工作到底屬于網(wǎng)頁(yè)制作人員還是屬于開(kāi)發(fā)人員的。我覺(jué)得應該看各個(gè)開(kāi)發(fā)團隊的具體情況而定。不管怎么樣，作為頁(yè)面制作人員我覺(jué)得還是應該對Javascript以及DOM有所了解的。
五、頁(yè)面制作人員應該了解的知識
如果說(shuō)美工只負責出效果圖，程序員只負責數據處理的話(huà)。那么網(wǎng)頁(yè)制作人員需要負責的東西無(wú)疑是最多的。
我所使用的工具軟件列表
我推薦的資源列表
網(wǎng)站：
http://www.w3.org
http://www.blueidea.com
http://www.w3cn.org
http://www.csszengarden.com/
http://yuntian.cnblogs.com/
http://sheneyan.com/
http://andy.andymao.com/
http://www.forest53.com/
教程：
樣式表中文手冊 -蘇昱
樣式表濾鏡中文手冊 -蘇昱
文檔對象模型中文手冊 -蘇昱
在30天內打造更具親和力的網(wǎng)站
網(wǎng)站重構
《CSS網(wǎng)站布局實(shí)錄》
javascript寶典（第四版）
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2713875-1-1.html
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1488618
聯(lián)系客服
