李悅

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

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

中圖分類號：G258.2文獻標識碼：A文章編號：1003-1588（2019）02-0012-03

隨著公共圖書館專題數(shù)據(jù)庫、網(wǎng)站專題建設數(shù)量的增加，如何合理規(guī)劃專題數(shù)據(jù)庫及網(wǎng)站專題的內(nèi)容結(jié)構(gòu)是其在網(wǎng)站開發(fā)中亟須解決的問題。網(wǎng)站建設的目的是為了向網(wǎng)站使用者揭示特定主題的內(nèi)容，有序組織和揭示內(nèi)容。用戶訪問網(wǎng)站是為了獲取信息，網(wǎng)站的視覺設計及編程技術(shù)都是為網(wǎng)站內(nèi)容服務的。傳統(tǒng)的網(wǎng)站開發(fā)流程先進行視覺設計，再填充內(nèi)容，內(nèi)容總是處于次要狀態(tài)，常常無法滿足用戶的需要。響應式XHTML線框原型的設計實現(xiàn)方法使公共圖書館能夠在網(wǎng)站專題欄目規(guī)劃完成后，建立起可交互的未經(jīng)視覺美化的響應式XHTML線框原型。使用響應式線框原型測試、調(diào)整欄目結(jié)構(gòu)，使網(wǎng)站開發(fā)過程能更專注于專題數(shù)據(jù)庫和網(wǎng)站專題內(nèi)容的有序組織和揭示，符合以內(nèi)容為主導的網(wǎng)站開發(fā)建設思路，體現(xiàn)了先進的網(wǎng)站建設方法。使用響應式原型測試響應式布局，可以在測試的基礎上最終實現(xiàn)專題數(shù)據(jù)庫和網(wǎng)站專題的響應式設計。

1?XHTML線框圖原型和響應式設計

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)容建設人員及相關人員盡早參與Web開發(fā)的一個工具。XHTML線框圖原型可以起到改善內(nèi)容規(guī)劃和設計的作用，當用戶與XHTML線框圖原型進行交互時，用戶參與其中能更好地理解上下文。

1.2?響應式設計和響應式XHTML線框原型

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

2?響應式XHTML線框原型的設計實現(xiàn)

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

具有代表性的Web頁面包括首頁、列表頁和內(nèi)容頁，這三種頁面相互鏈接就可以構(gòu)成完整的Web站點。首頁，即所有欄目集中顯示的頁面。列表頁是針對某一欄目而言的，即該欄目下的文檔以列表形式顯示出來的頁面。內(nèi)容頁，是用于顯示文檔具體內(nèi)容的頁面[2]。三種代表性Web頁面的頁面結(jié)構(gòu)都可劃分為頁頭、導航、主內(nèi)容區(qū)域和頁腳。其中，首頁的主內(nèi)容區(qū)域劃分為與一級欄目數(shù)量相同的多個區(qū)域，每個區(qū)域包括一級欄目名稱、鏈接地址、欄目文檔列表，以及欄目具體內(nèi)容的截取內(nèi)容。列表頁、內(nèi)容頁的主內(nèi)容區(qū)域均劃分為兩部分，都包括次級導航。列表頁的主內(nèi)容區(qū)域分為文檔列表和分頁鏈接，文檔列表包括標題、責任者、日期等內(nèi)容。內(nèi)容頁的主內(nèi)容區(qū)域為文檔的詳細內(nèi)容，包括標題、責任者、發(fā)布時間和正文等內(nèi)容。

構(gòu)建代表性的Web頁面的XHTML代碼，應使用簡潔的語義化XHTML代碼，分離內(nèi)容和表現(xiàn)，不使用表現(xiàn)性元素，編寫的內(nèi)容應該不借助CSS也能瀏覽，具有良好的閱讀性。響應式設計的內(nèi)容先于布局，內(nèi)容采用線性設計的原則，突出重點內(nèi)容。用戶按照什么順序閱讀網(wǎng)頁內(nèi)容，XHTML代碼就應該按什么順序編寫。如果沒有布局，所有的內(nèi)容就需要按照用戶想要它出現(xiàn)的順序編碼，也就是一塊內(nèi)容接一塊內(nèi)容地線性排列。

公共圖書館應使用XHTML1.0構(gòu)建首頁、列表頁、內(nèi)容頁三種代表性頁面，其中列表頁內(nèi)容區(qū)域劃分為文本、圖片、文本圖片混排三種形式。響應式設計中的媒體查詢是基于視口寬度的，在臺式電腦上視口是瀏覽器窗口去掉菜單、工具欄、滾動條的部分，在移動設備上視口的寬度就是屏幕的寬度。在XHTML代碼中添加將頁面渲染寬度設置為視口寬度的語句，能為后續(xù)響應式布局作準備，將構(gòu)建完成的代表性XHTML頁面作為響應式原型開發(fā)的基礎頁面。

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

