淺析網(wǎng)頁設(shè)計的布局

孔麗英

網(wǎng)頁是網(wǎng)站構(gòu)成的基本元素。我們每天上網(wǎng)瀏覽網(wǎng)頁的時候,可曾思考過是什么原因促使自己登陸這個網(wǎng)站?是文字內(nèi)容的精心組織?還是圖片的唯美設(shè)計?抑或是和諧的色彩搭配?筆者認(rèn)為這些都是不可忽略的因素,但除此以外,還有一個非常重要的因素,即網(wǎng)頁的合理布局。

頁面布局就是在網(wǎng)頁設(shè)計時把網(wǎng)頁的各種構(gòu)成要素(文字、圖片、菜單等等)在頁面內(nèi)有效地搭配。一個精美的網(wǎng)頁,不僅體現(xiàn)在頁面內(nèi)容的精彩,還要有效地利用頁面的有效顯示空間,創(chuàng)造出合理的布局模式。隨著網(wǎng)絡(luò)技術(shù)的不斷提高,人們對網(wǎng)頁的設(shè)計要求也越來越高,主要體現(xiàn)在:第一,網(wǎng)頁的整體設(shè)計。網(wǎng)頁的整體設(shè)計首先觸動的是用戶的第一感覺,這種感覺也決定了用戶對網(wǎng)頁的評價——好或不好。一個好的網(wǎng)頁,表現(xiàn)在內(nèi)容的合理組織、圖片的適當(dāng)使用、色彩的和諧,而這些更說明了頁面布局在有效處理這些內(nèi)容時的重要性。第二,網(wǎng)頁的風(fēng)格設(shè)計?，F(xiàn)在的網(wǎng)站越來越多,怎么選擇適合自己的網(wǎng)站也是用戶需要考慮的問題。針對這個問題,頁面的風(fēng)格選擇普遍用戶所能接受的類型還是自己獨特的個性頁面,網(wǎng)頁設(shè)計人員在網(wǎng)頁的布局方面也要下相當(dāng)大的功夫。

由此可見,頁面布局在頁面設(shè)計方面是至為重要的。那么,如何才能使頁面布局合理分配呢?這是目前網(wǎng)頁設(shè)計人員遇到的問題之一。在進行頁面設(shè)計時,要把頁面布局當(dāng)作第一處理問題。

一、網(wǎng)頁布局的基本概念

網(wǎng)頁設(shè)計,可以說是一種平面設(shè)計,要求設(shè)計人員把頁面內(nèi)容合理地分布在頁面中。每次頁面設(shè)計,都可以把它看作是在一張白紙上畫出我們想要的圖案。如果已經(jīng)掌握畫圖的方法,那么就可以畫出一張漂亮的“圖畫”,但如果是一個新手,那么有必要首先了解頁面布局的基本概念。

1.頁面尺寸

由于頁面尺寸和顯示器大小及分辨率有關(guān)系,網(wǎng)頁的局限性就在于無法突破顯示器的范圍,而且因為瀏覽器也將占去不少空間,留下的頁面范圍變得越來越小。常用的分辨率有800×600和1027×768。一般分辨率在800×600的情況下,頁面的顯示尺寸為:780×428個象素;分辨率在1024×768的情況下,頁面的顯示尺寸為:1007×600。從以上數(shù)據(jù)可以看出,分辨率越高,頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因。目前的瀏覽器工具欄一般都可以取消或者增加。當(dāng)顯示全部的工具欄和關(guān)閉全部工具欄時,頁面的尺寸是不一樣的。

在網(wǎng)頁設(shè)計過程中,向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。但筆者要提醒大家的是,除非肯定站點的內(nèi)容能吸引大家拖動,否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容,那么最好做上頁面內(nèi)部跳轉(zhuǎn)連接,方便用戶瀏覽。

2.整體造型

什么是造型?造型就是創(chuàng)造出來的物體形象。這里是指頁面的整體形象,這種形象應(yīng)該是一個整體,圖形與文本的接合應(yīng)該是層疊有序。雖然顯示器和瀏覽器都是矩形,但對于頁面的造型,可以充分運用自然界中的其它形狀以及它們的組合,如矩形、圓形、三角形、菱形等。

