張　雷　　熊　賁　　李佐斌(.長(zhǎng)江水利委員會(huì) 宣傳與出版中心 ，湖北 武漢　43000；.長(zhǎng)江水利委員會(huì) 網(wǎng)絡(luò)與信息中心，湖北 武漢　43000)

?

運(yùn)行與管理

新媒體環(huán)境下政務(wù)網(wǎng)站的重構(gòu)

張雷1熊賁2李佐斌2(1.長(zhǎng)江水利委員會(huì) 宣傳與出版中心 ，湖北 武漢430010；2.長(zhǎng)江水利委員會(huì) 網(wǎng)絡(luò)與信息中心，湖北 武漢430010)

摘要：為了適應(yīng)政務(wù)網(wǎng)站移動(dòng)互聯(lián)網(wǎng)Web設(shè)計(jì)需求，以長(zhǎng)江水利網(wǎng)為例，描述了該政務(wù)網(wǎng)站現(xiàn)有的架構(gòu)特點(diǎn)以及重構(gòu)的策略，提出了響應(yīng)式Web設(shè)計(jì)的觀點(diǎn)，為實(shí)現(xiàn)"一源多屏"Web設(shè)計(jì)提供了網(wǎng)站重構(gòu)的方案?？蔀橐苿?dòng)互聯(lián)網(wǎng)設(shè)計(jì)和重構(gòu)提供技術(shù)框架和思路。

關(guān)鍵詞：響應(yīng)式；HTML5; CSS3；Web 設(shè)計(jì); 政務(wù)網(wǎng)站

1問題的提出

新媒體是新技術(shù)支撐體系下出現(xiàn)的媒體形態(tài)，如數(shù)字雜志、數(shù)字報(bào)紙、數(shù)字廣播、手機(jī)微信、移動(dòng)電視、桌面視窗、觸摸媒體等。新媒體首先必須有革新，包括技術(shù)革新、形式革新和理念革新。筆者認(rèn)為理念革新更為重要，因?yàn)樗切旅襟w定義的核心內(nèi)容，具有“數(shù)字技術(shù)、互聯(lián)網(wǎng)技術(shù)、移動(dòng)通信技術(shù)”的技術(shù)維度和“雙向傳播、用戶創(chuàng)造內(nèi)容”的傳播維度兩個(gè)指標(biāo)。

我國政務(wù)網(wǎng)站都具有普遍共性，本文試以長(zhǎng)江水利委員會(huì)(以下簡(jiǎn)稱長(zhǎng)江委)政務(wù)網(wǎng)站為例，針對(duì)這類網(wǎng)站存在的問題，在理念革新的前提下，通過HTML5+CSS3技術(shù)手段，使用響應(yīng)式網(wǎng)頁設(shè)計(jì)重構(gòu)政務(wù)網(wǎng)站，努力從架構(gòu)設(shè)計(jì)上最大程度地解決其存在的問題。

2政務(wù)網(wǎng)站架構(gòu)現(xiàn)狀

2.1　網(wǎng)站主體架構(gòu)

長(zhǎng)江水利網(wǎng)作為長(zhǎng)江委的主體網(wǎng)站，以快速反映長(zhǎng)江流域水事新聞、委內(nèi)日常行政管理工作為己任。網(wǎng)站內(nèi)容由新聞中心、政務(wù)之窗、在線服務(wù)、互動(dòng)平臺(tái)組成，技術(shù)架構(gòu)以Linux平臺(tái)下Nginx提供Web服務(wù)，網(wǎng)頁設(shè)計(jì)采用內(nèi)容與樣式分離的方式(DIV+CSS)的方式，系統(tǒng)已安全運(yùn)行多年。TRS WCM提供內(nèi)容管理平臺(tái)，以提供信息服務(wù)為主，部分互動(dòng)功能還有待完善，沒有真正意義上移動(dòng)互聯(lián)網(wǎng)應(yīng)用，不能滿足新媒體應(yīng)用的要求。然而通過改造可以很容易地過度到高性能的HTML5，與具有媒體感知能力的CSS3(Cascading StyleSheet)巧妙結(jié)合，重構(gòu)具有媒體感知能力的水利政務(wù)網(wǎng)站。

