在CSDN上看到這篇文章，作者簡要的從HTML、css、JS、腳本等一直講到XML，對于初學(xué)制作網(wǎng)站和還在網(wǎng)站開發(fā)中摸索的朋友應(yīng)該有一些幫助。
作者網(wǎng)站：taowen（http://taowen.bitapf.org 或者 http://www.noasia.net/taowen ）
1、我用HTML進(jìn)行設(shè)計(jì)
曾經(jīng)我以為我蠻特別的，我喜歡用記事本來寫很簡單很簡單的HTML。而且，我看的關(guān)于網(wǎng)頁的第一個教程也就是教你 < H1 >啊這些標(biāo)簽的教程。相信那個著名的教程，很多人都有看過。只是很多看過了之后不一定會自己去手寫這些代碼，只是知道frontpage這樣的工具背后的原理就好了。
但是時間久了還是覺得蠻累的。因?yàn)槲覍懘a的時候畢竟是要靠自己的大腦去想象最終的外觀會是什么，所以有的時候還是蠻想去用Dreamweaver這樣的工具。也難怪那些所見即所得的工具會有那么多用戶了，因?yàn)閷懙臅r候就直接看到了最終的呈現(xiàn)。
手寫代碼的時候，如果遇到了重要的內(nèi)容，我會用< FONT size=+0 >這樣的標(biāo)簽特意去改變一下外觀。遇到了列表的內(nèi)容的時候會用 < UL >啊這樣的標(biāo)簽，產(chǎn)生1234的標(biāo)號，或者一個個的圓點(diǎn)。其實(shí)有的時候覺得html挺簡單的，因?yàn)闃?biāo)簽的數(shù)量很有限嘛。
2、我使用HTML的表格
HTML的表格是很有意思的東西。當(dāng)你遇到了要列表的東西的時候，如果是沒有表頭而且是一列的時候，你可能會用 < OL >這樣的單列。如果是兩列，可能就會用 < TABLE >了。而且用起來也不是很復(fù)雜， < TBODY > < TR >就是開一行， < TD >就是一列。當(dāng)然還有很多種排法了�；镜囊簿褪欠址礁瘢缓蠓艝|西。
表格有趣的地方是，你設(shè)計(jì)form這樣的東西的時候也會用表格。雖然每個單元格的內(nèi)容之間沒有什么意義上的關(guān)聯(lián)了。不像你的成績單列表那樣，數(shù)學(xué)成績一列，語文成績一列。在form中使用表格僅僅是為了最終的版式上的問題。利用單元格把form中的元件進(jìn)行定位。
后來表格的排版作用用到了整個頁面的排版，而且越用越復(fù)雜，表格加表格。直接導(dǎo)致了我這樣手寫代碼的人無法去修改，去編寫這樣的頁面。一度讓我很傷心，覺得這個世界被Dreamweaver這樣的工具的使用者掌握者，因?yàn)橹挥欣盟娂此貌拍軌蛉ピO(shè)計(jì)這樣外觀豐富的主頁。
3、我還用過css
css是讓我激動的東西。我承認(rèn)這點(diǎn)。我曾經(jīng)夢想，我寫網(wǎng)頁的時候只要把每塊內(nèi)容指定好了class。以后要改變網(wǎng)頁的外觀就只需要把css換調(diào)就可以了。而且css可以是內(nèi)含的也可以是外部用< LINK >鏈接的。我要把網(wǎng)站改版把css的內(nèi)容換一下就可以了。
而且css還有@import，利用它我還可以在網(wǎng)站的每個目錄下都放一個style.css，然后利用@import包含站點(diǎn)的樣式表。這樣每個網(wǎng)頁就不用..這樣的目錄選擇符來選擇在父目錄中的樣式表了。這個特性著實(shí)讓我很興奮。
我的夢想越來越清晰，就是有朝一日，我寫的網(wǎng)頁能夠很輕易的更改外觀，而且編寫的時候再也不用自己去使用< FONT size=+0 >這樣的標(biāo)簽了。
4、javascript也是讓人好奇的東西
我相信網(wǎng)絡(luò)發(fā)展還不如現(xiàn)在這么發(fā)達(dá)的時候就開始設(shè)計(jì)網(wǎng)頁的朋友，一定對于各式各樣的javascript非常熟悉。比如跟隨鼠標(biāo)的星星，跑馬燈之類的東西。javascript設(shè)計(jì)出來是為了實(shí)現(xiàn)客戶端的一定交互性的。javascript之所以能夠交互是因?yàn)�，它能夠通過DOM操縱你看到的html頁面，而且能夠通過html元素中的事件屬性得到你的輸入。
因?yàn)閖avascript能夠通過DOM把html的頁面進(jìn)行改變。這個性質(zhì)其實(shí)也讓我激動了好久。比如leoboard的最新帖子這樣的信息，就是通過一個 < SCRIPT >的鏈接，鏈接到一個cgi上面，它產(chǎn)生的就是一段js腳本，通過document的函數(shù)寫出一段html代碼。也就是說，javascript能夠“動態(tài)”的產(chǎn)生html代碼。
由于javascript的這個功能，我又開始做夢了。希望能夠整個網(wǎng)站都是通過互相包含的javascript組成。我把我的內(nèi)容都寫在javascript的變量之中，然后通過一定規(guī)則組合通過DOM的函數(shù)把內(nèi)容以一定的模板風(fēng)格寫入到最終的html輸出之中。
5、再聞css
一開始聽說css，也許那個時候還是css1的時代吧。只知道css能夠設(shè)定一定元素的外觀顯示，比如字體啊，空白什么的。關(guān)于css的排版功能一概不知。第一次做css的夢的時候，其實(shí)就是因?yàn)橐裩tml進(jìn)行排版控制，不得不用很多的table這個原因破滅的。所以當(dāng)我知道css的功能很強(qiáng)大，可以進(jìn)行各種版面控制的時候，就又開始做夢了。
把內(nèi)容按照其性質(zhì)放到一些< div class="..." >這樣的標(biāo)簽之中，用不同的css樣式表，能夠把這些div定位到頁面的不同地方，而且顯示也是不一樣的。這樣我就能夠在寫html的時候以任意的順序來寫，只管內(nèi)容。而css會根據(jù)你對內(nèi)容的描述（class是什么）把內(nèi)容進(jìn)行定位排版和顯示。
所以說，以前我知道的css只把元素的內(nèi)容和顯示分開了，但是元素的位置還是與在源代碼中的位置相關(guān)。而現(xiàn)在知道的css，能夠讓元素只管自己的事情，告訴css自己是什么（class是什么），不用再考慮自己在文檔中的位置了。這樣不就實(shí)現(xiàn)了內(nèi)容與表現(xiàn)分離了嗎？不就是我等用記事本寫網(wǎng)頁的網(wǎng)頁設(shè)計(jì)者追求的嗎？
6、內(nèi)容與外觀分離
我相信這句話很多人都聽說過，夢想過。我的夢從模糊，到清晰，一直都在想著有朝一日我能夠只管把我要傳達(dá)的內(nèi)容寫下來，讓其他的人來給我排版給我定外觀。It is a Dream。
我們只從一個網(wǎng)頁設(shè)計(jì)者的角度，而且是一個普通網(wǎng)頁設(shè)計(jì)者的角度來談這個問題。不要把什么中間件，應(yīng)用服務(wù)器什么程序高手津津樂道的術(shù)語來壓“我們”。
為什么要把內(nèi)容和外觀分離我相信很多人都有自己的體會。我的體會很簡單。當(dāng)年自己手寫html的時候，我對我的內(nèi)容很有信心，我知道我要說什么，我有內(nèi)容。但是我對于如何排版很沒有信息，我想讓別人，或者自己以后來把內(nèi)容進(jìn)行排版。但是事情是很讓人失望的，我基本上只有兩個對策。把內(nèi)容的格式變得簡單得不能再簡單，只是html的最基本元素的線性排列。除了 < P >就是 < P >這樣的頁面，樸素得不能再樸素。要么就是設(shè)計(jì)一個很好看，很復(fù)雜的頁面。我自己手工的把內(nèi)容粘貼到頁面的模板之中去。如果有很多類似的網(wǎng)頁，還要保證它們的風(fēng)格是一致的。如果每個頁面還有到其他頁面的鏈接，比如是上一頁，下一頁之類的，It is a nightmare。
把內(nèi)容與外觀分離，就這樣成為了我16歲的夢想。
7、perl，php，asp
我很坦白，我從來沒有用過jsp，我不喜歡java提供的那些東西（請不要因此罵我淺薄，我知道它們的商業(yè)價值，但是現(xiàn)在僅僅是說網(wǎng)頁設(shè)計(jì)）。
按照順序，我用過的是這么三種網(wǎng)絡(luò)腳本。perl是我接觸的最早的一個網(wǎng)絡(luò)腳本，那個時候一般都是用cgi這個名字。后來我有遇到了php，最后才是asp。
這里我只是談網(wǎng)頁的問題，不涉及到這些網(wǎng)絡(luò)腳本怎么實(shí)現(xiàn)網(wǎng)絡(luò)的交互的。也只是就著網(wǎng)絡(luò)腳本，說說它們怎么又能實(shí)現(xiàn)內(nèi)容與外觀分離的。而且這三種雖然在訪問文件，訪問數(shù)據(jù)庫，使用模板，產(chǎn)生html輸出各個階段和模塊上各有不同，但是原理一樣，方法相似，所以通稱網(wǎng)絡(luò)腳本。
網(wǎng)絡(luò)腳本是讓我激動的東西，而且同樣作為engine驅(qū)動著很多現(xiàn)在正在運(yùn)行的網(wǎng)站，比如經(jīng)典的LAMP組合。它們關(guān)鍵的地方是能夠產(chǎn)生html輸出。因?yàn)閔tml不再是你自己手寫的了，所以不需要經(jīng)過你的手就能把html的輸出產(chǎn)生變動，這樣就有靈活性。
為了文章能夠分出更多的節(jié)，我按照我個人的認(rèn)識順序來看看網(wǎng)絡(luò)腳本使用
8、網(wǎng)絡(luò)腳本和文件
我最先看到網(wǎng)絡(luò)腳本的使用，是leoboard這樣的cgi程序，它使用文本作為數(shù)據(jù)的存放媒介。數(shù)據(jù)來源是文本，然后cgi中的perl程序會對文本進(jìn)行解析，然后把解析的結(jié)果可能會放到變量之中，最后變成html的輸出。
這里就是通過cgi程序作為中介，把文本的內(nèi)容表現(xiàn)到了html之中。
9、網(wǎng)絡(luò)腳本和數(shù)據(jù)庫
后來我才看到了網(wǎng)絡(luò)腳本和數(shù)據(jù)庫的連用。經(jīng)典的搭配有php+mysql和asp+access，我都有用過，不過都是很簡單的。把數(shù)據(jù)儲存在數(shù)據(jù)庫中好處當(dāng)然是多多，專業(yè)人士可以有很多事務(wù)啊之類的術(shù)語來描述其好處。不過顯而易見的是，儲存和獲取的方法是標(biāo)準(zhǔn)化的，通過SQL嘛。而用文本作為存放媒介，文件格式以及解析，還有文件的完整性，容錯這些都需要網(wǎng)絡(luò)腳本設(shè)計(jì)者自己來控制，雖然很自由，但是更多的是勞累。同樣，一種腳本有自己的一種格式，多浪費(fèi)。要換論壇程序這樣的情況出現(xiàn)的時候，又需要了很多麻煩。
10、網(wǎng)絡(luò)腳本和模板
我記得當(dāng)時我學(xué)asp的時候，很多文章就是這么介紹的。asp能夠夾雜在html的代碼之中，可以很方便的使用。而我使用perl的cgi的時候，很多程序又是使用滿是$xxx的模板來做html輸出的。這個時候，我就想who is better？
模板我還是蠻欣賞的。初級階段的模板就是很多以前的cgi的網(wǎng)絡(luò)文章程序中的那樣，在html中放perl的變量名，然后最后輸出的時候做一個替換�，F(xiàn)在的模板當(dāng)然要復(fù)雜好多，理論也很多。但是，我們可以看到的一點(diǎn)是模板做到了“把業(yè)務(wù)邏輯和表現(xiàn)邏輯分離”。
一般模板和腳本的關(guān)聯(lián)就是通過一些兩方面都知道名字的變量或者數(shù)組。然后腳本在變量中預(yù)先把內(nèi)容存入這些變量之中，模板再把變量和數(shù)組中的內(nèi)容提取出來插入到html之中。由于模板大部分是由html組成，所以比較適合給設(shè)計(jì)人員來設(shè)計(jì)。而且腳本的任務(wù)也就僅僅致力于從數(shù)據(jù)庫也好，文本也好，這樣的數(shù)據(jù)源中取出內(nèi)容，進(jìn)行一些加工，然后存入到變量之中。至少讓腳本程序員免于考慮最終的外觀問題。
11、網(wǎng)絡(luò)腳本的時代
我們現(xiàn)在基本上就處在這么一個時代之中，大部分的頁面已經(jīng)不是手工編寫的html了。而是由網(wǎng)絡(luò)腳本動態(tài)產(chǎn)生的。方法步驟都是類似的：
數(shù)據(jù)源+網(wǎng)絡(luò)腳本+模板=頁面
似乎故事已經(jīng)到了終結(jié)了。因?yàn)槊缐粢呀?jīng)成真了。利用數(shù)據(jù)庫中存放數(shù)據(jù)，模板來控制顯示，網(wǎng)絡(luò)腳本進(jìn)行一些計(jì)算和溝通工作，內(nèi)容和外觀分離的夢想已經(jīng)實(shí)現(xiàn)了。而且，現(xiàn)下的很多現(xiàn)成的程序，一些CMS（內(nèi)容管理系統(tǒng)），你直接在服務(wù)器上安裝好，就能夠享受其便利了。
但是，我們還有更多選擇。
12、XML的登臺
XML應(yīng)該不是什么陌生的東西了。如果你不知道，說明你可能已經(jīng)很久都沒有關(guān)心過網(wǎng)頁設(shè)計(jì)或者說是計(jì)算機(jī)這個行業(yè)了。XML的好處，長處，已經(jīng)被說爛了。我就不多說了。
我把XML分為兩類：作為數(shù)據(jù)或者文檔的XML，以及功能性的XML。這個分類是我自己下的，功能性的XML指的就是HTML，SVG，MathML這些。可能SVG什么的你不了解，但是至少HTML你知道吧。關(guān)于HTML也是XML這個觀點(diǎn)，你應(yīng)該聽說過。HTML為什么被我說成功能性的XML呢？因?yàn)槿绻銥g覽器為觀點(diǎn)，它認(rèn)識HTML，它能夠把HTML標(biāo)記的能內(nèi)容作出顯示。而如果是一般的XML，它就不認(rèn)得，如果是IE會調(diào)用內(nèi)部的一個顯示XML的模板把它顯示出來，但是有的瀏覽器就不會。也就是說，一般的XML其中的內(nèi)容元素，對于瀏覽器來說它是不知道什么意義的，而HTML的元素是對瀏覽器有特殊意義的。同樣，SVG這些XML也是這樣，雖然標(biāo)準(zhǔn)仍然在制定之中，瀏覽器對它的支援還需要一些插件。但是SVG的基本結(jié)構(gòu)不會有什么變動了，它就是通過標(biāo)簽的標(biāo)記，通過瀏覽器的讀取產(chǎn)生二維的圖像。關(guān)鍵的地方就是，瀏覽器認(rèn)得SVG中的元素，知道它的意義，并且能夠作出顯示。
自然，對于瀏覽器沒有特殊意義的XML就是文檔數(shù)據(jù)型的。把XML分為文檔為中心和數(shù)據(jù)為中心的這種分法是非常常見的。關(guān)于這個話題，我在后面繼續(xù)說。
13、HTML作為一種功能性的XML
我現(xiàn)在把HTML完全作為一種表現(xiàn)語言，它的唯一功能就是把內(nèi)容作出顯示。也就是我把在HTML中表現(xiàn)內(nèi)容的語意這個夢想給完全放棄了。HTML就是一個功能性的XML，它的目的就是讓瀏覽器顯示。要把內(nèi)容和表現(xiàn)分離，我就是要從別的數(shù)據(jù)源中轉(zhuǎn)換到HTML。
那是不是CSS就多余了？當(dāng)然不會，css的目的是幫助HTML更好的表達(dá)如何顯示這個要求。也就是XHTML+CSS共同表達(dá)的一個目的，網(wǎng)頁的外觀布局。它們的目的是一致的，而不是我以前想象中的HTML表達(dá)內(nèi)容，css來表達(dá)外觀。而且CSS的存在，能夠表達(dá)更加精確更加豐富的內(nèi)容，而且比用table這樣的表格排版更加簡潔明了。
14、XML作為HTML的源頭
我把HTML表達(dá)網(wǎng)頁的內(nèi)容這個想法給放棄了之后，很自然的想法是把XML作為HTML的數(shù)據(jù)來源。但是這并不是很常見的做法。更多的做法是，利用數(shù)據(jù)庫，利用文件然后用網(wǎng)絡(luò)腳本進(jìn)行提取，然后可能還要通過一道模板，直接產(chǎn)生HTML。其中并沒有XML的位置，那么到底在產(chǎn)生HTML的過程中需不需要XML呢？
現(xiàn)在問題已經(jīng)很明白了，HTML完全作為一種表現(xiàn)語言。焦點(diǎn)是對于HTML從何而來這個問題。務(wù)實(shí)的態(tài)度是尊重現(xiàn)有的解決方案，而且它們可以做得很好。這里只是對于XML能夠在產(chǎn)生HTML的過程中的什么階段進(jìn)行參與工作，進(jìn)行一些個人的看法的探討。
15、XML直接產(chǎn)生HTML
這個可能是很多人頭腦中首先想到的辦法。利用XSLT，把XML轉(zhuǎn)換成HTML。而且關(guān)于這個，我將在文章最后，給一個我個人的全面的想法。
我覺得利用XML產(chǎn)生HTML，主要是用在小型的純發(fā)布的場合（比如個人主頁），因?yàn)閷τ赬ML文件的更新和刪除這些，并不是很完善。而且即使是使用XML數(shù)據(jù)庫，也不能勝任大型的場合。而XML更多的是作為中間數(shù)據(jù)：
16、有數(shù)據(jù)庫產(chǎn)生XML然后產(chǎn)生HTML
這可能是一個很好的方案。只是在現(xiàn)在看來有一些多余。因?yàn)榫W(wǎng)絡(luò)腳本從數(shù)據(jù)庫中提取了內(nèi)容之后，直接就產(chǎn)生HTML了，或者調(diào)用一個模板也把HTML產(chǎn)生了。如果其中在多一個產(chǎn)生XML的過程，還需要再編寫XSLT來產(chǎn)生HTML，讓人覺得沒有這個必要。
17、XML與數(shù)據(jù)庫
很自然的，就延伸出了一個討論就是“XML與數(shù)據(jù)庫，用哪一個？”。其實(shí)這個問題之所以成為，我認(rèn)為是XML的發(fā)展不成熟。XML有其結(jié)構(gòu)和功能上的優(yōu)越性，但是同樣帶來了很大的復(fù)雜度。對于XML進(jìn)行查詢，就比對于結(jié)構(gòu)簡單的數(shù)據(jù)庫查詢復(fù)雜變數(shù)大很多。同樣，XML的表現(xiàn)力也要強(qiáng)很多。
另外還與XML的兩個用法有關(guān)，XML一方面可以用作以數(shù)據(jù)為中心，比如網(wǎng)站的客戶訂單。這和關(guān)系型的數(shù)據(jù)庫的特點(diǎn)是一致的，每個table的項(xiàng)是固定的，數(shù)據(jù)都是類似重復(fù)的。而XML同時還能用作文檔為中心的，比如你寫一篇文章時，用XML對文章進(jìn)行標(biāo)記。這樣使得標(biāo)記出現(xiàn)的位置，以及上下文就變得非常重要。
所以關(guān)于，在什么場合下用XML，什么場合下需要XML這種問題，很難有答案。至少有一點(diǎn)，隨著XML技術(shù)的完善和被越來越多的人掌握，XML會在其適合的場合越來越多的使用。
18、XML與網(wǎng)站
如果僅僅是泛泛而談XML與數(shù)據(jù)庫，我覺得是很難定論。但是如果把討論的范圍縮小到網(wǎng)站，我覺得還是很容易得出答案的。
對于交互性的場合，比如論壇，數(shù)據(jù)經(jīng)常要更新，XML就不適合。
對于發(fā)布性的場合，比如文章系統(tǒng)，XML就是一個很好的選擇。
當(dāng)然還要考慮查詢是否方便。以及XML適合描述松散的信息，比如站長信息這樣的數(shù)據(jù)存放到數(shù)據(jù)庫中顯然是overkill，而放到xml中就比較合適。所以，我個人認(rèn)為如果是個人主頁這樣性質(zhì)的網(wǎng)站，使用xml是非常合適的。
19、在個人主頁中使用XML
個人主頁一般都是無法購買那種有網(wǎng)絡(luò)腳本支持的服務(wù)器的，更不用說數(shù)據(jù)庫了，這個是來自于現(xiàn)實(shí)環(huán)境的限制。
個人主頁的數(shù)據(jù)一般比較松散凌亂，而且文檔比較多，比較適合XML來描述，這個是顯示的需求。
所以綜合了這兩點(diǎn)，對于一般個人主頁的站長來說，這樣的組合方案是很不錯的：
1）用XML來描述網(wǎng)站數(shù)據(jù)，用XSLT來做轉(zhuǎn)換
2）注冊一個免費(fèi)的留言板
3）注冊一個免費(fèi)的BLOG
這樣你就只需要一個HTML空間，同時又可以實(shí)現(xiàn)內(nèi)容與外觀分離，至少對我來說是一個夢想的實(shí)現(xiàn)。
20、最終實(shí)現(xiàn)指導(dǎo)
這個純粹是個人意見，而且技術(shù)門檻相對比較高一些，估計(jì)沒有人會采納。
第一步：
描述你的網(wǎng)站內(nèi)容。如何描述完全是你的自由，而且是否使用DocBook這樣的東西來描述你的文章這樣的東西也是你的自由。描述應(yīng)該分布在很多個xml文件之中，可以利用XInclude技術(shù)，也就是利用這樣的標(biāo)簽把所有的xml逐級串起來，最終是一個site.xml。找到了site.xml，就找到了你整個網(wǎng)站的內(nèi)容。
你可以不用xinclude，而只是簡單的用一個元素記錄下文件位置，然后在XSLT中用document函數(shù)讀取也是可行的。
第二步：
描述你的網(wǎng)站的結(jié)構(gòu)，也就是頁面的信息。這個我是用sitemap.xsl來做的。最終產(chǎn)生的就是一個sitemap.xml。里面由類似這樣的元素組成：
這樣有兩個非常重要的作用，其一是能夠讓自動化的工具從產(chǎn)生的頁面信息中提取內(nèi)容，自動調(diào)用xslt處理器把網(wǎng)站給編譯出來。其二是能夠讓頁面索引到其他頁面，比如你要在一篇文章的頁面中鏈接到所屬的分類的所有其他的文章，你就可以在sitemap.xml中提供出哪些頁面是干什么的，比如所屬分類是什么。然后具體page的xsl就可以在sitemap.xml中根據(jù)這些信息，然后找到頁面最終寫出超級鏈接。
第三步：
設(shè)計(jì)每個頁面的xslt。xslt的輸入有兩個，一個是site.xml，另外一個就是sitemap.xml。從site.xml得到內(nèi)容，從sitemap.xml得到其他頁面的位置。
第四步：
利用你喜歡的腳本工具（設(shè)置是xslt+bat），自動化的完成整站的編譯工作。你還可以提供選項(xiàng)選擇編譯什么頁面。
第五步：
你也可以自己編寫一個工具來實(shí)現(xiàn)新舊對比的ftp上傳工作。
21、后記
既然把HTML作為了完全的表現(xiàn)工具，那么HTML的地位就和FLASH啊這些應(yīng)該是平等的。所以網(wǎng)頁設(shè)計(jì)完全可以把所有數(shù)據(jù)最終做到xml中，然后傳遞給FLASH，讓FLASH來做表現(xiàn)層。這樣同樣做到了內(nèi)容與外觀分離。
OK，對于網(wǎng)頁設(shè)計(jì)的技術(shù)的我的思考就基本上告一段落了。
|
