摘 要:傳統(tǒng)頁面布局的弊端逐漸顯露,新Web標準的重要性越來越被重視,本文主要討論DIV+CSS網(wǎng)頁布局技術,總結(jié)了其特點和優(yōu)勢,以Dreamweaver CS5為開發(fā)平臺,講解用該布局技術實現(xiàn)網(wǎng)頁設計的過程,給出相關方法和步驟。
關鍵詞:網(wǎng)頁布局;Web標準;DIV+CSS;優(yōu)勢;應用
中圖分類號:TP393.092
傳統(tǒng)的網(wǎng)頁布局設計方法大多采用表格布局及嵌套表格的方式來實現(xiàn),其使用簡單靈活,定位圖片和文本非常方便,制作速度快,但數(shù)據(jù)的組織與顯示會產(chǎn)生更多的冗余代碼,表格嵌套使瀏覽器解析緩慢,網(wǎng)頁表現(xiàn)層與結(jié)構層混在一起,代碼維護、更新麻煩。
隨著Web標準化設計理念的普及,基于DIV+CSS的布局方式開始流行,目前小到個人網(wǎng)站大到門戶網(wǎng)站都逐漸采用DIV+CSS進行網(wǎng)頁的布局,它彌補了表格布局的一些不足,具有明顯優(yōu)勢,獲得業(yè)內(nèi)的廣泛認可和應用。
1 Web標準及DIV+CSS簡介
1.1 Web標準
Web標準不是指某一個標準,而是一系列標準的集合,由W3C(World Wide Web Consortium,萬維網(wǎng)聯(lián)盟)和其他標準組織制定。其目的在于創(chuàng)建一個統(tǒng)一的用于Web表現(xiàn)層的技術標準,以便通過不同瀏覽器或終端設備向最終用戶展示信息內(nèi)容??梢院唵蔚膶eb標準分成三大部分:結(jié)構(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。網(wǎng)頁設計要符合Web標準其實就是對網(wǎng)頁的結(jié)構、表現(xiàn)與行為進行分離,即表現(xiàn)與內(nèi)容分離。
采用新標準之后可以使網(wǎng)頁下載速度更快;內(nèi)容可以被更廣泛的設備(如屏幕閱讀器、手持設備或其它支持上網(wǎng)的新型設備)所訪問;更少的代碼和組件,網(wǎng)站易于維護;帶寬要求低,成本降低等等。
1.2 DIV+CSS簡介
DIV,中文理解為“層”的概念,是用來為HTML文檔中的塊內(nèi)容設置結(jié)構和背景的元素,它相當于一個容器,由起始標簽
CSS,中文譯作“層疊樣式表”,是一種格式化網(wǎng)頁的標準方式,利用它可以控制大多數(shù)傳統(tǒng)的文本格式,精確地控制頁面的布局、顏色、背景和其他效果。通過CSS使用豐富靈活的樣式可設計出更美觀的網(wǎng)頁,且通過對代碼的簡單修改可實現(xiàn)對頁面的批量修改,使得網(wǎng)頁的設計和維護更有效率。
2 網(wǎng)頁中采用DIV+CSS的優(yōu)勢
利用DIV+CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術。它指定元素如何顯示以及在某種程度上如何相互交互。頁面上的每個元素都被瀏覽器看成是一個矩形的盒子,這個盒子由元素的內(nèi)容(content)、填充(padding)、邊框(border)和邊界(magin)組成。盒子本身有邊框,盒子里面的內(nèi)容到盒子邊框之間的距離為填充,而盒子邊框外和其它盒子之間的為邊界。
DIV盒子模型結(jié)構把各部分內(nèi)容劃分到不同的區(qū)域,然后用CSS來定義盒子的位置、大小、邊框、內(nèi)外邊距、排列方式等等。簡單地說,DIV用來搭建網(wǎng)站的結(jié)構(框架),CSS用來創(chuàng)建網(wǎng)站表現(xiàn)(樣式/美化)??梢钥闯觯贒IV+CSS的布局方式中修改網(wǎng)頁的內(nèi)容不會改變樣式的表現(xiàn),且修改CSS樣式表也不會影響到網(wǎng)頁的布局。
用這種方式布局的優(yōu)勢在于:
(1)遵循Web標準化設計,表現(xiàn)形式和內(nèi)容的分離。
(2)采用DIV+CSS技術的網(wǎng)頁,與搜索引擎的關系更加友好,提高搜索引擎對網(wǎng)頁的索引效率。
(3)代碼簡潔,提高頁面瀏覽速度,節(jié)省大量的帶寬。
(4)縮短改版時間,更有利于后期的維護和管理工作。
3 DIV+CSS技術進行網(wǎng)頁布局應用
利用DIV+CSS理念進行布局是先從整體上進行標記的分塊,然后對每個分塊進行CSS定位,添加相應樣式,最后在各個塊中添加內(nèi)容。下面以某企業(yè)網(wǎng)站的三欄布局頁面為例,簡要介紹其布局方法。
最終效果圖如圖1所示。
3.1 劃分基本塊
首先把網(wǎng)頁page劃分成三個基本大塊,top是網(wǎng)頁的頂部主要放置網(wǎng)站logo 和導航菜單menu,content部分放置頁面的主要內(nèi)容,又分為left側(cè)欄和main主體區(qū)域,bottom是網(wǎng)頁底部主要放置網(wǎng)頁版權信息。
3.2 CSS樣式設置
創(chuàng)建css文件,命名為css.css,將樣式表寫在獨立的文件中。根據(jù)網(wǎng)頁中塊的劃分情況,分別為不同的DIV進行CSS 樣式的設置。設置如下:
3.3 列表樣式的控制和超鏈接的設置
4 結(jié)束語
本文介紹了DIV+CSS布局技術的特點和優(yōu)勢,結(jié)合實例講述利用其進行網(wǎng)頁布局的方法和過程,并給出思路和核心代碼。DIV+CSS是未來網(wǎng)頁布局的主流趨勢,但是網(wǎng)頁設計人員也不能忽視該技術的一些不足,如編寫樣式表文件一般使用文本編輯器進行編寫,相比較表格布局在所見即所得的可視化環(huán)境下進行,這一過程往往比較枯燥;另該技術尚未兼容所有瀏覽器,在部分瀏覽器中仍然會有異常出現(xiàn),由于CSS樣式文件往往信息復雜,有些網(wǎng)站引用到比較龐大的CSS文件時一旦文件調(diào)用出現(xiàn)異常,那個整個網(wǎng)站的信息將出現(xiàn)混亂,面目全非。想把DIV+CSS技術運用的更好,還需要更多的學習積累和實踐經(jīng)驗。
參考文獻:
[1]趙元媛.網(wǎng)頁設計中布局方式之比較[J].信息技術,2011.
[2]劉軍華,陶永進.DIV+CSS網(wǎng)頁布局技術中盒子模型的應用研究[J].長沙通信職業(yè)技術學院學報,2012(04).
[3]高川程.淺談基于DIV+CSS的網(wǎng)頁布局技術應用研究[J].計算機光盤軟件與應用,2013.
作者簡介:沈亮亮(1980-),女,湖南湘鄉(xiāng)人,碩士,講師,研究方向:計算機技術應用。
作者單位:建東職業(yè)技術學院,江蘇常州 213022