網頁版面布局設計的作用、步驟及技巧發(fā)布者：本站     時間：2020-05-02 14:05:24

隨著計算機網絡的發(fā)展，網絡在人們生活中發(fā)揮的作用越來越大。網頁作為網絡的主要依托，已深入到人們生活的各個方面，各種各樣的網頁不斷撞擊著人們的眼球。那么，吸引用戶停留在某個頁面上瀏覽，除了引人入勝的內容、賞心悅目的圖片和協(xié)調的色彩搭配以外，還有一個非常重要的因素就是合理的版面布局設計。

版面布局設計的作用

版面就是在瀏覽器上顯示的一個完整的頁面，它是網站設計的重要內容。網站是諸多網頁的集合，每個頁面通常都包含了文字、表格、圖像、動畫、鏈接等要素。版面布局設計是網頁設計的第一步，是一個網頁成敗與否的基礎所在。版面布局設計的主要任務是將頁面合理分割成用于安排文字、圖像等各種屏幕元素的區(qū)間。通過版面布局設計，尋找最佳的瀏覽方式，將這些要素有機地整合和分布在頁面上，給用戶最佳的視覺效果。

網頁版面布局步驟

1.構思方案

根據(jù)網站的策劃方案，在真正了解客戶需求、網站定位、受眾群等多方面因素之后，開始構思草案。在紙上繪制布局草圖，將需要放置的功能模塊安排到頁面上。要遵循突出重點、平衡諧調的原則，網站標志、主菜單等重要模塊放在最顯眼、最突出的位置，再考慮次要模塊的擺放。經過與客戶多次溝通，反復調整修改，確定版面布局方案。

2.電腦表現(xiàn)

為了使版面布局更加形象和直觀，設計者可以利用Photoshop軟件設計版面布局效果圖，實現(xiàn)紙張無法實現(xiàn)的布局意念，便于與客戶溝通交流，方便修改布局方案。

網頁版面布局類型

一般在網頁設計中，版面布局是有規(guī)律可循的。網頁版面布局的類型有很多，常見的有“T”字型布局、“口”字型布局、“三”字型布局、對稱對比型布局、POP海報型布局等。任何一種布局類型都有自己的優(yōu)缺點，設計者要根據(jù)網站的風格、類型和內容選擇適合的布局類型，當然也可以對這些布局類型進行適當?shù)淖冃巍?

網頁版面布局技術

在設計網頁時，常用頁面布局的技術主要有兩種：table布局和DIV+CSS布局。

1.table布局

table布局是過去流行的網頁布局技術，能夠輕松地將整個頁面劃分成需要的各個塊，如若某個塊中的內容需要再劃分，可以通過嵌套表格來實現(xiàn)。整體思路明了，易于操作，簡單易學，建站速度快。現(xiàn)在仍有一些網絡公司制作的網站還在使用table布局。但是用表格設計的代碼相對復雜，維護和升級困難。如果需要更改版面布局，相當于重新設計網頁。而且，當頁面嵌套層次較多時，會降低瀏覽速度。

2.DIV+CSS布局

DIV+CSS布局是基于Web標準的現(xiàn)在比較流行的網頁布局技術，實現(xiàn)了內容和表現(xiàn)的分離，代碼精簡，瀏覽速度提高；使用CSS樣式統(tǒng)一控制網頁顯示效果，頁面布局靈活，易于維護和改版；將大部分的HTML代碼和內容樣式寫入CSS文件，使網頁正文部分結構清晰，便于搜索引擎采集收錄。

由于采用DIV+CSS布局網頁，編碼的工作量很大，尤其在解決瀏覽器的兼容問題時，則需要付出更多的精力，這對于網頁設計初學者而言有一定的難度。因此在制作網頁時，不能肓目跟風，要根據(jù)實際情況采用合理的技術。

網頁版面布局技巧

1.確定網頁設計尺寸

由于頁面尺寸和顯示器大小及分辨率有關系。在瀏覽器窗口中完整的顯示網頁內容而不出現(xiàn)滾動條時，要注意顯示器窗口包括：網頁內容顯示區(qū)、網頁的標題欄；瀏覽器程序的工具欄、地址欄、狀態(tài)欄、水平和垂直滾動條；任務欄。因此滿框顯示網頁，在800*600分辯率下，網頁設計尺寸為778*434px；在1024*768分辯率下，其尺寸為1002*620px。當網頁內容較多時，可以跨屏顯示，頁面長度原則上不超過3屏，寬度不超過1屏。

2.巧用黃金分割比

黃金分割比是一個應用廣范的數(shù)學常數(shù)，大約為1.618。在網頁設計中巧用黃金分割比，可以使設計更加和諧。如果在頁面局設計時，正在為如何設置欄寬、元素尺寸而絞盡腦汁，不妨體驗一下黃金分割比的妙處。以一個簡單的兩欄式頁面布局為例，左邊顯示導航，右邊顯示主要內容。假設頁面寬度為經典寬度960px，利用黃金分割比計算，右邊的欄寬為960/1.618=593px，左邊的欄寬為960-593=367px。

應用黃金分割比布局頁面，需要設計者有一定的計算能力，但在實際應用中，為了節(jié)省時間，可以簡化黃金分割比的應用，采用62%和38%比例，如兩欄結構，兩欄寬度分別為62%和38%。而對于三欄式布局的頁面，也可以先按比例分成兩欄，然后再將那份大的再按比例劃分。

3.適當處理留白

版面設計中的留白是指版面中沒有圖形或文字的部分，很多新手在設計網頁時總想著把整個頁面撐滿。其實，網頁就像一個房間，如果里面擠滿了人，就覺得呼吸困難，所以，要給頁面留有“呼吸”的空間。適當?shù)牧舭卓梢约軜嬳撁娴钠胶?，巧妙地留有想空間，給觀者一種美的享受。