關于“網頁布局”方式的研究

李玲玲

（淮北職業技術學院計算機科學技術系，安徽淮北 235000）

關于“網頁布局”方式的研究

李玲玲

（淮北職業技術學院計算機科學技術系，安徽淮北 235000）

網頁是網站構成的基本要素，而網頁元素在網頁中的組合決定了網頁的最終效果。文章首先指出了三種經典的網頁布局方式，對其進行分析比較，并論述了他們各自的優缺點，然后說明了實際應用中常用的方法手段。

網頁布局；表格；框架；AP元素

網頁中可以直接輸入文本、圖像、多媒體等諸多元素，并可以按照我們的目標設置它們之間的排版格式，但是不能隨心所欲的在網頁中的任意位置放置這些元素。制作網頁的過程中有時元素之間的相對位置會根據元素的尺寸等很多要素而變得毫無章法，也可能隨著IE窗口的大小調整及屏幕的分辨率的不同而改變，即網頁處于不穩定的狀態，而解決這些問題的方法就是在插入這些網頁元素之前對網頁進行頁面布局［1］15－22。

經典的頁面布局方式有三種：用表格布局網頁、用框架布局網頁和用AP元素布局網頁［2］8。

1 用表格布局網頁

眾所周知，表格的基本功能是羅列和顯示數據的，這在Word和Excel中是最好的證明。然而，在Dreamweaver中，表格除了羅列和顯示數據外，還有一項非常重要的功能，就是定位與排版，即布局網頁的功能［3］85－92。

利用表格布局的常用方法是根據頁面的需求，插入表格，設置好表格的相關屬性，然后把網頁所用元素（常用的有文本、圖像等）插入到表格當中，使這些元素固定在相對的單元格中。因為外層有表格限制，所以這些插入進來的元素受單元格限制，而不會再隨意移動。

當然，在Dreamweaver中，可以用來布局網頁的，除了基本表格外，還包括嵌套表格和自繪表格。無論是使用哪種表格來對網頁進行布局，通常表格的屬性中邊框粗細、單元格邊距、單元格間距的值通常都設置為0。

在Dreamweaver中，使用表格布局網頁，其優點是便于規劃，易于接受，對設計人員的專業技術要求不高，操作簡單，直觀。

缺點是Table布局靈活性不大，你只能遵循〈table〉〈／table〉、〈tr〉〈／tr〉、〈td〉〈／td〉的格式；不適合過于復雜的網頁；垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，降低代碼的可讀性。

2 用框架布局網頁

在Dreamweaver中框架（Frame）是除了表格以外另一種常用的網頁布局排版工具。框架結構就是把瀏覽器窗口劃分為多個區域，每個區域都可以分別顯示不同的網頁?？蚣軐嶋H上由兩部分組成，即框架與框架集?？蚣苁菫g覽器窗口中的一個區域，它可以顯示與瀏覽器窗口的其余部分中所顯示內容相關或無關的網頁文件。每一個框架都是一個獨立的網頁文件；框架集是框架的集合，是一個定義了一組框架結構的網頁?？蚣芗臋n本身不在瀏覽器中顯示，它只是向瀏覽器提供如何顯示框架以及在框架中顯示哪些文檔的信息，是一個用于存儲框架的容器。

框架網頁是指一種Web頁，可以將Web瀏覽器窗口分為不同的可滾動的區域，這些區域可獨立的顯示幾個Web頁［4］185－192。一個窗口可保持不變，而其它窗口根據用戶選擇的超鏈接變化。

用框架布局網頁首先要建立框架或框架集，其操作可以借助于菜單或工具，也可以直接使用鼠標拖拽。然后把相對應元素（文本、圖像、網頁等）導入到框架中。值得一提的是框架和框架集在使用時都需要保存。使用Iframe可以將一個文檔嵌入到另一個文檔中顯示。隨處引用，而不必拘泥于形式。但必須用代碼手工添加。

在Dreamweaver中，使用框架布局網頁，其優點是框架網頁本身不包含可見內容，它只是一個容器，用于指定在框架中顯示的其它網頁及顯示方式；訪問者不需要為每個頁面重新加載與導航相關的圖形；每個框架都有自己獨立的滾動條，方便訪問者獨立瀏覽這些框架。

缺點是缺省時，框架是有邊框的，占用屏幕上可用作別的目的的一些空間；難以實現不同的框架中各元素的精確對齊；主流的搜索引擎下不會收錄框架的頁面；網點速度相對較慢等。

3 用AP元素布局網頁

