公共圖書館網(wǎng)站響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)

李悅

關(guān)鍵詞：響應(yīng)式設(shè)計(jì);響應(yīng)式原型;XHTML線框圖;CSS3媒體查詢;內(nèi)容管理軟件

摘?要：文章根據(jù)公共圖書館專題數(shù)據(jù)庫和網(wǎng)站專題建設(shè)中內(nèi)容結(jié)構(gòu)規(guī)劃的需要，通過使用XHTML和CSS構(gòu)建代表性網(wǎng)站頁面，使用CSS3媒體查詢，借助內(nèi)容管理軟件，構(gòu)建可交互的響應(yīng)式XHTML線框原型，在線框原型內(nèi)容結(jié)構(gòu)和響應(yīng)式布局測試基礎(chǔ)上實(shí)現(xiàn)響應(yīng)式視覺設(shè)計(jì)，起到協(xié)助內(nèi)容規(guī)劃、網(wǎng)站開發(fā)及加快網(wǎng)站建設(shè)的作用。

中圖分類號：G258.2文獻(xiàn)標(biāo)識碼：A文章編號：1003-1588（2019）02-0012-03

隨著公共圖書館專題數(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è)計(jì)及編程技術(shù)都是為網(wǎng)站內(nèi)容服務(wù)的。傳統(tǒng)的網(wǎng)站開發(fā)流程先進(jìn)行視覺設(shè)計(jì)，再填充內(nèi)容，內(nèi)容總是處于次要狀態(tài)，常常無法滿足用戶的需要。響應(yīng)式XHTML線框原型的設(shè)計(jì)實(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ǔ)上最終實(shí)現(xiàn)專題數(shù)據(jù)庫和網(wǎng)站專題的響應(yīng)式設(shè)計(jì)。

1?XHTML線框圖原型和響應(yīng)式設(shè)計(jì)

1.1?XHTML線框圖原型

線框圖指網(wǎng)站每個(gè)頁面內(nèi)容的梗概，能顯示信息的層級結(jié)構(gòu)及需要的空間。創(chuàng)建線框圖可保證頁面中包含它需要的所有信息。線框圖不包括網(wǎng)站的配色方案、背景或圖像等內(nèi)容，主要著眼于每個(gè)頁面需要什么樣的信息，并創(chuàng)建視覺層次結(jié)構(gòu)以表明每個(gè)頁面中最重要的部分[1]。線框圖是讓網(wǎng)站內(nèi)容建設(shè)人員及相關(guān)人員盡早參與Web開發(fā)的一個(gè)工具。XHTML線框圖原型可以起到改善內(nèi)容規(guī)劃和設(shè)計(jì)的作用，當(dāng)用戶與XHTML線框圖原型進(jìn)行交互時(shí)，用戶參與其中能更好地理解上下文。

1.2?響應(yīng)式設(shè)計(jì)和響應(yīng)式XHTML線框原型

從用戶的角度看，響應(yīng)式設(shè)計(jì)就是網(wǎng)頁內(nèi)容能自動改變大小和移動位置以適配顯示它們的屏幕。用戶使用任何設(shè)備訪問網(wǎng)站，獲得的網(wǎng)站內(nèi)容都是相同的，且網(wǎng)頁上展示的是全尺寸的文本，無須用戶縮放操作查看內(nèi)容。響應(yīng)式原型是內(nèi)置響應(yīng)式XHTML的線框圖，可使各種屏幕上的設(shè)計(jì)隨著設(shè)備寬度的變化而變換，其顯示效果與線框圖原型類似。區(qū)別在于布局是響應(yīng)式的，響應(yīng)式原型可調(diào)整瀏覽器窗口，在不同設(shè)備上查看原型，觀察布局是如何變化的。使用響應(yīng)式原型可以同時(shí)測試網(wǎng)站專題的欄目結(jié)構(gòu)和響應(yīng)式布局，起到加快網(wǎng)站開發(fā)的作用。

2?響應(yīng)式XHTML線框原型的設(shè)計(jì)實(shí)現(xiàn)

