網站主頁設計中如何將其布局的井井有條是至關重要的，因為這個也能影響到網站的優化跟用戶體驗。要想設計出能夠吸引人的網頁形式，就要對布局和網頁設計有一個全面的把握，遵守統一變化的原則，強化版面的外形特征，體現設計的生命力，與此同時，還要通過精心的設計與安排，進行整體上的比較，在保證形式上的和諧以外，還要保證其疏密有致，輕重適度，最終體現設計上的別具一格。 

關于網站主頁的布局

一般主頁是網站的直接入口！是對網站訪客留下第一印象的最重要的頁面！網站首頁是訪問量最多的，也決定了其他頁面的風格，網站的布局就像建房子，地基打得牢固與否直接影響整棟房子的美觀。設計師在設計過程中的布局思路非常重要。所以我們設計網站時首頁必須要考慮清楚怎樣設計，比如如何排版、布局，什么樣的配色等等。網站首頁策劃時應該是要首先定義出網站的整體色素和元素的統一性制作、設計，另外就是對網站產品展現形式的策劃和產品形態的定位！

自適應和響應式

自適應網頁設計（Responsive Web Design）最早是由Ethan Marcotte在2010年提出，是指可以自動識別屏幕寬度、并做出相應調整的網頁設計。隨著移動化網頁需求的增長，在自適應基礎上又誕生了響應式網頁設計（Adaptive Web Design）。

兩者最大的區別在于

前者只根據瀏覽器寬度作出布局的調整，后者是根據設備的不同而作出的調整。

前者的調整只停留在左右上下位置上的調整，后者涉及到內容的增減等。

在這項技術的支持下，我們現在能看到很多網站把最大主體區域做到了1600px，但同時又支持手機正常顯示。

通欄布局

這種布局方式讓視線不再受到方框的限制，比起上面的布局方式，自然多了些大氣、開闊的味道來。另外，主視覺部分還可以靈活處理，既可以向上拓展到logo和導航的頂部位置，也可以向下拓展到內容區域，這種布局方式也是非常常見的布局方式。

左右對稱結構布局

左右對稱結構是網頁布局中最為簡單的一種。“左右對稱”所指的只是在視覺上的相對對稱，而非幾何意義上的對稱，這種結構將網頁分割為左右兩部分。一般使用這種結構的網站均把導航區設置在左半部，而右半部用作主體內容的區域。左右對稱性結構便于瀏覽者直觀地讀取主體內容，但是卻不利于發布大量的信息，所以這種結構對于內容較多的大型網站來說并不合適。欄目劃分結構清晰、分開主次性，重為左，此為右。

環繞式布局

這種布局方式看上去更加靈活，banner區域相對較小，就可以在頁面放置更多的信息內容。

“同”字型結構布局

“同”字結構名副其實，采用這種結構的網頁，往往將導航區置于頁面頂端，一些如廣告條、友情鏈接、搜索引擎、注冊按鈕、登陸面板、欄目條等內容置于頁面兩側，中間為主體內容，這種結構比左右對稱結構要復雜一點，不但有條理，而且直觀，有視覺上的平衡感，但是這種結構也比較僵化。在使用這種結構時，高超的用色技巧會規避“同”字結構的缺陷。

網頁布局均勻，避免頭重腳輕，重量失衡

網頁的布局均勻，體現在網頁規劃和設計時欄目與欄目、色塊與色塊、圖片與文字之間的搭配協調問題，好的頁面會做到搭配合理，避免頭重腳輕、重量失衡的現象，和給訪客造成心理上的不適。 

大框套小框的布局

這種布局方式即是我在上面提到的常見的布局，不是說這種布局方式一無是處，但我們總不能只會這一種布局方式，次次套用吧?按照這種布局當然也可以做出來漂亮的設計，但畢竟方框限制的視線的擴展，如果客戶要求做出大氣的感覺，一般不會按照這種方式來布局，通常來講，大氣意味著開闊視野。

合理的主顏色和統一的頁面風格

在確定網站的主顏色時，一定要根據所要設計的網站的行業特征和所面向的訪問對象來選擇合理的主顏色，如作為機械裝備類的多以藍色、灰色為主，在主顏色、欄目及網站首頁版塊確定后，其它的附屬頁面也應該依次風格來設置。一般網頁的大色塊區域以不超過3種顏色為好。

網頁的布局不可能像平面設計那么簡單，雖然網頁制作已經擺脫了HTML時代，但是還沒有完全做到揮灑自如，這就決定了網頁的布局是有一定規則的。一個頁面存在多個功能模塊，它們的展現形式應該如何，就要考慮各個模塊的重要程度，重要信息、重要功能模塊“靠上靠左”呈現，這是因為這些地方從位置上講比較有吸引眼球的優勢，要做到“突出重點”。