響應(yīng)式網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)

張 超

（安康學(xué)院 電子與信息工程系，陜西安康，725000）

1 響應(yīng)式WEB設(shè)計(jì)概述

1.1 響應(yīng)式WEB設(shè)計(jì)理念

響應(yīng)式Web設(shè)計(jì)的理念是所設(shè)計(jì)的網(wǎng)頁(yè)能夠響應(yīng)設(shè)備環(huán)境，從而對(duì)頁(yè)面內(nèi)容布局進(jìn)行合理調(diào)整，最終向用戶提供友好的Web上網(wǎng)體驗(yàn)。具體實(shí)踐響應(yīng)式設(shè)計(jì)由多方面技術(shù)組成，包括彈性網(wǎng)格和布局、響應(yīng)式圖片、CSS3中媒體查詢屬性等[1]。采用響應(yīng)式Web設(shè)計(jì)的網(wǎng)站，就省去了需要為不同設(shè)備做專門版本的設(shè)計(jì)與開(kāi)發(fā)工作。

1.2 響應(yīng)式WEB設(shè)計(jì)的優(yōu)點(diǎn)和劣勢(shì)

如果你網(wǎng)站采用的技術(shù)是響應(yīng)式Web技術(shù)，你就不用再為網(wǎng)站在不同設(shè)備終端的顯示效果而擔(dān)心。響應(yīng)式Web設(shè)計(jì)確保用戶一直擁有良好的體驗(yàn)效果，這也是響應(yīng)式設(shè)計(jì)的初衷。其次，網(wǎng)站運(yùn)營(yíng)維護(hù)的成本將會(huì)減小，且在不同設(shè)備間的兼容性強(qiáng)，操作靈活。

響應(yīng)式網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)工作比較繁多復(fù)雜，且Web前端設(shè)計(jì)人員對(duì)美的感知能力也需要加強(qiáng)。再者，開(kāi)發(fā)響應(yīng)式網(wǎng)站需要從草圖開(kāi)始重新設(shè)計(jì)網(wǎng)站結(jié)構(gòu)。最后，由于響應(yīng)式設(shè)計(jì)是一種復(fù)雜的新技術(shù)，在一些老舊的設(shè)備和瀏覽器中會(huì)出現(xiàn)，加載頁(yè)面速度過(guò)慢，或是存在完全不支持等問(wèn)題。

1.3 響應(yīng)式網(wǎng)站規(guī)劃設(shè)計(jì)中需要解決的問(wèn)題

首先，HTML5的一部分特性與制作更好的響應(yīng)式網(wǎng)頁(yè)直接相關(guān)，如簡(jiǎn)潔的代碼。HTML5強(qiáng)調(diào)簡(jiǎn)化標(biāo)簽，僅鏈接那些我們必須的CSS、JavaScript和圖片文件。智能手機(jī)用戶只能使用有限的帶寬訪問(wèn)我們的頁(yè)面，而響應(yīng)式設(shè)計(jì)的一個(gè)主要目的就是，網(wǎng)站不僅要對(duì)用戶所使用設(shè)備的有限屏幕視口做出響應(yīng)，還要以最快的速度加載網(wǎng)頁(yè)。雖然移除冗余的標(biāo)簽元素只能節(jié)省一點(diǎn)字節(jié)，但積少成多直至最后節(jié)省出一片大空間。

其次，采用CSS3的不僅能讓頁(yè)面看起來(lái)酷炫異常，還可以讓響應(yīng)式網(wǎng)站加載速度更快，加載所需資源更少，網(wǎng)站在以后更容易維護(hù)和修改。CSS3所蘊(yùn)含的海量利好及精簡(jiǎn)之道，可以讓我們將響應(yīng)式設(shè)計(jì)從“一個(gè)普通的可響應(yīng)式網(wǎng)站”提升為“一個(gè)面向未來(lái)的真正響應(yīng)式網(wǎng)站”。

