英文學(xué)習(xí)網(wǎng)站前端構(gòu)建分析發(fā)布者：本站     時間：2020-05-05 13:05:54

1、 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

4.2、 Bootstrap框架

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

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

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

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

頁面底部的主要內(nèi)容是一個向上的按鈕, 點擊可以回到頁面頂部, 并且使用j Query添加了一個順滑地滾動 (Scroll) 效果, 提升了點擊按鈕的交互性。

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

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

聽力的一級頁面使用Bootstrap的.nav-pills類實現(xiàn)動態(tài)的膠囊式標(biāo)簽頁 (Pills) , 點擊膠囊菜單可切換各類聽力材料。聽力的二級頁面是聽力材料的音頻及對應(yīng)的原文, 音頻使用<audio>標(biāo)簽添加, 其中control屬性添加對音頻的控制, 包括播放、暫停和音量調(diào)節(jié)。

口語的一級頁面的材料板塊使用Bootstrap的.thumbnial類將圖片和文字結(jié)合在一起, 圖片可根據(jù)屏幕的大小自動縮放為合適的寬度。口語的二級頁面的布局設(shè)計與聽力的一級頁面的設(shè)計類似, 也使用了Bootstrap的.nav-pills類實現(xiàn)膠囊式切換菜單, 在頁面內(nèi)容上使用<audio>標(biāo)簽添加了多個音頻。

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

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

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

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