隨著公共圖書館專題數(shù)據(jù)庫、網(wǎng)站專題建設(shè)數(shù)量的增加，如何合理規(guī)劃專題數(shù)據(jù)庫及網(wǎng)站專題的內(nèi)容結(jié)構(gòu)是其在網(wǎng)站開發(fā)中亟須解決的問題。網(wǎng)站建設(shè)的目的是為了向網(wǎng)站使用者揭示特定主題的內(nèi)容，有序組織和揭示內(nèi)容。用戶訪問網(wǎng)站是為了獲取信息，網(wǎng)站的視覺設(shè)計及編程技術(shù)都是為網(wǎng)站內(nèi)容服務(wù)的。傳統(tǒng)的網(wǎng)站開發(fā)流程先進(jìn)行視覺設(shè)計，再填充內(nèi)容，內(nèi)容總是處于次要狀態(tài)，常常無法滿足用戶的需要。響應(yīng)式XHTML線框原型的設(shè)計實現(xiàn)方法使公共圖書館能夠在網(wǎng)站專題欄目規(guī)劃完成后，建立起可交互的未經(jīng)視覺美化的響應(yīng)式XHTML線框原型。使用響應(yīng)式線框原型測試、調(diào)整欄目結(jié)構(gòu)，使網(wǎng)站開發(fā)過程能更專注于專題數(shù)據(jù)庫和網(wǎng)站專題內(nèi)容的有序組織和揭示，符合以內(nèi)容為主導(dǎo)的網(wǎng)站開發(fā)建設(shè)思路，體現(xiàn)了先進(jìn)的網(wǎng)站建設(shè)方法。使用響應(yīng)式原型測試響應(yīng)式布局，可以在測試的基礎(chǔ)上最終實現(xiàn)專題數(shù)據(jù)庫和網(wǎng)站專題的響應(yīng)式設(shè)計。 
  1 XHTML線框圖原型和響應(yīng)式設(shè)計 
  1.1 XHTML線框圖原型 
  線框圖指網(wǎng)站每個頁面內(nèi)容的梗概，能顯示信息的層級結(jié)構(gòu)及需要的空間。創(chuàng)建線框圖可保證頁面中包含它需要的所有信息。線框圖不包括網(wǎng)站的配色方案、背景或圖像等內(nèi)容，主要著眼于每個頁面需要什么樣的信息，并創(chuàng)建視覺層次結(jié)構(gòu)以表明每個頁面中最重要的部分[1]。線框圖是讓網(wǎng)站內(nèi)容建設(shè)人員及相關(guān)人員盡早參與Web開發(fā)的一個工具。XHTML線框圖原型可以起到改善內(nèi)容規(guī)劃和設(shè)計的作用，當(dāng)用戶與XHTML線框圖原型進(jìn)行交互時，用戶參與其中能更好地理解上下文。 
  1.2 響應(yīng)式設(shè)計和響應(yīng)式XHTML線框原型 
  從用戶的角度看，響應(yīng)式設(shè)計就是網(wǎng)頁內(nèi)容能自動改變大小和移動位置以適配顯示它們的屏幕。用戶使用任何設(shè)備訪問網(wǎng)站，獲得的網(wǎng)站內(nèi)容都是相同的，且網(wǎng)頁上展示的是全尺寸的文本，無須用戶縮放操作查看內(nèi)容。響應(yīng)式原型是內(nèi)置響應(yīng)式XHTML的線框圖，可使各種屏幕上的設(shè)計隨著設(shè)備寬度的變化而變換，其顯示效果與線框圖原型類似。區(qū)別在于布局是響應(yīng)式的，響應(yīng)式原型可調(diào)整瀏覽器窗口，在不同設(shè)備上查看原型，觀察布局是如何變化的。使用響應(yīng)式原型可以同時測試網(wǎng)站專題的欄目結(jié)構(gòu)和響應(yīng)式布局，起到加快網(wǎng)站開發(fā)的作用。 
  2 響應(yīng)式XHTML線框原型的設(shè)計實現(xiàn) 
  2.1 構(gòu)建代表性的XHTML頁面 
  具有代表性的Web頁面包括首頁、列表頁和內(nèi)容頁，這三種頁面相互鏈接就可以構(gòu)成完整的Web站點。首頁，即所有欄目集中顯示的頁面。列表頁是針對某一欄目而言的，即該欄目下的文檔以列表形式顯示出來的頁面。內(nèi)容頁，是用于顯示文檔具體內(nèi)容的頁面[2]。三種代表性Web頁面的頁面結(jié)構(gòu)都可劃分為頁頭、導(dǎo)航、主內(nèi)容區(qū)域和頁腳。其中，首頁的主內(nèi)容區(qū)域劃分為與一級欄目數(shù)量相同的多個區(qū)域，每個區(qū)域包括一級欄目名稱、鏈接地址、欄目文檔列表，以及欄目具體內(nèi)容的截取內(nèi)容。列表頁、內(nèi)容頁的主內(nèi)容區(qū)域均劃分為兩部分，都包括次級導(dǎo)航。列表頁的主內(nèi)容區(qū)域分為文檔列表和分頁鏈接，文檔列表包括標(biāo)題、責(zé)任者、日期等內(nèi)容。內(nèi)容頁的主內(nèi)容區(qū)域為文檔的詳細(xì)內(nèi)容，包括標(biāo)題、責(zé)任者、發(fā)布時間和正文等內(nèi)容。 
  構(gòu)建代表性的Web頁面的XHTML代碼，應(yīng)使用簡潔的語義化XHTML代碼，分離內(nèi)容和表現(xiàn)，不使用表現(xiàn)性元素，編寫的內(nèi)容應(yīng)該不借助CSS也能瀏覽，具有良好的閱讀性。響應(yīng)式設(shè)計的內(nèi)容先于布局，內(nèi)容采用線性設(shè)計的原則，突出重點內(nèi)容。用戶按照什么順序閱讀網(wǎng)頁內(nèi)容，XHTML代碼就應(yīng)該按什么順序編寫。如果沒有布局，所有的內(nèi)容就需要按照用戶想要它出現(xiàn)的順序編碼，也就是一塊內(nèi)容接一塊內(nèi)容地線性排列。 
  公共圖書館應(yīng)使用XHTML1.0構(gòu)建首頁、列表頁、內(nèi)容頁三種代表性頁面，其中列表頁內(nèi)容區(qū)域劃分為文本、圖片、文本圖片混排三種形式。響應(yīng)式設(shè)計中的媒體查詢是基于視口寬度的，在臺式電腦上視口是瀏覽器窗口去掉菜單、工具欄、滾動條的部分，在移動設(shè)備上視口的寬度就是屏幕的寬度。在XHTML代碼中添加將頁面渲染寬度設(shè)置為視口寬度的語句，能為后續(xù)響應(yīng)式布局作準(zhǔn)備，將構(gòu)建完成的代表性XHTML頁面作為響應(yīng)式原型開發(fā)的基礎(chǔ)頁面。 
  2.2 構(gòu)建包括實際內(nèi)容的XHTML頁面 
  公共圖書館使用內(nèi)容管理軟件建設(shè)維護網(wǎng)站，內(nèi)容管理軟件的工作原理是將網(wǎng)站的動態(tài)信息和彼此之間的關(guān)系存入數(shù)據(jù)庫，程序自動結(jié)合欄目模板（含有置標(biāo)的HTML）和文檔數(shù)據(jù)（數(shù)據(jù)庫中的數(shù)據(jù)），按照欄目規(guī)則生成網(wǎng)站各層次的XHTML靜態(tài)頁面和頁面鏈接，以靜態(tài)頁面的形式發(fā)布動態(tài)信息，完成網(wǎng)站的自動生成[3]。 
  在網(wǎng)站設(shè)計前，考慮網(wǎng)站內(nèi)容將幫助網(wǎng)站建設(shè)者創(chuàng)建一個符合網(wǎng)站目標(biāo)和用戶需要的網(wǎng)站，在網(wǎng)站設(shè)計時使用實際內(nèi)容有利于提高網(wǎng)站視覺設(shè)計的效果。響應(yīng)式設(shè)計的內(nèi)容先于布局，有內(nèi)容的XHTML頁面是進(jìn)行響應(yīng)式設(shè)計的基礎(chǔ)，公共圖書館借助內(nèi)容管理軟件的發(fā)布功能實現(xiàn)XHTML頁面內(nèi)容的添加、維護，進(jìn)而自動生成列表頁中的標(biāo)題列表和圖片列表。具體流程是：將代表性的XHTML頁面制作成內(nèi)容管理軟件的模板;在內(nèi)容管理軟件中添加網(wǎng)站專題規(guī)劃的一級欄目，并按照欄目的表現(xiàn)形式指定對應(yīng)的模板;將網(wǎng)站內(nèi)容、主導(dǎo)航、次級導(dǎo)航的代碼作為內(nèi)容管理軟件的文檔進(jìn)行管理，使用內(nèi)容管理軟件完成網(wǎng)站內(nèi)容的添加、維護以及導(dǎo)航代碼的維護;使用內(nèi)容管理軟件生成無樣式控制的、包含網(wǎng)站專題實際內(nèi)容的、可以互相鏈接的XHTML頁面，并將其作為響應(yīng)式原型CSS開發(fā)的基礎(chǔ)。   2.3 響應(yīng)式原型的設(shè)計實現(xiàn) 
  使用CSS完成響應(yīng)式XHTML線框原型的構(gòu)建，公共圖書館需要注意的是原型應(yīng)該只涉及頁面內(nèi)容布局及響應(yīng)式布局，不應(yīng)涉及視覺設(shè)計美化。 
  2.3.1 設(shè)計思想的確定。響應(yīng)式設(shè)計思想包括“從桌面端向下設(shè)計”和“從移動端向上設(shè)計”兩種形式?！皬淖烂娑讼蛳略O(shè)計”的思想，即Web頁面的默認(rèn)布局是臺式機瀏覽器中所看到的樣子，并利用CSS3媒體查詢針對移動設(shè)備的小屏幕簡化、調(diào)整布局。公共圖書館可采用“從桌面端向下設(shè)計”的思想，這種設(shè)計思想便于操作，并能對現(xiàn)有網(wǎng)站進(jìn)行響應(yīng)式改造。 
  2.3.2 創(chuàng)建核心體驗。公共圖書館采用“從桌面端向下設(shè)計”的思想，核心體驗應(yīng)設(shè)定為固定寬度桌面版的CSS樣式。將桌面版CSS樣式代碼集中在一個CSS樣式文件中，而將使用媒體查詢實現(xiàn)其他布局的CSS樣式代碼集中在另一個CSS樣式文件中。在這種情況下，公共圖書館只要在XHTML頁面代碼中移除實現(xiàn)響應(yīng)式布局的CSS文件引用，響應(yīng)式線框原型就會立即變成普通的線框圖原型。 
  2.3.3 確定斷點。斷點是響應(yīng)式設(shè)計的重要概念，用媒體查詢在斷點處改變布局設(shè)計，使設(shè)計產(chǎn)生不同的變體。公共圖書館應(yīng)根據(jù)內(nèi)容確定斷點及需要設(shè)置多少個斷點，而不是簡單地把常用設(shè)備的寬度設(shè)置為斷點。 
  2.3.4 對于不支持媒體查詢?yōu)g覽器的支持。使用條件注釋能實現(xiàn)IE8及以下版本瀏覽器對媒體查詢的支持，而忽略對其他不支持媒體查詢的非IE瀏覽器的支持，就是讓少數(shù)非IE用戶錯過媒體查詢這個功能。在響應(yīng)式原型初步開發(fā)完成后，開發(fā)人員可在瀏覽器中直接瀏覽原型，完成欄目結(jié)構(gòu)和響應(yīng)式布局的測試。 
  2.4 響應(yīng)式原型測試 
  2.4.1 內(nèi)容結(jié)構(gòu)測試。內(nèi)容開發(fā)人員使用包括網(wǎng)站專題內(nèi)容的響應(yīng)式XHTML原型，完成欄目結(jié)構(gòu)的測試、調(diào)整、再測試、再調(diào)整，最終構(gòu)建合理的欄目結(jié)構(gòu)，確定正式的欄目結(jié)構(gòu);調(diào)整首頁、列表頁、內(nèi)容頁內(nèi)容區(qū)域不同內(nèi)容的順序，按照重要內(nèi)容、次要內(nèi)容、最不重要內(nèi)容進(jìn)行線性排列，為正式的響應(yīng)式布局做好內(nèi)容準(zhǔn)備工作。 
  2.4.2 響應(yīng)式布局測試。在內(nèi)容結(jié)構(gòu)測試完成的基礎(chǔ)上，設(shè)計人員使用響應(yīng)式原型，測試響應(yīng)式布局，調(diào)整斷點設(shè)定，調(diào)整響應(yīng)式CSS代碼，為正式的視覺設(shè)計做好布局準(zhǔn)備。在響應(yīng)式布局測試完成的基礎(chǔ)上，設(shè)計人員會將最終實現(xiàn)各方認(rèn)可的響應(yīng)式原型作為后續(xù)網(wǎng)站專題開發(fā)的基礎(chǔ)，繼續(xù)進(jìn)行視覺設(shè)計、程序開發(fā)、內(nèi)容建設(shè)等一系列開發(fā)工作。 
  3 響應(yīng)式視覺設(shè)計的實現(xiàn) 
  3.1 響應(yīng)式視覺設(shè)計的實現(xiàn) 
  設(shè)計人員在響應(yīng)式原型測試完成的基礎(chǔ)上，會進(jìn)行正式的視覺設(shè)計。由于在視覺設(shè)計前，設(shè)計人員就已經(jīng)清楚每個頁面上需要顯示的信息，對內(nèi)容的關(guān)系理解更清晰，有助于視覺設(shè)計更貼近網(wǎng)站內(nèi)容和主題，以及更優(yōu)秀的視覺設(shè)計作品的產(chǎn)生。設(shè)計人員將包含實際網(wǎng)站內(nèi)容的響應(yīng)式XHTML線框原型頁面作為視覺設(shè)計的參考依據(jù)，在準(zhǔn)確把握網(wǎng)站主題和內(nèi)容的基礎(chǔ)上，能夠較容易地完成二至三種視覺設(shè)計，能夠提供給網(wǎng)站建設(shè)的決策者多種可供選擇的視覺設(shè)計。 
  3.2 響應(yīng)式視覺設(shè)計代碼的實現(xiàn) 
  響應(yīng)式線框原型已經(jīng)測試過響應(yīng)式布局，設(shè)計人員可跳過大部分響應(yīng)式布局的代碼工作，只需做一些代碼調(diào)整工作，將代碼工作的重點放在實現(xiàn)新的視覺設(shè)計實現(xiàn)方面，能夠以較快的速度完成響應(yīng)式代碼工作。公共圖書館將網(wǎng)站視覺設(shè)計放在網(wǎng)站開發(fā)建設(shè)的最后一步，能起到簡化網(wǎng)站開發(fā)的作用，突出網(wǎng)站內(nèi)容優(yōu)先的網(wǎng)站建設(shè)思路。 
  4 響應(yīng)式XHTML線框原型的使用效果 
  4.1 響應(yīng)式XHTML線框原型作為后續(xù)Web開發(fā)的基礎(chǔ)，內(nèi)容建設(shè)、視覺設(shè)計、技術(shù)開發(fā)應(yīng)并行工作，加快開發(fā)進(jìn)程 
  在網(wǎng)站專題的XHTML線框原型得到內(nèi)容建設(shè)人員、視覺設(shè)計人員和開發(fā)人員的認(rèn)可后，相關(guān)人員會在XHTML線框原型的基礎(chǔ)上并行開展工作，加快網(wǎng)站開發(fā)的進(jìn)程。具體的工作流程是：內(nèi)容建設(shè)人員使用內(nèi)容管理軟件中的欄目開始內(nèi)容建設(shè)，設(shè)計人員使用線框原型開始視覺設(shè)計，開發(fā)人員在線框原型的基礎(chǔ)上進(jìn)行技術(shù)開發(fā)。 
  4.2 響應(yīng)式XHTML線框原型測試更直觀，凸顯內(nèi)容，減少過度關(guān)注視覺設(shè)計 
  內(nèi)容開發(fā)人員借助可交互的響應(yīng)式XHTML線框原型，對欄目結(jié)構(gòu)進(jìn)行測試，并在測試基礎(chǔ)上對欄目結(jié)構(gòu)進(jìn)行調(diào)整。原型測試使開發(fā)人員的注意力集中在網(wǎng)站專題欄目結(jié)構(gòu)是否合理，內(nèi)容是否得到充分展示等問題上，將網(wǎng)站建設(shè)的重點放在內(nèi)容規(guī)劃和開發(fā)上。 
  4.3 使用內(nèi)容管理軟件發(fā)布XHTML原型頁面，欄目結(jié)構(gòu)調(diào)整更方便，節(jié)省XHTML代碼工作的時間 
  通過在內(nèi)容管理軟件中建立與專題欄目對應(yīng)的欄目，建立包括導(dǎo)航代碼和網(wǎng)站內(nèi)容的文檔，即可在短時間內(nèi)完成網(wǎng)站專題XHTML頁面的構(gòu)建。通過簡單地增加、修改、刪除欄目，修改包括導(dǎo)航代碼和專題內(nèi)容的文檔，重新發(fā)布整個專題欄目，即可完成XHTML線框頁面欄目結(jié)構(gòu)和內(nèi)容的調(diào)整，減少了XHTML代碼修改的工作，減少了使用網(wǎng)頁制作軟件維護XHTML網(wǎng)頁代碼的工作，提高了工作效率。 
  4.4 XHTML代碼重用，使用CSS設(shè)計 
  在線框原型階段采取保存和重用XHTML代碼的目的完成工作，將線框原型的XHTML代碼作為開發(fā)基礎(chǔ)，使用一個或多個CSS對原型進(jìn)行布局、調(diào)色及排版，無須修改任何XHTML代碼，可以快速改變視覺設(shè)計。 
公共圖書館借助響應(yīng)式原型的設(shè)計最終實現(xiàn)其網(wǎng)站的響應(yīng)式設(shè)計，通過響應(yīng)式設(shè)計能夠向用戶提供更好的訪問體驗，向使用不同設(shè)備（包括手機、平板電腦、臺式機）的訪問用戶提供相同的網(wǎng)站內(nèi)容，使用移動設(shè)備的用戶無須通過縮放操作查看文本內(nèi)容。響應(yīng)式設(shè)計還能夠避免用戶訪問手機版網(wǎng)站和桌面版網(wǎng)站而獲得不同的內(nèi)容，避免網(wǎng)站建設(shè)人員維護手機版、桌面版等多個網(wǎng)站。