黃成立+楊育均

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

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

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

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

〔中圖分類號(hào)〕ＴＰ３９３０９２〔文獻(xiàn)標(biāo)識(shí)碼〕Ｂ〔文章編號(hào)〕１００８－０８２１（２０１４）０５－０１４６－０４

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

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

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

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

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

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

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

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

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

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

２２方便定制樣式

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

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

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

endprint

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

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

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

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

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

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

}圖２二級(jí)頁(yè)面效果圖

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

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

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

４２避免CSS命名的陷阱

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

４３避免過(guò)分使用DIV元素嵌套

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

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

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

５結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

［５］圖書館簡(jiǎn)介［ＥＢ／ＯＬ］.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.

（本文責(zé)任編輯：馬卓）

endprint

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

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

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

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

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

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

}圖２二級(jí)頁(yè)面效果圖

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

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

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

４２避免CSS命名的陷阱

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

４３避免過(guò)分使用DIV元素嵌套

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

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

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

５結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

［５］圖書館簡(jiǎn)介［ＥＢ／ＯＬ］.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.

（本文責(zé)任編輯：馬卓）

endprint

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

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

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

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

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

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

}圖２二級(jí)頁(yè)面效果圖

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

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

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

４２避免CSS命名的陷阱

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

４３避免過(guò)分使用DIV元素嵌套

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

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

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

５結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

［５］圖書館簡(jiǎn)介［ＥＢ／ＯＬ］.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.

（本文責(zé)任編輯：馬卓）

endprint