2.2　主站嵌套網(wǎng)站

2006年12月長(zhǎng)江委為提高公共服務(wù)能力和事權(quán)管理效能，構(gòu)建行為規(guī)范、運(yùn)轉(zhuǎn)協(xié)調(diào)、公開透明、廉潔高效的流域水行政管理體制，按照中辦、國辦以及水利部《關(guān)于進(jìn)一步推行政務(wù)公開的意見》的要求和部署，開通了“長(zhǎng)江委政務(wù)公開網(wǎng)”。網(wǎng)站開通以來一直使用IP地址加端口的方式對(duì)外提供服務(wù)，不便于基于域名管理的搜索引擎收錄，致使新聞信息大多引用長(zhǎng)江水利網(wǎng)的稿件、界面風(fēng)格樣式多年未更新，內(nèi)容樣式混合不清等。為滿足政務(wù)網(wǎng)站測(cè)評(píng)的要求，將網(wǎng)上辦事功能及公開目錄以嵌套的方式在長(zhǎng)江水利網(wǎng)上呈現(xiàn)。此外，采用嵌套方式的還有長(zhǎng)江委水文局的實(shí)時(shí)水雨情信息等。此類嵌套網(wǎng)頁外鏈后會(huì)影響用戶體驗(yàn)，降低對(duì)長(zhǎng)江水利網(wǎng)的綜合評(píng)價(jià)。

2.3　微信公眾號(hào)鏈接

2014年7月，長(zhǎng)江水利網(wǎng)開通了微信公眾號(hào)“美麗長(zhǎng)江”。堅(jiān)持每日一期圖文并茂的微信推送，以關(guān)注長(zhǎng)江的生態(tài)與建設(shè)，為公眾提供更生動(dòng)更貼近更精彩的長(zhǎng)江新聞資訊，致力于打造一個(gè)互動(dòng)性更強(qiáng)的交流溝通平臺(tái)。目前粉絲數(shù)量超過1 000。

同時(shí)，在該網(wǎng)策劃的多期專題中都對(duì)微信公眾號(hào)進(jìn)行了宣傳。在2014年舉辦的“尋找最美一線職工”網(wǎng)上投票活動(dòng)中，實(shí)現(xiàn)了桌面與移動(dòng)互動(dòng)投票，職工反響很好。美中不足的是微信與該網(wǎng)網(wǎng)頁的鏈接效果不理想，需要手機(jī)用戶不斷拖拽網(wǎng)頁或者縮放大小，才能正常顯示。為此，本文致力于研究響應(yīng)式網(wǎng)頁設(shè)計(jì)重構(gòu)政務(wù)網(wǎng)站的建設(shè)。

3政務(wù)網(wǎng)站的重構(gòu)策略

3.1　門戶網(wǎng)站與部門網(wǎng)站職能劃分

首先，規(guī)范各類政府網(wǎng)站的界定與分工，分別建設(shè)以信息服務(wù)和以網(wǎng)上辦事為主的政府網(wǎng)站；其次，信息服務(wù)類網(wǎng)站應(yīng)盡可能由較高級(jí)別政府部門建設(shè)，并整合所有下屬機(jī)關(guān)和下級(jí)政府機(jī)關(guān)的信息；最后，網(wǎng)上辦事類網(wǎng)站由具有一定行政管理職能或相關(guān)專業(yè)背景的部門或單位建設(shè)[1-2]。

按照國辦發(fā)〔2015〕15號(hào)文的要求，關(guān)閉長(zhǎng)江委機(jī)關(guān)所有的部門網(wǎng)站，所有稿件統(tǒng)一由長(zhǎng)江委宣傳出版中心負(fù)責(zé)內(nèi)容管理。通過一系列專業(yè)的采編審流程，強(qiáng)化長(zhǎng)江水利網(wǎng)的權(quán)威、規(guī)范、有序的信息服務(wù)，發(fā)揮網(wǎng)絡(luò)宣傳陣地優(yōu)勢(shì)，為治江事業(yè)營(yíng)造更好的輿論氛圍。網(wǎng)上辦事類依托原政務(wù)公開網(wǎng)有關(guān)行政許可及網(wǎng)上辦事功能板塊，歸并原來重復(fù)建設(shè)的信息服務(wù)板塊，機(jī)關(guān)各職能部門可以集中精力為政務(wù)公開提供更好的在線服務(wù)。

