淺析網頁設計的布局

2009-10-12 09:51:16孔麗英

職業·中旬 2009年7期

孔麗英

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

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

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

一、網頁布局的基本概念

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

1.頁面尺寸

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

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

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

2.整體造型

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

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

3.頁頭

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

4.文本

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

5.頁腳

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

6.圖片

圖片和文本是網頁的兩大構成元素,缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。

7.多媒體

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

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

二、常見的網頁布局類型

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

1.“國”字型

2.拐角型

這種結構與上一種“國”字型結構,其實只是形式上的區別,有相似性。頂端是標題及廣告橫幅,接下來的左側是一窄列鏈接等,右列是很寬的正文,底端也是一些網站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標題及廣告,左側是導航鏈接。

3.標題正文型

這種類型,即網頁頂端是標題,下面是正文。例如,一些文章頁面或注冊頁面等就是這種類。

4.左右框架型

這是一種左右分為兩頁的框架結構。一般左面是導航鏈接,有時頂端會有一個小的標題或標致,右面是正文。目前,大部分的大型論壇都是這種結構,一些企業網站也喜歡采用這種左右框架型結構。這種類型結構非常清晰,一目了然。

5.上下框架型

這種結構與上一結構類似,區別僅僅在于是一種上下分為兩頁的框架。

6.綜合框架型

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

7.封面型

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

8.Flash型

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

9.自由型

這種結構是上面幾種類型的自由結合與變化。

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

三、網頁布局的技術

頁面布局的實現需要掌握幾種技術。目前,網頁設計的軟件使用比較多的是Dreamweaver。在使用Dreamweaver軟件設計網頁時,一般用于頁面布局的技術有以下三種:

1.使用DIV+CSS網頁布局

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

2.表格網頁布局

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

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

3.框架網頁布局

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

當然,頁面布局的技術不止以上3種,每種技術都有它們一定的使用優勢。在目前來說,在進行頁面設計時,采用的布局技術不是單獨采用某種技術,而是幾種技術的結合使用,更好地體現每種技術的優勢。這樣在頁面布局時才可以更好地對頁面內容進行有效安排。

當前,網絡的飛躍發展使得網頁設計技術不斷提高,也給網頁設計人員帶來更大的挑戰。當設計技術越來越成熟的時候,網頁的質量要求也會更高。網頁布局在體現網頁質量方面是非常重要的因素之一。掌握好網頁布局的技術,制作適合用戶的布局方案,是每個網頁設計人員都應該具備的素質,創作屬于自己個性風格的網頁布局,是每個網頁設計人員的追求。

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