規(guī)劃主頁(yè)的第一步是規(guī)劃版面布局。 
　　就象傳統(tǒng)的報(bào)刊雜志編輯一樣，咱們將網(wǎng)頁(yè)看作一張報(bào)紙，一本雜志來(lái)進(jìn)行排版布局。盡管動(dòng)態(tài)網(wǎng)頁(yè)技能的開(kāi)展使得咱們開(kāi)始趨向于學(xué)習(xí)場(chǎng)景編劇，但是固定的網(wǎng)頁(yè)版面規(guī)劃基礎(chǔ)依然是有必要學(xué)習(xí)和把握的。

它們的基本原理是共通的，你能夠體會(huì)要點(diǎn)，舉一反三。

　　版面指的是閱讀器看到的完好的一個(gè)頁(yè)面（能夠包括框架和層）。因?yàn)槊總�(gè)人的顯示器分辨率不同，所以同一個(gè)頁(yè)面的巨細(xì)或許呈現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。

　　布局，便是以最適合閱讀的方法將圖片和文字排放在頁(yè)面的不同方位。你或許留意到：“最適合”是一個(gè)不確定的形容詞，什么才是最適合的呢？抱愧的是阿捷不能也不或許給您一個(gè)完好的正確的答案。就比方有人希望知道成功的訣竅是什么，成功者只能建議您用什么方法，什么途徑才干最簡(jiǎn)單獲得成功，而不或許有一步成功的"訣竅"告訴您。

　　咱們?cè)谝?guī)劃考慮系列文章第四篇講過(guò)站點(diǎn)全體的構(gòu)思，版面布局也是一個(gè)構(gòu)思的問(wèn)題，但要比站點(diǎn)全體的構(gòu)思簡(jiǎn)單，有規(guī)律的多。讓咱們先來(lái)了解一下版面布局的步驟：

一.草案

　　新建頁(yè)面就象一張白紙，沒(méi)有任何表格，框架和約定俗成的東西，你能夠盡或許的發(fā)揮你的想象力，將你想到的"現(xiàn)象"畫(huà)上去(咱們建議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也能夠)。這歸于發(fā)明階段，不考究細(xì)膩整齊，不必考慮細(xì)節(jié)功用，只以粗陋的線條勾畫(huà)出構(gòu)思的輪廓即可。盡你的或許多畫(huà)幾張，最后選定一個(gè)滿意的作為持續(xù)創(chuàng)作的腳本。

二.粗略布局

　　在草案的基礎(chǔ)上，將你確定需要放置的功用模塊安排到頁(yè)面上。(注：功用模塊咱們?cè)?主頁(yè)規(guī)劃-引子"中提過(guò)，首要包括網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計(jì)數(shù)器,版權(quán)信息等)。留意，這兒咱們有必要遵循杰出重點(diǎn)、平衡諧調(diào)的準(zhǔn)則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最杰出的方位，然后在考慮非必須模塊的排放。

三.定案

　　將粗略布局精細(xì)化，具體化。（靠你的才智和經(jīng)歷，旁敲側(cè)擊多方聯(lián)想，才干作出具有構(gòu)思的布局。）

　　在布局過(guò)程中，咱們能夠遵循的準(zhǔn)則有：

　　1、正常平衡---亦稱"勻稱"。多指左右、上下對(duì)照方法，首要著重秩序，能到達(dá)安靖誠(chéng)實(shí)、信賴的作用。
　　2、反常平衡---即非對(duì)照方法，但也要平衡和韻律，當(dāng)然都是不均整的，此種布局能到達(dá)著重性、不安性、高注視性的作用。
　　3、比照---所謂比照，不只使用顏色、色調(diào)等技巧來(lái)作體現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等比照。
　　4、注視---所謂注視是使用頁(yè)面中人物視野，使閱讀者模仿跟從的心思，以到達(dá)注視頁(yè)面的作用，一般多用明星注視狀。
　　5、空白---空白有兩種作用，一方面對(duì)其他網(wǎng)站表示杰出杰出，另一方面也表示網(wǎng)頁(yè)品位的優(yōu)越感，這種體現(xiàn)方法對(duì)體顯網(wǎng)頁(yè)的格調(diào)非常有用。
　　6、盡量用圖片解說(shuō)---此法對(duì)不能用語(yǔ)言壓服、或用語(yǔ)言無(wú)法表達(dá)的情感，特別有用。圖片解說(shuō)的內(nèi)容，能夠傳達(dá)給閱讀者的更多的心思因素。
　　------------(轉(zhuǎn)載)

