現(xiàn)在做主頁(yè)的朋友越來(lái)越多。而對(duì)于沒(méi)有學(xué)過(guò)設(shè)計(jì)，以及沒(méi)有學(xué)過(guò)美術(shù)的朋友而言，怎樣去提高自己網(wǎng)頁(yè)設(shè)計(jì)水平，或做出自己的個(gè)性網(wǎng)頁(yè)呢？技術(shù)也只是為了設(shè)計(jì)而服務(wù)的，在技術(shù)的同等條件下，怎樣來(lái)展示自己？一般網(wǎng)頁(yè)編排內(nèi)容有：文字、靜態(tài)圖片和動(dòng)畫(huà)。具體可實(shí)現(xiàn)的技術(shù)更多了，包括視頻、音樂(lè)和音效、交互式網(wǎng)頁(yè)、高科技虛擬等等。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)候，可以廣泛應(yīng)用各種技術(shù)。
　　如果把網(wǎng)頁(yè)比喻成人的話，先要有骨架，也就是網(wǎng)頁(yè)的排版框架。我進(jìn)行了大致的分類，主要是：分欄式結(jié)構(gòu)，區(qū)塊分布，平面圖片設(shè)計(jì)，以及非規(guī)律的設(shè)計(jì)，下面我將逐一講解。

• 分欄式結(jié)構(gòu)

　　分欄結(jié)構(gòu)，也是最常見(jiàn)的方式。常見(jiàn)的有如：Epitonic.com（http://www.epitonic.com/）的二分欄設(shè)計(jì)，七色谷（http://www.7cv.com）的三分欄，以及國(guó)外常見(jiàn)的四分欄結(jié)構(gòu)，我甚至還特殊設(shè)計(jì)過(guò)五分欄（http://www.home2v.com/vcity）的網(wǎng)頁(yè)。通常的布局編排情況有如左圖所示。1是二分欄，2是標(biāo)準(zhǔn)三分欄，3是四分欄，4～6是一些LOGO以及導(dǎo)航在下面的情況，而通常會(huì)使用Frame。7～9則是一般的變化，而我這里所列出的一些例子也是很泛泛的。見(jiàn)到一些網(wǎng)頁(yè)的設(shè)計(jì)，判斷上，有一些是以顏色來(lái)分欄的，有一些是利用導(dǎo)航分欄的。不論你用那種設(shè)計(jì)方法，最重要的是心中有數(shù)，去編排自己的內(nèi)容。設(shè)計(jì)也只是為了你的內(nèi)容服務(wù)的。
　　一個(gè)快捷的方法是，在紙上勾畫(huà)一下，用你的內(nèi)容名稱填充一下，粗略地進(jìn)行規(guī)劃。在標(biāo)準(zhǔn)的構(gòu)架上加一些變化，就會(huì)有很多新的編排形式出現(xiàn)，比如上圖中的7～9。有空大家可以多在紙上畫(huà)畫(huà)，也是一種鍛煉，加一些小的變化，也就使你的設(shè)計(jì)與他人不同，脫穎而出。

• 區(qū)塊分布

　　區(qū)塊編排，是以顏色或線條，來(lái)劃分一些區(qū)域的編排方式，其實(shí)也就是分欄結(jié)構(gòu)的變異。如果說(shuō)分欄設(shè)計(jì)太過(guò)規(guī)范沒(méi)有新意的話，那么就要看看區(qū)塊功用了。如左圖所示：這樣的設(shè)計(jì)，很漂亮，不過(guò)也要依據(jù)內(nèi)容許可程度，國(guó)外用此類設(shè)計(jì)手法的很多，色彩運(yùn)用上也很出色（以后在本系列中會(huì)提到一些色彩問(wèn)題）。區(qū)域編排的設(shè)計(jì)，一般和豎分欄不同的是，頁(yè)面一般情況下不長(zhǎng)，一屏或一屏半左右的長(zhǎng)度，用于信息量少的企業(yè)站點(diǎn)，和專業(yè)型站點(diǎn)。還有就是看你是什么內(nèi)容的個(gè)人主頁(yè)，大部分情況都很適用。但是卻不適合門(mén)戶站點(diǎn)和信息量很大的站點(diǎn)。
　　區(qū)域的設(shè)置可大可小，但是依據(jù)內(nèi)容編排。在分欄式結(jié)構(gòu)里面也可以套設(shè)區(qū)域結(jié)構(gòu)，所以說(shuō)，這種骨架結(jié)構(gòu)是“前途無(wú)量”，有待大家進(jìn)一步探索。