最后，Bootstrap是一種HTML、CSS和JS框架，是最受歡迎的用于開(kāi)發(fā)響應(yīng)式布局、開(kāi)發(fā)移動(dòng)設(shè)備優(yōu)先的WEB項(xiàng)目。Bootstrap讓前端開(kāi)發(fā)更快速、簡(jiǎn)單。所有開(kāi)發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。

2《心隨我悅》響應(yīng)式網(wǎng)站的具體開(kāi)發(fā)流程

2.1 網(wǎng)站的開(kāi)發(fā)環(huán)境及工具

本網(wǎng)站使用Adobe Dreamweaver CS6軟件。本網(wǎng)站運(yùn)行的服務(wù)器環(huán)境是在WIN7，32位操作系統(tǒng)下，安裝微軟公司提供的基于Microsoft Windows的互聯(lián)網(wǎng)基本服務(wù)即IIS服務(wù)器以及ACCESS數(shù)據(jù)庫(kù)，運(yùn)用ASP動(dòng)態(tài)語(yǔ)言，制作主題為“心隨跑悅”的響應(yīng)式網(wǎng)站。

2.2 網(wǎng)站開(kāi)發(fā)的關(guān)鍵技術(shù)

（1）媒體查詢。響應(yīng)式設(shè)計(jì)的主要方法是使用CSS3媒體查詢屬性。媒體查詢包含了一個(gè)媒體類型和媒體屬性，其中媒體屬性如CSS3規(guī)范中描述的包含一個(gè)或多個(gè)表達(dá)式。媒體查詢的功能是為每種不同類型的用戶提供最佳的Web體驗(yàn)。

CSS3媒體查詢屬性，已在Safari 3、Firefox 3.5和Opera 7瀏覽器中得到支持[3]。其測(cè)試的屬性包括：設(shè)備屏幕寬高，屏幕視口的寬高，設(shè)備屏幕分辨率等。這些屬性可以通過(guò)與或非等邏輯運(yùn)算符，構(gòu)成復(fù)雜的表達(dá)式。以此判斷目標(biāo)的設(shè)備類型，從而加載相應(yīng)樣式、調(diào)整頁(yè)面布局、提供適合的功能和交互。

（2）Bootstrap框架和Bootstrap的柵格布局系統(tǒng)。Bootstrap來(lái)自Twitter是目前最受歡迎的前端框架。它簡(jiǎn)潔靈活，使得Web開(kāi)發(fā)更加快捷。Bootstrap是基于HTML5和CSS3開(kāi)發(fā)的，它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，它包含了豐富的Web組件和自帶了13個(gè)jQuery插件。Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它就是通過(guò)一系列的行（row）與列（column）的組合創(chuàng)建頁(yè)面布局，然后你的內(nèi)容就可以放入到你創(chuàng)建好的布局當(dāng)中。

2.3 網(wǎng)站欄目版塊的設(shè)計(jì)和部分關(guān)鍵代碼

響應(yīng)式設(shè)計(jì)應(yīng)該遵循移動(dòng)優(yōu)先的原則，但嚴(yán)格來(lái)說(shuō)，項(xiàng)目從小屏幕入手過(guò)渡到大屏幕（移動(dòng)優(yōu)先），還是從大屏幕入手過(guò)渡到小屏幕（臺(tái)式桌面優(yōu)先）區(qū)別不大。該網(wǎng)站采取的臺(tái)式桌面優(yōu)先。網(wǎng)站以“心隨跑悅”為主題，圍繞著“跑步”這一話題分成了跑步指南、悅跑地帶、營(yíng)養(yǎng)健身、跑友圖秀、聯(lián)系我們幾大板塊。以下以三個(gè)欄目的設(shè)計(jì)為例進(jìn)行說(shuō)明：

（1）首頁(yè)欄目設(shè)計(jì)。網(wǎng)站的首頁(yè)，乃至整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格是采用扁平化設(shè)計(jì)。扁平化設(shè)計(jì)的核心理念就是：去掉冗余的裝飾，讓“信息”本身作為核心被凸顯出來(lái)，且界面干凈美觀，操作簡(jiǎn)潔。網(wǎng)站首頁(yè)的第一屏內(nèi)容是運(yùn)用jQuery代碼編寫的，實(shí)現(xiàn)圖片輪流顯示功能的特效。圖片淪陷切換代碼（部分）如下,頁(yè)面效果如圖1所示。

