網(wǎng)頁常見布局類型及布局技術(shù)的分析

摘 要：隨著“互聯(lián)網(wǎng)+”時代的到來，網(wǎng)絡(luò)上各式各樣的信息都有，琳瑯滿目、各式各樣，比如各類購物網(wǎng)站、休閑旅游網(wǎng)站，還有科技學(xué)術(shù)網(wǎng)站等。大多數(shù)人在上網(wǎng)的時候，都會瀏覽網(wǎng)頁提供給我們的信息，那么，我們就要合理設(shè)計網(wǎng)頁的布局，利用網(wǎng)站的頁面展示吸引住瀏覽用戶的目光，最后點擊查看他們感興趣的信息。本文以介紹網(wǎng)頁布局的概念為切入點，介紹了常用的幾種網(wǎng)頁布局，并對經(jīng)常采用的網(wǎng)頁布局技術(shù)進行了分析和探討。

關(guān)鍵詞：網(wǎng)頁布局；網(wǎng)頁類型；網(wǎng)頁布局結(jié)構(gòu)；DIV+CSS

中圖分類號：TP393文獻標識碼：A文章編號：2096-4706（2018）07-0103-03

Abstract：With the advent of the “Internet plus”era，all sorts of information on the internet are dazzling and varied，such as various shopping websites，leisure travel websites，and scientific and technological academic websites，etc. Most people on the internet will browse the information provided to us by the webpage. Then，we must rationally design the layout of the webpage，display it on the website’s page to attract the attention of the browsing user，and finally click to view the information they are interested in. This article introduces the concept of web page layout as an entry point，introduces several commonly used web page layouts，and analyzes and discusses frequently used web page layout technologies.

Keywords：Web page layout；Web page type；Web page layout structure；DIV+CSS

1 網(wǎng)頁布局的概述

一個網(wǎng)站的布局展示是會直接影響到網(wǎng)站的整體視覺效果和用戶體驗的。如果布局亂七八糟、層次混亂，會很大程度影響到用戶的再次訪問。制作一個網(wǎng)頁時，最初的它就好像一張白紙，需要設(shè)計者發(fā)揮自己的主觀能動性，設(shè)計你的頁面。網(wǎng)頁布局就是以最適合用戶觀看的方式將各類媒體排放在頁面的不同位置。當(dāng)然，不同的設(shè)計者會有不同的設(shè)計思路，但是無論怎樣，合理的頁面布局是網(wǎng)站建設(shè)過程中最重要的一個關(guān)鍵點，不僅能夠提高網(wǎng)站的觀賞性，更重要的是可以提高用戶的體驗度，進而提升網(wǎng)站的訪問次數(shù)。

網(wǎng)頁布局通常包含如下元素：

1.1 頁面尺寸

頁面尺寸是網(wǎng)頁布局非常重要的一個方面，首先要知道一點：頁面尺寸與顯示器大小和分辨率的關(guān)系密不可分。而且瀏覽器也會占去不少的空間，這樣留給設(shè)計者的頁面范圍就會更小。一般情況是分辨率在800×600的時候，頁面能夠顯示的尺寸是：780×428；分辨率在1024×768的時候，頁面能夠顯示的尺寸是：1007×600。故而，分辨率越高，頁面尺寸越大。除此之外，瀏覽器上的工具欄也是影響頁面尺寸的因素。當(dāng)選擇顯示所有的工具欄和關(guān)閉所有的工具欄時，頁面的尺寸也是不一樣的。

1.2 整體造型

造型就是設(shè)計者設(shè)計出來的整體形象。此處，我們指頁面表現(xiàn)出來的形象，在這個形象里，圖片與文字的擺放應(yīng)該是井然有序的。盡管我們用的顯示器，還有瀏覽器都是矩形的，但對頁面的整體造型來說，我們完全贊同設(shè)計成其他形狀，比如說三角形、圓形、菱形等，當(dāng)然矩形也可以。

1.3 頁眉

頁眉，顧名思義，就像人的眉毛一樣，處于頁面的頂端。它的作用一般是用來定義網(wǎng)頁的主題。一個網(wǎng)站的名稱大多時候都在頁眉里顯示。這樣的話，瀏覽者就能很快地了解到這個站點是干什么的。頁眉是整個頁面設(shè)計的重要組成部分，會牽涉到頁面下方的整個設(shè)計。通常，此處放置的是站點名字的圖片、公司Logo以及旗幟廣告。

1.4 文字