對于不同的形狀,它們所代表的意義是不同的。例如,矩形代表正式、規(guī)則,很多政府網(wǎng)頁都以矩形為整體造型;圓形帶表著柔和、團結(jié)、溫暖、安全等,許多時尚站點喜歡以圓形為頁面整體造型;三角形代表著力量、權(quán)威、牢固、侵略等,許多大型的商業(yè)站點為顯示它的權(quán)威性常以三角形為頁面整體造型;菱形代表著平衡、協(xié)調(diào)、公平,一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀代表著不同意義,但目前的網(wǎng)頁制作多數(shù)是結(jié)合多個圖形加以設(shè)計,在這其中某種圖形的構(gòu)圖比例可能占得多一些。

3.頁頭

頁頭又可稱之為頁眉,頁眉的作用是定義頁面的主題。例如,一個站點的名字多數(shù)都顯示在頁眉里。這樣,訪問者能很快知道這個站點是什么內(nèi)容。頁頭是整個頁面設(shè)計的關(guān)鍵,它將牽涉到下面更多的設(shè)計和整個頁面的協(xié)調(diào)性。頁頭常放置站點名字的圖片和公司標(biāo)志以及旗幟廣告。

4.文本

文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn),它們的擺放位置決定著整個頁面布局的可視性。

5.頁腳

頁腳和頁頭相呼應(yīng)。頁頭是放置站點主題的地方,而頁腳是放置制作者或者公司信息的地方。許多制作信息都是放置在頁腳的。

6.圖片

圖片和文本是網(wǎng)頁的兩大構(gòu)成元素,缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關(guān)鍵。

7.多媒體

除了文本和圖片,還有聲音、動畫、視頻等其它媒體。雖然它們不是經(jīng)常被用到,但隨著動態(tài)網(wǎng)頁的興起,它們在網(wǎng)頁布局上也將變得更重要。

了解完基本概念后,就可以知道,在頁面設(shè)計時考慮的布局,實際就是把以上內(nèi)容在頁面里面進行合理組織排列。

二、常見的網(wǎng)頁布局類型

網(wǎng)頁布局大致可分為:“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。

1.“國”字型

“國”字型,也可以稱為“同”字型,是一些大型網(wǎng)站喜歡的類型,即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接下來是網(wǎng)站的主要內(nèi)容,左右分列一些兩小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是目前網(wǎng)上最多的一種結(jié)構(gòu)類型。

2.拐角型

這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其實只是形式上的區(qū)別,有相似性。頂端是標(biāo)題及廣告橫幅,接下來的左側(cè)是一窄列鏈接等,右列是很寬的正文,底端也是一些網(wǎng)站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標(biāo)題及廣告,左側(cè)是導(dǎo)航鏈接。

3.標(biāo)題正文型

這種類型,即網(wǎng)頁頂端是標(biāo)題,下面是正文。例如,一些文章頁面或注冊頁面等就是這種類。

4.左右框架型

這是一種左右分為兩頁的框架結(jié)構(gòu)。一般左面是導(dǎo)航鏈接,有時頂端會有一個小的標(biāo)題或標(biāo)致,右面是正文。目前,大部分的大型論壇都是這種結(jié)構(gòu),一些企業(yè)網(wǎng)站也喜歡采用這種左右框架型結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰,一目了然。

5.上下框架型

這種結(jié)構(gòu)與上一結(jié)構(gòu)類似,區(qū)別僅僅在于是一種上下分為兩頁的框架。

6.綜合框架型

這種結(jié)構(gòu),是上面兩種結(jié)構(gòu)的結(jié)合,是一種相對復(fù)雜的框架結(jié)構(gòu)。較為常見的是類似于“拐角型”的結(jié)構(gòu),不同之處只是采用了框架結(jié)構(gòu)。

7.封面型

這種類型基本上是出現(xiàn)在一些網(wǎng)站的首,大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫,放上幾個簡單的鏈接或者僅是一個“進入”的鏈接,甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁,如果處理得好,會給人帶來賞心悅目的感覺。

8.Flash型

這種結(jié)構(gòu),實際上與封面型結(jié)構(gòu)是類似的,只是這種類型采用了目前非常流行的Flash。與封面型不同的是,由于Flash的強大功能,頁面所表達(dá)的信息更豐富,其視覺效果及聽覺效果如果處理得當(dāng),絕不差于傳統(tǒng)的多媒體。