3.2　移動(dòng)優(yōu)先重構(gòu)政務(wù)網(wǎng)站

根據(jù)CNNIC第36次互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r調(diào)查結(jié)果，截止2015年6月，中國手機(jī)網(wǎng)民的總規(guī)模達(dá)5.94億，較2014年12月增加了3 679萬人，其中使用手機(jī)上網(wǎng)的人群占比由 2014年12月的85.8%提升至88.9%，農(nóng)村地區(qū)新增網(wǎng)民中，使用手機(jī)上網(wǎng)的達(dá)69.2%，而且在未來數(shù)年，手機(jī)上網(wǎng)依然是帶動(dòng)農(nóng)村地區(qū)網(wǎng)民增長(zhǎng)的主要?jiǎng)恿ΑＭㄟ^臺(tái)式電腦、筆記本電腦和平板電腦接入互聯(lián)網(wǎng)的比例均有下降。隨著手機(jī)終端大屏化及其應(yīng)用體驗(yàn)的不斷提升，手機(jī)作為網(wǎng)民主要上網(wǎng)終端的趨勢(shì)進(jìn)一步明顯[3]。

3.3　一站式融合重構(gòu)網(wǎng)站數(shù)據(jù)庫

對(duì)政府網(wǎng)站的相關(guān)評(píng)估調(diào)查表明，我國政府網(wǎng)站中有48%尚未提供搜索服務(wù)或者搜索功能不可用，47%網(wǎng)站的站內(nèi)搜索只能夠搜到有關(guān)工作會(huì)議的相關(guān)動(dòng)態(tài)信息，只有5%的網(wǎng)站能夠在搜索結(jié)果的前幾頁查找到相關(guān)辦事服務(wù)資源[4-5]。第一次全國政府網(wǎng)站普查發(fā)現(xiàn)，一些網(wǎng)站便捷性、實(shí)用性亟待提升。部分網(wǎng)站沒有提供規(guī)范清晰的服務(wù)流程，缺少可供下載的必要表格和文件，不能提供實(shí)用有效的申報(bào)、查詢等辦事服務(wù)；14.7%的網(wǎng)站互動(dòng)功能缺失，政府與公眾交流缺少有效途徑；還有一些網(wǎng)站結(jié)構(gòu)混亂、頁面繁多、不便使用，給公眾查找政府信息、網(wǎng)上辦事帶來較大困難[6]。

上述問題與現(xiàn)有政務(wù)網(wǎng)站架構(gòu)存在的問題有關(guān)，從頭梳理需要很長(zhǎng)的周期和大量的投入，而依托先進(jìn)的政務(wù)網(wǎng)站管理平臺(tái)整合遷移相關(guān)數(shù)據(jù)庫是解決問題的途徑之一，也可分步實(shí)施將嵌入的功能站點(diǎn)相關(guān)內(nèi)容在現(xiàn)有內(nèi)容管理平臺(tái)上作標(biāo)題鏈接引用，這樣在本站標(biāo)題檢索中可以很容易查詢到相關(guān)內(nèi)容；為便于必要表格和文件下載，在保證及時(shí)更新的前提下，轉(zhuǎn)載原文到主站。

利用HTML5跨系統(tǒng)跨平臺(tái)的特性，在被引用嵌套網(wǎng)頁增加主站統(tǒng)一規(guī)范的CSS3樣式表，為響應(yīng)式設(shè)計(jì)打下基礎(chǔ)。這類方案投入少、見效快，有的僅需負(fù)責(zé)前端開發(fā)的工程師配合即可，如果將來系統(tǒng)遷移，僅對(duì)樣式表這部分代碼作少量修改還可以重復(fù)使用。政務(wù)服務(wù)功能分類檢索項(xiàng)目?jī)?nèi)容可控，基本上可快速融合具有引導(dǎo)功能的政務(wù)服務(wù)信息到主站數(shù)據(jù)庫，便于搜索引擎收錄以及本站集中檢索。

