DIV+CSS技術在網站頁面設計中的應用

黃成立+楊育均

作者簡介：黃成立（１９８６－），男，工程師，研究方向：信息管理、數字圖書館技術。?業務研究?

〔摘要〕本文以建設廣東開放大學圖書館網站為例，介紹了DIV+CSS技術及利用其設計頁面的幾個好處：有利于搜索引擎采集和收錄、方便定制樣式、具有清晰的語義結構和較低的頁面成本。文章詳細闡述了DIV+CSS技術在圖書館網站頁面設計中的布局、結構和樣式，以及使用DIV+CSS時需要避免的4個方面，明確了如何設計一個標準化的網站。

〔關鍵詞〕DIV+CSS；圖書館網站；頁面設計

ＤＯＩ：１０．３９６９／ｊ．ｉｓｓｎ．１００８－０８２１．２０１４．０５．０３１

〔中圖分類號〕ＴＰ３９３０９２〔文獻標識碼〕Ｂ〔文章編號〕１００８－０８２１（２０１４）０５－０１４６－０４

Application of DIV+CSS Technique to Web Page Design at the Website

——Taking the Library of Guangdong Open University for ExampleHuang ChengliYang Yujun

（Library，Guangdong Open University，Guangzhou 510091，China）

〔Ａｂｓｔｒａｃｔ〕Taking the Library Website of Guangdong Open University for example,the paper described The DIV+CSS web page layout technique and its advantages:conducive to search engine collection and included,easy to customize the style,clear semantic structure and lower cost of the page.The authors described in detail the layout,structure and style of the library website,and pointed out 4 problems that it must be careful while using the DIV+CSS technical methods,explained clearly how to design a standardized website.

〔Ｋｅｙｗｏｒｄｓ〕DIV+CSS;library website;web page design

2013年8月2日，廣東開放大學在廣東廣播電視大學的基礎上正式揭牌成立。廣東開放大學作為開放教育的載體，肩負構建終身教育體系的社會責任。為了向社會持續提供強大的人才保證和智力支持，廣東開放大學要在辦學體制、遠程開放教育、培養應用型人才和開放合作上辦出特色，加強國際國內交流與合作，努力在全國開放大學建設中爭當先進［１］。圖書館作為廣東開放大學組織機構中的一員，是讀者的學習資源中心，致力于提供讀者服務和科研服務。目前，圖書館網站是在線服務的窗口，必須重視它的建設，為了適應信息時代對網站的要求，筆者選擇DIV+CSS技術進行圖書館網站的網頁設計。DIV+CSS技術不僅將網頁內容和表現分離，而且使網頁結構清晰、維護成本低。DIV+CSS技術可以為讀者提供簡潔、易用、美觀、易修改的圖書館網站平臺。

１什么是DIV+CSS技術

網站頁面設計制作需要面臨的一個問題是定位布局，在以往是用TABLE的方式，即將整個網頁當作一個表格，然后在表格里面填充文字、圖片、鏈接之類的元素。現在頁面布局已經基本擯棄了TABLE布局方式，而采用DIV+CSS方式。所謂的DIV+CSS是指通過CSS控制DIV的布局。其實DIV可以理解為統稱，實際應用的不僅是DIV，還有p、span、img、table、h1—h6、ul、dl、ol等任意節點的定位都可以通過CSS來控制。因此，DIV+CSS技術并不是簡單的DIV與CSS的相加，而是利用CSS綜合控制HTML的各種標簽進行網頁布局。

DIV是division的簡寫，是一個塊級元素，可以把HTML文檔分割為一塊一塊的內容，而且內容互相獨立。它和常見的HTML標簽p、h1等一樣，具有它的作用，比如一個p元素應該包含一段文本，而一個h1元素應該包含頁面的最高層級標題。DIV被用來表示一個邏輯區塊，被用于指定特定的區塊或行列，它可以包含段落、標題、表格等。因為DIV的塊級屬性，使它的內容自動地開始一行，一般設計人員會通過class或id為DIV應用必備的樣式，控制這個DIV［２］。

