王聰+楊韶華
摘要:近年來隨著Web標準的普及,DIV+CSS技術在網頁布局中越來越多的使用,DIV+CSS技術在網頁設計與制作中所占的地位越來越高,傳統的使用表格(table)進行的網頁布局方式逐漸被淘汰,在此背景下,該文通過一個網頁設計中最常見的網頁布局實例,解析DIV+CSS技術的應用,為后續網頁布局設計時提出一種新的解決方案。
關鍵詞:DIV;CSS;網頁布局;網頁設計
中圖分類號:TP393 文獻標識碼:A 文章編號:1009-3044(2014)34-8128-01
隨著Web標準在國內的逐漸普及及很多業內人士的大力推行,很多網站已經開始重構。Web標準提出將網頁的內容與表現分離,同事要求HTML文檔具有良好的結構。因此需要拋棄傳統的表格(table)布局方式,采用DIV布局,并且使用CSS層疊式樣式表來實現頁面的外觀。
1 相關概念
DIV:DIV是層疊樣式表中的定位技術,全稱DIVision,即為劃分。DIV元素是用來為HTML(標準通用標記語言下的一個應用)文檔內大塊(block-level)的內容提供結構和背景的元素。
CSS:CSS是英文Cascading Style Sheets的縮寫。CSS能夠對網頁中的對象的位置排版進行像素級的精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力,并能夠進行初步交互設計,是目前基于文本展示最優秀的表現設計語言。
DIV+CSS:DIV+CSS是WEB設計標準,它是一種網頁的布局方法。與傳統中通過表格(table)布局定位的方式不同,它可以實現網頁頁面內容與表現相分離。
2 “國字形”網頁框架布局實例
“國字形”網頁布局在企業或頁面信息量較大網站首頁設計上經常使用。如圖2所示。
根據“國字形”網頁設計圖將網頁頁面分為頂部、中間左側、中間內容區、中間右側、底部五部分,中間左側mid_left,中間內容區mid,中間右側mid_right,底部定義為bottom。……