設(shè)計(jì)網(wǎng)站的第1步是了解網(wǎng)站地圖，設(shè)計(jì)師依據(jù)網(wǎng)站的版面劃分來(lái)編排不同版面的空間大小和方位關(guān)系。網(wǎng)站的布局實(shí)際上就是把文本、圖片、多媒體等在頁(yè)面里邊進(jìn)行合理的安排排列。由此，網(wǎng)站設(shè)計(jì)也衍生出許多種類的布局款式。

　　Banner式布局：顧名思義，Banner式布局就是指頁(yè)面上方是導(dǎo)航條，頂部是一個(gè)Banner，下方是其他內(nèi)容。這種布局辦法的長(zhǎng)處是頁(yè)面的結(jié)構(gòu)十清楚晰，主次清楚。不管屏幕的尺寸是什么，網(wǎng)頁(yè)的內(nèi)容都會(huì)明晰地出現(xiàn)出來(lái)。

　　Banner式布局是網(wǎng)站設(shè)計(jì)中基本也是遍及的一種設(shè)計(jì)方法，比方說(shuō)站酷、好奇心日?qǐng)?bào)等。雖然有的設(shè)計(jì)師會(huì)將Banner設(shè)計(jì)成固定寬或許橫跨整個(gè)頁(yè)面的大小，但總體的布局款式都是差不多的。

　　上下型布局：指的是網(wǎng)頁(yè)的上下都有一個(gè)廣告條，左右兩側(cè)是超鏈接，中心放置主要內(nèi)容，下面是網(wǎng)站的基本信息、聯(lián)系方式、版權(quán)聲明等。

　　很顯然，這種布局辦法的長(zhǎng)處是能夠充分使用版面，盡可能多地傳達(dá)信息量。同時(shí)，網(wǎng)站設(shè)計(jì)師需要注意板塊的內(nèi)容和面積大小，不能讓頁(yè)面過(guò)火臃腫。

　　左右型布局：是將網(wǎng)頁(yè)分為左右兩頁(yè)的框架結(jié)構(gòu)，左邊是導(dǎo)航鏈接，頂端是小標(biāo)題，右面是主要內(nèi)容。

　　現(xiàn)在大部分的導(dǎo)航網(wǎng)站、論壇都采取了這種結(jié)構(gòu)，十清楚晰，一目了然。比方說(shuō)科技網(wǎng)站36氪，左邊是咨詢分類，中心是新聞和文章。

　　POP式布局：POP是廣告中的術(shù)語(yǔ)，意思是售點(diǎn)廣告。在網(wǎng)站設(shè)計(jì)中，POP式布局是指頁(yè)面的布局設(shè)計(jì)像一張宣揚(yáng)海報(bào)，精巧又吸睛。

　　通常情況下，時(shí)髦購(gòu)物類網(wǎng)站會(huì)采取POP式布局，用一張精巧的圖片作為頁(yè)面中心，在頂端或許下方放置導(dǎo)航條。POP式布局的缺陷是由于圖片過(guò)大，渲染速度較慢。

　　有時(shí)，POP式布局還加上小動(dòng)畫，或許直接在圖片上放上對(duì)應(yīng)的鏈接。這種設(shè)計(jì)一般會(huì)出現(xiàn)在企業(yè)介紹的主頁(yè)或許個(gè)人網(wǎng)頁(yè)，給人一種簡(jiǎn)潔、優(yōu)雅的視覺享受。

　　標(biāo)題正文型布局：這種類型的布局是網(wǎng)站設(shè)計(jì)中簡(jiǎn)單的一種款式，通常是頂端放置標(biāo)題，下方用作正文區(qū)。設(shè)計(jì)師們喜愛在咨詢文章頁(yè)面、注冊(cè)頁(yè)面等使用標(biāo)題正文型的布局款式，這樣的款式能夠小程度地打擾用戶，還給用戶一個(gè)安靜的閱讀體驗(yàn)。

　　其實(shí)，不管設(shè)計(jì)師采用哪一種布局，在網(wǎng)頁(yè)設(shè)計(jì)中，重要的要求是主次清楚和重點(diǎn)突出。只有當(dāng)頁(yè)面中有一個(gè)明確的視覺中心時(shí)，網(wǎng)站用戶才能夠迅速找到內(nèi)容重點(diǎn)，不至于進(jìn)入到網(wǎng)站后變得一頭霧水。

　　網(wǎng)站設(shè)計(jì)師還能夠使用留白來(lái)制造視覺會(huì)集的作用，引導(dǎo)用戶的視線到主要內(nèi)容區(qū)域。比方蘋果官網(wǎng)中，在產(chǎn)品的介紹頁(yè)面，僅保留了中心的概況圖片和上下方的導(dǎo)航條，很多的留白使得用戶會(huì)集注意力在產(chǎn)品圖上面。