版面設計也可以理解為佈局設計，就是我們在瀏覽器上看到的一個完整的頁面。我們如何將所有要體現的內容完整的分佈佈局，達到一種視覺效果，這就叫做版面設計。
方法/步驟
1、結構的搭建、佈局（構思）
版面結構是指一種能夠讓瀏覽者清楚、容易地理解作品傳達的資訊的東西，一種將不同介質上的不同元素巧妙的排列方式。再次，就是要正確看待建設網站的內容，不能把所有的網站都以一種固定樣式進行製作，而是要根據具體的內容來安排所製作的網頁版面格式。比如說：娛樂性的網站要求格式千變萬化，而教育類網站總體上要求要單調一點較好。有些頁面是很吸引人的、而有的呢卻無法讓人們停留他們的眼球，那就是網頁的版面是否遵從讀者的心理。這裡網頁版面設計包括網頁的版面佈局、版面的設計原則、版面設計的美化。
2、網頁的佈局
分為：
1.頁面尺寸：
頁面尺寸和顯示器大小及解析度有關係，自己設計網頁的整體寬度不能超過顯示器的大小。
（1）解析度在1024*768的情況下，頁面的顯示尺寸為1007*600；
（2）解析度在800*600的情況下，頁面的顯示尺寸為780*428；
（3）解析度在640*480的情況下，頁面的顯示尺寸為620*311。
2.影象的運用：
圖形與文字的接合應該層疊有序，有機統一。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。
3.影象的面積：
影象的大小不僅決定著主從關係，也控制著頁面的均衡與運動。
（1）大小對比強烈，給人跳躍感，使主角更突出；
（2）大小對比減弱，則頁面穩定、安靜。
這是因為，訪問者在瀏覽頁面時，首先會注意到大影象，然後再看到較小的影象，這種由大到小的引導，使瀏覽者的視線在頁面上流動，便造成一種動勢，使頁面活潑起來。
4.影象的數量：
影象的數量是根據內容決定的。只用一幅影象，會使內容突出、頁面安定。增加一幅影象，頁面會因為有了對比和呼應而活躍起來。再增加一幅，則更加熱鬧、活潑。但是，限於目前網路的傳輸速度，使用影象時一定要謹慎，大的影象會降低頁面顯示速度，即使是小影象，如果運用數量過多，同樣會使頁面下載速度變慢。隨著網路環境及技術條件的改善，這種情況已經有了很大的改觀。
5.影象與背景的關係：
網頁影象與背景是對比和統一的關係。也就是說，影象與背景在和諧統一的基礎上，應存在一定的對比，以使主要影象更加突出。如精密的相機鏡頭以粗糙的岩石為背景，明亮的文字以深邃的星空為背景，或者使用沒有背景及陪襯物的退底影象，周圍留出大面積空白，都是利用對比對主體形象起到突出作用。
6.影象在長頁面中的應用 ：
網頁一般都是縱向的(也有特意設計成橫向滾屏的)，其長度從一屏到三屏不等，有時甚至更多。訪問者在瀏覽頁面時，通過拖動垂直滾動條使網頁一屏一屏地顯示，但這並不意味著我們可以將整個頁面分割開來，孤立地進行每一屏的設計。頁面的整體感是建立在形象的啟承關係上，儘管頁面被分割成幾屏來顯示，但影象或文字的延續性應使瀏覽者得到完整、統一的視覺感受。設計者所要做的就是進行通盤考慮。
3、文字的運用：
1、顯示在頁面上的純文字，沒有特殊字型，預設是宋體或仿宋。當然有些網站特別強調設計感覺或新增一些
文字，比如微軟字型，這個需要在樣式表裡面進行宣告。注意：如果訪客沒有安裝該字型，顯示出來還是宋體。
2、用圖片的形式來表現。意思是特殊字型做成圖片的形式，插入進來。
注意：自己電腦裡面要安裝一些特殊字型。微軟系列、漢儀系列、方正系列、
顏色：關於字的顏色用灰度是比較多#333、#666。顯得比較乾淨些。
字號大小：頁面上出現比較多的是12px、14px、16px。藉助字號大小，可以體現出層次感。
（1）文字跳動
（2）文字中太多留白
4、平衡性原則：
版面構圖的基本元素是點、線、面,其中單個的字元是點,由字元組成的行是線,由行組成的段落是面。線和麵的運動方向可以歸納為水平、垂直和傾斜三種形式。
水平和垂直給人以安靜和固定的感覺,傾斜則具有運動感。
水平、垂直和傾斜組合起來使用會給版面帶來豐富和生動的效果,從而使版面在整體上保持平衡的前提下具有動感和變化。
如有的期刊把文章的篇名、作者、摘要、關鍵詞等前置部分採用右頂格排(而不是習慣上居中排) ,這種構圖上的適度傾斜可以給讀者在視覺上產生“順勢而下”的流暢感覺。
5、空間間隙：
從樣式表可以設定填充（內部的）和間距（外部的）都可以做出空隙。我們需要合理的空隙，會讓層次更清楚。（同時還可以避免不同的瀏覽器出現的對間距理解的不同帶來的問題）不合理的空隙會顯得“擠”或者“太空”有這樣的感覺。
網頁中版式的節奏感及韻律，來源於排版中的疏密的間隔安排。在網頁中可以通過一系列的重複和固定的間隔來建立一種視覺和諧的美感，如在一些字型大小，行距、模組與模組間的距離等等的制定。
縱向的節奏在網頁設計中是比較運用廣泛且明顯的，如大部分資訊型的站點。網頁縱向節奏感是為網站設定一個縱向的單元高度，就好比我們的記事本那樣，每一頁都是佈滿了固定高度的線。如果文字正好處於單元高度上，那版面就能獲得連貫的縱向平衡和節奏感。
按縱向垂直節奏排列的設計更加容易掃描或閱讀，因為它使內容的“出現”更加有規律。這個方法不僅適用在區域性的文字內容區，對於整個頁面的內容排布也是有用的。
6、網頁版面設計的統一性（顏色）：
關於顏色的基調與搭配的問題：logo、主導航、標頭的顏色。
基調：基本色調。在基本色調的基礎上進行搭配。一般網站在3個顏色之間進行搭配使用。
統一是指事物的相繼出現，並帶有聯屬關係的屬性。這裡所講的統一是指網頁中應該出現的文字、圖片等按照一定的規律有機的結合。網站頁面的版面設計要求有統一的設計標準、統一的色彩和統一的風格，由此加深別人對此風格的認同。
7、網頁版面設計的廣告性：
網頁版面的廣告性就是該網頁版面設計的醒目程度，它是表現網頁內容的重要手段之一，被視為一種促銷手段、一種說服藝術。在目前，網頁的廣告大致有三種表現形式：
1、內容直接展示型；
2、醒目展示型；
3、注重版面文字的潛在力。
小結：
一個好的網站必須講求虛實得當，否則會給讀者枯燥的感覺。虛實結合是製作網站的一項基本前提，它包括了圖象、文字和圖片等的重要藝術性和美學特點。