DIV+CSS技術在網站專題中的應用

摘 要：以DIV+CSS技術在網站專題中的應用為切入點，探討了使用這項技術的意義。總結了DIV+CSS布局網站專題的優點。

關鍵詞：CSS；DIV；網站專題；布局

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

1 什么是DIV+CSS技術

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

2 網站專題模塊化

2.1 為什么要建立網站專題模塊化

運用網站專題標準化模式，可以大大提升網頁設計和開發中的生產力和效率，與此同時還大大減少了代碼量和復雜性。標準化模式就像是文檔的模版，我們可以向其中添加自己的內容。確定了某種標準化模式后，可以把用到的各模塊迅速組合起來，就像搭積木一樣簡單。

2.2 專題框架搭建

首先根據專題的內容需要對整體框架進行合理規劃。通常專題包括：導航菜單、焦點圖、頭條新聞、文字新聞列表、圖片列表、視頻列表。

在內容框架定下來后根據圖中所描述的ID進行構架，其中鏈接的CSS文件可以根據不同的需要動態更換，也正是因為修改這一行調用不同的CSS文件，使得整個頁面變幻無窮。

2.3 960柵格系統

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

2.4 CSS模塊化

CSS模塊化不是簡單的在CSS文件中分幾塊，或者把css拆分成幾個小css文件。CSS模塊化的目的是讓css的可復用、可移植、可替換，實現的手段有封裝、繼承、多態。

2.4.1 CSS的封裝

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

2.4.2 CSS的繼承

繼承可謂是CSS模塊化的關鍵所在，由于html元素可以擁有多個類，而且根據優先級，后面定義的屬性可以覆蓋前面的，正因為這樣，繼承這個特性發揮了巨大的作用。對于某些多數樣式屬性相同，僅有幾個不同樣式屬性的定義，可以用這個方法來實現。也可以在不改變某個通用樣式類的同時，用HTML調用復合類，突出局部特例。

2.4.3 CSS的多態

多態主要用于同一模塊在頁面的不同部分或者不同頁面之間呈現出不同的樣式。

3 總結

DIV+CSS在網站專題中的模塊化應用是一個比較實用但也需要去領悟的思想，實際使用中也需要全面的分析，過多的模塊會導致維護性的降低，我們應該時刻明確，我們是為了方便管理，方便修改，方便多人合作。

[參考文獻]

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

[2]霍克曼.網站設計解構.人民郵電出版社，2010.