摘　要：

摘　要：層疊樣式表技術(shù)經(jīng)過多年的發(fā)展，采用DIV+CSS技術(shù)對網(wǎng)站進(jìn)行網(wǎng)頁布局。本文結(jié)合網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)從DIV+CSS優(yōu)點(diǎn)入手，對網(wǎng)頁布局結(jié)構(gòu)進(jìn)行闡述，并探討了CSS的引入方法。

關(guān)鍵詞：

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)　層疊樣式表　布局

      Div全稱division意為“區(qū)分”使用?DIV?的方法跟使用其他?tag?的方法一樣。CSS是Cascading?style?Sheets的簡稱，中文譯作“層疊樣式表單”，在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景等設(shè)置效果，更加精確的定位。只要對相應(yīng)的代碼做一些修改，就可以改變同一頁面的不同部分。

　　1　Div+CSS的優(yōu)點(diǎn)

　　CSS編寫容易，縮減了頁面代碼，提高了頁面瀏覽速度,降低了帶寬成本；強(qiáng)大的字體控制和排版能力；提高易用性，更好地控制頁面布局；表現(xiàn)和內(nèi)容相分離。

　　2　常用網(wǎng)頁結(jié)構(gòu)

　　根據(jù)個(gè)人網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)，結(jié)合長沙職業(yè)技術(shù)學(xué)院二級網(wǎng)站設(shè)計(jì)，得出以下常用網(wǎng)頁結(jié)構(gòu)：“國”字型、左右框架型、上下框架型、封面型、Flash型。

　　其一，“國”字型或“同”字型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分兩列小條內(nèi)容，中間是主要部分，與左右一起到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。

　　其二，上下框架型與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。

　　其三，左右框架型，是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，最上面一般一個(gè)小的標(biāo)題或標(biāo)致，右面是正文、顯示內(nèi)容。

　　其四，F(xiàn)lash型與封面型結(jié)構(gòu)是類似的，只是這種類型游戲網(wǎng)站或校慶網(wǎng)站等。由于Flash強(qiáng)大的功能，頁面所表達(dá)的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體。

　　其五，封面型基本上是出現(xiàn)在一些網(wǎng)站的首頁，精美動(dòng)畫，幾個(gè)簡單的鏈接或者一個(gè)“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接進(jìn)入。

　　3　在HTML中引入CSS的方法

　　3.1　行內(nèi)式

　　行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。只對局部網(wǎng)頁設(shè)置有效，，對于欄目設(shè)計(jì)比較多一種。但是修改比較麻煩，沒有體現(xiàn)出CSS的優(yōu)勢，一般情況不推薦使用。

　　例如：

本文編號：14544