林嘉琪

（1.武漢大學信息管理學院，湖北 武漢 430072；2.廣東省立中山圖書館，廣東 廣州 510110）

截至2014年12月，據(jù)《第35次中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》顯示，我國網(wǎng)民規(guī)模達6.49億，全年共計新增網(wǎng)民3117萬人，互聯(lián)網(wǎng)普及率為47.9%，較2013年底提升了2.1%個百分點，手機網(wǎng)民規(guī)模達5.57億，較2013年增加5672萬人，由2013年的81.0%提升至85.8%[1]。隨著移動互聯(lián)應用的日益深入，圖書館網(wǎng)頁服務不僅面向PC瀏覽器的使用，還要適應各種移動終端的使用環(huán)境以及用戶的各種使用需求?；诖?，圖書館網(wǎng)頁設(shè)計應遵循Web標準，提高網(wǎng)頁的規(guī)范性、靈活性和易用性，以適應未來互聯(lián)網(wǎng)應用的發(fā)展。

1 Web標準的特點與優(yōu)點

Web標準是由萬維網(wǎng)聯(lián)盟（W3C）構(gòu)建的網(wǎng)頁設(shè)計標準，主要包括可擴展超文本標識語言（XHTML）標準和層疊樣式單（CSS）標準[2]。推行Web標準的目的是提升網(wǎng)頁的簡潔度、兼容性、易用性和靈活性，以適應今后互聯(lián)網(wǎng)應用發(fā)展的需要。Web標準的特點是表現(xiàn)與結(jié)構(gòu)相分離的網(wǎng)頁設(shè)計模式。表現(xiàn)是頁面的外觀樣式，通過樣式代碼來控制頁面元素的排列與布局，向用戶呈現(xiàn)易于瀏覽的頁面外觀。結(jié)構(gòu)是由XHTML標簽組成的代碼結(jié)構(gòu)，用于標識頁面元素，為機器讀取頁面元素提供標識。在Web標準設(shè)計模式中，樣式代碼被獨立保存為CSS文件，而結(jié)構(gòu)代碼與頁面內(nèi)容保存為XHTML文檔。在這種模式下，網(wǎng)頁文檔的代碼結(jié)構(gòu)獨立，樣式調(diào)用靈活，有利于網(wǎng)頁功能擴展以及日常維護。在移動互聯(lián)時代，遵循Web標準設(shè)計的網(wǎng)頁具有以下優(yōu)點，使其適應了移動互聯(lián)應用的發(fā)展。

①文檔通用度高。XHTML文檔是得到廣泛支持的網(wǎng)頁文檔規(guī)范。無論在不同的瀏覽器軟件中，還是在不同的硬件設(shè)備中，都能夠被正確地解釋，有效防止了網(wǎng)頁文檔出現(xiàn)兼容性錯誤。②數(shù)據(jù)交換性強。XHTML文檔本質(zhì)上是結(jié)構(gòu)完整的XML文檔，良好的代碼結(jié)構(gòu)使XHTML具有高效的數(shù)據(jù)交換功能，支持第三方軟件或設(shè)備靈活地讀取網(wǎng)頁數(shù)據(jù)。隨著移動互聯(lián)技術(shù)的深入應用，網(wǎng)頁文檔也需要強調(diào)數(shù)據(jù)交換能力，以支持移動設(shè)備對網(wǎng)頁內(nèi)容的提取與利用。③頁面樣式靈活。通過更改調(diào)用CSS文件，能夠靈活地改變頁面樣式，使XHTML文檔能夠針對不同的設(shè)備，如PC瀏覽器、手機、掌上電腦等的使用環(huán)境，調(diào)用對應的樣式代碼，呈現(xiàn)合適的頁面外觀。

2 遵循Web標準的網(wǎng)頁設(shè)計技巧