CSS是Cascading Style Sheet（層疊樣式表）的縮寫，由W3C組織負責制定和發布，是一種用來表現HTML文檔樣式的計算機標記語言。使用CSS設置頁面格式時，內容與表現形式相互分開。頁面內容位于自身的HTML文件中，而定義代碼表現形式的CSS規則位于另一個文件（即外部樣式表）或HTML文檔的另一部分（通常為部分）中。網頁設計人員可以使用CSS來決定網頁的顏色、字體、排版等，CSS可以非常靈活并很好地控制頁面的外觀，使網頁的內容和表現形式分隔開來，增強文件的結構性、可讀性。

因此，DIV用于搭建網站的框架和內容，CSS用于創建網站的樣式。筆者通過DIV+CSS技術對圖書館網站進行標準化建設，可以設計一個較優秀的網站平臺，它不僅有一個清晰的網站結構，還有一個易于維護和擴展的樣式。

２利用DIV+CSS技術設計圖書館網站的好處

使用CSS布局的頁面，首先它的結構和表現可以分離，分別控制，文檔簡潔清晰；其次它可以去掉大量冗余代碼，使頁面的更新和維護更加方便；第三是通過修改CSS文件中定義的樣式，可以統一修改網站中所有頁面中相同的樣式［３］。正因為具備上述優勢，使得DIV+CSS設計的頁面有明顯的好處，主要表現在如下方面：

２１有利于搜索引擎采集和收錄

DIV+CSS設計的網頁結構清晰，有利于搜索引擎蜘蛛爬行。廣東開放大學圖書館網站的HTML代碼架構是樹形架構，即是首頁——欄目頁——內容頁，之后首頁到內容頁的層次逐次減少，權重得到良好的傳遞，保證搜索引擎蜘蛛從網站的某個頁面爬行獲取內容，然后找到網頁中的其他鏈接。因為每個頁面都有一個文本的鏈接指向，有利于網站的全面抓取和收錄，蜘蛛很輕易就能獲取網頁的HTML代碼，保存在自己的數據庫中［４］。這樣有利于推廣廣東開放大學圖書館網站。

２２方便定制樣式

DIV+CSS設計的網頁實現了內容和樣式的分離，在內容固定不變的情況下，僅修改CSS樣式表就能輕松改變頁面的表現效果。理論上，可以根據實際需要使網頁產生各種不同的布局，筆者在圖書館首頁就實現了3欄布局，而在圖書館新聞頁面則實現了2欄布局。又比如設計人員還可以根據1年各個節日的到來，設計慶祝節日的各式背景，只要替換CSS中關于背景設定的樣式，就能輕易實現隨節日變化的不同背景的網站頁面。

２３清晰的語義結構，較低的頁面成本

DIV+CSS設計的網頁使用了清晰的語義結構，設計人員可以輕易讀懂源代碼代表的意思，需要維護和更新網站頁面的時候會比較容易。另外，廣東開放大學圖書館網站采用了自建的內容管理平臺生成網頁，因為DIV+CSS技術壓縮了頁面大小，保持了頁面的簡潔，節省了不少空間，提高了運行網頁的速度和效率，讓頁面加載得更快，響應讀者的操作更加及時，帶給讀者更加友好的體驗，降低了頁面成本。

endprint

３DIV+CSS技術在圖書館網站的應用

廣東開放大學圖書館網站的定位：服務讀者、服務開放教育，緊密圍繞學校教學與科研的需要，密切關注廣大師生讀者的實際需求，不斷發展和完善文獻信息資源保障體系，致力提升惠及每一位讀者的圖書館信息服務水平，為讀者提供全方位、高質量、高可用性的圖書館管理平臺［５］。筆者根據網站的定位和圖書館網站的用戶特點，確定網站頁面表現風格：架構明晰、大氣沉穩、內容凝練全面、色調輕快不呆板。