　　以上的規(guī)劃準(zhǔn)則，盡管枯燥，但是咱們?nèi)绻�能體會(huì)并活用到頁(yè)面布局里，作用就大不一樣了。比方：

　　○網(wǎng)頁(yè)的白色布景太虛，則能夠加些色快；
　　○版面零散，能夠用線條和符號(hào)串聯(lián)；
　　○左邊文字過(guò)多，右面則能夠插一張圖片堅(jiān)持平衡；
　　○表格太規(guī)則，能夠改用導(dǎo)角試試。

　　通過(guò)不斷的測(cè)驗(yàn)和琢磨，你的網(wǎng)頁(yè)一定會(huì)亮麗起來(lái)的哦:)

　　看看咱們經(jīng)常用到的版面布局方法：

　　1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。便是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左邊為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l布景教深，全體作用類似英文字母"T",所以咱們稱之為"T"形布局。這是網(wǎng)頁(yè)規(guī)劃中用的最廣返的一種布局方法。(圖略)

這種布局的長(zhǎng)處是頁(yè)面結(jié)構(gòu)明晰，主次清楚。是初學(xué)者最簡(jiǎn)單上手的布局方法。缺陷是規(guī)則板滯，如果細(xì)節(jié)顏色上不留意，很簡(jiǎn)單讓人"看之無(wú)味"。

　　2."口"型布局。這是一個(gè)象形的說(shuō)法，便是頁(yè)面一般上下各有一個(gè)廣告條，左邊是主菜單，右面放友情銜接等，中心是首要內(nèi)容。(圖略)

這種布局的長(zhǎng)處是充分使用版面，信息量大(我的主頁(yè)主頁(yè)即歸于這種布局)。缺陷是頁(yè)面擁擠，不行靈活。也有將四邊空出，只用中心的窗口型規(guī)劃，例如網(wǎng)易壁紙站。

　　3."三"型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將頁(yè)面全體分割為四部分，色塊中大多放廣告條。

　　4.對(duì)稱比照布局。望文生義，采取左右或許上下對(duì)稱的布局，一半深色，一半淺色，一般用于規(guī)劃型站點(diǎn)。長(zhǎng)處是視覺(jué)沖擊力強(qiáng)，缺陷是將兩部分有機(jī)的結(jié)合比較困難。

　　5.POP布局。POP引自廣告術(shù)語(yǔ)，便是指頁(yè)面布局象一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的規(guī)劃中心。常用于時(shí)髦類站點(diǎn)，比方ELLE.com。長(zhǎng)處顯而易見(jiàn)：漂亮吸引人。缺陷便是速度慢。作為版面布局仍是值得學(xué)習(xí)的。

　　以上總結(jié)了目前網(wǎng)絡(luò)上常見(jiàn)的布局，其實(shí)還有許許多多別具一格的布局，要害在于你的構(gòu)思和規(guī)劃了。關(guān)于版面布局的技巧，這兒供給四個(gè)建議，您能夠自己琢磨：

　　1.加強(qiáng)視覺(jué)作用
　　2.加強(qiáng)文案的可視度和可讀性
　　3.統(tǒng)一感的視覺(jué)
　　4.新鮮和個(gè)性是布局的最高境地

　網(wǎng)頁(yè)的顏色是樹(shù)立網(wǎng)站形象的要害之一，顏色調(diào)配卻是網(wǎng)友們感到頭疼的問(wèn)題。網(wǎng)頁(yè)的布景，文字，圖標(biāo)，邊框，超鏈接...，應(yīng)該選用什么樣的顏色，應(yīng)該調(diào)配什么顏色才干最好的表達(dá)出料想的內(nèi)涵呢？