基于響應(yīng)式布局的英語(yǔ)學(xué)習(xí)網(wǎng)站前端設(shè)計(jì)與實(shí)現(xiàn)

魏尊亮

【摘 要】如何做好一個(gè)英語(yǔ)學(xué)習(xí)網(wǎng)站的前端設(shè)計(jì)？首先應(yīng)該以需求分析為基礎(chǔ)，樹立響應(yīng)式布局的核心理念，運(yùn)用HTML、CSS、JavaScript技術(shù)，結(jié)合前端框架Bootstrap和jQuery庫(kù)，還要用到Sublime Text和Adobe Illustrator等開發(fā)工具。這樣，一個(gè)嶄新的英語(yǔ)學(xué)習(xí)網(wǎng)站的前端設(shè)計(jì)即可圓滿實(shí)現(xiàn)。

【Abstract】How to complete the design of the front end of an English learning website？ First of all， we should take the requirement analysis as the basis， set up the core concept of the response layout， use HTML， CSS， JavaScript technology， combine the front frame Bootstrap and jQuery library， and also use Sublime Text and Adobe Illustrator and other development tools. In this way， a brand-new design of the front end of an English learning website can be successfully implemented.

【關(guān)鍵詞】前端設(shè)計(jì)；學(xué)習(xí)網(wǎng)站；響應(yīng)式頁(yè)面設(shè)計(jì)；Bootstrap

【Keywords】front-end design； learning website， responsive web design， Bootstrap

【中圖分類號(hào)】P393；G633.41 【文獻(xiàn)標(biāo)志碼】A 【文章編號(hào)】1673-1069（2018）08-0187-02

1 引言

越來(lái)越多網(wǎng)絡(luò)英語(yǔ)學(xué)習(xí)者出現(xiàn)，慢慢形成了擁有眾多學(xué)習(xí)用戶的學(xué)習(xí)網(wǎng)站，它們以自己獨(dú)特的優(yōu)勢(shì)，吸引著越來(lái)越多的英語(yǔ)學(xué)習(xí)者投入到這種新型的語(yǔ)言學(xué)習(xí)環(huán)境中去。英語(yǔ)學(xué)習(xí)網(wǎng)站能夠提供給學(xué)習(xí)者一個(gè)良好的平臺(tái)，使學(xué)習(xí)者能夠自由地共享資源。英語(yǔ)學(xué)習(xí)網(wǎng)站能夠使學(xué)習(xí)用戶根據(jù)自己的實(shí)際情況，自主掌控其學(xué)習(xí)進(jìn)度，這種新型的學(xué)習(xí)方式剛好是我們所需要的。

英語(yǔ)學(xué)習(xí)網(wǎng)站資源是傳統(tǒng)英語(yǔ)學(xué)習(xí)所沒(méi)有的，更重要的是英語(yǔ)學(xué)習(xí)網(wǎng)站中的資源和信息具有權(quán)威性，能夠確保學(xué)習(xí)者在學(xué)習(xí)英語(yǔ)的過(guò)程中獲取最有用和最感興趣的話題和信息，避免英語(yǔ)學(xué)習(xí)的誤區(qū)，自我測(cè)驗(yàn)的題目和答案都是經(jīng)過(guò)仔細(xì)校準(zhǔn)的，一方面提高學(xué)習(xí)者的信心，另一方面也是對(duì)在線英語(yǔ)網(wǎng)站的一種發(fā)展[1]。

因此，在這樣的大背景下，設(shè)計(jì)并制作針對(duì)大學(xué)生學(xué)習(xí)英語(yǔ)的網(wǎng)站，以英語(yǔ)學(xué)習(xí)的幾大主要方面——聽、說(shuō)、讀、寫為網(wǎng)站主要組成部分，進(jìn)行資源整合，讓英語(yǔ)學(xué)習(xí)者快捷地在一個(gè)網(wǎng)站上接觸到多種英語(yǔ)資源，以多種方式進(jìn)行學(xué)習(xí)。網(wǎng)站以前端框架Bootstrap為基礎(chǔ)進(jìn)行前端開發(fā)，制作出響應(yīng)式的網(wǎng)頁(yè)，以滿足移動(dòng)端的需求。

2 網(wǎng)站前端開發(fā)的常用技術(shù)和工具

網(wǎng)站前端開發(fā)技術(shù)主要是HTML。除此之外，還有CSS（層疊樣式表）。CSS是一種使表現(xiàn)形式和內(nèi)容分離，包括布局，顏色和字體等等的技術(shù)。優(yōu)先級(jí)由層次結(jié)構(gòu)決定級(jí)聯(lián)效果。另外，JavaScript也是WEB前端開發(fā)技術(shù)，幾乎所有現(xiàn)代Web瀏覽器都支持它而無(wú)需插件[2]。Bootstrap也是一種網(wǎng)站前端開發(fā)技術(shù)。Bootstrap用于創(chuàng)建響應(yīng)式、移動(dòng)端優(yōu)先的免費(fèi)和開源的前端Web框架，由Twitter推出，一直是GitHub上的熱門開源項(xiàng)目[3]。有的網(wǎng)站制作也把Query用作前端開發(fā)技術(shù)。它是一個(gè)JavaScript框架[4]，該框架豐富的成熟插件可供開發(fā)者使用[5]。

