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