DIV+CSS技術(shù)在網(wǎng)站專題中的應(yīng)用

摘 要：以DIV+CSS技術(shù)在網(wǎng)站專題中的應(yīng)用為切入點(diǎn)，探討了使用這項(xiàng)技術(shù)的意義?？偨Y(jié)了DIV+CSS布局網(wǎng)站專題的優(yōu)點(diǎn)。

關(guān)鍵詞：CSS；DIV；網(wǎng)站專題；布局

柳州廣播電視網(wǎng)作為地方門戶網(wǎng)站在專題制作上的需求比較多，為了能在重大、突發(fā)事件發(fā)生時(shí)快速制作專題，使用傳統(tǒng)的表格布局已不能滿足需要。DIV+CSS布局使得網(wǎng)頁結(jié)構(gòu)和表現(xiàn)分離，通過把專題版塊模塊化，解決了制作流程復(fù)雜、制作周期長及后期維護(hù)不便等問題。

1 什么是DIV+CSS技術(shù)

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。用div盒模型結(jié)構(gòu)給各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。DIV英文全稱division（分割），div作為通用塊狀元素，在標(biāo)準(zhǔn)網(wǎng)頁布局中是最常用的結(jié)構(gòu)化元素，它可以把文檔分割為多個(gè)有意義的區(qū)域或模塊。因此，使用div元素可以實(shí)現(xiàn)網(wǎng)頁的總體布局。CSS（Cascading Style Sheet），中文譯為層疊樣式表，它是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS是1996年由W3C審核通過，并且推薦使用的。簡單地說，CSS的引入就是為了使得HTML語言能夠更好地適應(yīng)頁面的美工設(shè)計(jì)。它以HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計(jì)者可以針對各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格。

2 網(wǎng)站專題模塊化

2.1 為什么要建立網(wǎng)站專題模塊化

運(yùn)用網(wǎng)站專題標(biāo)準(zhǔn)化模式，可以大大提升網(wǎng)頁設(shè)計(jì)和開發(fā)中的生產(chǎn)力和效率，與此同時(shí)還大大減少了代碼量和復(fù)雜性。標(biāo)準(zhǔn)化模式就像是文檔的模版，我們可以向其中添加自己的內(nèi)容。確定了某種標(biāo)準(zhǔn)化模式后，可以把用到的各模塊迅速組合起來，就像搭積木一樣簡單。

2.2 專題框架搭建

首先根據(jù)專題的內(nèi)容需要對整體框架進(jìn)行合理規(guī)劃。通常專題包括：導(dǎo)航菜單、焦點(diǎn)圖、頭條新聞、文字新聞列表、圖片列表、視頻列表。

在內(nèi)容框架定下來后根據(jù)圖中所描述的ID進(jìn)行構(gòu)架，其中鏈接的CSS文件可以根據(jù)不同的需要動態(tài)更換，也正是因?yàn)樾薷倪@一行調(diào)用不同的CSS文件，使得整個(gè)頁面變幻無窮。

2.3 960柵格系統(tǒng)

柵格系統(tǒng)英文為“grid systems”，是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡潔。比較直觀的一種說法：蘋果電腦1024×768的分辨率下，F(xiàn)irefox窗體的大小約為974×650。減掉左右兩邊7px的邊框，網(wǎng)頁的實(shí)際大小為960×650。使用柵格系統(tǒng)能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。這對于網(wǎng)站專題的開發(fā)和維護(hù)來說，能節(jié)約不少成本；基于柵格進(jìn)行設(shè)計(jì)，可以讓網(wǎng)站專題各個(gè)頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗(yàn)；

2.4 CSS模塊化

CSS模塊化不是簡單的在CSS文件中分幾塊，或者把css拆分成幾個(gè)小css文件。CSS模塊化的目的是讓css的可復(fù)用、可移植、可替換，實(shí)現(xiàn)的手段有封裝、繼承、多態(tài)。

2.4.1 CSS的封裝

CSS模塊化不是簡單的在CSS文件中分幾塊，或者把css拆分成幾個(gè)小css文件。CSS模塊化的目的是讓css的可復(fù)用、可移植、可替換，實(shí)現(xiàn)的手段有封裝、繼承、多態(tài)。封裝是實(shí)現(xiàn)CSS模塊化的最基本要求，封裝成的各個(gè)單元就是基本的CSS模塊，可靈活用于組建頁面的各種顯示樣式。

2.4.2 CSS的繼承

繼承可謂是CSS模塊化的關(guān)鍵所在，由于html元素可以擁有多個(gè)類，而且根據(jù)優(yōu)先級，后面定義的屬性可以覆蓋前面的，正因?yàn)檫@樣，繼承這個(gè)特性發(fā)揮了巨大的作用。對于某些多數(shù)樣式屬性相同，僅有幾個(gè)不同樣式屬性的定義，可以用這個(gè)方法來實(shí)現(xiàn)。也可以在不改變某個(gè)通用樣式類的同時(shí)，用HTML調(diào)用復(fù)合類，突出局部特例。

2.4.3 CSS的多態(tài)

多態(tài)主要用于同一模塊在頁面的不同部分或者不同頁面之間呈現(xiàn)出不同的樣式。

3 總結(jié)

DIV+CSS在網(wǎng)站專題中的模塊化應(yīng)用是一個(gè)比較實(shí)用但也需要去領(lǐng)悟的思想，實(shí)際使用中也需要全面的分析，過多的模塊會導(dǎo)致維護(hù)性的降低，我們應(yīng)該時(shí)刻明確，我們是為了方便管理，方便修改，方便多人合作。

[參考文獻(xiàn)]

[1][美]Dave Shea/Molly E.Holzschlag.CSS禪意花園.人民郵電出版社，2007.

[2]霍克曼.網(wǎng)站設(shè)計(jì)解構(gòu).人民郵電出版社，2010.