2.1?構(gòu)建代表性的XHTML頁面

具有代表性的Web頁面包括首頁、列表頁和內(nèi)容頁，這三種頁面相互鏈接就可以構(gòu)成完整的Web站點(diǎn)。首頁，即所有欄目集中顯示的頁面。列表頁是針對某一欄目而言的，即該欄目下的文檔以列表形式顯示出來的頁面。內(nèi)容頁，是用于顯示文檔具體內(nèi)容的頁面[2]。三種代表性Web頁面的頁面結(jié)構(gòu)都可劃分為頁頭、導(dǎo)航、主內(nèi)容區(qū)域和頁腳。其中，首頁的主內(nèi)容區(qū)域劃分為與一級欄目數(shù)量相同的多個(gè)區(qū)域，每個(gè)區(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ū)域?yàn)槲臋n的詳細(xì)內(nèi)容，包括標(biāo)題、責(zé)任者、發(fā)布時(shí)間和正文等內(nèi)容。

構(gòu)建代表性的Web頁面的XHTML代碼，應(yīng)使用簡潔的語義化XHTML代碼，分離內(nèi)容和表現(xiàn)，不使用表現(xiàn)性元素，編寫的內(nèi)容應(yīng)該不借助CSS也能瀏覽，具有良好的閱讀性。響應(yīng)式設(shè)計(jì)的內(nèi)容先于布局，內(nèi)容采用線性設(shè)計(jì)的原則，突出重點(diǎn)內(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è)計(jì)中的媒體查詢是基于視口寬度的，在臺式電腦上視口是瀏覽器窗口去掉菜單、工具欄、滾動條的部分，在移動設(shè)備上視口的寬度就是屏幕的寬度。在XHTML代碼中添加將頁面渲染寬度設(shè)置為視口寬度的語句，能為后續(xù)響應(yīng)式布局作準(zhǔn)備，將構(gòu)建完成的代表性XHTML頁面作為響應(yīng)式原型開發(fā)的基礎(chǔ)頁面。

2.2?構(gòu)建包括實(shí)際內(nèi)容的XHTML頁面

公共圖書館使用內(nèi)容管理軟件建設(shè)維護(hù)網(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è)計(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)站視覺設(shè)計(jì)的效果。響應(yīng)式設(shè)計(jì)的內(nèi)容先于布局，有內(nèi)容的XHTML頁面是進(jìn)行響應(yīng)式設(shè)計(jì)的基礎(chǔ)，公共圖書館借助內(nèi)容管理軟件的發(fā)布功能實(shí)現(xiàn)XHTML頁面內(nèi)容的添加、維護(hù)，進(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)容的添加、維護(hù)以及導(dǎo)航代碼的維護(hù);使用內(nèi)容管理軟件生成無樣式控制的、包含網(wǎng)站專題實(shí)際內(nèi)容的、可以互相鏈接的XHTML頁面，并將其作為響應(yīng)式原型CSS開發(fā)的基礎(chǔ)。

2.3?響應(yīng)式原型的設(shè)計(jì)實(shí)現(xiàn)

使用CSS完成響應(yīng)式XHTML線框原型的構(gòu)建，公共圖書館需要注意的是原型應(yīng)該只涉及頁面內(nèi)容布局及響應(yīng)式布局，不應(yīng)涉及視覺設(shè)計(jì)美化。

2.3.1?設(shè)計(jì)思想的確定。響應(yīng)式設(shè)計(jì)思想包括“從桌面端向下設(shè)計(jì)”和“從移動端向上設(shè)計(jì)”兩種形式?！皬淖烂娑讼蛳略O(shè)計(jì)”的思想，即Web頁面的默認(rèn)布局是臺式機(jī)瀏覽器中所看到的樣子，并利用CSS3媒體查詢針對移動設(shè)備的小屏幕簡化、調(diào)整布局。公共圖書館可采用“從桌面端向下設(shè)計(jì)”的思想，這種設(shè)計(jì)思想便于操作，并能對現(xiàn)有網(wǎng)站進(jìn)行響應(yīng)式改造。