Web標準不僅包括各種設(shè)計文檔，包括XHTML文檔、CSS文檔、DOM（文檔對象模型）的建設(shè)規(guī)范，還包括一套Web標準設(shè)計思路和設(shè)計技巧。筆者將由淺入深地闡述Web標準的網(wǎng)頁設(shè)計思路和技巧。

2.1 應用三層模型設(shè)計網(wǎng)頁

所有HTML和XHTML頁面都是由“結(jié)構(gòu)、表現(xiàn)和行為”這3方面組成的，抽象一點理解，內(nèi)容是基礎(chǔ)層，然后是結(jié)構(gòu)層，最后附加表現(xiàn)層和“行為”[3]。設(shè)計模型如圖1所示。

圖1 網(wǎng)頁設(shè)計三層模型

三層模型描述了結(jié)構(gòu)、表現(xiàn)與行為之間的相互關(guān)系：①結(jié)構(gòu)、表現(xiàn)、行為三者相分離，對應著3個獨立的文件XHTML文件、CSS文件以及腳本語言文件，三者之間是調(diào)用與被調(diào)用的關(guān)系。②結(jié)構(gòu)是Web標準下網(wǎng)頁設(shè)計的核心元素，由一系列的XHTML標簽組成，用于標識各個頁面元素。程序利用文檔對象模型（DOM）類庫來訪問結(jié)構(gòu)化標簽，能夠讀取指定位置的頁面內(nèi)容，動態(tài)調(diào)用樣式代碼和行為代碼作用于指定的頁面元素上。

2.2 使用語義標識構(gòu)造網(wǎng)頁文檔

著名網(wǎng)頁設(shè)計師Dan Cederholm說：“當談及語義時，我的意思是使用表達意思的標記，而不是表現(xiàn)指令[4]?！盌an Cederholm的話是針對網(wǎng)頁標簽誤用現(xiàn)象而提出。W3C對每個標簽都做了定義及語義說明，但在實際使用中卻存在各種誤用，例如

