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