4響應(yīng)式設(shè)計(jì)技術(shù)

響應(yīng)式網(wǎng)頁設(shè)計(jì)最先由伊?！ゑR科特(Ethan Marcotte)提出。他將3種已有的開發(fā)技巧(彈性網(wǎng)格布局、彈性圖片、媒體和媒體查詢)整合起來，并命名為響應(yīng)式網(wǎng)頁設(shè)計(jì)。該術(shù)語還有一堆表意相同的其他名稱，如流式設(shè)計(jì)、彈性布局、塑料布局、流體設(shè)計(jì)、自適應(yīng)布局、跨設(shè)備設(shè)計(jì)以及彈性設(shè)計(jì)[5]。

響應(yīng)式網(wǎng)頁設(shè)計(jì)(后節(jié)描述概念)要求優(yōu)先考慮手機(jī)移動(dòng)網(wǎng)頁，這種“移動(dòng)優(yōu)先”思想很適宜采納最簡(jiǎn)潔、最有效和最具語義的代碼。在響應(yīng)式Web布局設(shè)計(jì)時(shí)，媒體查詢順序?yàn)閺囊苿?dòng)端向上設(shè)計(jì)，優(yōu)先建立移動(dòng)設(shè)備用戶體驗(yàn)，然后針對(duì)更大屏幕顯示器進(jìn)行調(diào)整，以避免移動(dòng)終端對(duì)媒體查詢的支持不完善，即在樣式表的開頭定義基本樣式，然后使用媒體查詢，從低分辨率到高分辨率來重寫樣式，以覆蓋前面定義的樣式。

本文描述的響應(yīng)式設(shè)計(jì)是基于HTML5豐富語義的網(wǎng)頁標(biāo)簽組織網(wǎng)頁，應(yīng)用CSS3媒體查詢功能配合一組不同分辨率的樣式表，使網(wǎng)頁感知不同媒體(判斷是移動(dòng)終端還是桌面終端)的分辨率，作出相應(yīng)合理的布局調(diào)整。

何軍：是的，尤其是阿里旗下的菜鳥一直在這方面進(jìn)行運(yùn)作，包括今年的參股香港樞紐建設(shè)等等。深層次的原因我不愿意進(jìn)行過度的解讀，但是我想說的是阿里很明白物流對(duì)于阿里未來發(fā)展的意義，尤其是大物流概念，包括同城配送、外賣市場(chǎng)、供應(yīng)鏈等。包括阿里打造國家智能物流骨干網(wǎng)絡(luò)的提法，都表示了阿里對(duì)物流領(lǐng)域的高度看中，以及深度參與的決心。阿里的很多并購邏輯都是由此而展開。

4.1　HTML5

HTML5即萬維網(wǎng)的核心語言，是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML)的第5次重大修改。2014年10月29日，該標(biāo)準(zhǔn)規(guī)范終于制定完成。

在創(chuàng)建可以通過W3C標(biāo)準(zhǔn)驗(yàn)證的頁面時(shí)，HTML5強(qiáng)調(diào)簡(jiǎn)化標(biāo)簽，僅鏈接必須的圖片文件。智能手機(jī)用戶也只能使用有限的帶寬訪問頁面。而響應(yīng)式設(shè)計(jì)的一個(gè)主要目標(biāo)就是，網(wǎng)站不僅要對(duì)用戶有限的視窗作出響應(yīng)，還要以最快的速度加載網(wǎng)頁。

較之上一個(gè)版本HTML(HTML 4.0.1)，HTML5 進(jìn)行了很大的改進(jìn)，提供了許多新特性。HTML5含義豐富的新語義更利于搜索引擎收錄，也可以在表單提交等基本網(wǎng)頁交互場(chǎng)景中對(duì)用戶做出反饋，一般不再需要復(fù)雜的JavaScript表單處理流程，可為響應(yīng)式設(shè)計(jì)創(chuàng)建更加簡(jiǎn)潔和快速的代碼。

4.2　CSS3

