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

1、 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

4.2、 Bootstrap框架

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

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

4.3、 頁(yè)面設計與實(shí)現

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

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

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

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

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

口語(yǔ)的一級頁(yè)面的材料板塊使用Bootstrap的.thumbnial類(lèi)將圖片和文字結合在一起, 圖片可根據屏幕的大小自動(dòng)縮放為合適的寬度?？谡Z(yǔ)的二級頁(yè)面的布局設計與聽(tīng)力的一級頁(yè)面的設計類(lèi)似, 也使用了Bootstrap的.nav-pills類(lèi)實(shí)現膠囊式切換菜單, 在頁(yè)面內容上使用<audio>標簽添加了多個(gè)音頻。

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

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

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

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