用CSS+DIV重構南陽農校網站
作者：吳延豔，樊靖
摘要：2011年5月，南陽農校新版網站的設計和建設正式開始。在這個項目中主要應用CSS+DIV的專業技術來進行重構，對CSS+DIV在網站製作中的作用及優勢進行了詳細說明。
關鍵詞：CSS+DIV 重構網站 界麵製作
今年我校參加申報示範性學校建設和教學質量評估兩個項目，教育教學平台的建設被提上了日程，舊版網站的功能顯得相對有些薄弱，因此從5月份開始，新版網站的開發和建設全麵有序地展開了。在這個項目中，我參與了前台界麵的製作，主要用到了CSS+DIV的專業技術，先來了解一下CSS+DIV。
1什麼是CSS+DIV
CSS+DIV是網站標準（或稱“WEB標準”）中常用術語之一，css+div 是一種網頁的布局方法，這一種網頁布局方法有別於傳統的HTML網頁設計語言中的表格（table）定位方式，可實現網頁頁麵內容與表現相分離。XHTML是The Extensible HyperText Markup Language（可擴展超文本標識語言）的縮寫。XHTML基於可擴展標記語言（XML），是一種在HTML 基礎上優化和改進的的新語言，目的是基於XML應用與強大的數據轉換能力，適應未來網絡應用更多的需求。在XHTML網站設計標準中，不再使用表格定位技術，而是采用CSS+DIV的方式實現各種定位。
CSS 是 Cascading Style Sheets 層疊樣式表的縮寫， 它是一種用來表現 HTML 或 XML 等文件式樣的計算機語言。純 CSS 布局與結構式 XHTML 相結合能幫助設計師分離外觀與結構，可以批量對頁麵進行修改，它能將文檔結構和表現層分離開來，減輕工作量和服務器的負荷，增加站點的擴展能力和應用。使站點的訪問及維護更加容易。
一個結構化的 HTML 頁麵非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用 blockquote 標簽，隻要使用 p 標簽，並對 p 加一個 CSS 的 margin 規則就可以實現縮進目的。p 是結構化標簽，margin 是表現屬性，前者 屬於 HTML，後者屬於 CSS。（這就是結構與表現形式的相分離）
DIV元素是用來為HTML文檔內大塊的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控製，或者是通過使用樣式表格式化這個塊來進行控製。
簡單地說，div 用於搭建網站結構（框架）、css 用於創建網站表現（樣式/美化），實質即使用XHTML對網站進行標準化重構，使用CSS將表現與內容分離，便於網站維護，簡化html頁麵代碼，可以獲得一個較優秀的網站結構，便於日後維護、協同工作和搜索引擎。
2CSS+DIV的優勢
CSS 布局與傳統表格（table）布局最大的區別在於：原來的定位都是采用表格，通過表格的間距或者用無色透明的 GIF 圖片來控製文布局版塊的間距；而現在則采用層（div）來定位，通過層的 margin，padding，border 等屬性來控製版塊的間距。具體從以下四個方麵來說明：
（1）表現和內容相分離
將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中隻存放文本信息。符合W3C標準，微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。
（2）提高搜索引擎對網頁的索引效率
用隻包含結構化內容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的網頁內容，並可能給你一個較高的評價。
（3）代碼簡潔，提高頁麵瀏覽速度
對於同一個頁麵視覺效果，采用CSS+DIV重構的頁麵容量要比TABLE編碼的頁麵文件容量小得多，代碼更加簡潔，前者一般隻有後者的1/2大小。對於一個大型網站來說，可以節省大量帶寬。並且支持瀏覽器的向後兼容，也就是無論未來的瀏覽器大戰，勝利的是IE7或者是火狐，您的網站都能很好的兼容。
（4）易於維護和改版
樣式的調整更加方便。內容和樣式的分離，使頁麵和樣式的調整變得更加方便。你隻要簡單的修改幾個CSS文件就可以重新設計整個網站的頁麵。現在YAHOO，MSN等國際門戶網站，網易，新浪等國內門戶網站，和主流的WEB2.0網站，均采用CSS+DIV的框架模式，更加印證了CSS+DIV是大勢所趨。