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