公共圖書館使用內(nèi)容管理軟件建設維護網(wǎng)站，內(nèi)容管理軟件的工作原理是將網(wǎng)站的動態(tài)信息和彼此之間的關系存入數(shù)據(jù)庫，程序自動結(jié)合欄目模板（含有置標的HTML）和文檔數(shù)據(jù)（數(shù)據(jù)庫中的數(shù)據(jù)），按照欄目規(guī)則生成網(wǎng)站各層次的XHTML靜態(tài)頁面和頁面鏈接，以靜態(tài)頁面的形式發(fā)布動態(tài)信息，完成網(wǎng)站的自動生成[3]。

在網(wǎng)站設計前，考慮網(wǎng)站內(nèi)容將幫助網(wǎng)站建設者創(chuàng)建一個符合網(wǎng)站目標和用戶需要的網(wǎng)站，在網(wǎng)站設計時使用實際內(nèi)容有利于提高網(wǎng)站視覺設計的效果。響應式設計的內(nèi)容先于布局，有內(nèi)容的XHTML頁面是進行響應式設計的基礎，公共圖書館借助內(nèi)容管理軟件的發(fā)布功能實現(xiàn)XHTML頁面內(nèi)容的添加、維護，進而自動生成列表頁中的標題列表和圖片列表。具體流程是：將代表性的XHTML頁面制作成內(nèi)容管理軟件的模板;在內(nèi)容管理軟件中添加網(wǎng)站專題規(guī)劃的一級欄目，并按照欄目的表現(xiàn)形式指定對應的模板;將網(wǎng)站內(nèi)容、主導航、次級導航的代碼作為內(nèi)容管理軟件的文檔進行管理，使用內(nèi)容管理軟件完成網(wǎng)站內(nèi)容的添加、維護以及導航代碼的維護;使用內(nèi)容管理軟件生成無樣式控制的、包含網(wǎng)站專題實際內(nèi)容的、可以互相鏈接的XHTML頁面，并將其作為響應式原型CSS開發(fā)的基礎。

2.3?響應式原型的設計實現(xiàn)

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

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

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

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

2.3.4?對于不支持媒體查詢?yōu)g覽器的支持。使用條件注釋能實現(xiàn)IE8及以下版本瀏覽器對媒體查詢的支持，而忽略對其他不支持媒體查詢的非IE瀏覽器的支持，就是讓少數(shù)非IE用戶錯過媒體查詢這個功能。在響應式原型初步開發(fā)完成后，開發(fā)人員可在瀏覽器中直接瀏覽原型，完成欄目結(jié)構(gòu)和響應式布局的測試。

2.4?響應式原型測試

2.4.1?內(nèi)容結(jié)構(gòu)測試。內(nèi)容開發(fā)人員使用包括網(wǎng)站專題內(nèi)容的響應式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)容進行線性排列，為正式的響應式布局做好內(nèi)容準備工作。

2.4.2?響應式布局測試。在內(nèi)容結(jié)構(gòu)測試完成的基礎上，設計人員使用響應式原型，測試響應式布局，調(diào)整斷點設定，調(diào)整響應式CSS代碼，為正式的視覺設計做好布局準備。在響應式布局測試完成的基礎上，設計人員會將最終實現(xiàn)各方認可的響應式原型作為后續(xù)網(wǎng)站專題開發(fā)的基礎，繼續(xù)進行視覺設計、程序開發(fā)、內(nèi)容建設等一系列開發(fā)工作。

3?響應式視覺設計的實現(xiàn)

3.1?響應式視覺設計的實現(xiàn)

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

3.2?響應式視覺設計代碼的實現(xiàn)

響應式線框原型已經(jīng)測試過響應式布局，設計人員可跳過大部分響應式布局的代碼工作，只需做一些代碼調(diào)整工作，將代碼工作的重點放在實現(xiàn)新的視覺設計實現(xiàn)方面，能夠以較快的速度完成響應式代碼工作。公共圖書館將網(wǎng)站視覺設計放在網(wǎng)站開發(fā)建設的最后一步，能起到簡化網(wǎng)站開發(fā)的作用，突出網(wǎng)站內(nèi)容優(yōu)先的網(wǎng)站建設思路。

4?響應式XHTML線框原型的使用效果

4.1?響應式XHTML線框原型作為后續(xù)Web開發(fā)的基礎，內(nèi)容建設、視覺設計、技術(shù)開發(fā)應并行工作，加快開發(fā)進程

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

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

內(nèi)容開發(fā)人員借助可交互的響應式XHTML線框原型，對欄目結(jié)構(gòu)進行測試，并在測試基礎上對欄目結(jié)構(gòu)進行調(diào)整。原型測試使開發(fā)人員的注意力集中在網(wǎng)站專題欄目結(jié)構(gòu)是否合理，內(nèi)容是否得到充分展示等問題上，將網(wǎng)站建設的重點放在內(nèi)容規(guī)劃和開發(fā)上。

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

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

4.4?XHTML代碼重用，使用CSS設計

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

5?結(jié)語

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

參考文獻：

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

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

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

（編校：孫新梅）