楚子漪
【摘 要】互聯(lián)網(wǎng)發(fā)展至今,網(wǎng)絡(luò)已經(jīng)成為人們生活的重要部分,各色網(wǎng)站層出不窮,眾多網(wǎng)頁(yè)各有千秋。本文從計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的布局入手,分析了傳統(tǒng)網(wǎng)頁(yè)布局的局限性,介紹了計(jì)算機(jī)網(wǎng)頁(yè)中典型的 “DIV+CSS”布局方式。通過(guò)對(duì)DIV 和CSS 技術(shù)的研究,介紹了DIV+CSS布局方法及其優(yōu)勢(shì),為計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)提供思路。
【關(guān)鍵詞】DIV;CSS;計(jì)算機(jī)網(wǎng)頁(yè);布局
一、前言
傳統(tǒng)的計(jì)算機(jī)網(wǎng)頁(yè)布局的方法主要有框架布局和表格布局??蚣懿季直容^靈活,若有效運(yùn)用,則能使網(wǎng)頁(yè)更整潔、清晰。但是,對(duì)于內(nèi)容多、布局復(fù)雜的網(wǎng)站,不宜采用框架布局,因?yàn)椋^(guò)多的框架會(huì)影響網(wǎng)頁(yè)下載所需的時(shí)間,影響網(wǎng)頁(yè)的讀取速度,而且瀏覽器對(duì)框架結(jié)構(gòu)的兼容性也不是很好。
表格是計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作中的一個(gè)重要網(wǎng)頁(yè)元素,用來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行排版,使頁(yè)面的信息布局合理、簡(jiǎn)潔。但是表格排版也存在以下的問(wèn)題:
1.用表格排版的頁(yè)面很難再修改或升級(jí)。當(dāng)頁(yè)面制作完成后,如果要將其中的某些位置對(duì)調(diào),那么表格排版的工作量相當(dāng)于重新制作一個(gè)頁(yè)面。而CSS排版利用position和float屬性可以輕松地移動(dòng)和重新定位各個(gè)塊,實(shí)現(xiàn)讓用戶(hù)動(dòng)態(tài)選擇界面的功能。
2.用表格排版的頁(yè)面在下載時(shí)必須等整個(gè)表格的內(nèi)容都下載完畢后才會(huì)一次性顯示出來(lái),而利用DIV+CSS排版的頁(yè)面在下載時(shí),各個(gè)子塊可以分別下載顯示,從而提高了頁(yè)面的下載速度。
3.復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)極為不易,修改更為復(fù)雜,最后生成的網(wǎng)頁(yè)代碼除了表格本身的代碼,還有許多沒(méi)有任何意義的圖像占位符及其他元素,文件量龐大,最終導(dǎo)致瀏覽器下載及解析速度變慢,網(wǎng)站的維護(hù)和更新困難。
二、DIV和CSS的具體內(nèi)容
DIV元素是用來(lái)為HTML文檔內(nèi)大塊的內(nèi)容提供布局的結(jié)構(gòu)和背景。它是HTML中的一個(gè)標(biāo)簽,此標(biāo)簽的作用就是定位網(wǎng)頁(yè)內(nèi)容中的圖片、文字、視頻等相關(guān)信息。一般我們也叫為DIV層定位。
CSS(cascading style sheet),層疊樣式表,是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)分離的一種標(biāo)識(shí)性語(yǔ)言。CSS 是 1996由W3C 審核通過(guò),并且推薦使用的。CSS 的引入就是為了使 HTML語(yǔ)言更好的適應(yīng)頁(yè)面的美工設(shè)計(jì)。它以 HTML語(yǔ)言為基礎(chǔ),提供了豐富的格式化功能,如字體、顏色、背景和整體排版等,并且網(wǎng)頁(yè)設(shè)計(jì)者可以針對(duì)各種可視化瀏覽器(包括顯示器、打印機(jī)、打字機(jī)、投影儀和 PDA 等)來(lái)設(shè)置不同的樣式風(fēng)格。CSS的引入引發(fā)了網(wǎng)頁(yè)設(shè)計(jì)一個(gè)又一個(gè)的新高潮。使用CSS設(shè)計(jì)的優(yōu)秀頁(yè)面層出不窮。
DIV+CSS布局方式使網(wǎng)頁(yè)結(jié)構(gòu)和外觀相分離,極大地簡(jiǎn)化了代碼,而且使站點(diǎn)加載的速度變得快捷、維護(hù)也更加方便,無(wú)疑對(duì)傳統(tǒng)布局的網(wǎng)頁(yè)方式造成了極大的沖擊。除此之外,DIV+ CSS布局方式的使用,使傳統(tǒng)的網(wǎng)頁(yè)布局的不足得到很好的彌補(bǔ),當(dāng)前國(guó)內(nèi)多數(shù)比較著名的網(wǎng)站都利用此類(lèi)方式方法進(jìn)布局,給用戶(hù)帶來(lái)了全新的體驗(yàn)?zāi)J健?/p>
三、DIV+CSS設(shè)計(jì)計(jì)算機(jī)網(wǎng)頁(yè)布局
采取DIV和CSS的網(wǎng)頁(yè)布局結(jié)構(gòu),首先需要用DIV來(lái)分塊,定義語(yǔ)義結(jié)構(gòu);然后用CSS來(lái)定位和添加樣式,如浮動(dòng)、位置、對(duì)齊屬性、加入背景等;最后在這個(gè)CSS定義的各個(gè)塊中添加相應(yīng)的樣式,如文字、圖片等。下面通過(guò)一個(gè)布局實(shí)例介紹使用DIV+CSS布局網(wǎng)頁(yè)的基本方法。
首先,把網(wǎng)頁(yè)區(qū)分成不同的三個(gè)區(qū)塊,包括header、content(其中有main主體區(qū)域,并將main主體部分分為兩個(gè)區(qū)域lside和rside)、footer三個(gè)區(qū)域,分別作為網(wǎng)頁(yè)的頭部、內(nèi)容和版權(quán)區(qū)域。編寫(xiě)HTML
部分文檔代碼如下:其次,設(shè)置其CSS樣式文件代碼如下:
#container{margin:0 auto;width:90%;}
#header{height:200px;margin-top:20px;border:2px solid;}
#content{height:500px;width:100%;margin-bottom:10px;}
#main{float:left;width:70%;height:400px;border:2px solid;}
#footer{height:60px;border:1px solid;}
其中,width屬性設(shè)置為百分比形式,表示當(dāng)窗口大小發(fā)生變化時(shí),頁(yè)面的寬度也隨之變化。container的margin屬性為0,auto,表示上下邊距為0像素,auto表示左右邊距為自動(dòng),實(shí)現(xiàn)網(wǎng)頁(yè)的居中顯示。main的float屬性為left,表示靠左對(duì)齊,實(shí)現(xiàn)中間兩列豎欄的顯示效果。border屬性為2px solid,表示2個(gè)像素寬的實(shí)線(xiàn)邊框。
四、DIV+CSS布局計(jì)算機(jī)網(wǎng)頁(yè)的優(yōu)點(diǎn)
通過(guò)上面DIV+CSS的布局實(shí)例,可以看出使用DIV+CSS布局計(jì)算機(jī)網(wǎng)頁(yè)給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)很大的優(yōu)勢(shì),具體如下:
(一)內(nèi)容與表現(xiàn)相分離
即CSS代碼和HTML代碼相分離,CSS可以把樣式的部分單獨(dú)的置于獨(dú)立的樣式文件中,而在HTML的文件中只放置網(wǎng)頁(yè)需要顯示的內(nèi)容,而網(wǎng)頁(yè)的內(nèi)容表現(xiàn)的形式則可以完全通過(guò)CSS文件來(lái)實(shí)現(xiàn),消除了大量的冗余代碼,解決頁(yè)面表現(xiàn)和結(jié)構(gòu)混合在一起的問(wèn)題。
(二)網(wǎng)站的更新與維護(hù)更簡(jiǎn)易
因?yàn)镃SS文件能夠被多個(gè)網(wǎng)頁(yè)鏈接或使用,當(dāng)需要重新布局網(wǎng)站頁(yè)面時(shí),只要依照區(qū)塊的內(nèi)容標(biāo)記到CSS樣式的文件里,尋找到相應(yīng)的ID,并進(jìn)行簡(jiǎn)單的修改即可。不需要在每一個(gè)HTML文件中進(jìn)行重復(fù)的設(shè)置,使修改頁(yè)面變得更加簡(jiǎn)捷,極大地提高了網(wǎng)站更新與維護(hù)的效率,節(jié)約網(wǎng)站的運(yùn)營(yíng)成本。
(三)網(wǎng)頁(yè)加載迅速
當(dāng)代碼寫(xiě)在了CSS文件中時(shí),讓頁(yè)面體積變小、代碼簡(jiǎn)潔,而且相較于表格嵌套方式而言,DIV+CSS賦予頁(yè)面更多的獨(dú)立區(qū)域,當(dāng)要打開(kāi)頁(yè)面時(shí),不會(huì)在整個(gè)頁(yè)面局限于一個(gè)大表格里,而是逐層加載,提升了頁(yè)面加載速率。
【參考文獻(xiàn)】
[1]王儉敏等.CSS+DIV網(wǎng)頁(yè)樣式與布局案例指導(dǎo)[M].北京:電子工業(yè)出版社,2009.
[2]張趙輝.3D網(wǎng)絡(luò)試衣技術(shù)的市場(chǎng)應(yīng)用分析 [J].致富時(shí)代,2015.