Dreamweaver的絕對定位簡稱AP，是分配有絕對位置的一種頁面元素。通常文字、圖像等元素都是在二維空間進行編輯操作的。而使用AP Div則讓頁面元素向三維空間擴展。AP元素可以包含文字、圖像、影像等。AP Div就是以絕對的定位方式處理HTML頁面的元素［5］62－69。

用AP元素布局網頁，首先要繪制AP Div層，其對應的標志符為〈div〉〈／div〉，然后把光標置于相應的AP Div層內，把所需頁面元素插入進來即可。AP Div層是可以相互重疊的。因為元素是被限定在AP Div內，所以元素相對AP Div層是不移動的，但AP Div層本身是可以在網頁中任意移動。即AP Div層將攜帶內置元素一起移動。

用AP元素布局網頁，優點是繪制簡單，直觀，元素會跟隨AP Div層移動。

缺點是AP Div層本身是相對定位的，其位置針對整個頁面不是絕對的。

4 其它布局網頁方式

DIV＋CSS是網站標準（或稱“WEB標準”）中常用術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV＋CSS的方式實現各種定位。CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等文件式樣的計算機語言。

DIV＋CSS顧名思義，是把DIV與CSS樣式結合在一起使用［6］141－147。使用DIV＋CSS布局網頁的好處是頁面的代碼精簡了，提高spider爬行效率，能在最短的時間內爬完整個頁面。不會象Table表格那樣有嵌套的問題。其次是速度提升，DIV＋CSS減少了頁面代碼，提高了頁面加載的速度。基于XHTML標準的DIV＋CSS布局，一般在設計完成后會盡可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向于符合W3C標準的網站或頁面，但事實證明使用XHTML架構的網站排名狀況一般都不錯。其次，使用DIV＋CSS布局網頁，會支持各種瀏覽器；搜索引擎更加友好；樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便。現在YAHOO，MSN等國際門戶網站，網易，新浪等國內門戶網站，和主流的WEB2．0網站，均采用DIV＋CSS的框架模式，更加印證了DIV＋CSS是大勢所趨；最后就是表現和結構分離，在團隊開發中更容易分工合作而減少相互關聯性。這無疑更適合于大型網站的建立。

當然，使用DIV＋CSS也有其自己的缺點。DIV＋CSS盡管不是高不可及，但至少要比表格定位復雜的多，即使對于網站設計高手也很容易出現問題，更不要說初學者了；CSS網站制作的設計元素通常放在1個外部文件中，或幾個文件，有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那么整個網站將變得慘不忍睹；雖然說DIV＋CSS解決了大部分瀏覽器兼容問題，但是也有在部分瀏覽器中使用出現異常，比如火狐瀏覽器，在IE中顯示正常的頁面，到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題，但是可以說在目前來看，DIV＋CSS還沒有實現所有瀏覽器的統一兼容；DIV＋CSS對搜索引擎優化與否，取決于網頁設計的專業水平，而不是DIV＋CSS本身。DIV＋CSS網頁設計并不能保證網頁對搜索引擎的優化，甚至不能保證一定比HTML網站有更簡潔的代碼設計，何況搜索引擎對于網頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量，這就是為什么很多傳統表格布局制作的網站在搜索結果中的排序靠前，而很多使用CSS及web標準制作的網頁排名依然靠后的原因。因為對于搜索引擎而言，網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。

5 結束語

網頁布局的方式有很多，本文中提出了三種經典布局方式和一種流行布局方式，并討論了它們各自的優缺點。指出現今框架使用的已經很少了，一般是表格和AP Div層配合使用。最后結合現實生活，道出了目前最流行的網頁布局方式是DIV＋CSS，并實際羅列了DIV＋CSS之所以被廣泛使用的原因，但也同時說明DIV＋CSS也有其自己的缺點?？傊?，在實際制作網頁的過程當中，我們可以依據實際情況，選擇多種網頁布局的方式，盡可能地做到“興其利，廢其弊”。

［1］ 李京文．網頁設計與制作［M］．北京：高等教育出版社，2007．

［2］ 溫謙．邊用邊學Dreamweaver 8網頁設計與制作［M］．北京：人民郵電出版社，2007．

［3］ 章舜鐘．網頁設計與制作［M］．北京：電子工業出版社，2010．

［4］ 楊紀梅，肖志強．網頁設計與制作指南［M］．北京：清華大學出版社，2010．

［5］ 李峰．Dreamweaver CS4網頁制作［M］．北京：電子工業出版社，2009．

［6］ 溫國峰．網頁設計三劍客［M］．北京：清華大學出版社，2009．

責任編輯：孟云玲

TP393．092

A

1671－8275（2011）01－0011－02

2010－11－01

李玲玲（1979－），女，安徽淮北人，淮北職業技術學院計算機科學技術系助理工程師、講師。研究方向：計算機應用技術。