以首頁為例，筆者確定了以白色為主體風格，網頁布局采用上中下豎直框架。框架包括，頁面頭部（圖書館logo、搜索區域、菜單導航）、主內容區（左側、中部和右側，包括圖書期刊查詢、圖書館消息、入館指南、圖書推薦、電子資源、活動專題、專業導航）、頁腳區域（包括常用鏈接、版權信息），如圖１首頁效果圖與框架圖所示。

首頁的主要HTML結構及頁面的主要樣式結構CSS如表１所示，其中HTML結構中body控制了網站的背景色和背景圖，奠定了網站白色基調。id=″box″是控制整個頁面的DIV塊，id=″top″是圖書館網站頭部位置，網站的搜索框也在其中。id=″nav″是放置上部菜單導航的區域，id=″foot″是頁腳信息所在。id=″mid″是網頁中部主要內容的DIV塊，它嵌套了圖片新聞、圖書館消息、入館指南、圖書期刊查詢及圖書推薦、引進數字資源、專業導航等欄目的DIV塊。關鍵CSS樣式處羅列了id是body、box、top、nav、foot、mid這幾個DIV塊的詳細樣式，它們奠定了網站首頁的基本布局。

id=″mid″部分是詳細內容區域，在這個區域中需要制作3欄布局結構，筆者使用了CSS的float屬性布局，同時為了確定所有的欄目在特定的位置，筆者還指定了各個DIV塊的寬度，比如圖片新聞欄目的DIV寬度是350px，圖書館消息欄目的DIV寬度是410px，入館指南欄目的DIV寬度是230px。按照表１中的HTML結構顯示，筆者首先確定了DIV id=″pic-news″的位置，再確定余下DIV的位置。id=″mid″里包含的DIV塊都采用浮動，在它們的css樣式里寫上“float：left”的關鍵屬性。在這僅舉圖片新聞欄目為例，它的部分關鍵代碼如表２所示。圖１首頁效果圖與框架圖

表１首頁HTML結構和CSS關鍵樣式

主要HTML結構關鍵CSS樣式

body{text- align:center;background-color:

#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:

1024px;margin:0 auto;zoom:1;overflow:

hidden;}#top {width:inherit;height:140px;

z-index:9;position:relative;}#nav

{width:inherit;height:35px;z-index:8;

position:relative;}#mid {width:inherit;

min-height:700px;height:auto !important;

text- align:left;z-index:3}#foot