CSS即層疊樣式表，在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)可有效實(shí)現(xiàn)對(duì)頁面的布局、字體、顏色、背景和其他效果更加精確的控制。只要對(duì)相應(yīng)代碼做一些簡(jiǎn)單修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本，其語言開發(fā)為模塊化。以前的規(guī)范作為一個(gè)模塊確實(shí)太龐大且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來，包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

前端工程師可使用響應(yīng)式前端開發(fā)框架，簡(jiǎn)化開發(fā)過程，確保開發(fā)網(wǎng)站具有跨瀏覽器、一致性、響應(yīng)式等特點(diǎn)。如果需要一種快速搭建響應(yīng)式網(wǎng)站結(jié)構(gòu)的方法，可以考慮響應(yīng)式前端開發(fā)框架(如Columnal 這樣的CSS 網(wǎng)格系統(tǒng))。筆者不建議使用該框架，熟練掌握CSS3語法，使用起來將更靈活自由。

4.3　至關(guān)重要的媒體查詢

如果沒有CSS3媒體查詢模塊，就不能針對(duì)設(shè)備特性(如視窗寬度)設(shè)置特定的CSS樣式。媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性條件表達(dá)式組成，它是根據(jù)媒體類型、屏幕寬度、屏幕比例、設(shè)備方向(橫向或縱向)等各種功能特性來改變頁面布局。使用媒體查詢可以在不改變頁面內(nèi)容的情況下，為特定輸出設(shè)備定制顯示效果。

媒體查詢表達(dá)式由設(shè)備類型和一個(gè)或多個(gè)檢測(cè)媒體特性的聲明構(gòu)成，可以將其想象成對(duì)瀏覽器的提問。如果瀏覽器回答“是”，則應(yīng)用樣式；如果回答“否”，則不應(yīng)用樣式。相對(duì)于CSS2，媒體查詢可能要問更多問題。

5網(wǎng)站重構(gòu)幾個(gè)關(guān)鍵點(diǎn)

5.1　依可訪問性選擇界面布局與元素

從用戶的角度入手，從社會(huì)心理學(xué)層面對(duì)政府網(wǎng)站的可訪問性進(jìn)行研究探討。通過對(duì)30個(gè)國內(nèi)重點(diǎn)省市政府網(wǎng)站以及20個(gè)較常見的國外國家級(jí)和市級(jí)政府網(wǎng)站的網(wǎng)站界面布局與元素的放置位置進(jìn)行調(diào)研及統(tǒng)計(jì)分析，概括出在政府網(wǎng)站中采用最多的4種界面布局和常見的5種網(wǎng)站界面元素，及其在4種界面布局中可能的分布位置。通過偏好調(diào)研及分析，給出了最佳網(wǎng)站界面布局與界面元素放置位置組合方案(見圖1)，可為政府網(wǎng)站的優(yōu)化設(shè)計(jì)提供參考[7]。

圖1　網(wǎng)站界面布局與界面元素放置位置組合方案

長(zhǎng)江水利網(wǎng)現(xiàn)有布局表現(xiàn)為分類目錄不在首頁呈現(xiàn)，容易使用戶迷惑；搜索引擎位置不規(guī)范，不便于移動(dòng)界面設(shè)計(jì)搜索引擎位置漂移，因此需要將“信息搜索框”提到上部較醒目的位置，將“分類目錄”移到左側(cè)比較醒目的位置。

5.2　從移動(dòng)端網(wǎng)頁設(shè)計(jì)開始思考桌面設(shè)計(jì)

正如伊?！ゑR科特等人所表述，真正的響應(yīng)式設(shè)計(jì)方法不僅僅是根據(jù)視口大小改變網(wǎng)頁布局，相反，它要從整體上顛覆當(dāng)前的設(shè)計(jì)網(wǎng)頁。以往先是對(duì)桌面電腦進(jìn)行固定寬度設(shè)計(jì)，然后將其縮小并對(duì)小屏幕進(jìn)行內(nèi)容重排；現(xiàn)在首先應(yīng)對(duì)小屏幕進(jìn)行設(shè)計(jì)，然后逐步增強(qiáng)對(duì)大屏幕的設(shè)計(jì)和內(nèi)容[8]。