文字在網(wǎng)站頁面中出現(xiàn)都是以行或者塊（段落）的形式，文字的擺放位置決定著整個頁面布局的可視性。文字使用的時候比較靈活，可以按照自己的設(shè)計思路，放到網(wǎng)頁的任何位置。

1.5 圖片

圖片和文字是網(wǎng)頁的兩大組成元素，一個都不能少。所以說，設(shè)計好圖片和文字的擺放位置是整個網(wǎng)頁布局的重中之重。

1.6 其他媒體

除了文字和圖片，網(wǎng)頁中還會有聲音、視頻等其他多種媒體。隨著動態(tài)網(wǎng)頁的興起，部分網(wǎng)站也開始越來越多地引用這些媒體，它們在網(wǎng)頁布局上也將變得更重要。

1.7 頁腳

頁腳位于網(wǎng)頁的最下方，是放置版權(quán)所有或者公司信息的地方。大家瀏覽網(wǎng)站的時候，會發(fā)現(xiàn)許多制作信息、鏈接信息都是放置在頁腳的。

2 網(wǎng)頁布局常見的幾種結(jié)構(gòu)

2.1 “國字型”布局

“國字型”布局由“同”字型布局進化而來，因布局很像漢字“國”而得名。其頁面的最上部分一般放置網(wǎng)站的名稱圖片、導(dǎo)航欄或Banner廣告；頁面中間主要放置網(wǎng)站的主要內(nèi)容，主要內(nèi)容一般分為三個板塊，一般以中間板塊空間最大，最為重要、醒目；最下部分一般放置網(wǎng)站的版權(quán)所有和公司信息等。

2.2 “匡字型”布局

“匡字型”布局結(jié)構(gòu)，又叫T字型結(jié)構(gòu)，因與英文大寫字母T相似而得名。這種布局的頂部和“國字型”頂部類似，下方左側(cè)放置導(dǎo)航欄菜單，下方右側(cè)放置網(wǎng)頁正文等主要內(nèi)容。

2.3 標題正文型

標題正文型的布局結(jié)構(gòu)比較簡單，一般用于制作文章頁面、博客頁面和新聞頁面等。我們大部分看到的電子書網(wǎng)站就是標題正文型。

2.4 框架型布局

框架布局一般有左右型框架、上下型框架及綜合型框架。這種布局結(jié)構(gòu)是一些大型論壇和企業(yè)經(jīng)常使用的一種。其布局結(jié)構(gòu)主要是將一個頁面劃分為若干個獨立的子頁面，編輯內(nèi)容時，彼此獨立，顯示時，又在同一個頁面。通常會將具有導(dǎo)航性，一般不更改的內(nèi)容放在一個獨立的子頁面中，而將需要變化的內(nèi)容放在另一個獨立的子頁面中。

2.5 POP布局

POP布局這個稱呼來源于廣告術(shù)語。這種布局是一種比較具有藝術(shù)感和時尚感的網(wǎng)頁布局方式。頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。優(yōu)點是漂亮、美觀，吸引人，缺點是訪問速度慢。常用于時尚類站點，比如首飾、時裝、奢侈品網(wǎng)站等。

2.6 FLASH布局

FLASH布局是指網(wǎng)頁頁面以一個或多個Flash作為頁面主體的布局方式。在這種布局中，大部分甚至整個頁面都是Flash。

3 網(wǎng)頁布局經(jīng)常用的技術(shù)

3.1 表格布局技術(shù)

表格布局技術(shù)在很早以前，就成為了非常流行的布局方式。隨便打開一個網(wǎng)站，你都會發(fā)現(xiàn)其中的很多頁面都離不開表格布局方式。表格布局在定位圖片和文本上非常方便。如果你想要了解網(wǎng)站內(nèi)表格布局的具體情況，方法是任意找一個包含表格的頁面，將它保存為HTML文件，然后利用Dreamweaver或者其他所見即所得的網(wǎng)頁編輯軟件打開它，你就會看到這個頁面里表格布局的相關(guān)情況。它能對網(wǎng)頁上各類對象單獨處理，而不用害怕不同對象之間的影響。表格布局技術(shù)的優(yōu)點是布局容易、快捷，兼容性好；缺點是改動不便，需重新調(diào)整，工作量大，當(dāng)你用了過多表格時，頁面下載速度也會受到影響。

3.2 框架布局技術(shù)

框架結(jié)構(gòu)的頁面在設(shè)計時，因為復(fù)雜，很多人不是特別喜歡。但從布局上考慮，框架結(jié)構(gòu)不失為一個好的布局方法。上文中，我們提到的左右框架布局、上下框架布局和綜合框架布局都是利用框架布局技術(shù)實現(xiàn)的。類似于表格布局技術(shù)，框架布局技術(shù)可以把不同對象放置到不同頁面，框架可以取消邊框，所以也不會影響頁面的美觀度。使用框架布局技術(shù)可以使導(dǎo)航更加清晰，這樣的話網(wǎng)站的結(jié)構(gòu)更加明確突出。

