鄒壽春（閩西職業(yè)技術(shù)學院計算機系 福建龍巖 364021）

基于DIV+CSS技術(shù)的網(wǎng)頁設(shè)計研究

鄒壽春
（閩西職業(yè)技術(shù)學院計算機系 福建龍巖 364021）

DIV+CSS技術(shù)日趨成熟，它已經(jīng)廣泛應(yīng)用于網(wǎng)頁設(shè)計中，并成為網(wǎng)頁布局的主流技術(shù)。文章介紹了DIV+CSS技術(shù)基礎(chǔ)及特點，并通過實例研究其使用規(guī)則和應(yīng)用技巧。實踐證明，DIV+CSS技術(shù)在網(wǎng)頁布局中靈活實用，為提高網(wǎng)頁設(shè)計效率奠定堅實技術(shù)基礎(chǔ)。

DIV；CSS；網(wǎng)頁設(shè)計；布局

一、DIV+CSS技術(shù)基礎(chǔ)

傳統(tǒng)的html標簽中，既有結(jié)構(gòu)標簽，也有表現(xiàn)標簽。用DIV+CSS技術(shù)設(shè)計網(wǎng)頁，是一次設(shè)計思維方式的轉(zhuǎn)變，其能使頁面的結(jié)構(gòu)與表現(xiàn)相分離，這樣，同樣的內(nèi)容與結(jié)構(gòu)，就可以使用不同的CSS樣式實現(xiàn)不同的表現(xiàn)形式。通過定義CSS樣式的方法，可以在不更改頁面內(nèi)容和結(jié)構(gòu)的前提下，更換頁面的布局和表現(xiàn)效果［1］。

（一）DIV技術(shù)。DIV全稱為division，即“區(qū)分/劃分”的意思?！碊IV〉標簽是塊級元素，用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景。HTML文檔中的塊由對應(yīng)的一組起始標簽〈DIV〉和結(jié)束標簽〈/DIV〉構(gòu)成，其定位一般由〈DIV〉標簽屬性或引用CSS樣式實現(xiàn)。

DIV標簽定義的塊是可以被嵌套的，用于布局復雜的網(wǎng)頁。因此，這為網(wǎng)頁布局提供了有利技術(shù)支持。另外，在所構(gòu)成的塊中，可以放置文字、圖像和表格等各種網(wǎng)頁元素，方便對網(wǎng)頁進行設(shè)計。

（二）CSS技術(shù)。

1.CSS基礎(chǔ)。CSS是Cascading Style Sheets的英文縮寫，中文翻譯為層疊樣式表，簡稱樣式表，它是W3C組織制定的，用于控制（加強）網(wǎng)頁內(nèi)容顯示效果的一種標記性語言。樣式就是格式，用于設(shè)置顯示內(nèi)容的樣式；層疊是指當在HTML文檔中引用多個定義樣式的樣式文件（CSS文件）時，若多個樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次順序進行處理［2］。

CSS語法為：選擇器{屬性1：屬性值1；屬性2：屬性值2；……}

2.CSS選擇器類型。選擇器是用來定義CSS樣式的名稱，根據(jù)其構(gòu)成形式不同，可分為基本型選擇器、特殊型選擇器兩類。其中，基本型選擇器有標簽選擇器、類選擇器和ID選擇器三種；特殊型選擇器主要由三類基本選擇器演變生成，主要有組合選擇器、群組選擇器、后代選擇器、子選擇器、相鄰選擇器、屬性選擇器、偽類選擇器和通配符選擇器。

（1）基本型選擇器介紹：

標簽選擇器：以HTML文檔標簽作為選擇器，文檔中對應(yīng)標簽自動應(yīng)用所定義屬性效果。例，p{color：blue；font-size：14px；…}

類選擇器：以“.”開頭，緊接一個由用戶自定義字符串，合在一起組成類選擇器。類選擇器使用極靈活，引用時只要設(shè)置對應(yīng)標簽class屬性值即可。例，top{width：100％；height：26px；…}

ID選擇器：以“#”開頭，緊接一個由用戶自定義字符串，合在一起組成ID選擇器。由于id屬性的值在文檔中是唯一的，所以ID選擇器只能在文檔中被引用一次。例，#contain {width：780px；text-align：left；…}

（2）特殊型選擇器介紹：

組合選擇器：由兩個選擇器構(gòu)成，第一個必須為標簽選擇器，第二個必須是類選擇器或者ID選擇器，兩個選擇器中間不能有空格。形如p.special{…}

群組選擇器：是CSS的一種簡化寫法，將定義了具有相同樣式的多個選擇器合并為一個樣式，選擇器間用“，”隔開。形如div，span，img{…}

后代選擇器：父代選擇器與后代選擇器間用空格分開，只有當標簽發(fā)生嵌套時，內(nèi)層的標簽才能適用此樣式定義。形如pspan{…}

