簡介：在製作網站中，特別是在網頁的版面設計時，應呈現出獨特設計風格。網頁的版面設計要有統一的風格，形成整體，從更深層次、更為廣闊的視野中來定位自己的版面樣式，從而達到別人所沒有做到的效果。希望本文能給網站建設朋友們一點小小的幫助，當然本文主要談的就是網站製作中網頁的版面構造、元素、圖片......最後能夠形成統一的視覺識別。
1、課題研究背景
在網絡高速發展的今天，網站成為信息的一種主要傳播媒介。那麼網站建設不僅要把握好網站整體界面設計，網站框架設計，網站優化技巧，更重要的是一種綜合運營能力，包括審美，用戶體驗，創新，管理。那麼怎樣才能把網站建設好呢？首先，在製作網站前要對所製作的網站有一個整體的構造，包括文字的排版、圖片的規劃、表格的布局......。其次，就是對每個頁面要合理編排和布局，也就是這裡所說的版面設計，版面結構是指一種能夠讓瀏覽者清楚、容易地理解作品傳達的信息的東西，一種將不同介質上的不同元素巧妙的排列方式。再次，就是要正確看待建設網站的內容，不能把所有的網站都以一種固定樣式進行製作，而是要根據具體的內容來安排所製作的網頁版面格式。比如說：娛樂性的網站要求格式千變萬化，而教育類網站總體上要求要單調一點較好。
做好這些工作以後，就要對網站的頁面進行排版，也就是所說網頁的版面設計。所謂的網頁版面設計是指將網站的一個頁面看著報紙、雜誌或者說是某個門面進行布局、整理和排版。雖然今天的網站布局是千變萬化的，但萬變不離其中。所以固定的網頁版面設計基礎依然是必須學習和掌握的。在上網時，你會發現有些頁面是很吸引人的、而有的呢卻無法讓人們停留他們的眼球，那就是網頁的版面是否遵從讀者的心理。這裡網頁版面設計包括網頁的版面布局、版面的設計原則、版面設計的美化......。
2、網頁的版面布局
布局，就是以最適合瀏覽的方式將圖片、文字和表格有條理的排放在頁面的不同位置。
在眾多的網站版面布局中，主要有以下幾種布局步驟：
2.1、草案
在新建的頁面中，什麼也沒有，就像一張白紙，需要進行規劃。當然最好是在紙畫出大致的輪廓，這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。
2.2、粗略布局
就是在草案的基礎上進行更一步的修改，然後確定進行連接等一系列的操作（包括新聞、flash動畫……）。在這裡必須遵循突出重點、平衡諧調的原則，將網站標誌，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。
2.3、定案
所謂的定案是將將粗略布局的頁面做最後的修改，然後定下方案。
3、網站頁面設計的原則
在今天網站頁面的設計同樣遵循一定的原則，就像一些綜合期刊一樣它也有一定的原則。俗話說：「不以規矩無以成方圓」，所以網站版面設計的原則有：有序性原則、平衡性原則、裝飾性原則。
3.1、有序性原則
有序性是指在網站的頁面編輯中要遵循一定的規範。比如說是按照左右型結構、左中右型結構、右左型結構、用表格（<table>……</table>和CSS系統來定位網頁中版面的規劃。在網頁編排中應正確使用文字、標點符號、計量單位、規範使用術語、圖片和Flash動畫等。
3.2、平衡性原則
雖然網頁不像圖書、雜誌那麼複雜，不像他們的頁面那麼大。不過在讀者的眼裡一樣要有視覺的均衡性，也就是所謂的平衡性原則。
版面構圖的基本元素是點、線、面,其中單個的字符是點,由字符組成的行是線,由行組成的段落是面。線和面的運動方向可以歸納為水平、垂直和傾斜三種形式。水平和垂直給人以安靜和固定的感覺,傾斜則具有運動感。水平、垂直和傾斜組合起來使用會給版面帶來豐富和生動的效果,從而使版面在整體上保持平衡的前提下具有動感和變化。如有的期刊把文章的篇名、作者、摘要、關鍵詞等前置部分採用右頂格排(而不是習慣上居中排) ,這種構圖上的適度傾斜可以給讀者在視覺上產生「順勢而下」的流暢感覺。
3.3、裝飾性原則
這裡最重要的是「虛」與「實」的對比以及巧妙的運用空白的裝飾性原則。在版面設計中還要注意立體的裝飾效果,比如「前景」標題可以用加大加黑的辦法強化明暗對比,「中景」 正文突出文字與空白的黑白對比「, 背景」頁碼和注釋、參考文獻用縮小字號的辦法使色調顯得柔和輕淡一些。從而使版面在整體上體現出層次感。
4、營造網頁版面的藝術美
任何東西都有它特定意識美，網站也不例外。網頁版面不是單純化裝的臉，而是要把藝術形式和內容完美的結合起來，從而給讀者一張生動、內容豐富的臉。網頁版面以網站的每個頁面為對象。對其進行美的視覺上的設計。所以有人把這種設計叫做：「美的視覺上的傳達性」。
4.1、網頁版面設計的統一性
統一是指事物的相繼出現，並帶有聯屬關係的屬性。這裡所講的統一是指網頁中應該出現的文字、圖片等按照一定的規律有機的結合。網站頁面的版面設計要求有統一的設計標準、統一的色彩和統一的風格，由此加深別人對此風格的認同。網頁版面的統一有：
4.1.1、圖片與版式的統一，
4.1.2、標題一版式的統一，
4.1.3、內容與版式的統一，
4.1.4、內容與版式的統一。
4.2、網頁版面設計的廣告性
網頁版面的廣告性就是該網頁版面設計的醒目程度，它是表現網頁內容的重要手段之一，被視為一種促銷手段、一種說服藝術。在目前，網頁的廣告大致有三種表現形式：
4.2.1、內容直接展示型，
4.2.2、醒目展示型，
4.2.3、注重版面文字的潛在力。
4.3、網頁版面設計的工藝性
網頁的版面設計要求有一定的工藝性。不管是商業網站還是政府網站，甚至學校類網站都要求有一定的美感和藝術形式。特別是在今天人民瘋狂的追求現實美和空間美，所以在設計中要體現這種美感。以求得到人們的認可。
5、網頁版面設計要遵從讀者的閱讀心理
網站製作中網站設計者的思想、意圖、網站的內容都是通過版面的設計來影響讀者的心情。一個賞心悅目的版面能使網頁增添色彩，也能使讀者帶著愉快的心情來看整個網站，大大增加了網站的閱讀次數。相反一個糟糕的網站會使讀者大大的打折扣。
6、用DIV和CSS設計網站的頁面和易改變WEB信息
CSS主要是將網頁上的內容與格式分開控制，也就是說當你把某個頁面編輯好以後覺得不好的話可以利用CSS在後臺進行再次排版。但是現在的網頁在一般情況下都是用表格、層等，CSS多是潛入到HTML語言中，不能很隨便的改變網頁的版面布局，也不能很好的發揮CSS在版面布局中的作用。在這樣的情況下，DIV誕生了。通過使用HTML的DIV和CSS一起就很容易而方便的改變網頁的版面布局。CSS是網頁製作技術, 能簡化網頁的格式代碼。目前網頁布局多用表格、層等, CSS排版功能得不到充分利用。和DIV的共同使用就把CSS的功能發揮的淋漓盡致。
CSS是跨平臺瀏覽器之間的國際標準W9C中的一部分, 是一種對WEB文檔添加樣式的簡單機制,屬於表現層的布局語言，在CSS 標準裡, 不僅重新定義了HTML 原來的樣式, 使CSS 在格式定義方面具有特殊優勢。更加入了區塊設置、隨意位置擺放等頁面布局樣式設定, 使CSS可以提供精確定位功能以及各種特殊效果。從而為網頁布局和頁面效果的製作提供一種新途徑。
CSS元素的排版格式, 可以通過「#Classname標記{CSS代碼}」放在任何HTML 標記上使用整個頁面的排版, 藉助於HTML「空元素」DIV 與CSS 來充分發揮CSS 布局功能, 使網頁布局可以有很大的自由度。
6.1、用DIV與CSS技術設計網頁
DIV 是HTML 的一個標記，用於定義內容塊，並不顯示任何內容, 通過對一個DIV 標記創建一個樣式規則，可以將樣式應用到所有包含在<IV>……</DIV>之間的不同標記上以及包含在DIV 標記之內的內容上, 不需要為每個個別的元素指定其自己的樣式規則。
將網頁內容規劃成DIV塊， 然後把每塊內容定義好樣式表，將多個樣式定義匯集到一個樣式表文件中, 應用Class=」」或Id=」」來應用CSS樣式表項,其屬性和值就可以格式化這個塊內內容。
6.2、CSS與DIV共同應用的優點與缺點
6.2.1、DIV 塊方便塊間移動，版面格式容易更新，與CSS 配合方便網站改版，改變網頁的布局、網頁的外觀。
6.2.2、使用CSS排版，由於內容和格式分離，可以每次只更改網頁內容，或只更改樣式以改變網頁外觀，從而滿足於頻繁更新的信息網站。
6.2.3、5.2.3、塊內背景圖片過多，網頁加載量大，會導致網頁下載速度慢。
7、網站版面的設計對營銷的重要性
網站版面設計對網站營銷的重要點是什麼？這個可能是很多人都要問的問題，企業網站版面不就是一件漂亮的衣服嗎？俗話說：貨賣一張皮。網站版面就是企業網絡宣傳的一張皮。
7.1、網站版面要突出主題
想要突出什麼，那麼就要在網站的首頁就要去體現，如何讓客戶更容易找到和理解，不要把網站的優勢放在角落裡面。在醒目的位置盡情展示。如要突出產品。那麼就把所要放的產品放在最顯眼的位置。
7.2、網站版面顏色基本上要和網站內容的行業相配合
設計風格和樣式是跟據個人的審美觀不同，而有所不同，沒有統一的標準去衡量美，但顏色基調就可以大體一致。如美食行業和機械行業的顏色就完全要不樣。不能是自已喜歡哪種顏色，就偏用哪一種。
8、用表格<Table>……</Table>來設計網頁的版面
網頁設計隨著網絡的高速發展地位變得越來越重要, 如何製作一個讓人賞心悅目的網頁已經成為許多人的追求。其中表格在網頁設計中佔有重要的作用, 可以作為頁面的布局, 除此之外還有其他許多特殊的應用。跟資料庫的連接就是表格在網頁製作中的一個特殊作用，將代碼預先設置好，然後運用超連接將資料庫連接起來。這樣可以方便讀者的查詢和網站管理員從事後臺的操作。
一個好的網頁往往版面規整, 內容擺放井井有條, 讓人看了賞心悅目, 而這樣的版式經常是由表格控制的, 只不過不顯示表格的邊框而已。在上網的時候，大家不難發現在很多網站中，表格的應用非常平凡。這些網站的大部分頁面都是用表格布局的。那麼表格到底是怎樣在網站的版面設計中發揮作用呢？
表格由行和列構成, 所以常用的表格標記有：
〈table〉……〈/table〉表示表格的開始和結束，
〈tr〉……〈/tr〉表示表格的行, 有一行就有一對〈tr〉標誌，
〈td〉〈/td〉表示表格的單元格, 一行中有多少單元格就有多少對〈td〉標誌。
不管是FrontPage還是Dreamweaver中都可以直接插入表格，而在代碼中將會自動生成。當然在設計表格時，可以在表格屬性裡面進行設置，當不喜歡表格邊框時，在一般情況下是將邊框象素設置為0。單元格間距指的是單元格和單元格之間的距離, 單元格邊距指的是單元格和其中的內容之間的距離。如果想通過表格布局的話, 我們應該先對頁面進行整體的規劃, 分清整個頁面的結構, 然後插入相應行數列數的表格, 有時還需通過合併單元格來實現, 接著對每個局部進行劃分, 通過在單元格中嵌套表格來實現整個頁面的布局。除這些之外表格還有許多特殊的作用：
8.1、單元格的合併
網頁中單元格的合併是指將兩個或者更多的表格合成一個表格。這就需要用Rowspan及Colspan屬性。Rowspan屬性用於向下延伸合併垂直單元格, 而Colspan屬性用於向右延伸合併水平單元格。如:
〈td colspan=2〉合併兩個水平單元格〈/td〉，
〈td rowspan=2〉合併兩個垂直單元格〈/td〉。
8.2、表格的邊框變細
一般我們製作的表格邊框要不就不顯示, 要不就很粗, 如何可以製作一個邊框非常細的表格呢? 做法其實很簡單: 第一步插入一個表格, 設置表格的間距和邊距都為1象素, 邊框粗細也為1象素; 第二步設置表格的背景色為黑色; 第三步設置單元格的背景色為白色; 第四步設置表格的邊框的顏色也為白色。這樣做出的表格邊框就非常細了。
8.3、製作虛線表格
先在Photoshop裡新建一個尺寸寬高為2PX的圖片, 在左上角畫1象素的小點, 保存為web格式, 然後再在表格中設置其為背景圖片再把表格中的cellspacing和cellpadding的值分別設為2( 開始背景圖片的尺寸) 保存即可。代碼如下:
| 〈table border =″0″width =″100%″cellspacing =″2″cellpadding=2″background=″url″〉 …… 〈/table〉 |
在製作網頁的過程中, 用到表格的地方非常多, 如果大家可以靈活運用這些技巧, 一定可以為我們的網頁增色不少, 做出風格獨特的頁面。
9、網頁版面設計的虛擬空間
一個好的網站必須講求虛實得當，否則會給讀者枯燥的感覺。虛實結合是製作網站的一項基本前提，它包括了圖象、文字和圖片等的重要藝術性和美學特點。
版式設計是一種藝術創作過程，也要講究虛實相宜。在版面編輯中，編排的內容是實體，當每個實空間佔據一定位置後，一定要有若干的虛空間來調節視覺強度，使其張力、動勢得以釋放和延伸，這個虛空間就是「留白」。？留白可以用來突出文字內容，起到引導讀者閱讀注意力轉換的效果，空白的巧妙使用，使主體得到充分的發揮。所謂留白就是讓網站充滿虛擬和現實的一種比較。
把這些運用到網站的版面布局中，效果就大不一樣了。比如，網頁的白色背景太虛，則可以加些色快；版面零散，可以用線條和符號串聯；左面文字過多，右面則可以插一張圖片保持平衡；表格太規矩，可以改用導角試試。總之．版面設計關鍵還在於你的創意和設計，希望經過不斷的嘗試和推敲，這樣的網頁會更加亮麗起來。