、
• 標簽標識，網(wǎng)頁布局通過調(diào)用CSS代碼來實現(xiàn)。

  ②采用層級標題定義文檔結(jié)構(gòu)等級[5]。類似于Word的文檔結(jié)構(gòu)圖功能，XHTML規(guī)范中也定義了6個標題級別來標識文檔結(jié)構(gòu)等級，從最重要的

  到最不重要的

  。對于內(nèi)容層級結(jié)構(gòu)豐富的網(wǎng)頁，如圖書館的介紹性頁面、數(shù)據(jù)庫說明頁面等，適宜采用層級標題定義文檔結(jié)構(gòu)，以方便瀏覽器或第三方軟件識別網(wǎng)頁內(nèi)容及其重要程度。

  ③固定文檔代碼結(jié)構(gòu)。在Web標準的設(shè)計模式中，網(wǎng)頁文檔只跟網(wǎng)頁內(nèi)容相關(guān)聯(lián)，而跟頁面布局、頁面樣式?jīng)]有任何關(guān)系[6]。換言之，只要網(wǎng)頁內(nèi)容固定，那么網(wǎng)頁文檔的代碼結(jié)構(gòu)應該是固定不變的。這既是深入推行Web標準的思路，又是衡量表現(xiàn)與結(jié)構(gòu)相分離的實現(xiàn)程度的標準。按照上述思路書寫網(wǎng)頁文檔，網(wǎng)頁將真正具備表現(xiàn)與結(jié)構(gòu)相分離的特質(zhì)，其簡潔性、易讀性和可訪問性都會得到提高。

  2.3 應用靈活布局設(shè)計

  理論上講，具有表現(xiàn)與結(jié)構(gòu)相分離特質(zhì)的網(wǎng)頁，在不改變文檔結(jié)構(gòu)的情況下，可靈活調(diào)用CSS樣式文件改變樣式及布局。從使用上講，靈活布局有廣闊的應用。Web標準計劃任務組成員Zoe Mickley Gillenwater認為，“頁面需要適用于各種查看情況。既包括對各類用戶的使用需求，又包括對各類終端設(shè)備使用環(huán)境的支持。正因為使用需求及環(huán)境的不確定性，因此頁面本身也是靈活的，頁面布局、內(nèi)容大小都不是固定的[7]。”針對圖書館網(wǎng)頁的使用特點，筆者提議可采用兩種網(wǎng)頁布局技巧。

  ①建立彈性框架。彈性框架是指頁面框架能夠自動適應頁面文本字體的大小變化而改變，就像一個可適應物體大小變化的容器。根據(jù)筆者對清華大學等8所高校圖書館①網(wǎng)站調(diào)查數(shù)據(jù)所得，沒有網(wǎng)站支持主流瀏覽器自帶的字體大小調(diào)節(jié)功能，這個功能缺陷會對網(wǎng)頁的可用性造成一定的負面影響。與此相比，國外大多數(shù)的網(wǎng)站支持字體大小調(diào)節(jié)功能，兩者的差別在于網(wǎng)頁是否采用彈性框架。實現(xiàn)彈性框架的關(guān)鍵是采用em來衡量頁面元素的大小。em是一個相對單位，相當于一行文字的高度，默認設(shè)置下1em=16像素。以em為單位來設(shè)置頁面元素的大小，當增大em的單位像素值時，所有文本及包容文本的頁面元素會同比例放大，反之則縮小。網(wǎng)頁應用了彈性框架后，用戶就能夠自如地調(diào)節(jié)字體大小。這也使得讀者通過手機訪問圖書館網(wǎng)頁時，能夠突破網(wǎng)頁字體大小的限制，改善網(wǎng)頁訪問效果。

  ②建立多元樣式布局。多元樣式布局是指一個網(wǎng)頁文檔存在多種CSS文件可供調(diào)用。常見的例子有用戶自定義網(wǎng)頁顏色，其原理是網(wǎng)頁文檔響應用戶行為，動態(tài)地調(diào)用不同的CSS文件來更改頁面元素的顏色屬性。在移動互聯(lián)時代，建立多元樣式布局顯得更有意義。當讀者通過手機訪問圖書館網(wǎng)頁時，限于屏幕尺寸，他們將希望隱藏非必要的頁面元素如標題logo、頁腳欄目等，只顯示文本信息。為了節(jié)省時間，讀者希望訪問簡潔版的頁面，而不是帶有所有圖片及輔助欄目的完整頁面。這些都是潛在的需要，只是在當前未得到足夠重視。為此，未來的圖書館網(wǎng)頁需要全面考慮各種用戶群體和使用環(huán)境，針對每一種使用情況，設(shè)置不同的CSS屬性值。例如，display屬性分別設(shè)置為“display：none”和“display：block”，可隱藏或顯示受控的頁面元素。需要更改頁面樣式文件時，可通過更改網(wǎng)頁文檔頭標簽的href屬性，調(diào)用需要的CSS文件。

  3 圖書館新書推介頁面設(shè)計分析

  圖書館新書推薦具有信息量大、利用率高的特點，筆者此處選擇新書推薦頁面作為案例分析，以基本體現(xiàn)圖書館網(wǎng)頁的功能特性。

  3.1 頁面功能分析

  在Web標準設(shè)計模式下，新書推介頁面可擁有更多的功能擴展，以提高頁面的可用性和靈活性，實現(xiàn)與移動互聯(lián)應用對接：①文檔格式轉(zhuǎn)換功能。為方便移動設(shè)備用戶直接閱讀新書推介的文本信息，頁面應提供多種格式文檔供選擇，如XML文檔、PDF文檔。②字體大小調(diào)節(jié)功能。為適應各種用戶群體的瀏覽需要，頁面應支持用戶使用字體大小調(diào)節(jié)功能。③頁面外觀自適應功能。頁面需要適應不同的使用環(huán)境，調(diào)用并呈現(xiàn)對應的頁面外觀。

  3.2 頁面代碼設(shè)計

  根據(jù)頁面功能需要，頁面代碼設(shè)計應用了以下技巧：①應用三層模型構(gòu)建設(shè)計雛形，將設(shè)計工作分為books.html頁面文檔設(shè)計和books.css樣式代碼設(shè)計。②應用層級標題標簽構(gòu)造頁面文檔代碼結(jié)構(gòu)。

  、

  、

  標簽將文檔劃分為三層級別結(jié)構(gòu)，每個層級下再應用XHTML標簽標識文檔內(nèi)容。③應用彈性框架設(shè)計。采用em作為所有頁面元素大小的衡量單位。④應用多元樣式布局。針對PC瀏覽器和手持移動設(shè)備分別設(shè)計一套CSS樣式文件。⑤增加頁面數(shù)據(jù)轉(zhuǎn)換/導出功能。提供與頁面文檔對應的XML文檔或為PDF文檔格式下載。

  books.html文檔代碼如下：

  

  

  books.css文檔主體代碼如下：

  

  3.3 頁面優(yōu)點分析

  設(shè)計后的新書推介頁面效果如圖2所示。

  

  圖2 遵循Web標準的圖書館新書推介頁面

  新書推介頁面具有如下優(yōu)點：

  ①網(wǎng)頁規(guī)范度高，通用性強。由于book.html文檔代碼遵循XHTML規(guī)范設(shè)計，保證了網(wǎng)頁文檔在不同的瀏覽器環(huán)境下都能夠被正確解釋執(zhí)行。

  ②支持與第三方的數(shù)據(jù)交換。books.html文檔不僅支持PC瀏覽器的解釋執(zhí)行，還支持第三方軟件對網(wǎng)頁數(shù)據(jù)進行抓取利用。還可以將books.html文檔內(nèi)容轉(zhuǎn)變格式輸出，如XML文檔或PDF文檔。轉(zhuǎn)換XML文檔的方法比較簡單，將book.html的DOCTYPE指令更改為XML文檔標識<？xmlversion=“1.0”encoding=“gb2312”？>，保存為XML文檔格式即可。轉(zhuǎn)換PDF文檔則需要借助Adobe AcrobatProfessional軟件，將網(wǎng)頁導出為PDF格式存檔。用戶可以直接瀏覽網(wǎng)頁或者通過鏈接下載XML文檔或PDF文檔閱讀（見圖2）。

  ③網(wǎng)頁布局靈活，具有更高的可用性。網(wǎng)頁設(shè)計考慮到用戶的使用需要和使用環(huán)境的多變性，提供了多種可供選擇的外觀呈現(xiàn)方案。用戶在使用過程中，可靈活選擇。圖2展示了靈活布局的一種應用，即用戶可利用瀏覽器自帶的文字調(diào)節(jié)功能選擇頁面文字大小。

  4 結(jié)語

  在移動互聯(lián)時代，用戶需要圖書館網(wǎng)頁面向更多的使用環(huán)境，具備更多的功能，而不只是局限于PC瀏覽器的應用，這種需求隨著未來4G技術(shù)的逐步普及會更加突出。為此，圖書館網(wǎng)頁設(shè)計應面向未來，著力發(fā)展，遵循Web標準的設(shè)計思路，應用各種設(shè)計技巧，提高圖書館網(wǎng)頁設(shè)計的規(guī)范性、靈活性和易用性，增強網(wǎng)頁功能，為適應未來的互聯(lián)網(wǎng)應用奠定基礎(chǔ)?？梢灶A見，在Web 2.0日益健全完善以及移動互聯(lián)應用深入發(fā)展的大背景下，圖書館網(wǎng)頁的功能定位必將從以瀏覽為主迅速轉(zhuǎn)變?yōu)橐詰脼橹鳎撁嬖O(shè)計將更加精彩紛呈。

  注：

  ① 8所高校包括：清華大學、北京大學、南京大學、浙江大學、廈門大學、南開大學、武漢大學、中山大學。

  [1]360doc個人圖書館[EB/OL].[2015-02-09].http：//www.360 doc.com/content/15/0209/13/502486447443340.shtml.

  [2]W3C網(wǎng)站.Web標準[EB/OL].[2012-02-08].http：//www.w3cschool.cn/site_standards.html.

  [3]阿捷.理解表現(xiàn)和結(jié)構(gòu)相分離[EB/OL].[2012-02-08].http：//www.w3cn.org/article/tips/2004/43.html.

  [4]Dan C著；楊志紅，姚軍譯.基于Web標準的網(wǎng)頁設(shè)計技巧與實戰(zhàn)[M].北京：人民郵電出版社，2010：3.

  [5]爆牙齒.深入結(jié)構(gòu)：理解h系列的不合理[EB/OL].[2012-02-10].http：//www.cnblogs.com/yuntian/archive/2006/03/08/345609.html.

  [6]阿一，等.博客園精華集：Web標準之道[M].北京：人民郵電出版社，2009.

  [7]Zoe M，G著；李靜，等譯.靈活Web設(shè)計[M].北京：機械工業(yè)出版社，2009.

  猜你喜歡

  樣式網(wǎng)頁代碼

  CPMF-I 取樣式多相流分離計量裝置

  天然氣與石油(2022年4期)2022-09-21 07:02:38

  CPMF-I 取樣式多相流分離計量裝置

  天然氣與石油(2021年5期)2021-11-06 09:39:42

  取樣式多相流分離計量裝置

  天然氣與石油(2021年1期)2021-03-08 09:07:32

  創(chuàng)世代碼

  動漫星空(2018年11期)2018-10-26 02:24:02

  創(chuàng)世代碼

  動漫星空(2018年2期)2018-10-26 02:11:00

  創(chuàng)世代碼

  動漫星空(2018年9期)2018-10-26 01:16:48

  創(chuàng)世代碼

  動漫星空(2018年5期)2018-10-26 01:15:02

  基于CSS的網(wǎng)頁導航欄的設(shè)計

  電子制作(2018年10期)2018-08-04 03:24:38

  基于URL和網(wǎng)頁類型的網(wǎng)頁信息采集研究

  電子制作(2017年2期)2017-05-17 03:54:56

  網(wǎng)頁制作在英語教學中的應用

  電子測試(2015年18期)2016-01-14 01:22:58

  圖書館學刊2015年6期

  圖書館學刊的其它文章

  虛擬現(xiàn)實技術(shù)在圖書館服務創(chuàng)新中的應用*

  高校圖書館文獻信息資源共享服務實證研究
  ——以福州地區(qū)大學城圖書館為例

  構(gòu)建全民閱讀體系的對策?

  基于關(guān)聯(lián)數(shù)據(jù)的數(shù)字圖書館資源整合模式

  少兒圖書館特色文獻資源庫的建設(shè)模式

  高校圖書館樣本書庫現(xiàn)狀調(diào)查分析*
  ——以華南農(nóng)業(yè)大學圖書館為例

  雜志排行

  1. 1《師道·教研》2024年10期

  2. 2《思維與智慧·上半月》2024年11期

  3. 3《現(xiàn)代工業(yè)經(jīng)濟和信息化》2024年2期

  4. 4《微型小說月報》2024年10期

  5. 5《工業(yè)微生物》2024年1期

  6. 6《雪蓮》2024年9期

  7. 7《世界博覽》2024年21期

  8. 8《中小企業(yè)管理與科技》2024年6期

  9. 9《現(xiàn)代食品》2024年4期

  10. 10《衛(wèi)生職業(yè)教育》2024年10期

  關(guān)于參考網(wǎng)