子選擇器：父代選擇器與子選擇器間用“〉”號分開，子選擇器只能控制最近的子元素。形如#main〉span{…}

相鄰選擇器：用“+”號分開，相鄰兩選擇器在文檔目錄結(jié)構(gòu)樹中處同一層次，有共同的父元素。形如div+p{…}

屬性選擇器：可根據(jù)元素的屬性及屬性值來選擇元素。形如img［alt］{…}

偽類選擇器：主要有動態(tài)偽類、UI元素狀態(tài)偽類、Nth結(jié)構(gòu)偽類三種［3］。形如a：active{…}

通配符選擇器：用于定義文檔中各種標簽的共同屬性。形如*{…}

3.CSS的引用方法。CSS樣式表按相對于文檔位置分為內(nèi)部樣式與外部樣式，其被引用方法多樣，歸納起來有以下四種：行內(nèi)式、內(nèi)嵌式、鏈接式和導入式［4］。其中行內(nèi)式及內(nèi)嵌式引用的為內(nèi)部樣式，鏈接式和導入式引用的為外部樣式。外部樣式是一單獨的文本文件（擴展名為.css），內(nèi)容為定義好的所有CSS代碼。

方法一，行內(nèi)式。作為標簽style屬性值的方式，直接定義在標簽行內(nèi)。其使用方法簡單，但由于需要為各個標簽設(shè)置style屬性值，后期維護效率低，文檔篇幅大，因此行內(nèi)式樣式表使用較少。例如，〈pstyle="color：#FF00FF；"〉…〈/p〉

方法二，內(nèi)嵌式。將所有CSS樣式代碼集中在〈style〉和〈/style〉標簽內(nèi)進行聲明，置于文檔頭部〈head〉與〈/head〉之間。此法僅適用于特殊頁面設(shè)置單獨的樣式風格，如用于定義整個網(wǎng)站風格，則操作及維護依然麻煩。例如，〈style type="text/css"〉#top1{font-weight：bold； }…〈/style〉

方法三，鏈接式。在文檔頭部〈head〉與〈/head〉之間，用〈link〉鏈接外部樣式文件。這種方法實現(xiàn)html文檔與CSS代碼完全分離，且外部樣式文件可以被多個頁面引用，后期維護容易實現(xiàn)、效率高，因此這種方法使用頻率最高。例如，〈linkhref="外部樣式表文件名.css"rel="stylesheet" type="text/css"〉。其中，href用于定義CSS文件的URL［5］，指明外部樣式相對路徑；rel="stylesheet"定義在網(wǎng)頁中使用外部樣式表；type="text/css"定義文件的類型為樣式表文件。

方法四，導入式。在文檔頭部采用@import方式導入外部樣式表，當html文檔初始化時，才導入外部樣式表到html文檔內(nèi)，作為文件的一部分，此時類似內(nèi)嵌樣式表的效果。例如，@import url（“外部樣式表文件名.css”）。

4.CSS的優(yōu)先級別。在一個網(wǎng)頁文檔中，可能會用到多種樣式表引用方法，瀏覽器在執(zhí)行樣式效果時，按樣式表的優(yōu)先級及樣式疊加原則實現(xiàn)。一般原則是：最接近目標的樣式優(yōu)先級最高；高優(yōu)先級樣式將繼承低優(yōu)先級樣式未重疊定義，但覆蓋重疊的定義。優(yōu)先級如圖1所示：

圖1 CSS的優(yōu)先級別

（三）DIV+CSS布局方法。

1.DIV+CSS盒模型。盒模型將頁面中的每個元素看做一個矩形框，這個框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。網(wǎng)頁就是由許多個盒子通過不同的排列方式（縱向排列、橫向排列和嵌套排列）堆積而成［6］。

圖2 CSS盒子模型

2.DIV+CSS定位。定位是網(wǎng)頁布局的最重要的技術(shù)，CSS定位通過position屬性的值實現(xiàn)，屬性值有以下4種，分別為：static、relative、absolute、fixed。

static：靜態(tài)定位；為默認值，為無特殊定位，對象遵循HTML定位規(guī)則，此時盒子按照普通布局在頁面上顯示。

relative：相對定位；使用該屬性值時盒子仍然是普通布局，占據(jù)它所在的位置，在計算定位的時候，才通過left，right，top，bottom等屬性，讓這個盒子相對于它的原始起點進行移動后顯示。

absolute：絕對定位；絕對定位的盒子的位置相對于最接近的一個具有定位屬性的父塊進行的，如果沒有已定位的父塊，則相對于body對象，即瀏覽器窗口。絕對定位的元素拋開了文檔排列布局，相當于游離于文檔頁面之上，所以各對象會相互覆蓋，而其層疊順序可由z-index屬性改變。

fixed：固定定位；與absolute相似，但它僅相對于瀏覽器窗口進行定位，固定在瀏覽器的某個位置，不隨滾動條的滾動而滾動。