• 平面圖片設(shè)計(jì)

　　平面設(shè)計(jì)，如果是非動(dòng)態(tài)的Web design，那么也可以劃分為平面設(shè)計(jì)的一種。當(dāng)然，在網(wǎng)頁(yè)里面用整張圖片分割的技法，也是非常有視覺(jué)效果的。這個(gè)也是個(gè)人主頁(yè)，在內(nèi)容很少的情況下，通常所選用的方式。
　　對(duì)于平面設(shè)計(jì)，以后在頁(yè)面設(shè)計(jì)，和創(chuàng)意無(wú)限會(huì)分別具體講解。
　　在這里我就給大家一些好的網(wǎng)站請(qǐng)觀賞：http://www.yimeng.org、http://www.coolhomepages.com，多留心學(xué)習(xí)，才能提高自己，多看多思考。
　　你可以把看過(guò)的站點(diǎn)，你認(rèn)為好的，可以保存下來(lái)做資源。如果有一些你不理解的特效技巧的則頁(yè)面另存為做參考，這個(gè)是很好的積累過(guò)程。

• 非規(guī)律設(shè)計(jì)

　　為了能夠更好編排網(wǎng)頁(yè)，以及顯示個(gè)人的設(shè)計(jì)水平，現(xiàn)在有了更多更好的構(gòu)架涌現(xiàn)出來(lái)，其實(shí)也就是以上幾種通常規(guī)律的結(jié)合。這也就到了考驗(yàn)?zāi)愕臅r(shí)候了，而我能做的就是多多推薦一些好的站點(diǎn)給大家，更多是練習(xí)才能提高的。那么對(duì)于互動(dòng)的網(wǎng)頁(yè)來(lái)說(shuō)，如全Flash網(wǎng)站的，除片頭外，構(gòu)架都逃不出以上的幾條歸類。

• 推薦網(wǎng)站

一、二分欄

　　http://www.epitonic.com：國(guó)外的，free MP3 Music，設(shè)計(jì)很不錯(cuò)，緊湊，但是不會(huì)給人窒息的感覺(jué)。

　　http://www.icograda.org

　　http://www.ericsson.com.tw：易利信手機(jī)官方站點(diǎn)。有一個(gè)很不錯(cuò)的Flash片頭。以及內(nèi)部的二分欄設(shè)計(jì)。

二、三分欄框架

　　http://www.wayvision.net：wayin公司系列站點(diǎn)。

　　http://www.circle.bc.ca：超級(jí)站點(diǎn)，工作室，看看它的about us就知道，都是什么來(lái)頭。也是很不錯(cuò)的三分欄。

　　http://www.deviantart.com：設(shè)計(jì)出色，酷得很，資源多多。就是速度慢。

　　國(guó)內(nèi)三分欄更多了。我這里就不推薦了。盡管三分欄很多見(jiàn)，但是做好了也不遜色。

三、四分欄框架

　　http://inertia.d2.hu：粉紅色，開(kāi)花的Flash盆栽給人很多啟發(fā)。

　　再這里多說(shuō)幾句，豎分欄的設(shè)計(jì)里面會(huì)有很多小的變化。但是歸類也就這些。有時(shí)候看起來(lái)很模糊。但是就是因?yàn)樽兓?，才突出個(gè)性。這里的提示不對(duì)。要看你的內(nèi)容來(lái)變化。會(huì)有更多意想不到好的創(chuàng)意出來(lái)