此外，在設(shè)計(jì)網(wǎng)頁之初，要跟美工設(shè)計(jì)充分溝通，比如合理布局，有的研究者認(rèn)為應(yīng)該從適應(yīng)最小分辨率設(shè)備開始設(shè)計(jì)線框模型，然后測(cè)試圖片素材。相比傳統(tǒng)的Web視覺設(shè)計(jì)過程，Web設(shè)計(jì)師必須時(shí)刻保持警惕，關(guān)注功能性組件的可用性、保證圖文信息在所有設(shè)備中都容易辨讀[8]。筆者認(rèn)為，這樣反倒使美工困惑；若能避免一些不必要的設(shè)計(jì)，即可提高工作效率。比如上述“分類目錄”和搜索引擎位置不規(guī)范問題，在平面設(shè)計(jì)時(shí)給予注意即可。

5.3　拋棄固定寬度設(shè)計(jì)想法

僅使用媒體查詢來適應(yīng)不同視口的固定寬度設(shè)計(jì)，只會(huì)從一組CSS 媒體查詢規(guī)則突變到另一組，兩者之間沒有任何平滑漸變。伊?！ゑR科特采用的(流動(dòng)布局、彈性圖片和媒體查詢)技術(shù)并不新穎，但基于一套完整統(tǒng)一的方法論，將這些理念進(jìn)行應(yīng)用則很有創(chuàng)造性。而且，這種網(wǎng)頁設(shè)計(jì)新方法在實(shí)際應(yīng)用中可以做到：①使用百分比布局創(chuàng)建流動(dòng)的彈性界面;②使用媒體查詢來限制元素的變動(dòng)范圍。這兩者相組合即構(gòu)成響應(yīng)式設(shè)計(jì)的核心，可以創(chuàng)造出真正完美的設(shè)計(jì)。

固定寬度設(shè)計(jì)不僅是指?jìng)鹘y(tǒng)網(wǎng)頁設(shè)計(jì)中常用的以像素為單位的寬度設(shè)計(jì)，還包括字號(hào)，在寬度設(shè)計(jì)里應(yīng)該換算成百分比，字號(hào)換算縮放。一個(gè)簡(jiǎn)易可行的公式可將固定像素寬度或文字縮放轉(zhuǎn)換為對(duì)應(yīng)的百分比寬度：目標(biāo)元素寬度/上下文元素寬度=百分比寬度。例如，#header(目標(biāo)元素)被包裹在#wrapper(上下文元素)中。因此，用#header 的寬度(940 像素)除以上下文元素(#wrapper)的寬度(960 像素)，結(jié)果是0.979 166 667。將小數(shù)點(diǎn)向右移動(dòng)2位轉(zhuǎn)換為百分比值，就得到頭部的百分比寬度，即97.916 666 7%，在CSS樣式表里描述為width: 97.916 666 7%; /* 940 ÷ 960 */。

同樣地，目標(biāo)元素尺寸/上下文元素尺寸=百分比尺寸,該公式也適用于將文字的像素單位轉(zhuǎn)換為相對(duì)單位。值得注意的是，現(xiàn)代瀏覽器的默認(rèn)文字大都是16 像素(顯式聲明的除外)。例如，body的font-size是16px就是1em，則#logo原來的font-size的48px可改為3em; /* 48 ÷ 16 = 3*/。

6問題討論

(1) 政務(wù)網(wǎng)站重構(gòu)不是簡(jiǎn)單的新技術(shù)標(biāo)準(zhǔn)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用，而是理念上的革新。在革新層面上，響應(yīng)式設(shè)計(jì)與“互聯(lián)網(wǎng)+政務(wù)服務(wù)”有著異曲同工的作用，政務(wù)網(wǎng)站服務(wù)公眾與響應(yīng)網(wǎng)頁設(shè)計(jì)適應(yīng)移動(dòng)應(yīng)用同樣重要，便于媒體查詢即便于移動(dòng)應(yīng)用，符合互聯(lián)網(wǎng)應(yīng)用中新增網(wǎng)民的特征，適應(yīng)社會(huì)發(fā)展趨勢(shì)，用技術(shù)手段打造更加親民的陽光政務(wù)。