{width:inherit;height:130px;

background-color:#f7f7f7;padding:10px 0px 10px 0px;}

為了保持網站一致性，二級頁面設計沿用首頁的白色基調和基本布局，頭部及導航不變，中部主要內容改成2欄布局，既兼顧了與首頁的統一風格，也使網站生成了不同版式的頁面，不致單調。如圖２所示，是圖書館消息的頁面效果圖，中部左側是新聞資訊欄，中部右側是圖書館消息的詳細內容。至于頁腳部分，采取CSS的clear屬性清除2欄布局的浮動，消除浮動帶來的元素定位不準的消極影響，得到比較好的表現效果。

表２圖片新聞DIV塊和css關鍵樣式

圖片新聞DIV塊圖片新聞css關鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

４DIV+CSS技術在網站頁面設計中需要注意的方面DIV+CSS技術在網站頁面設計中具有許多好處，不過也需要在一些方面詳加注意，主要是下面幾個方面：

４１避免在HTML文檔上直接寫CSS樣式

有些設計人員喜歡直接在HTML頁面上寫CSS樣式，而不是引用外部樣式表。雖然它比將HTML顯示和結構指令混在一起是一個進步，但它仍然有同樣的缺點，維護會顯得困難，而且使HTML文檔變得相對臃腫。

４２避免CSS命名的陷阱

CSS和其他編程語言有一些共同的陷阱。尤其在命名CSS的id和class的時候，設計人員會選擇一個比較有說明性的名稱來命名。比如筆者曾經使用“big-blue”來為“廣東開放大學圖書館”這個H2標簽命名。在當時，對筆者來說這個名稱可能是直覺的，就是一個大藍字體，但后來筆者決定突出顯示的字節應該使用紅色而非藍色，于是“big-blue”的命名就不合適。因此，命名應該突出的是這個“id”或“class”的用意，而不是它是如何被顯示［６］。

４３避免過分使用DIV元素嵌套

雖然大部分使用CSS的頁面比傳統的使用表格的頁面要整潔，但過分使用class、id和過于細膩的結構層次同樣會使HTML變得臃腫，難以閱讀和維護。因此DIV塊不是越多越好，如果發現有很多的DIV，就要想想是否存在濫用情況，要思考是否可以用其他標記替代。若h1標簽可以更好表示DIV塊所標示的內容，就要放棄DIV塊。應該使HTML文檔在邏輯上具有清晰的結構，所以DIV塊數量要適中，能達到樣式控制的結果比較好。HTML本身的標簽也要靈活應用。

４４避免過量引入解決瀏覽器兼容性的CSS樣式

網上充斥著各類瀏覽器，每個瀏覽器對CSS的支持不是完全統一的，使用CSS設計后瀏覽器的顯示效果也是各有不同。例如微軟Internet Explorer的舊版本60、甚至70，錯誤顯示一些重要的屬性，如width，height和float等，跟W3C的標準有所不同。另外，有些新的CSS3的樣式尚未成為標準，使用時需要加上前綴，使其效果可以在不同的瀏覽器中正確顯示。因此，筆者為了解決瀏覽器差異，需要額外撰寫特別的CSS樣式，CSS的文件因此增大，如果這些特別的CSS樣式太多，它的維護量會很大，會導致維護性能降低。

５結語

筆者通過實際構建廣東開放大學圖書館網站，明確了DIV+CSS技術具有的好處，也提出了在設計過程中需要注意的一些問題。DIV+CSS是一個強大的技術工具，只要設計人員運用得當，就能設計一個符合W3C標準的網站，服務好用戶。

參考文獻

［１］廣東開放大學揭牌成立學校發展進入新紀元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.

［２］span與div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.

［３］蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用［Ｊ］.連云港職業技術學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優化入門與進階（第2版）:搜索引擎優化入門與進階［Ｍ］.北京：人民郵電出版社，2009.

［５］圖書館簡介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.

［６］層疊樣式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.

（本文責任編輯：馬卓）

endprint

３DIV+CSS技術在圖書館網站的應用

廣東開放大學圖書館網站的定位：服務讀者、服務開放教育，緊密圍繞學校教學與科研的需要，密切關注廣大師生讀者的實際需求，不斷發展和完善文獻信息資源保障體系，致力提升惠及每一位讀者的圖書館信息服務水平，為讀者提供全方位、高質量、高可用性的圖書館管理平臺［５］。筆者根據網站的定位和圖書館網站的用戶特點，確定網站頁面表現風格：架構明晰、大氣沉穩、內容凝練全面、色調輕快不呆板。

以首頁為例，筆者確定了以白色為主體風格，網頁布局采用上中下豎直框架。框架包括，頁面頭部（圖書館logo、搜索區域、菜單導航）、主內容區（左側、中部和右側，包括圖書期刊查詢、圖書館消息、入館指南、圖書推薦、電子資源、活動專題、專業導航）、頁腳區域（包括常用鏈接、版權信息），如圖１首頁效果圖與框架圖所示。

首頁的主要HTML結構及頁面的主要樣式結構CSS如表１所示，其中HTML結構中body控制了網站的背景色和背景圖，奠定了網站白色基調。id=″box″是控制整個頁面的DIV塊，id=″top″是圖書館網站頭部位置，網站的搜索框也在其中。id=″nav″是放置上部菜單導航的區域，id=″foot″是頁腳信息所在。id=″mid″是網頁中部主要內容的DIV塊，它嵌套了圖片新聞、圖書館消息、入館指南、圖書期刊查詢及圖書推薦、引進數字資源、專業導航等欄目的DIV塊。關鍵CSS樣式處羅列了id是body、box、top、nav、foot、mid這幾個DIV塊的詳細樣式，它們奠定了網站首頁的基本布局。

id=″mid″部分是詳細內容區域，在這個區域中需要制作3欄布局結構，筆者使用了CSS的float屬性布局，同時為了確定所有的欄目在特定的位置，筆者還指定了各個DIV塊的寬度，比如圖片新聞欄目的DIV寬度是350px，圖書館消息欄目的DIV寬度是410px，入館指南欄目的DIV寬度是230px。按照表１中的HTML結構顯示，筆者首先確定了DIV id=″pic-news″的位置，再確定余下DIV的位置。id=″mid″里包含的DIV塊都采用浮動，在它們的css樣式里寫上“float：left”的關鍵屬性。在這僅舉圖片新聞欄目為例，它的部分關鍵代碼如表２所示。圖１首頁效果圖與框架圖

表１首頁HTML結構和CSS關鍵樣式

主要HTML結構關鍵CSS樣式

body{text- align:center;background-color:

#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:

1024px;margin:0 auto;zoom:1;overflow:

hidden;}#top {width:inherit;height:140px;

z-index:9;position:relative;}#nav

