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

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

版面布局設(shè)計的作用

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

網(wǎng)頁版面布局步驟

1.構(gòu)思方案

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

2.電腦表現(xiàn)

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

網(wǎng)頁版面布局類型

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

網(wǎng)頁版面布局技術(shù)

在設(shè)計網(wǎng)頁時，常用頁面布局的技術(shù)主要有兩種：table布局和DIV+CSS布局。

1.table布局

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

2.DIV+CSS布局

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

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

網(wǎng)頁版面布局技巧

1.確定網(wǎng)頁設(shè)計尺寸

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

2.巧用黃金分割比

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

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

3.適當處理留白

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