李玲玲
(淮北職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)技術(shù)系,安徽淮北 235000)
關(guān)于“網(wǎng)頁(yè)布局”方式的研究
李玲玲
(淮北職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)技術(shù)系,安徽淮北 235000)
網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本要素,而網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的組合決定了網(wǎng)頁(yè)的最終效果。文章首先指出了三種經(jīng)典的網(wǎng)頁(yè)布局方式,對(duì)其進(jìn)行分析比較,并論述了他們各自的優(yōu)缺點(diǎn),然后說(shuō)明了實(shí)際應(yīng)用中常用的方法手段。
網(wǎng)頁(yè)布局;表格;框架;AP元素
網(wǎng)頁(yè)中可以直接輸入文本、圖像、多媒體等諸多元素,并可以按照我們的目標(biāo)設(shè)置它們之間的排版格式,但是不能隨心所欲的在網(wǎng)頁(yè)中的任意位置放置這些元素。制作網(wǎng)頁(yè)的過(guò)程中有時(shí)元素之間的相對(duì)位置會(huì)根據(jù)元素的尺寸等很多要素而變得毫無(wú)章法,也可能隨著IE窗口的大小調(diào)整及屏幕的分辨率的不同而改變,即網(wǎng)頁(yè)處于不穩(wěn)定的狀態(tài),而解決這些問(wèn)題的方法就是在插入這些網(wǎng)頁(yè)元素之前對(duì)網(wǎng)頁(yè)進(jìn)行頁(yè)面布局[1]15-22。
經(jīng)典的頁(yè)面布局方式有三種:用表格布局網(wǎng)頁(yè)、用框架布局網(wǎng)頁(yè)和用AP元素布局網(wǎng)頁(yè)[2]8。
眾所周知,表格的基本功能是羅列和顯示數(shù)據(jù)的,這在Word和Excel中是最好的證明。然而,在Dreamweaver中,表格除了羅列和顯示數(shù)據(jù)外,還有一項(xiàng)非常重要的功能,就是定位與排版,即布局網(wǎng)頁(yè)的功能[3]85-92。
利用表格布局的常用方法是根據(jù)頁(yè)面的需求,插入表格,設(shè)置好表格的相關(guān)屬性,然后把網(wǎng)頁(yè)所用元素(常用的有文本、圖像等)插入到表格當(dāng)中,使這些元素固定在相對(duì)的單元格中。因?yàn)橥鈱佑斜砀裣拗疲赃@些插入進(jìn)來(lái)的元素受單元格限制,而不會(huì)再隨意移動(dòng)。
當(dāng)然,在Dreamweaver中,可以用來(lái)布局網(wǎng)頁(yè)的,除了基本表格外,還包括嵌套表格和自繪表格。無(wú)論是使用哪種表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局,通常表格的屬性中邊框粗細(xì)、單元格邊距、單元格間距的值通常都設(shè)置為0。
在Dreamweaver中,使用表格布局網(wǎng)頁(yè),其優(yōu)點(diǎn)是便于規(guī)劃,易于接受,對(duì)設(shè)計(jì)人員的專(zhuān)業(yè)技術(shù)要求不高,操作簡(jiǎn)單,直觀。
缺點(diǎn)是Table布局靈活性不大,你只能遵循〈table〉〈/table〉、〈tr〉〈/tr〉、〈td〉〈/td〉的格式;不適合過(guò)于復(fù)雜的網(wǎng)頁(yè);垃圾代碼會(huì)很多,一些修飾的樣式及布局的代碼混合一起,降低代碼的可讀性。
在Dreamweaver中框架(Frame)是除了表格以外另一種常用的網(wǎng)頁(yè)布局排版工具??蚣芙Y(jié)構(gòu)就是把瀏覽器窗口劃分為多個(gè)區(qū)域,每個(gè)區(qū)域都可以分別顯示不同的網(wǎng)頁(yè)??蚣軐?shí)際上由兩部分組成,即框架與框架集??蚣苁菫g覽器窗口中的一個(gè)區(qū)域,它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容相關(guān)或無(wú)關(guān)的網(wǎng)頁(yè)文件。每一個(gè)框架都是一個(gè)獨(dú)立的網(wǎng)頁(yè)文件;框架集是框架的集合,是一個(gè)定義了一組框架結(jié)構(gòu)的網(wǎng)頁(yè)??蚣芗臋n本身不在瀏覽器中顯示,它只是向?yàn)g覽器提供如何顯示框架以及在框架中顯示哪些文檔的信息,是一個(gè)用于存儲(chǔ)框架的容器。
框架網(wǎng)頁(yè)是指一種Web頁(yè),可以將Web瀏覽器窗口分為不同的可滾動(dòng)的區(qū)域,這些區(qū)域可獨(dú)立的顯示幾個(gè)Web頁(yè)[4]185-192。一個(gè)窗口可保持不變,而其它窗口根據(jù)用戶(hù)選擇的超鏈接變化。
用框架布局網(wǎng)頁(yè)首先要建立框架或框架集,其操作可以借助于菜單或工具,也可以直接使用鼠標(biāo)拖拽。然后把相對(duì)應(yīng)元素(文本、圖像、網(wǎng)頁(yè)等)導(dǎo)入到框架中。值得一提的是框架和框架集在使用時(shí)都需要保存。使用Iframe可以將一個(gè)文檔嵌入到另一個(gè)文檔中顯示。隨處引用,而不必拘泥于形式。但必須用代碼手工添加。
在Dreamweaver中,使用框架布局網(wǎng)頁(yè),其優(yōu)點(diǎn)是框架網(wǎng)頁(yè)本身不包含可見(jiàn)內(nèi)容,它只是一個(gè)容器,用于指定在框架中顯示的其它網(wǎng)頁(yè)及顯示方式;訪問(wèn)者不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形;每個(gè)框架都有自己獨(dú)立的滾動(dòng)條,方便訪問(wèn)者獨(dú)立瀏覽這些框架。
缺點(diǎn)是缺省時(shí),框架是有邊框的,占用屏幕上可用作別的目的的一些空間;難以實(shí)現(xiàn)不同的框架中各元素的精確對(duì)齊;主流的搜索引擎下不會(huì)收錄框架的頁(yè)面;網(wǎng)點(diǎn)速度相對(duì)較慢等。
Dreamweaver的絕對(duì)定位簡(jiǎn)稱(chēng)AP,是分配有絕對(duì)位置的一種頁(yè)面元素。通常文字、圖像等元素都是在二維空間進(jìn)行編輯操作的。而使用AP Div則讓頁(yè)面元素向三維空間擴(kuò)展。AP元素可以包含文字、圖像、影像等。AP Div就是以絕對(duì)的定位方式處理HTML頁(yè)面的元素[5]62-69。
用AP元素布局網(wǎng)頁(yè),首先要繪制AP Div層,其對(duì)應(yīng)的標(biāo)志符為〈div〉〈/div〉,然后把光標(biāo)置于相應(yīng)的AP Div層內(nèi),把所需頁(yè)面元素插入進(jìn)來(lái)即可。AP Div層是可以相互重疊的。因?yàn)樵厥潜幌薅ㄔ贏P Div內(nèi),所以元素相對(duì)AP Div層是不移動(dòng)的,但AP Div層本身是可以在網(wǎng)頁(yè)中任意移動(dòng)。即AP Div層將攜帶內(nèi)置元素一起移動(dòng)。
用AP元素布局網(wǎng)頁(yè),優(yōu)點(diǎn)是繪制簡(jiǎn)單,直觀,元素會(huì)跟隨AP Div層移動(dòng)。
缺點(diǎn)是AP Div層本身是相對(duì)定位的,其位置針對(duì)整個(gè)頁(yè)面不是絕對(duì)的。
DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)(或稱(chēng)“WEB標(biāo)準(zhǔn)”)中常用術(shù)語(yǔ)之一,通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格(table)定位方式的區(qū)別,因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中,不再使用表格定位技術(shù),而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。CSS是英語(yǔ)Cascading Style Sheets(層疊樣式表單)的縮寫(xiě),它是一種用來(lái)表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言。
DIV+CSS顧名思義,是把DIV與CSS樣式結(jié)合在一起使用[6]141-147。使用DIV+CSS布局網(wǎng)頁(yè)的好處是頁(yè)面的代碼精簡(jiǎn)了,提高spider爬行效率,能在最短的時(shí)間內(nèi)爬完整個(gè)頁(yè)面。不會(huì)象Table表格那樣有嵌套的問(wèn)題。其次是速度提升,DIV+CSS減少了頁(yè)面代碼,提高了頁(yè)面加載的速度。基于XHTML標(biāo)準(zhǔn)的DIV+CSS布局,一般在設(shè)計(jì)完成后會(huì)盡可能的完善到能通過(guò)W3C驗(yàn)證。截止目前沒(méi)有搜索引擎表示排名規(guī)則會(huì)傾向于符合W3C標(biāo)準(zhǔn)的網(wǎng)站或頁(yè)面,但事實(shí)證明使用XHTML架構(gòu)的網(wǎng)站排名狀況一般都不錯(cuò)。其次,使用DIV+CSS布局網(wǎng)頁(yè),會(huì)支持各種瀏覽器;搜索引擎更加友好;樣式的調(diào)整更加方便。內(nèi)容和樣式的分離,使頁(yè)面和樣式的調(diào)整變得更加方便?,F(xiàn)在YAHOO,MSN等國(guó)際門(mén)戶(hù)網(wǎng)站,網(wǎng)易,新浪等國(guó)內(nèi)門(mén)戶(hù)網(wǎng)站,和主流的WEB2.0網(wǎng)站,均采用DIV+CSS的框架模式,更加印證了DIV+CSS是大勢(shì)所趨;最后就是表現(xiàn)和結(jié)構(gòu)分離,在團(tuán)隊(duì)開(kāi)發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。這無(wú)疑更適合于大型網(wǎng)站的建立。
當(dāng)然,使用DIV+CSS也有其自己的缺點(diǎn)。DIV+CSS盡管不是高不可及,但至少要比表格定位復(fù)雜的多,即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問(wèn)題,更不要說(shuō)初學(xué)者了;CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在1個(gè)外部文件中,或幾個(gè)文件,有可能相當(dāng)復(fù)雜,甚至比較龐大,如果CSS文件調(diào)用出現(xiàn)異常,那么整個(gè)網(wǎng)站將變得慘不忍睹;雖然說(shuō)DIV+CSS解決了大部分瀏覽器兼容問(wèn)題,但是也有在部分瀏覽器中使用出現(xiàn)異常,比如火狐瀏覽器,在IE中顯示正常的頁(yè)面,到了火狐瀏覽器中可能會(huì)面目全非。當(dāng)然這應(yīng)該是瀏覽器的問(wèn)題,但是可以說(shuō)在目前來(lái)看,DIV+CSS還沒(méi)有實(shí)現(xiàn)所有瀏覽器的統(tǒng)一兼容;DIV+CSS對(duì)搜索引擎優(yōu)化與否,取決于網(wǎng)頁(yè)設(shè)計(jì)的專(zhuān)業(yè)水平,而不是DIV+CSS本身。DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)并不能保證網(wǎng)頁(yè)對(duì)搜索引擎的優(yōu)化,甚至不能保證一定比HTML網(wǎng)站有更簡(jiǎn)潔的代碼設(shè)計(jì),何況搜索引擎對(duì)于網(wǎng)頁(yè)的收錄和排序顯然不是以是否采用表格和CSS定位來(lái)衡量,這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前,而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁(yè)排名依然靠后的原因。因?yàn)閷?duì)于搜索引擎而言,網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。
網(wǎng)頁(yè)布局的方式有很多,本文中提出了三種經(jīng)典布局方式和一種流行布局方式,并討論了它們各自的優(yōu)缺點(diǎn)。指出現(xiàn)今框架使用的已經(jīng)很少了,一般是表格和AP Div層配合使用。最后結(jié)合現(xiàn)實(shí)生活,道出了目前最流行的網(wǎng)頁(yè)布局方式是DIV+CSS,并實(shí)際羅列了DIV+CSS之所以被廣泛使用的原因,但也同時(shí)說(shuō)明DIV+CSS也有其自己的缺點(diǎn)??傊?,在實(shí)際制作網(wǎng)頁(yè)的過(guò)程當(dāng)中,我們可以依據(jù)實(shí)際情況,選擇多種網(wǎng)頁(yè)布局的方式,盡可能地做到“興其利,廢其弊”。
[1] 李京文.網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:高等教育出版社,2007.
[2] 溫謙.邊用邊學(xué)Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:人民郵電出版社,2007.
[3] 章舜鐘.網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:電子工業(yè)出版社,2010.
[4] 楊紀(jì)梅,肖志強(qiáng).網(wǎng)頁(yè)設(shè)計(jì)與制作指南[M].北京:清華大學(xué)出版社,2010.
[5] 李峰.Dreamweaver CS4網(wǎng)頁(yè)制作[M].北京:電子工業(yè)出版社,2009.
[6] 溫國(guó)峰.網(wǎng)頁(yè)設(shè)計(jì)三劍客[M].北京:清華大學(xué)出版社,2009.
責(zé)任編輯:孟云玲
TP393.092
A
1671-8275(2011)01-0011-02
2010-11-01
李玲玲(1979-),女,安徽淮北人,淮北職業(yè)技術(shù)學(xué)院計(jì)算機(jī)科學(xué)技術(shù)系助理工程師、講師。研究方向:計(jì)算機(jī)應(yīng)用技術(shù)。
淮北職業(yè)技術(shù)學(xué)院學(xué)報(bào)2011年1期