網(wǎng)頁設(shè)計(jì)技術(shù)發(fā)展歷史及設(shè)計(jì)案例回顧

1、自從第一個(gè)網(wǎng)站在上個(gè)世紀(jì)90年代初誕生以來，設(shè)計(jì)師們嘗試了各種網(wǎng)頁的視覺效果。早期的網(wǎng)頁完全由文本構(gòu)成，除了一些小圖片和毫無布局可言的標(biāo)題與段落。時(shí)代在不斷進(jìn)步，接下來出現(xiàn)了表格布局，然后是Flash,最后是基于CSS的網(wǎng)頁設(shè)計(jì)。本文涵蓋了不同時(shí)期網(wǎng)頁設(shè)計(jì)的歷史，并以W3CYahoo、Altavista等網(wǎng)站不同時(shí)期的頁面設(shè)計(jì)為例做了回顧和比較。第一張網(wǎng)頁1991年8月，TimBerners-Lee發(fā)布了第一個(gè)簡(jiǎn)單的，基于文本，包含幾個(gè)鏈接的網(wǎng)站。原始網(wǎng)頁的副本現(xiàn)在仍然在線。它有十多個(gè)鏈接，試圖告訴人們什么是萬維網(wǎng)。推薦：HTML®查手冊(cè)隨后的網(wǎng)頁都比較相似，完全基于文本，單欄設(shè)計(jì)，

2、有一些鏈接等等。最初版本的HTML只有最基本的內(nèi)容結(jié)構(gòu)：標(biāo)題（h1,h2.）,段落（p）和鏈接（a）。隨后新版本的HTML開始允許在頁面上添加圖片（img）,然后開始支持制作表格（table）。W3CH現(xiàn)1994年，萬維網(wǎng)聯(lián)盟（W3C）立，他們將HTML確立為網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。這一舉動(dòng)阻斷了任何獨(dú)立公司想要開發(fā)專利的瀏覽器和相應(yīng)的程序語言的野心，因?yàn)檫@會(huì)對(duì)網(wǎng)絡(luò)的完整性產(chǎn)生不利的影響。W3c一直致力于確立與維護(hù)網(wǎng)頁編程語言的標(biāo)準(zhǔn)（例如JavaScript）。Thefirstwebpage(1992)Yahoo!(1996)Altavista(1996)基于表格的設(shè)計(jì)表格布局使網(wǎng)頁設(shè)計(jì)師制作網(wǎng)站

3、時(shí)有了更多選擇。在HTML中表格標(biāo)簽的本意是為了顯示表格化的數(shù)據(jù)，但是設(shè)計(jì)師很快意識(shí)到可以利用表格來構(gòu)造他們?cè)O(shè)計(jì)的網(wǎng)頁，這樣就可以制作較以往作品更加復(fù)雜的，多欄目的網(wǎng)頁。表格布局就這樣流行了起來，融合了背景圖片切片技術(shù)，常給人以看起來較實(shí)際布局簡(jiǎn)潔得多的結(jié)構(gòu)。結(jié)構(gòu)設(shè)計(jì)這個(gè)時(shí)期的網(wǎng)頁設(shè)計(jì)還不太關(guān)注語義化和可用性方面的問題，主要還在追求良好的結(jié)構(gòu)美學(xué)。同一時(shí)期也是大量應(yīng)用GIF占位圖片控制留白的時(shí)期。一些主流的公司甚至訓(xùn)練設(shè)計(jì)師如何使用GIF占位；如微輕的“關(guān)于HTML表格中的GIF占位”。第一批主要應(yīng)用表格布局的“所見即所得"網(wǎng)頁設(shè)計(jì)軟件的發(fā)展助長(zhǎng)了表格的應(yīng)用。另外，某些軟件自動(dòng)生成的

4、表格如此復(fù)雜以至于許多設(shè)計(jì)師不可能從頭手寫代碼(例如每行只有1px高卻包含了幾百列的表格)。即使是稍微復(fù)雜一點(diǎn)兒的網(wǎng)頁(比如多欄目頁面)，設(shè)計(jì)師們都要依賴于表格來創(chuàng)建。W3C(1998)Yahoo!(2002)Altavista(2002)請(qǐng)點(diǎn)擊“下一頁”，閱讀更多精彩內(nèi)容?；贔lash的網(wǎng)頁設(shè)計(jì)Flash（最初被稱為FutureSplashAnimator,然后是MacromediaFlash,現(xiàn)在叫做AdobeFlash）開發(fā)于1996年。起初只有非?；镜墓ぞ吲c時(shí)間線，最終發(fā)展成能夠開發(fā)整套網(wǎng)站的強(qiáng)大工具。Flash提供了大量的遠(yuǎn)遠(yuǎn)超過HTML所能夠?qū)崿F(xiàn)的視覺表現(xiàn)效果。Macromed

