基于CSS頁面布局的網(wǎng)頁設(shè)計(jì)

黃楚鵬

摘要：DIV+CSS技術(shù)是目前比較成熟的網(wǎng)頁布局設(shè)計(jì)技術(shù)，由于其編寫的代碼可讀性高、簡(jiǎn)潔，以及后續(xù)維護(hù)方便等優(yōu)勢(shì)，目前廣泛應(yīng)用于網(wǎng)頁設(shè)計(jì)中。該文基于DIV+CSS的頁面布局方式，以自建網(wǎng)頁（音樂論壇）為樣例，對(duì)CSS樣式的框架布局、選擇器類型、盒子模型，以及浮動(dòng)模型進(jìn)行闡述并加以運(yùn)用，最終實(shí)現(xiàn)頁面布局的設(shè)計(jì)效果。

關(guān)鍵詞：CSS；DIV 網(wǎng)頁設(shè)計(jì)；頁面布局

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）04-0045-01

在網(wǎng)頁設(shè)計(jì)中，與傳統(tǒng)布局方式相比， DIV+CSS技術(shù)是一項(xiàng)常見的技術(shù)，它能提升頁面的實(shí)際設(shè)計(jì)效果[1]。因此，也受到很多設(shè)計(jì)人員的青睞。本文以自行設(shè)計(jì)的一個(gè)網(wǎng)頁為例子，闡述網(wǎng)頁設(shè)計(jì)過程中，DIV+CSS布局設(shè)計(jì)的使用。

1 傳統(tǒng)布局方式

傳統(tǒng)布局主要有框架布局、層布局和表格布局幾種：框架布局支持滾動(dòng)條，方便導(dǎo)航，但兼容性差，應(yīng)用范圍有限，適合小型網(wǎng)站；層布局方法簡(jiǎn)單，但是難以實(shí)現(xiàn)頁面內(nèi)容的精準(zhǔn)定位，因此在頁面布局中也不常用；表格布局是網(wǎng)頁設(shè)計(jì)一個(gè)重要元素，使頁面信息布局合理、簡(jiǎn)潔，但是設(shè)計(jì)復(fù)雜，修改更復(fù)雜，很難進(jìn)行二次開發(fā)，因此也不常用[2]。

2 使用DIV+CSS進(jìn)行頁面布局

與傳統(tǒng)的HTML頁面設(shè)計(jì)語言相比，DIV+CSS布局方法可實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與網(wǎng)頁的外觀表現(xiàn)相分離。目前網(wǎng)站設(shè)計(jì)中多采用這種方式實(shí)現(xiàn)定位，以下就以使用DIV+CSS技術(shù)進(jìn)行網(wǎng)頁布局的過程及注意事項(xiàng)進(jìn)行闡述。

1）頁面布局總體設(shè)計(jì)

使用線框圖等方式進(jìn)行網(wǎng)頁最初的總體設(shè)計(jì)，前期的良好規(guī)劃將為后期設(shè)計(jì)奠定基礎(chǔ)。只要位置確定下來，基本頁面風(fēng)格就確定下來了，接下來的工作就是通過DIV+CSS往頁面中填充內(nèi)容了。

2）內(nèi)容區(qū)域用DIV包含，并設(shè)定格式

DIV在網(wǎng)頁中表示一個(gè)塊，如果不填充實(shí)際內(nèi)容或者設(shè)定格式，那么它并無意義。我們可以把DIV看作是一個(gè)容器，它可以容納內(nèi)聯(lián)元素和其他塊。

一般的網(wǎng)頁設(shè)計(jì)，結(jié)構(gòu)上可以分為頂部信息（header）、導(dǎo)航（nav）、主要內(nèi)容（main）和頁腳信息（footer）四個(gè)部分。通過DIV將各個(gè)部分作為一個(gè)塊建立起來，并用CSS語法進(jìn)行初步的樣式設(shè)計(jì)。

CSS全稱為“層疊樣式表 （Cascading Style Sheets）”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。CSS樣式表分為3種，分別是嵌入式樣式表、外鏈樣式表和內(nèi)聯(lián)樣式表，它們的優(yōu)先等級(jí)分別是（嵌入式>內(nèi)聯(lián)、外鏈）。為了方便后期的維護(hù)，設(shè)計(jì)人員一般會(huì)采用外鏈樣式表進(jìn)行設(shè)計(jì)。

選擇器是CSS中用來指明網(wǎng)頁要使用樣式規(guī)則的元素，常見的選擇器有4種，分別是ID選擇器、Class選擇器、標(biāo)簽選擇器和偽類選擇器，其中ID選擇器權(quán)重最高，且一個(gè)頁面中ID的樣式是唯一的，只能使用一次。

3）CSS編輯每個(gè)DIV塊的屬性

盒子模型是CSS設(shè)計(jì)中所使用的一種思維模型，要使用CSS對(duì)頁面進(jìn)行布局，就必然會(huì)使用到盒子模型。盒子模型一般有4個(gè)屬性：內(nèi)容（content）、填充（padding）、邊框（border）和邊界（margin）。使用盒子模型可以調(diào)整DIV在頁面中的位置，達(dá)到設(shè)計(jì)人員要求的效果，但有一些DIV塊需要層疊放置，此時(shí)則需要用到CSS布局的另一種功能，即布局樣式或者布局模板。常見的布局樣式有流動(dòng)模型（Flow）、浮動(dòng)模型（Float）和層疊型（Layer）。以樣例圖1為例，“音樂論壇”使用多個(gè)DIV作為容器，裝載相關(guān)內(nèi)容，并通過CSS的ID選擇器、類選擇器、標(biāo)簽選擇器和偽類選擇器，基于盒子模型進(jìn)行設(shè)置DIV塊的樣式。為了布局的美觀，使用浮動(dòng)模型（Float）將DIV塊進(jìn)行并排設(shè)計(jì)。樣例部分代碼為圖2所示。

3 結(jié)束語

為了將頁面的結(jié)構(gòu)劃分為不同的小區(qū)域，裝載到每一個(gè)DIV中，可以使用DIV+CSS布局，然后利用CSS對(duì)DIV塊進(jìn)行編輯加工處理，是頁面達(dá)到我們想要的效果，實(shí)現(xiàn)結(jié)構(gòu)、表現(xiàn)和行為的分離。這樣做不僅可以提高頁面的開發(fā)效率，而且在后期的維護(hù)上也能節(jié)省很多時(shí)間，提高效率?？傮w來說，利用CSS+DIV對(duì)網(wǎng)頁進(jìn)行布局是一項(xiàng)高效的網(wǎng)站開發(fā)方式，通過這門技術(shù)能夠很好地實(shí)現(xiàn)開發(fā)要求。

參考文獻(xiàn)：

[1] 支和才，葉賓，吳嶸.網(wǎng)頁制作三合一項(xiàng)目教程[M].上海：上?？茖W(xué)普及出版社，2015.

[2]王國(guó)慶.探究基于DIV+CSS技術(shù)的網(wǎng)頁設(shè)計(jì)優(yōu)化方法[J].信息與電腦，2016（4）： 140-141.