DIV+CSS技術(shù)在網(wǎng)站頁面設計中的應用

黃成立+楊育均

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

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

〔關(guān)鍵詞〕DIV+CSS；圖書館網(wǎng)站；頁面設計

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

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

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

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

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

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

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

因此，DIV用于搭建網(wǎng)站的框架和內(nèi)容，CSS用于創(chuàng)建網(wǎng)站的樣式。筆者通過DIV+CSS技術(shù)對圖書館網(wǎng)站進行標準化建設，可以設計一個較優(yōu)秀的網(wǎng)站平臺，它不僅有一個清晰的網(wǎng)站結(jié)構(gòu)，還有一個易于維護和擴展的樣式。

２利用DIV+CSS技術(shù)設計圖書館網(wǎng)站的好處

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

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

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

２２方便定制樣式

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

２３清晰的語義結(jié)構(gòu)，較低的頁面成本

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

endprint

３DIV+CSS技術(shù)在圖書館網(wǎng)站的應用

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

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

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

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

表１首頁HTML結(jié)構(gòu)和CSS關(guān)鍵樣式

主要HTML結(jié)構(gòu)關(guān)鍵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;}

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

表２圖片新聞DIV塊和css關(guān)鍵樣式

圖片新聞DIV塊圖片新聞css關(guān)鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

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

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

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

４２避免CSS命名的陷阱

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

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

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

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

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

５結(jié)語

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

參考文獻

［１］廣東開放大學揭牌成立學校發(fā)展進入新紀元［ＥＢ／ＯＬ］.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技術(shù)在高校教務網(wǎng)站頁面設計中的應用［Ｊ］.連云港職業(yè)技術(shù)學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優(yōu)化入門與進階（第2版）:搜索引擎優(yōu)化入門與進階［Ｍ］.北京：人民郵電出版社，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技術(shù)在圖書館網(wǎng)站的應用

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

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

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

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

表１首頁HTML結(jié)構(gòu)和CSS關(guān)鍵樣式

主要HTML結(jié)構(gòu)關(guān)鍵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;}

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

表２圖片新聞DIV塊和css關(guān)鍵樣式

圖片新聞DIV塊圖片新聞css關(guān)鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

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

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

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

４２避免CSS命名的陷阱

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

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

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

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

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

５結(jié)語

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

參考文獻

［１］廣東開放大學揭牌成立學校發(fā)展進入新紀元［ＥＢ／ＯＬ］.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技術(shù)在高校教務網(wǎng)站頁面設計中的應用［Ｊ］.連云港職業(yè)技術(shù)學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優(yōu)化入門與進階（第2版）:搜索引擎優(yōu)化入門與進階［Ｍ］.北京：人民郵電出版社，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技術(shù)在圖書館網(wǎng)站的應用

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

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

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

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

表１首頁HTML結(jié)構(gòu)和CSS關(guān)鍵樣式

主要HTML結(jié)構(gòu)關(guān)鍵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;}

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

表２圖片新聞DIV塊和css關(guān)鍵樣式

圖片新聞DIV塊圖片新聞css關(guān)鍵樣式

#pic-news{width:350px;

height:200px;

float:left;

margin:10px 0px 0px 0px;

position:relative;overflow:hidden;

}圖２二級頁面效果圖

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

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

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

４２避免CSS命名的陷阱

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

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

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

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

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

５結(jié)語

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

參考文獻

［１］廣東開放大學揭牌成立學校發(fā)展進入新紀元［ＥＢ／ＯＬ］.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技術(shù)在高校教務網(wǎng)站頁面設計中的應用［Ｊ］.連云港職業(yè)技術(shù)學院學報，2013，（6）：24-26.

［４］吳澤欣.SEO教程:搜索引擎優(yōu)化入門與進階（第2版）:搜索引擎優(yōu)化入門與進階［Ｍ］.北京：人民郵電出版社，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