var x_sortResolutions = function(){

for(var i=0;i＜o(jì)ptions.length-1;i++){

var i_max = i;

for(var j=i+1;j＜o(jì)ptions.length;j++)

if(options[j].resolution＞options[i_max].resolution){

i_max = j;

}

if(i_max＞i){

var temp = options[i];

options[i]= options[i_max];

options[i_max]= temp;

}

}

}

如圖1 首頁(yè)第一屏內(nèi)容

（2）跑步指南欄目設(shè)計(jì)。本欄目的網(wǎng)頁(yè)設(shè)計(jì)是采用左右傳統(tǒng)布局，使網(wǎng)站的結(jié)構(gòu)格外清晰，主次內(nèi)容一目了然。本頁(yè)面設(shè)計(jì)特色之處在于，采用Bootstrap的Tab標(biāo)簽，可以制作出標(biāo)簽頁(yè)切換的效果，為頁(yè)面增添人機(jī)交互動(dòng)態(tài)效果，實(shí)現(xiàn)Tab標(biāo)簽代碼結(jié)構(gòu)如下，頁(yè)面效果如圖2所示。

＜div class="tabs"＞

＜ul class="nav nav-tabs" id="myTab"＞

＜li class="active"＞＜a href="#tab1"＞ 熱門活動(dòng)＜/a＞＜/li＞

＜li＞＜a href="#tab2"＞ 跑鞋推薦 ＜/a＞＜/li＞

＜li＞＜a href="#tab3"＞ 裝備測(cè)評(píng) ＜/a＞＜/li＞

＜/ul＞

＜div class="tab-content"＞

＜div class="tab-pane active" id="tab1"＞＜/div＞

＜div class="tab-pane" id="tab2"＞＜/div＞

＜div class="tab-pane" id="tab3"＞＜/div＞

＜/div＞

＜/div＞

如圖2 跑步指南頁(yè)面

（3）聯(lián)系我們欄目設(shè)計(jì)。“聯(lián)系我們”欄目用于收集用戶提出的寶貴意見(jiàn)，其頁(yè)面實(shí)現(xiàn)了前端頁(yè)面與后臺(tái)Access數(shù)據(jù)庫(kù)的鏈接，代碼如下:

＜%

dim Con

dim MM_conn_STRING

MM_conn_STRING="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("mydb.mdb")

set Con=server.CreateObject("ADODB.Connection")

Con.ConnectionString=MM_conn_STRING

Con.open

%＞

2.4 移動(dòng)終端設(shè)備的兼容顯示測(cè)試

本網(wǎng)站的測(cè)試工具選擇的是最新版本的谷歌瀏覽器。在PC上使用Chrome谷歌瀏覽器模擬手機(jī)瀏覽器是一件非常簡(jiǎn)單的事情，最新Chrome瀏覽器都提供了這項(xiàng)功能，可以模擬Anroid、iPhone、黑莓等等多款手機(jī)。

3 小結(jié)

響應(yīng)式網(wǎng)站在未來(lái)的發(fā)展前途是光明的，是網(wǎng)站發(fā)展的大勢(shì)所趨。在這個(gè)日新月異的時(shí)代，尤其是對(duì)于互聯(lián)網(wǎng)行業(yè)來(lái)說(shuō)，更新?lián)Q代的速度很快，我們需要不斷了解新的理念和學(xué)習(xí)新的技術(shù)，這樣才能設(shè)計(jì)與制作出效果出眾、人機(jī)交互豐富且更具人性化的網(wǎng)站。

[1]許中博.“響應(yīng)式”網(wǎng)頁(yè)布局設(shè)計(jì)淺析[J].黑龍江科技信息,2012(26):106-109.

[2]張樹(shù)明.基于響應(yīng)式web設(shè)計(jì)網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化,2013,(6):125-127.