(2) 漸進(jìn)增強(qiáng)以恪守Web 標(biāo)準(zhǔn)的標(biāo)簽為基礎(chǔ)，意味著它在所有瀏覽器中均可用。通過CSS 樣式和必要的JavaScript，為更先進(jìn)的瀏覽器提供漸進(jìn)式的增強(qiáng)體驗(yàn)。標(biāo)準(zhǔn)瀏覽器如Chrome、Safari、Firefox 在渲染使用HTML5 和CSS3制作的網(wǎng)頁時(shí)，效果基本一致。目前，大多數(shù)智能手機(jī)使用的是和桌面版Safari、Chrome 一樣的Webkit 內(nèi)核，所以其渲染效果滿足要求，唯有IE8以下的微軟瀏覽器不完全識(shí)別CSS3標(biāo)準(zhǔn)需要補(bǔ)丁應(yīng)用。然而目前國內(nèi)使用IE8的用戶僅有8%左右，它即將退出歷史舞臺(tái)。

7結(jié)語

對(duì)長(zhǎng)江水利網(wǎng)采用響應(yīng)式網(wǎng)頁設(shè)計(jì)技術(shù)重構(gòu)網(wǎng)站進(jìn)行了一些試驗(yàn)性探索, 為政務(wù)網(wǎng)站的建設(shè)提供了一種新的解決方案。該方案具有一次開發(fā)就能適應(yīng)所有移動(dòng)終端的擴(kuò)展性, 相對(duì)于以前專門為移動(dòng)設(shè)備創(chuàng)建一套網(wǎng)站更為靈活、便捷,提升了網(wǎng)站在不同設(shè)備上內(nèi)容的一致性和用戶體驗(yàn)的流暢度。由于長(zhǎng)江水利網(wǎng)站鏈接到的外部數(shù)據(jù)庫系統(tǒng)還沒實(shí)現(xiàn)響應(yīng)式, 給移動(dòng)端使用帶來不良體驗(yàn)。但隨著響應(yīng)式網(wǎng)頁設(shè)計(jì)技術(shù)應(yīng)用越來越廣泛, 技術(shù)也在不斷成熟和完善, 未來將會(huì)有廣闊的應(yīng)用和發(fā)展空間。

參考文獻(xiàn)：

[1]劉合翔. 政府網(wǎng)站用戶行為特征及其應(yīng)用研究[D].北京：北京大學(xué)，2012.

[2]王婷. 精簡(jiǎn)與整合中國政府網(wǎng)站的構(gòu)想[J]. 現(xiàn)代交際，2011, (6):99.

[3]中國互聯(lián)網(wǎng)絡(luò)信息中心. 第36次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告 [R]. 北京：中國互聯(lián)網(wǎng)絡(luò)信息中心，2015.

[4]中國軟件評(píng)測(cè)中心.2012 年中國政府網(wǎng)站績(jī)效評(píng)估結(jié)果[R].北京：中國軟件評(píng)測(cè)中心，2013.

[5](英)Ben Frain. 響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].北京：人民郵電出版社，2013.

[6]國務(wù)院辦公廳. 國務(wù)院辦公廳關(guān)于第一次全國政府網(wǎng)站普查情況的通報(bào)[R].北京：國務(wù)院辦公廳，2015.

[7]孫銘麗，吳鵬，張紅. 基于用戶心智模型的政府網(wǎng)站可訪問性研究[J]. 情報(bào)理論與實(shí)踐，2012, (10): 75-80.

[8]趙建保. 響應(yīng)式Web設(shè)計(jì)關(guān)鍵技術(shù)及設(shè)計(jì)流程[J]. 電腦知識(shí)與技術(shù)，2014,(2):10.

(編輯：李慧)

作者簡(jiǎn)介：張雷, 男，長(zhǎng)江水利委員會(huì)宣傳與出版中心，館員.

收稿日期：2015-12-05

中圖法分類號(hào)：TP3

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：1006-0081(2016)01-0035-04