{width:inherit;height:35px;z-index:8;

position:relative;}#mid {width:inherit;

min-height:700px;height:auto !important;

text- align:left;z-index:3}#foot

{width:inherit;height:130px;

background-color:#f7f7f7;padding:10px 0px 10px 0px;}

為了保持網站一致性，二級頁面設計沿用首頁的白色基調和基本布局，頭部及導航不變，中部主要內容改成2欄布局，既兼顧了與首頁的統一風格，也使網站生成了不同版式的頁面，不致單調。如圖２所示，是圖書館消息的頁面效果圖，中部左側是新聞資訊欄，中部右側是圖書館消息的詳細內容。至于頁腳部分，采取CSS的clear屬性清除2欄布局的浮動，消除浮動帶來的元素定位不準的消極影響，得到比較好的表現效果。

表２圖片新聞DIV塊和css關鍵樣式

圖片新聞DIV塊圖片新聞css關鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

４DIV+CSS技術在網站頁面設計中需要注意的方面DIV+CSS技術在網站頁面設計中具有許多好處，不過也需要在一些方面詳加注意，主要是下面幾個方面：

４１避免在HTML文檔上直接寫CSS樣式

有些設計人員喜歡直接在HTML頁面上寫CSS樣式，而不是引用外部樣式表。雖然它比將HTML顯示和結構指令混在一起是一個進步，但它仍然有同樣的缺點，維護會顯得困難，而且使HTML文檔變得相對臃腫。

４２避免CSS命名的陷阱

CSS和其他編程語言有一些共同的陷阱。尤其在命名CSS的id和class的時候，設計人員會選擇一個比較有說明性的名稱來命名。比如筆者曾經使用“big-blue”來為“廣東開放大學圖書館”這個H2標簽命名。在當時，對筆者來說這個名稱可能是直覺的，就是一個大藍字體，但后來筆者決定突出顯示的字節應該使用紅色而非藍色，于是“big-blue”的命名就不合適。因此，命名應該突出的是這個“id”或“class”的用意，而不是它是如何被顯示［６］。

４３避免過分使用DIV元素嵌套

雖然大部分使用CSS的頁面比傳統的使用表格的頁面要整潔，但過分使用class、id和過于細膩的結構層次同樣會使HTML變得臃腫，難以閱讀和維護。因此DIV塊不是越多越好，如果發現有很多的DIV，就要想想是否存在濫用情況，要思考是否可以用其他標記替代。若h1標簽可以更好表示DIV塊所標示的內容，就要放棄DIV塊。應該使HTML文檔在邏輯上具有清晰的結構，所以DIV塊數量要適中，能達到樣式控制的結果比較好。HTML本身的標簽也要靈活應用。

４４避免過量引入解決瀏覽器兼容性的CSS樣式

網上充斥著各類瀏覽器，每個瀏覽器對CSS的支持不是完全統一的，使用CSS設計后瀏覽器的顯示效果也是各有不同。例如微軟Internet Explorer的舊版本60、甚至70，錯誤顯示一些重要的屬性，如width，height和float等，跟W3C的標準有所不同。另外，有些新的CSS3的樣式尚未成為標準，使用時需要加上前綴，使其效果可以在不同的瀏覽器中正確顯示。因此，筆者為了解決瀏覽器差異，需要額外撰寫特別的CSS樣式，CSS的文件因此增大，如果這些特別的CSS樣式太多，它的維護量會很大，會導致維護性能降低。

５結語

筆者通過實際構建廣東開放大學圖書館網站，明確了DIV+CSS技術具有的好處，也提出了在設計過程中需要注意的一些問題。DIV+CSS是一個強大的技術工具，只要設計人員運用得當，就能設計一個符合W3C標準的網站，服務好用戶。

參考文獻

［１］廣東開放大學揭牌成立學校發展進入新紀元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.

［２］span與div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.

［３］蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用［Ｊ］.連云港職業技術學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優化入門與進階（第2版）:搜索引擎優化入門與進階［Ｍ］.北京：人民郵電出版社，2009.

［５］圖書館簡介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.

［６］層疊樣式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.

（本文責任編輯：馬卓）

endprint

３DIV+CSS技術在圖書館網站的應用

廣東開放大學圖書館網站的定位：服務讀者、服務開放教育，緊密圍繞學校教學與科研的需要，密切關注廣大師生讀者的實際需求，不斷發展和完善文獻信息資源保障體系，致力提升惠及每一位讀者的圖書館信息服務水平，為讀者提供全方位、高質量、高可用性的圖書館管理平臺［５］。筆者根據網站的定位和圖書館網站的用戶特點，確定網站頁面表現風格：架構明晰、大氣沉穩、內容凝練全面、色調輕快不呆板。

以首頁為例，筆者確定了以白色為主體風格，網頁布局采用上中下豎直框架。框架包括，頁面頭部（圖書館logo、搜索區域、菜單導航）、主內容區（左側、中部和右側，包括圖書期刊查詢、圖書館消息、入館指南、圖書推薦、電子資源、活動專題、專業導航）、頁腳區域（包括常用鏈接、版權信息），如圖１首頁效果圖與框架圖所示。

首頁的主要HTML結構及頁面的主要樣式結構CSS如表１所示，其中HTML結構中body控制了網站的背景色和背景圖，奠定了網站白色基調。id=″box″是控制整個頁面的DIV塊，id=″top″是圖書館網站頭部位置，網站的搜索框也在其中。id=″nav″是放置上部菜單導航的區域，id=″foot″是頁腳信息所在。id=″mid″是網頁中部主要內容的DIV塊，它嵌套了圖片新聞、圖書館消息、入館指南、圖書期刊查詢及圖書推薦、引進數字資源、專業導航等欄目的DIV塊。關鍵CSS樣式處羅列了id是body、box、top、nav、foot、mid這幾個DIV塊的詳細樣式，它們奠定了網站首頁的基本布局。

id=″mid″部分是詳細內容區域，在這個區域中需要制作3欄布局結構，筆者使用了CSS的float屬性布局，同時為了確定所有的欄目在特定的位置，筆者還指定了各個DIV塊的寬度，比如圖片新聞欄目的DIV寬度是350px，圖書館消息欄目的DIV寬度是410px，入館指南欄目的DIV寬度是230px。按照表１中的HTML結構顯示，筆者首先確定了DIV id=″pic-news″的位置，再確定余下DIV的位置。id=″mid″里包含的DIV塊都采用浮動，在它們的css樣式里寫上“float：left”的關鍵屬性。在這僅舉圖片新聞欄目為例，它的部分關鍵代碼如表２所示。圖１首頁效果圖與框架圖

表１首頁HTML結構和CSS關鍵樣式

主要HTML結構關鍵CSS樣式

body{text- align:center;background-color:

#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:

1024px;margin:0 auto;zoom:1;overflow:

hidden;}#top {width:inherit;height:140px;

z-index:9;position:relative;}#nav