網(wǎng)站前端開發(fā)使用的工具有兩個(gè)。一個(gè)是Sublime Text。另一個(gè)是Adobe Illustrator CC，用它可精準(zhǔn)、方便地設(shè)計(jì)出網(wǎng)頁(yè)LOGO。

3 英文學(xué)習(xí)網(wǎng)站需求分析

英文學(xué)習(xí)網(wǎng)站屬于綜合性的英語(yǔ)學(xué)習(xí)網(wǎng)站，分為聽力、口語(yǔ)、閱讀、寫作四個(gè)板塊，面向的主要用戶群為大學(xué)生，因此英文學(xué)習(xí)資源要在高校學(xué)生的學(xué)習(xí)范圍之內(nèi)，包括最常見的英語(yǔ)資源。在頁(yè)面內(nèi)容的設(shè)置上應(yīng)注重精煉，防止過(guò)多紛繁復(fù)雜的內(nèi)容造成不友好的用戶體驗(yàn)。

近年來(lái)，各種移動(dòng)智能設(shè)備的飛速發(fā)展和廣泛應(yīng)用促進(jìn)了互聯(lián)網(wǎng)應(yīng)用向移動(dòng)平臺(tái)方向發(fā)展，呈現(xiàn)多元化的趨勢(shì)。臺(tái)式機(jī)顯示器的尺寸越來(lái)越大，27英寸甚至30英寸的顯示器也很常見。因此，我們?yōu)g覽原本專門為臺(tái)式電腦準(zhǔn)備的網(wǎng)頁(yè)頁(yè)面已經(jīng)不再適合在小屏幕的移動(dòng)設(shè)備和高分辨率的大顯示器上使用了。

2010年，Marcotte提出響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念，它把流體柵格、彈性圖片和媒體查詢這三項(xiàng)技術(shù)有機(jī)地結(jié)合起來(lái)。根據(jù)不同設(shè)備的屏幕情況，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠自動(dòng)根據(jù)屏幕大小、分辨率對(duì)頁(yè)面內(nèi)容進(jìn)行重新排版，使得網(wǎng)頁(yè)內(nèi)容更好地適應(yīng)設(shè)備，展現(xiàn)完美的顯示效果。一般來(lái)說(shuō)，頁(yè)面設(shè)計(jì)者會(huì)優(yōu)先使重要內(nèi)容先顯示出來(lái)，其他內(nèi)容依據(jù)某些細(xì)則依次排列，用戶可以通過(guò)滑動(dòng)或滾動(dòng)頁(yè)面進(jìn)行瀏覽[5]。

4 英文學(xué)習(xí)網(wǎng)站前端設(shè)計(jì)與實(shí)現(xiàn)

4.1 LOGO設(shè)計(jì)和頁(yè)面風(fēng)格

網(wǎng)站風(fēng)格簡(jiǎn)約，內(nèi)容布局簡(jiǎn)單、明凈，不會(huì)有繁雜的視覺(jué)效果。各種元素之間有適當(dāng)內(nèi)邊距（padding）和外邊距（margin），易于瀏覽和使用。

4.2 Bootstrap框架

Bootstrap是最受歡迎的開發(fā)響應(yīng)式布局框架?？蓮钠涔俜骄W(wǎng)站下載，包括CSS等。這樣可以對(duì)本地CSS文件里的CSS變量進(jìn)行修改，依據(jù)自己的需求改變預(yù)定好的樣式，也可用CDN，如需使用JavaScript插件（Bootstrap的所有JavaScript插件都依賴jQuery），還須引入jQuery[6]。

Bootstrap需要HTML5文檔類型。其柵格系統(tǒng)（Grid System）用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局。每行最多可以有12列，也可以將某些列組合起來(lái)創(chuàng)造更寬的一列[7]。

4.3 頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)

首先是導(dǎo)航欄。它在每個(gè)頁(yè)面的頂部，包括有LOGO（鏈接到網(wǎng)站首頁(yè)），聽力，口語(yǔ)，閱讀，寫作，登陸，注冊(cè)，可點(diǎn)擊標(biāo)簽進(jìn)入相應(yīng)的頁(yè)面。

頁(yè)面底部的主要內(nèi)容是一個(gè)向上的按鈕，點(diǎn)擊可以回到頁(yè)面頂部，并且使用jQuery添加了一個(gè)順滑地滾動(dòng)（Scroll）效果，提升了點(diǎn)擊按鈕的交互性。