相對來說，框架結(jié)構(gòu)要比其他的結(jié)構(gòu)難于控制和制作，框架中的內(nèi)容在后臺代碼中是無法被體現(xiàn)的。但是對于搜索引擎來說，都是直接鎖定網(wǎng)頁上的實際內(nèi)容，就是網(wǎng)頁的文字或者短語，進行索引。這樣一來，使用框架的網(wǎng)站就幾乎不可能在搜索引擎中取得較好的頁面等級，這也是框架布局的不足之處。

3.3 層疊樣式表的應(yīng)用：DIV+CSS布局技術(shù)

近年來，CSS（層疊樣式表）被提出，它能完全精確地定位文本和圖片。CSS布局是網(wǎng)頁HTML通過DIV標簽+CSS樣式表開發(fā)制作的HTML網(wǎng)頁的統(tǒng)稱。DIV+CSS布局是現(xiàn)在非常流行的布局方法，替代了原來的表格布局。CSS對于初學(xué)者來說顯得有點復(fù)雜，對網(wǎng)站制作人員技能要求較高，但它的確是一個好的布局方法。在網(wǎng)頁設(shè)計的過程中，一般情況下，在頁面內(nèi)只寫入文檔的結(jié)構(gòu)性內(nèi)容，而將表現(xiàn)形式寫在單獨的CSS文件中，然后再通過外部調(diào)用CSS樣式表來實現(xiàn)網(wǎng)頁的瀏覽，這樣就做到了結(jié)構(gòu)與樣式的分離。好處是布局靈活，改動方便。目前在很多的網(wǎng)站上，DIV+CSS布局技術(shù)的運用已成為衡量一個站點是否優(yōu)秀的標準之一。

以上介紹的布局技術(shù)并不是所有網(wǎng)站都在用的網(wǎng)頁布局技術(shù)，而是在網(wǎng)站設(shè)計中應(yīng)用比較多的布局技術(shù)，現(xiàn)在，尤其以DIV+CSS最為流行。

4 DIV+CSS布局是目前網(wǎng)頁布局技術(shù)的大勢所趨

4.1 能夠使代碼精簡

使用DIV+CSS布局使代碼很是精簡，較傳統(tǒng)的Table布局，減少了許多代碼，CSS文件可以在網(wǎng)站的任意一個頁面進行調(diào)用，避免了使用Table表格修改部分頁面。對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，提升了網(wǎng)頁訪問速度。

4.2 有利于優(yōu)化

簡潔、精確、結(jié)構(gòu)化的代碼更加有利于突出網(wǎng)站的重點和適合搜索引擎鎖定。相對傳統(tǒng)的Table布局，采用DIV+CSS技術(shù)的網(wǎng)頁，對于搜索引擎的索引更加友好，這也代表著網(wǎng)頁更容易被搜索引擎定位和收錄。

4.3 支持瀏覽器的相互兼容

無論未來的瀏覽器大戰(zhàn)勝利的是誰，利用DIV+CSS技術(shù)的網(wǎng)站都能很好地兼容。但是我們一定要注意最好采用外部調(diào)用的方式來調(diào)用CSS樣式表。

4.4 樣式的調(diào)整更加方便

內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。現(xiàn)在YAHOO、MSN等國際門戶網(wǎng)站，網(wǎng)易、新浪等國內(nèi)門戶網(wǎng)站和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。

參考文獻：

[1] 阿斯哈爾·努爾蘭.探討網(wǎng)頁設(shè)計中的排版與布局 [J].信息系統(tǒng)工程，2017（6）：54.

[2] 崔利.淺談網(wǎng)頁設(shè)計中頁面的布局方式 [J].電子制作，2015（22）：27.

[3] 姜鵬，郭曉倩.形·色——網(wǎng)頁設(shè)計法則及實例指導(dǎo) [M].北京：人民郵電出版社，2017.

[4] 邢太北，許瑞建.CSS+DIV網(wǎng)頁布局技術(shù)詳解 [M].北京：清華大學(xué)出版社，2014.

作者簡介：馬文靜（1984.12-），女，漢族，河南焦作人，教師，講師，本科。研究方向：計算機應(yīng)用、網(wǎng)絡(luò)教學(xué)、網(wǎng)絡(luò)技術(shù)。