5、iaShockwave在Flash之前，有MacromediaShockwave（之后是AdobeShockwave）。Shockwave用于為CD-ROM制作目錄和多媒體內(nèi)容，Shockwave文件體積龐大，考慮到當(dāng)時(shí)的網(wǎng)絡(luò)連接以撥號(hào)上網(wǎng)為主，應(yīng)用Shockwave還是不夠明智的。與之相比，F(xiàn)lash影片體積小巧，在線應(yīng)用更加可行。Flash的優(yōu)勢(shì)在視覺效果上HTML有很多局限性，尤其是早期的HTML要實(shí)現(xiàn)復(fù)雜的設(shè)計(jì)，人們往往需要制作大量瘋狂的表格結(jié)構(gòu)并/或依靠圖像占位符（就像某些所見即所得軟件所做的那樣）。Flash使創(chuàng)建復(fù)雜的，互動(dòng)性強(qiáng)并且擁有動(dòng)畫元素的網(wǎng)站成為可能。動(dòng)態(tài)HTML（DHT

6、ML）在Flash初次涉足網(wǎng)頁設(shè)計(jì)領(lǐng)域的同一時(shí)期（20世紀(jì)90年代末至21世紀(jì)初）,由幾種網(wǎng)絡(luò)技術(shù)（如JavaScript和一些服務(wù)器端腳本語言）組成的用于創(chuàng)作互動(dòng)/動(dòng)畫頁面元素的DHTML技術(shù)的推廣，也在如火如荼地進(jìn)行中。這時(shí)，隨著Flash的發(fā)展和DHTML的普及，不只是閱讀靜態(tài)內(nèi)容，還允許用戶與網(wǎng)頁內(nèi)容互動(dòng)的交互頁面的概念誕生了。3DML3DML是一個(gè)鮮為人知的用于制作三維站點(diǎn)的網(wǎng)頁設(shè)計(jì)語言。由MichaelPowers編寫于1996年，3DML文件實(shí)際上由一種非標(biāo)準(zhǔn)的XML語言寫成。FlatlandRover是一款獨(dú)立開發(fā)的3DML瀏覽器，盡管還有對(duì)應(yīng)的InternetExplorer

7、,NetscapeNavigator,theAOLbrowser和Opera瀏覽器插件，但隨著開發(fā)進(jìn)度停滯于2005年，F(xiàn)irefox的插件始終未能問世?，F(xiàn)在仍然有應(yīng)用3DML勾建的網(wǎng)站，但如果沒有上述瀏覽器或是相應(yīng)插件，3DMIM是不可見的。3DML曾用于制彳稱作“Sopts”的世界與場(chǎng)景。3DMLt正的殺手銅是比大多數(shù)語言都快的3D模型構(gòu)建速度（就算是Flash也需要打開Flash桌面應(yīng)用來創(chuàng)建并編輯Flash內(nèi)容）與更加小巧的文件體積?；贑SS的設(shè)計(jì)CSS設(shè)計(jì)受到關(guān)注始于21世紀(jì)初。雖然CSS已經(jīng)存在很長(zhǎng)一段時(shí)間了，但是在當(dāng)時(shí)仍然缺乏主流瀏覽器的支持，并且許多設(shè)計(jì)師對(duì)它很是陌生(甚至感到恐懼)。與表格布局與Flash網(wǎng)頁相比，CSSW許多優(yōu)勢(shì)。首先它將網(wǎng)頁的內(nèi)容與樣式相分離，這從本質(zhì)上意味著視覺表現(xiàn)與內(nèi)容結(jié)構(gòu)的分離。推薦：CSS速查手冊(cè)CSS是網(wǎng)頁布局的最佳實(shí)踐，與CSSffi比表格布局根本不值一提。CSSfe大地縮減了標(biāo)簽的混亂還創(chuàng)造了簡(jiǎn)潔并語義化的網(wǎng)頁布局。CSS還使得網(wǎng)站維護(hù)更加簡(jiǎn)便，因?yàn)榫W(wǎng)頁的結(jié)構(gòu)與樣式是相互分離的。人們完全可以改變一個(gè)基于CSSS計(jì)的網(wǎng)站的視覺效果而不去改動(dòng)網(wǎng)站的內(nèi)容。由CSSS計(jì)的網(wǎng)頁的文件體積往往小于基于表格布局的網(wǎng)頁，這也意味