網(wǎng)頁設(shè)計(jì)的第一步是設(shè)計(jì)版面布局。網(wǎng)頁版面布局的主要任務(wù)是將web頁面分割成用于安排文字、圖像等各種屏幕元素的各個(gè)區(qū)域。良好的頁面布局應(yīng)該做到結(jié)構(gòu)清晰、整潔，并且易于瀏覽操作。作為網(wǎng)站設(shè)計(jì)的初學(xué)者很可能會在一開始就進(jìn)行版面的設(shè)計(jì)，隨著設(shè)計(jì)的深入也許合發(fā)現(xiàn)有許多要改動(dòng)的地方，甚至要重新開始。幾經(jīng)反復(fù)，會打亂網(wǎng)站設(shè)計(jì)思路，也就不會有好的網(wǎng)站出品。因此必須學(xué)習(xí)和掌握網(wǎng)頁版面設(shè)計(jì)的步驟。首先了解一下什么是版面和布局。

    版面指的是瀏覽器觀看到的完整的一個(gè)頁面。因?yàn)槊總€(gè)人的顯示器分辨率不同，所以同一個(gè)頁面的大小可能出現(xiàn)640 x 480像素，800 x 600像素，1024x 768像素等不同尺寸，目前常用的布局尺寸為800 x 600像素。

    布局指的是以Zui適合瀏覽的方式將圖片和文字排放在頁面的不同位置，使得瀏覽者的視覺效果與使用效果。

    版面布局也是一個(gè)創(chuàng)意的過程，但要比網(wǎng)站整體的創(chuàng)意容易和有規(guī)律得多。網(wǎng)頁版面布局設(shè)計(jì)按階段可分為四個(gè)步驟。六匹馬中山網(wǎng)絡(luò)公司下面對四個(gè)階段一一進(jìn)行說明。

1．方案設(shè)計(jì)

    方案設(shè)計(jì)其實(shí)就是回出頁面的結(jié)構(gòu)草圖。新建頁面就像一張白紙，沒有任何表格、框架和約定俗成的東西，根據(jù)網(wǎng)站整體的內(nèi)容，可以盡可能地發(fā)揮想像力，將想到的“創(chuàng)意”用一支鉛筆畫在一張白紙上。這屬于創(chuàng)造階段．不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以租陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能多回幾種方案，Zui后選定一個(gè)滿意的方案作為網(wǎng)頁版面部局設(shè)計(jì)的初稿。

2．初步設(shè)計(jì)

    在方案設(shè)計(jì)的基礎(chǔ)上，需要確定如何把功能模塊安排到頁面上。這里的功能模塊是指網(wǎng)站標(biāo)志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、計(jì)數(shù)器、版權(quán)信息等。這個(gè)階段必須遵循主次分明、突出重點(diǎn)、平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等Zui重要的模塊放在Zui顯眼、Zui突出的位置，然后再考慮次要模塊的排放。

3．技術(shù)設(shè)計(jì)

    技術(shù)設(shè)計(jì)的主要任務(wù)是在初步設(shè)計(jì)的基礎(chǔ)之上，進(jìn)一步解決各部分的技術(shù)問題，在確定了功能模塊的大致位置后，需要對一些網(wǎng)站標(biāo)志、題頭和背景因進(jìn)行設(shè)計(jì)，然后把設(shè)計(jì)好的模塊放在初步設(shè)計(jì)中確定的位置上，這樣一個(gè)網(wǎng)頁的布局基本完成。

4．定案設(shè)計(jì)

    這是調(diào)整階段，將初步的頁面布局精細(xì)化、具體化，如網(wǎng)頁的白色背景太虛，則可以加些色塊；版面零散，可以用線條和符號串聯(lián)；左面文字過多，右面則可以插一張圖片保持平衡，表格太規(guī)矩，可以改用導(dǎo)角試試，等等。經(jīng)過不斷的嘗試和推敲，網(wǎng)頁一定會制作得很出色。

    以上的設(shè)計(jì)步驟之間并沒有明顯的分界，這里主要是希望初學(xué)者一步步去掌握頁面的布局設(shè)計(jì)，在下一節(jié)中將重點(diǎn)介紹一些技術(shù)細(xì)節(jié)。轉(zhuǎn)自六匹馬網(wǎng)絡(luò)