3.盒子浮動。采用上述定位方式，盒子并未脫離文檔流的控制，排列仍受很大限制。而用用盒子浮動技術(shù)，能使盒子脫離文檔流向左或向右移動，排列方式多樣，布局靈活方便。浮動的元素會生成一個塊級框，它可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。盒子浮動通過設(shè)置float屬性值實現(xiàn)，屬性值有以下3種：none、left、right。其中none表示不浮動；left表示浮在左邊；right表示浮在右邊。

有時，浮動使用不當會導致頁面出現(xiàn)錯位的情況，這時可以使用清除浮動的方法。清除浮動不僅能夠解決頁面錯位的問題，還能解決子級元素浮動導致父級元素背景無法自適應(yīng)子級元素高度的問題。清除浮動通過設(shè)置clear屬性值實現(xiàn)，屬性值有以下4種：none、left、right、both。其中none表示允許兩邊都可以有浮動對象；left表示不允許左邊有浮動對象；right表示不允許右邊有浮動對象；both表示不允許有浮動對象。

（四）DIV+CSS技術(shù)優(yōu)勢。與傳統(tǒng)網(wǎng)頁設(shè)計技術(shù)相比，DIV+CSS技術(shù)有明顯優(yōu)勢。

1.頁面瀏覽速度更快。由于將大部分頁面代碼寫在了CSS當中，使得頁面體積容量大大縮減。

2.保持站點風格一致性。使用DIV+CSS的技術(shù)，將所有頁面用同一CSS文件控制，避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。

3.網(wǎng)站改版與維護更方便。維護人員只需修改外部樣式文件內(nèi)容即可，提高了工作效率。

4.更好地被搜索引擎收錄。由于樣式表寫入了獨立CSS文件中，這就使得網(wǎng)頁中正文部分更為突出明顯，便于被搜索引擎采集收錄。

5.更利于團隊分工合作。采用DIV+CSS技術(shù)，使內(nèi)容和表現(xiàn)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

二、頁面布局設(shè)計與實現(xiàn)

在網(wǎng)頁設(shè)計制作中，對頁面進行布局非常重要，這是合理安排頁面內(nèi)容，突出重點信息的前提。此處通過實例研究用DIV+CSS技術(shù)進行頁面布局與實現(xiàn)的過程。下圖為某網(wǎng)頁布局結(jié)構(gòu)圖：

圖3 CSS頁面布局結(jié)構(gòu)

網(wǎng)頁布局采用上中下型結(jié)構(gòu)，將頁面分成頭部（header）、主體（mainer）和底部（footer）三大內(nèi)容塊，然后對每塊再分小塊。在設(shè)計時，首先生成兩個文件：index.htm l和sty.css，采用鏈接式方法將引外部樣式表sty.css引用到index.htm l文檔中。以下是實現(xiàn)此布局代碼。

（一）網(wǎng)頁文件index.html內(nèi)代碼。

三、結(jié)語

與傳統(tǒng)表格布局方法相比，采用DIV+CSS技術(shù)進行網(wǎng)頁設(shè)計布局，實現(xiàn)內(nèi)容和表現(xiàn)分離，使網(wǎng)頁設(shè)計、改版及后期維護都變得更加方便快捷，提高了工作效率。使用DIV+CSS技術(shù)創(chuàng)建的站點代碼簡潔、結(jié)構(gòu)合理，優(yōu)勢明顯?，F(xiàn)在該技術(shù)已被廣大網(wǎng)頁設(shè)計者所采用，它必將推動網(wǎng)頁設(shè)計前進一大步。

［1］鄒欣.DIV+CSS商業(yè)案例與網(wǎng)頁布局開發(fā)精講［M］.北京：中國鐵道出版社，2010.

［2］劉瑞新.網(wǎng)頁設(shè)計與制作教程HTML+CSS+JavaScript ［M］.北京：機械工業(yè)出版社，2013.

［3］大漠.CSS3選擇器——偽類選擇器［EB/OL］.http://www.w3cplus.com/css3/pseudo-class-selector.2011-08-16.

［4］溫謙.CSS網(wǎng)頁設(shè)計標準教程［M］.北京：人民郵電出版社，2012.

［5］朱印宏.CSS商業(yè)網(wǎng)站布局之道［M］.北京：清華大學出版社，2007.

［6］李雙遠.DIV_CSS在網(wǎng)頁設(shè)計中的應(yīng)用方法［J］.吉林化工學院學報，2013（9）.

［責任編輯 鄭麗娟］

TP393

A

2095-0438（2015）09-0148-04

2015-05-12

鄒壽春（1978-），男，福建連城人，閩西職業(yè)技術(shù)學院計算機系講師，碩士，研究方向：圖像處理、動漫設(shè)計與制作、網(wǎng)站設(shè)計。