魏尊亮

（廣東工業(yè)大學，廣州 510090）

1 引言

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

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

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

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

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

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

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

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

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

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

4 英文學習網(wǎng)站前端設計與實現(xiàn)

4.1 LOGO設計和頁面風格

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

4.2 Bootstrap框架

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

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

4.3 頁面設計與實現(xiàn)

首先是導航欄。它在每個頁面的頂部，包括有LOGO（鏈接到網(wǎng)站首頁），聽力，口語，閱讀，寫作，登陸，注冊，可點擊標簽進入相應的頁面。

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

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

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

聽力的一級頁面使用Bootstrap的.nav-pills類實現(xiàn)動態(tài)的膠囊式標簽頁（Pills），點擊膠囊菜單可切換各類聽力材料。聽力的二級頁面是聽力材料的音頻及對應的原文，音頻使用

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

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

寫作的一級頁面布局由四個.table類的表格構成，表里的內容是各類英文習作。寫作的二級頁面為寫作文章原文。

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

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