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

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

版面布局設計的作用

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

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

1.構思方案

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

2.電腦表現

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

網(wǎng)頁(yè)版面布局類(lèi)型

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

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

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

1.table布局

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

2.DIV+CSS布局

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

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

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

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

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

2.巧用黃金分割比

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

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

3.適當處理留白

版面設計中的留白是指版面中沒(méi)有圖形或文字的部分，很多新手在設計網(wǎng)頁(yè)時(shí)總想著(zhù)把整個(gè)頁(yè)面撐滿(mǎn)。其實(shí)，網(wǎng)頁(yè)就像一個(gè)房間，如果里面擠滿(mǎn)了人，就覺(jué)得呼吸困難，所以，要給頁(yè)面留有“呼吸”的空間。適當的留白可以架構頁(yè)面的平衡，巧妙地留有想空間，給觀(guān)者一種美的享受。