{width:inherit;height:35px;z-index:8;

position:relative;}#mid {width:inherit;

min-height:700px;height:auto !important;

text- align:left;z-index:3}#foot

{width:inherit;height:130px;

background-color:#f7f7f7;padding:10px 0px 10px 0px;}

為了保持網站一致性，二級頁面設計沿用首頁的白色基調和基本布局，頭部及導航不變，中部主要內容改成2欄布局，既兼顧了與首頁的統一風格，也使網站生成了不同版式的頁面，不致單調。如圖２所示，是圖書館消息的頁面效果圖，中部左側是新聞資訊欄，中部右側是圖書館消息的詳細內容。至于頁腳部分，采取CSS的clear屬性清除2欄布局的浮動，消除浮動帶來的元素定位不準的消極影響，得到比較好的表現效果。

表２圖片新聞DIV塊和css關鍵樣式

圖片新聞DIV塊圖片新聞css關鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

４DIV+CSS技術在網站頁面設計中需要注意的方面DIV+CSS技術在網站頁面設計中具有許多好處，不過也需要在一些方面詳加注意，主要是下面幾個方面：

４１避免在HTML文檔上直接寫CSS樣式

有些設計人員喜歡直接在HTML頁面上寫CSS樣式，而不是引用外部樣式表。雖然它比將HTML顯示和結構指令混在一起是一個進步，但它仍然有同樣的缺點，維護會顯得困難，而且使HTML文檔變得相對臃腫。

４２避免CSS命名的陷阱

CSS和其他編程語言有一些共同的陷阱。尤其在命名CSS的id和class的時候，設計人員會選擇一個比較有說明性的名稱來命名。比如筆者曾經使用“big-blue”來為“廣東開放大學圖書館”這個H2標簽命名。在當時，對筆者來說這個名稱可能是直覺的，就是一個大藍字體，但后來筆者決定突出顯示的字節應該使用紅色而非藍色，于是“big-blue”的命名就不合適。因此，命名應該突出的是這個“id”或“class”的用意，而不是它是如何被顯示［６］。

４３避免過分使用DIV元素嵌套

雖然大部分使用CSS的頁面比傳統的使用表格的頁面要整潔，但過分使用class、id和過于細膩的結構層次同樣會使HTML變得臃腫，難以閱讀和維護。因此DIV塊不是越多越好，如果發現有很多的DIV，就要想想是否存在濫用情況，要思考是否可以用其他標記替代。若h1標簽可以更好表示DIV塊所標示的內容，就要放棄DIV塊。應該使HTML文檔在邏輯上具有清晰的結構，所以DIV塊數量要適中，能達到樣式控制的結果比較好。HTML本身的標簽也要靈活應用。

４４避免過量引入解決瀏覽器兼容性的CSS樣式

網上充斥著各類瀏覽器，每個瀏覽器對CSS的支持不是完全統一的，使用CSS設計后瀏覽器的顯示效果也是各有不同。例如微軟Internet Explorer的舊版本60、甚至70，錯誤顯示一些重要的屬性，如width，height和float等，跟W3C的標準有所不同。另外，有些新的CSS3的樣式尚未成為標準，使用時需要加上前綴，使其效果可以在不同的瀏覽器中正確顯示。因此，筆者為了解決瀏覽器差異，需要額外撰寫特別的CSS樣式，CSS的文件因此增大，如果這些特別的CSS樣式太多，它的維護量會很大，會導致維護性能降低。

５結語

筆者通過實際構建廣東開放大學圖書館網站，明確了DIV+CSS技術具有的好處，也提出了在設計過程中需要注意的一些問題。DIV+CSS是一個強大的技術工具，只要設計人員運用得當，就能設計一個符合W3C標準的網站，服務好用戶。

參考文獻

［１］廣東開放大學揭牌成立學校發展進入新紀元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.

［２］span與div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.

［３］蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用［Ｊ］.連云港職業技術學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優化入門與進階（第2版）:搜索引擎優化入門與進階［Ｍ］.北京：人民郵電出版社，2009.

［５］圖書館簡介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.

［６］層疊樣式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.

（本文責任編輯：馬卓）

endprint