2.3.2?創(chuàng)建核心體驗(yàn)。公共圖書館采用“從桌面端向下設(shè)計(jì)”的思想，核心體驗(yàn)應(yīng)設(shè)定為固定寬度桌面版的CSS樣式。將桌面版CSS樣式代碼集中在一個(gè)CSS樣式文件中，而將使用媒體查詢實(shí)現(xiàn)其他布局的CSS樣式代碼集中在另一個(gè)CSS樣式文件中。在這種情況下，公共圖書館只要在XHTML頁面代碼中移除實(shí)現(xiàn)響應(yīng)式布局的CSS文件引用，響應(yīng)式線框原型就會立即變成普通的線框圖原型。

2.3.3?確定斷點(diǎn)。斷點(diǎn)是響應(yīng)式設(shè)計(jì)的重要概念，用媒體查詢在斷點(diǎn)處改變布局設(shè)計(jì)，使設(shè)計(jì)產(chǎn)生不同的變體。公共圖書館應(yīng)根據(jù)內(nèi)容確定斷點(diǎn)及需要設(shè)置多少個(gè)斷點(diǎn)，而不是簡單地把常用設(shè)備的寬度設(shè)置為斷點(diǎn)。

2.3.4?對于不支持媒體查詢?yōu)g覽器的支持。使用條件注釋能實(shí)現(xiàn)IE8及以下版本瀏覽器對媒體查詢的支持，而忽略對其他不支持媒體查詢的非IE瀏覽器的支持，就是讓少數(shù)非IE用戶錯(cuò)過媒體查詢這個(gè)功能。在響應(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è)計(jì)人員使用響應(yīng)式原型，測試響應(yīng)式布局，調(diào)整斷點(diǎn)設(shè)定，調(diào)整響應(yīng)式CSS代碼，為正式的視覺設(shè)計(jì)做好布局準(zhǔn)備。在響應(yīng)式布局測試完成的基礎(chǔ)上，設(shè)計(jì)人員會將最終實(shí)現(xiàn)各方認(rèn)可的響應(yīng)式原型作為后續(xù)網(wǎng)站專題開發(fā)的基礎(chǔ)，繼續(xù)進(jìn)行視覺設(shè)計(jì)、程序開發(fā)、內(nèi)容建設(shè)等一系列開發(fā)工作。

3?響應(yīng)式視覺設(shè)計(jì)的實(shí)現(xiàn)

3.1?響應(yīng)式視覺設(shè)計(jì)的實(shí)現(xiàn)

設(shè)計(jì)人員在響應(yīng)式原型測試完成的基礎(chǔ)上，會進(jìn)行正式的視覺設(shè)計(jì)。由于在視覺設(shè)計(jì)前，設(shè)計(jì)人員就已經(jīng)清楚每個(gè)頁面上需要顯示的信息，對內(nèi)容的關(guān)系理解更清晰，有助于視覺設(shè)計(jì)更貼近網(wǎng)站內(nèi)容和主題，以及更優(yōu)秀的視覺設(shè)計(jì)作品的產(chǎn)生。設(shè)計(jì)人員將包含實(shí)際網(wǎng)站內(nèi)容的響應(yīng)式XHTML線框原型頁面作為視覺設(shè)計(jì)的參考依據(jù)，在準(zhǔn)確把握網(wǎng)站主題和內(nèi)容的基礎(chǔ)上，能夠較容易地完成二至三種視覺設(shè)計(jì)，能夠提供給網(wǎng)站建設(shè)的決策者多種可供選擇的視覺設(shè)計(jì)。

3.2?響應(yīng)式視覺設(shè)計(jì)代碼的實(shí)現(xiàn)