主頁(yè)的主要元素為兩張圖片組成的圖片輪播（Carousel），其中第一個(gè)界面有網(wǎng)站LOGO和標(biāo)語(yǔ)，第二個(gè)界面有優(yōu)美的中英文句子。

圖片輪播效果是響應(yīng)式的，可以根據(jù)屏幕寬度自動(dòng)調(diào)整大小。圖片輪播中，使用了Bootstrap響應(yīng)式頁(yè)面設(shè)計(jì)的另一個(gè)代表技術(shù)——媒體查詢。@media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，這里可以設(shè)定當(dāng)屏幕寬度小于768px時(shí)，圖片輪播的標(biāo)題標(biāo)簽便不再顯示。

聽力的一級(jí)頁(yè)面使用Bootstrap的.nav-pills類實(shí)現(xiàn)動(dòng)態(tài)的膠囊式標(biāo)簽頁(yè)（Pills），點(diǎn)擊膠囊菜單可切換各類聽力材料。聽力的二級(jí)頁(yè)面是聽力材料的音頻及對(duì)應(yīng)的原文，音頻使用

口語(yǔ)的一級(jí)頁(yè)面的材料板塊使用Bootstrap的.thumbnial類將圖片和文字結(jié)合在一起，圖片可根據(jù)屏幕的大小自動(dòng)縮放為合適的寬度?？谡Z(yǔ)的二級(jí)頁(yè)面的布局設(shè)計(jì)與聽力的一級(jí)頁(yè)面的設(shè)計(jì)類似，也使用了Bootstrap的.nav-pills類實(shí)現(xiàn)膠囊式切換菜單，在頁(yè)面內(nèi)容上使用

閱讀的一級(jí)頁(yè)面的布局左邊新聞板塊使用Bootstrap的柵格系統(tǒng)的.col-sm-7類，占據(jù)頁(yè)面的7/12的寬度。閱讀的二級(jí)頁(yè)面布局與一級(jí)頁(yè)面類似，左邊為新聞原文，右邊為周內(nèi)頭條新聞板塊。

寫作的一級(jí)頁(yè)面布局由四個(gè).table類的表格構(gòu)成，表里的內(nèi)容是各類英文習(xí)作。寫作的二級(jí)頁(yè)面為寫作文章原文。

然后，登錄和注冊(cè)界面使用Bootstrap的JavaScript插件模態(tài)框（Modal）來(lái)實(shí)現(xiàn)。模態(tài)框的組件包括頭形、主體和一組放置于底部的按鈕。添加一段JavaScript代碼用來(lái)模擬登錄注冊(cè)效果。

最后是測(cè)試。一是瀏覽器兼容性測(cè)試。瀏覽器最重要或者說(shuō)核心的部分是渲染引擎（Rendering Engine），一般習(xí)慣稱為瀏覽器內(nèi)核。它負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法進(jìn)行解釋并渲染網(wǎng)頁(yè)，決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫語(yǔ)法的解釋也不同，因此，同一網(wǎng)頁(yè)在不同的內(nèi)核的瀏覽器里的渲染效果也不同，這也是網(wǎng)頁(yè)編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯示效果的原因。測(cè)試所用的瀏覽器為市面上主流的瀏覽器：IE 11，Trident內(nèi)核；火狐，Gecko內(nèi)核；谷歌，Webkit內(nèi)核。二是關(guān)于測(cè)試結(jié)果。經(jīng)過(guò)測(cè)試，網(wǎng)站要能很好地兼容IE 11，火狐和谷歌瀏覽器，Bootstrap框架下各個(gè)組件和元素，以及使用jQuery添加的動(dòng)態(tài)效果都能在以上三款瀏覽器中展現(xiàn)。

【參考文獻(xiàn)】

【1】張州，李存永.HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的新特性和優(yōu)勢(shì)探討[J].無(wú)線互聯(lián)科技， 2015 （8）：11-12.

【2】 S.Charles， John Resig： Building Jquery[J]. COMPUTER， 2015（5）：23-25.

【3】Bootstrap中文網(wǎng)[EB/OL].http： //v3.bootc-ss.com/css/. 2015（11）：20.

【4】李寶敏. 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)應(yīng)用教程[M].北京：清華大學(xué)出版社， 2012.

【5】張樹明.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)與現(xiàn)代化， 2013， 1（6）：125-127.

【6】D.Cochran. Bootstrap實(shí)戰(zhàn)[M].北京：人民郵電出版社， 2015.

【7】田佳妮，翟悅.DIV+CSS在網(wǎng)頁(yè)布局中的應(yīng)用研究[J].電腦知識(shí)與技術(shù)， 2015（2）：74-76.