網頁布局設計往往是很難的，因為網頁布局直接影響到頁面的美觀程度，網頁的內容多少也影響著布局的設計。大多數網站頁面結構都會包括網頁標題、網站LOGO、導航欄、功能列表區、主內容區和狀態欄等。在進行網頁布局設計時不要把所有內容都放在頁面裏。還需要我們把網頁內容進行合理的排版布局，以給瀏覽者賞心悅目的感覺，增強網站的吸引力。在設計布局的時候我們要註意把文字、圖片在網頁空間上均勻分布並且不同形狀、色彩的網頁元素要相互對比，以形成鮮明的視覺效果。

我們先來說說構成，“構成是將造型按視覺效應、視覺力學和精神力學等原則組成的，具備美好形態的造型”。 構成形式裏，有空間構成（平面構成和立體構成） 和時間構成（靜和動）。我們的創作，就是要協調這裏面的種種關系，順應視覺感受，才能夠打動觀看者的視覺，得到我們想要的效果。在這些形形式式裏，都有著如下的部件：

點：我們壹般認為，點是指圓形的，但這是不正確的。只要在空間裏有非常少量的 面積，無法形成壹個視覺上感覺的圖形，都是壹個點。無論什麽形狀都可以。 線：點集合在壹起就形成線。面：壹個平面。體：壹個物體。壹般是指物體占據的空間，有三維形狀。

那麽，當點、線、面與體集結在壹個頁面上時，它們的關系要怎麽協調呢？它們之間都有什麽作用呢？

點有集中視線、緊縮空間、引起註意的功能。 兩個點相距不遠而且形狀不等時，壹般由小向大看。近距離的點引起面的感覺。靈活運用點，可使妳的頁面有壹些本質上的變化。 當點占據不同的空間時，它所引起的感覺是不同的：

居中引起視覺集中註意 。上引起下跌落感。在上左或上右引起不安定感。下方中點，產生踏實感。左下右下，增加了動感。 線，又分為直線和曲線。 直線給人以速度，明確而銳利的感覺，具男性感。 曲線則優美輕快，富於旋律。曲線的用法各異，需結合自己的需要。 而直線又分為斜線、水平線及垂直線。 水平線代表平穩、安定、廣闊，具踏實感。 垂直線則有強烈的上升及下落趨勢，可增加動感。 斜線，壹般我沒有怎麽使用，因為它造成視覺的壹種不安定。 面，指的是二度空間裏的形。 面又分為幾何形和任意形，任意形具人情味。幾何形使人有壹些機械感，但是，每壹個圖形裏都會要用到幾何形，請看它們各代表什麽：

圓形：運動及和諧美。
矩形：單純而明確，穩定。
平行四邊形：有向壹方運動的感覺。 ?
梯形：最穩定，令人聯想到山。 ?
正方形：穩定的擴張。 ?
正三角形：平穩的擴張。
倒三角形：不安定，動態及擴張、幻想。
我們在日常生活中所看到的東西，都是由於形與形、圖與底的相互關 系。圖形之間，圖底之間，正由於對比產生差異而被我們所感知所接 受。 圖與底的視差越大，圖形越清晰，對視覺的沖擊力越大。 那麽，平面上有那麽多的東西，我怎麽才能夠確定它是否是最主要的呢？ ?
居於畫面中心。
垂直或水平的比傾斜更易成為中心。 ?
被包圍。
相對於其它圖形較大的。
色感要素強烈。
熟悉的圖案，如果這件東西我們很熟，則壹定會以它為焦點。

可以把自己認為最主要的東西做大壹點，突出壹點，色彩鮮艷壹點，其它的東西小 而且色調不要那麽鮮明，以免搶了主題的”風頭”。 註意：圖與底之間的關系是很重要的。 如果我們確定了背景，再確定主題，在做頁面時不註意而將圖與底的關系設置為 1：1，那麽，我們也許發現，底與圖的力場爭奪非常激烈，即有時底被我們認為是 圖。它們之間的關系只是相對，而非絕對。 壹般來說，底要大於圖，而圖要鮮於底。

事實上，通過上述的壹些方法，我們主要是為了創造秩序，使相互的東西能夠在沒有互相幹擾的系統中起作用。 混亂與秩序之間的對照喚起了我們的視知覺，我們於是通過平衡、比例、節奏、協調，在迷亂中建立秩序，形成我們自己的風格。 形成自己作品的獨特氣質。 而如果註意自己作品的律動性，即旋律性，可通過重要壹個基調實現，對於整個頁面應該有畫龍點晴之效。 但要清楚的認識到，並非所有的節奏都產生律動性，有時候，聽到壹些音樂時覺 得它是垃圾，原理是壹樣的。

旋律要有情感因素，富於變化而又統壹的節奏和總體的和諧。 流動的旋律，活潑、明快、自由、變化、生機勃勃。 也要註意到，反復、周而 復、單純或漸變重復雖給人以視覺印象，但過於單調會使人疲勞並產生厭煩。必須 在反復中尋找動與靜的完美結合，尋求單純與復雜、細膩與奔放、定向與不定向之 間的對比，在構成方式上多探索，多借鑒，求新求變。

下面我們給出幾種常見的布局結構，供大家參考。常見的布局結構有“同”、“廠”、“國”、“匡”、“三”、“川”等字型布局。

1）“同”字型布局：所謂“同”字型結構，就是整個頁面布局類似“同”字，頁面頂部是主導航欄，下面左右兩側是二級導航條、登錄區、搜索區等，中間是主內容區。
2）“廠”字型布局：整個頁面布局類似“廠”字，頁面頂部和左部都可以是主導航欄，右下面是主內容區。
3）“國”字型布局：它是在“同”字形布局上演化而來的，它在保留“同”字形的同時，在頁面的下方增加壹橫條狀的菜單或廣告。
4）“匡”字型布局：這種布局結構去掉了“國”字形布局的右邊的邊框部分，給主內容區釋放了更多空間，內容雖看起來比較多，但布局整齊又不過於擁擠，適合壹些下載類和賀卡類站點使用。
5）“三”字型布局：壹般應用在簡潔明快的藝術性網頁布局，這種布局壹般采用簡單的圖片和線條代替擁擠的文字，給瀏覽者以強烈的視覺沖擊。
6）“川”字型布局：整個頁面在垂直方向分為三列，網站的內容按欄目分布在這三列中，最大限度地突出主頁的索引功能，壹般適用在欄目較多的網站裏。

在實際設計中我們也不要局限於以上幾種布局格式，有時候稍作適當的變化會收到意想不到的效果，另外，平時在瀏覽網頁時要多留心別人的布局方式，遇到好的布局就可以保存下來作為我們設計布局的參考。