響應(yīng)式線框原型已經(jīng)測試過響應(yīng)式布局，設(shè)計(jì)人員可跳過大部分響應(yīng)式布局的代碼工作，只需做一些代碼調(diào)整工作，將代碼工作的重點(diǎn)放在實(shí)現(xiàn)新的視覺設(shè)計(jì)實(shí)現(xiàn)方面，能夠以較快的速度完成響應(yīng)式代碼工作。公共圖書館將網(wǎng)站視覺設(shè)計(jì)放在網(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è)計(jì)、技術(shù)開發(fā)應(yīng)并行工作，加快開發(fā)進(jìn)程

在網(wǎng)站專題的XHTML線框原型得到內(nèi)容建設(shè)人員、視覺設(shè)計(jì)人員和開發(fā)人員的認(rèn)可后，相關(guān)人員會在XHTML線框原型的基礎(chǔ)上并行開展工作，加快網(wǎng)站開發(fā)的進(jìn)程。具體的工作流程是：內(nèi)容建設(shè)人員使用內(nèi)容管理軟件中的欄目開始內(nèi)容建設(shè)，設(shè)計(jì)人員使用線框原型開始視覺設(shè)計(jì)，開發(fā)人員在線框原型的基礎(chǔ)上進(jìn)行技術(shù)開發(fā)。

4.2?響應(yīng)式XHTML線框原型測試更直觀，凸顯內(nèi)容，減少過度關(guān)注視覺設(shè)計(jì)

內(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è)的重點(diǎn)放在內(nèi)容規(guī)劃和開發(fā)上。

4.3?使用內(nèi)容管理軟件發(fā)布XHTML原型頁面，欄目結(jié)構(gòu)調(diào)整更方便，節(jié)省XHTML代碼工作的時(shí)間

通過在內(nèi)容管理軟件中建立與專題欄目對應(yīng)的欄目，建立包括導(dǎo)航代碼和網(wǎng)站內(nèi)容的文檔，即可在短時(shí)間內(nèi)完成網(wǎng)站專題XHTML頁面的構(gòu)建。通過簡單地增加、修改、刪除欄目，修改包括導(dǎo)航代碼和專題內(nèi)容的文檔，重新發(fā)布整個(gè)專題欄目，即可完成XHTML線框頁面欄目結(jié)構(gòu)和內(nèi)容的調(diào)整，減少了XHTML代碼修改的工作，減少了使用網(wǎng)頁制作軟件維護(hù)XHTML網(wǎng)頁代碼的工作，提高了工作效率。

4.4?XHTML代碼重用，使用CSS設(shè)計(jì)

在線框原型階段采取保存和重用XHTML代碼的目的完成工作，將線框原型的XHTML代碼作為開發(fā)基礎(chǔ)，使用一個(gè)或多個(gè)CSS對原型進(jìn)行布局、調(diào)色及排版，無須修改任何XHTML代碼，可以快速改變視覺設(shè)計(jì)。

5?結(jié)語

公共圖書館借助響應(yīng)式原型的設(shè)計(jì)最終實(shí)現(xiàn)其網(wǎng)站的響應(yīng)式設(shè)計(jì)，通過響應(yīng)式設(shè)計(jì)能夠向用戶提供更好的訪問體驗(yàn)，向使用不同設(shè)備（包括手機(jī)、平板電腦、臺式機(jī)）的訪問用戶提供相同的網(wǎng)站內(nèi)容，使用移動設(shè)備的用戶無須通過縮放操作查看文本內(nèi)容。響應(yīng)式設(shè)計(jì)還能夠避免用戶訪問手機(jī)版網(wǎng)站和桌面版網(wǎng)站而獲得不同的內(nèi)容，避免網(wǎng)站建設(shè)人員維護(hù)手機(jī)版、桌面版等多個(gè)網(wǎng)站。

參考文獻(xiàn)：

[1] Duckett J.HTML&CSS設(shè)計(jì)與構(gòu)建網(wǎng)站[M].北京：清華大學(xué)出版社，2013：452.

[2] 喬冰琴.網(wǎng)站項(xiàng)目規(guī)劃與設(shè)計(jì)[M].北京：清華大學(xué)出版社，2009：36.

[3] 劉運(yùn)臣.網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)[M].北京：清華大學(xué)出版社，2009：80.

（編校：孫新梅）