9.自由型

這種結(jié)構(gòu)是上面幾種類型的自由結(jié)合與變化。

什么樣的布局是最好的?這是初學(xué)者可能最先想到的問題。其實,這要具體情況具體分析。如果內(nèi)容非常多,就要考慮用“國”字型或“拐角型”;而如果內(nèi)容不太多而一些說明性的東西比較多,則可以考慮標(biāo)題正文型;框架結(jié)構(gòu)的一個共同特點就是瀏覽方,速度快,缺點是結(jié)構(gòu)變化不靈;如果是一個企業(yè)網(wǎng)站想展示一下企業(yè)形象或個人主頁想展示個人風(fēng)采,封面性是首選;Flash型更靈活一些,好的Flash可以大大豐富網(wǎng)頁,但它不能表達(dá)過多的文字信息?？傮w而言,網(wǎng)頁布局的類型并不是固定不變的,要根據(jù)網(wǎng)站需要和設(shè)計人員的創(chuàng)作而不斷更新。

三、網(wǎng)頁布局的技術(shù)

頁面布局的實現(xiàn)需要掌握幾種技術(shù)。目前,網(wǎng)頁設(shè)計的軟件使用比較多的是Dreamweaver。在使用Dreamweaver軟件設(shè)計網(wǎng)頁時,一般用于頁面布局的技術(shù)有以下三種:

1.使用DIV+CSS網(wǎng)頁布局

隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計理念的普及,國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法。從實際應(yīng)用情況來看,此種方法絕對好于表格制作頁面的方法。這種布局有其獨特的優(yōu)勢:頁面載入得更快;降低流量費用;修改設(shè)計時更有效率;保持視覺的一致性;更好地被搜索引擎收錄;對瀏覽者和瀏覽器更具親和力。

2.表格網(wǎng)頁布局

提到網(wǎng)頁布局,筆者相信,大多數(shù)人都熟悉Dreamweaver MX中的可視化網(wǎng)格布局。表格在網(wǎng)頁設(shè)計中起著非常重要的作用,一方面組織管理傳統(tǒng)的表格數(shù)據(jù),另一方面主要用于網(wǎng)頁布局的組織。構(gòu)成網(wǎng)頁的HTML代碼文檔中,將表格的組成分成單元格、行、列,每一部分都有其屬性,這樣就能實現(xiàn)對象的基本定位。

表格布局好像已經(jīng)成為一個標(biāo)準(zhǔn),隨便瀏覽一個站點,都一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理,而又不用擔(dān)心不同對象之間的影響。表格布局惟一的缺點是,過多使用表格時,頁面下載速度會受到影響。

3.框架網(wǎng)頁布局

框架結(jié)構(gòu)的頁面開始被許多人不喜歡,可能是因為它的兼容性。框架布局最大的優(yōu)點是層次簡單、鏈接方便,但它的模式較為固定,只有上下型、左右型、左中右型等,缺乏靈活性。

當(dāng)然,頁面布局的技術(shù)不止以上3種,每種技術(shù)都有它們一定的使用優(yōu)勢。在目前來說,在進行頁面設(shè)計時,采用的布局技術(shù)不是單獨采用某種技術(shù),而是幾種技術(shù)的結(jié)合使用,更好地體現(xiàn)每種技術(shù)的優(yōu)勢。這樣在頁面布局時才可以更好地對頁面內(nèi)容進行有效安排。

當(dāng)前,網(wǎng)絡(luò)的飛躍發(fā)展使得網(wǎng)頁設(shè)計技術(shù)不斷提高,也給網(wǎng)頁設(shè)計人員帶來更大的挑戰(zhàn)。當(dāng)設(shè)計技術(shù)越來越成熟的時候,網(wǎng)頁的質(zhì)量要求也會更高。網(wǎng)頁布局在體現(xiàn)網(wǎng)頁質(zhì)量方面是非常重要的因素之一。掌握好網(wǎng)頁布局的技術(shù),制作適合用戶的布局方案,是每個網(wǎng)頁設(shè)計人員都應(yīng)該具備的素質(zhì),創(chuàng)作屬于自己個性風(fēng)格的網(wǎng)頁布局,是每個網(wǎng)頁設(shè)計人員的追求。

(作者單位:廣東肇慶高級技工學(xué)校)