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

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

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

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

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

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

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

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

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

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

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

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

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