學習平臺前端設計與實現

蔣凌燕

摘要

學習平臺主要用來提供學習資源和安排任務，為用戶提供交互性的學習模式，學生學習時按需要使用不同的模塊完成自己的學習過程。學習平臺的前端采用HTML5、Javascript、CSS技術和BootStrap前端框架，設計出了登錄前主頁、學生主頁、教師主頁、任務頁面、提問區、交流區等等，布局為簡單明快的T型和F型，整體風格統一。根據平臺的用戶類別，設計實現了不同的主頁，將用戶最關注的內容放在網頁的中心部分，兼顧到學生的使用習慣來安排學習任務的展示、完成過程和評價過程。

【關鍵詞】學習平臺 前端設計 BootStrap

在網絡和移動終端普及的環境中學習平臺可以提供對于學生學習過程和學習效率的關注，對學生的知識資源獲取、學習過程的進度、學生之間的互動互助、成果的展示等等提供了一個良好的在線學習環境，滿足學生、教師和管理員的使用需求。主要分課程和任務模塊、交流模塊、用戶信息模塊：課程與任務模塊提供學習任務的安排、瀏覽、提交、搜索功能;交流模塊分成提問區與主題式交流區;用戶信息模塊提供教師、學生和管理員的相關數據信息功能。

1 前端技術

1.1 基礎技術

學習平臺的前端頁面使用了基礎的HTML5、Javascript、CSS技術，HTML5用于定義頁面標記，并通過添加文本節點顯示內容，Javascfipt作為內嵌的腳本語言實現用戶和網頁的動態交互，CSS用于完成頁面標記的布局和格式設置。

1.2 BootStrap框架技術

BootStrap框架技術是在已有的基本前端技術基礎上，將預先編寫好的具有功能的標記組件化，從而以響應式布局來適應多種終端設備的環境，學習平臺使用了nav導航條組件、carousel走馬燈組件、media媒體對象組件、modal模態框組件、tablist多級標簽頁組件、panel面板等組件。

2 課程和任務模塊

2.1 登錄前主頁

主頁index.html供用戶登錄前使用，分為幾個部分顯示課程列表、展示優秀作品以及最新任務，整體呈現F型，為最常用的頁面布局方式，使用bootstrap的柵格組件，將頁面分隔成兩行多列

第一行中放置nav標記定義的導航條，其中包括課程、問答區、優秀作品展示區、任務區等的鏈接和供用戶使用的搜索表單（包含輸入文本框及提交按鈕）。第二行分左中右三個部分，分別是課程、任務展示區和登錄與注冊。左邊區塊顯示熱門課程區使用list-group組件，用戶在課程按鈕上點擊時會顯示不同的顏色來表示選中，同時課程區對應的div標記使用了rol屬性并賦值為tablist，在其后通過一個隱藏的div來定義標簽頁內容，list-group組件和tab-content組件一起完成了多級標簽頁的創建。中間部分分為上下兩個部分，上面是一個carousel組件，以走馬燈的方式顯示圖片，用于顯示最新的學生完成學習任務的成果，下面使用media媒體對象組件，顯示最新的任務信息，media組間中左邊為圖片而右邊為標題和內容。登錄與注冊按鈕布置在最右邊的區域，使用btn-outline-primary類型，呈現淡藍色邊框，鼠標懸停于按鈕上時變化為藍色，用戶使用鼠標點擊登錄框后顯示modal模態框組件，提供帶遮罩的彈出層的來顯示登錄框體，如圖1所示。

2.2 教師的課程信息頁面

教師的課程信息頁面中顯示了課程相關信息包括課程名、班級名稱、班級人數和任務數目，呈現網格狀，使用了小型面板組件panel填充每一個單元，在面板的head部分使用柵格分成兩個左右兩格，content部分同樣如此課程單元格還提供鏈接，顯示當前的任務列表。

2.3 學生主頁

學生主頁主要顯示學生所學的課程和相關的任務信息，呈現F型布局，在頁面的上部放置與主頁類似導航條，左側顯示當前課程列表，中間部分顯示當前的任務信息，和左側課程列表組合在一起形成標簽頁組件，通過綁定用戶單擊課程的事件處理，從而在一個頁面中可以顯示多門課程的任務信息，減少界面切換的次數。當前任務信息的顯示使用panel面板組件創建整體外框，在panel content面板內容部分添加類屬性為table-striped的表格用于顯示具體的任務信息，其中任務的完成的進度狀態使用progress進度條組件，通過設置寬度表示進度百分比，如圖2所示。

2.4 學生課程任務區

學生課程任務區集中顯示當前課程和最新的任務已經有反饋需要修改的任務，采用反F布局，頁面頂端導航條中提供與學生有關的課程、任務、交流、提問、個人信息以及模糊搜索欄等。課程列表在右側，按時間順序排列，最新課程顯示在第一行。中間部分作為主體按課程分欄顯示任務信息，包括任務名、任務開始的時間/結束的時間，任務的當前進度，班級當前任務進度等內容。

3 交流模塊

3.1 提問區

提問區采用T型布局，最頂端是和主頁相似的導航條，主體部分用于顯示提問標題、提問內容和回答的標題及內容，是采用bootstrap4提供的Collapse組件中的一種，Accordion手風琴組件。分為兩個部分，提問信息放在class屬性為card的div中，回答信息放在class屬性為collapse的div中。提問信息塊中左側包含圖片、標題、內容，右側包含顯示提問被查看次數的熱度和可展開收起的云狀按鍵。整體頁面如圖3所示。

3.2 交流區

交流區采用反F布局，當前熱門話題顯示在右邊列表中，按話題的參與人數和發表時間排列，左邊顯示主題/板塊分類信息，板塊按課程分類，主題按任務分類。中間主體部分顯示話題標題、內容和回復，話題信息在頁面中以樹狀結構分層次組織，每一分支均可以單獨回復，多個話題按時間排列，當有最新回復時會排列到前面。除了任務和課程相關的交流外還有單獨的灌水閑聊區和圖片區，供在學習閑暇時使用。

4 用戶信息模塊

用戶分為三種，有管理員、教師、學生，教師的用戶信息頁面主要功能有基本信息顯示與修改、總體的課程與任務的統計表、當前課程/班級的任務總體統計情況;學生的用戶信息頁面除了基本信息外還有其參與課程、任務、交流、提問等的統計信息和相關信息頁面鏈接，顯示了學生所有參與的學習活動的情況。管理員的信息管理頁面包含用戶管理、課程信息管理、任務信息管理、交流相關的提問和話題、板塊等的管理功能。

5 總結

學習平臺為教師和學生課程內外提供教與學輔助功能，教師可以充分利用平臺功能為學生提供教學資源和學習輔助，并獲取學生學習和交流的具體情況，了解任務的進展情況和難點，學生使用學習中心的課程任務模塊，獲得各種各樣的資源，可以上傳教師所布置任務和活動的成果，得到教師的修改或意見反饋，除此之外，還可使用學習中心的交流互助模塊開展交流活動，增強參與感，在學習過程中學生之間的互助也得以加強。多終端協作學習平臺頁面主要采用符合用戶瀏覽習慣的F型和重點突出的T型，基于異構網絡的信息交互方式適應當前的互聯網環境來提供學習資料和互助交流。

參考文獻

[1]杜艷美.基于web前端的性能優化框架模型研究（D].西南科技大學，2018.

[2]史志騰，楊保華.基于React框架的智慧校園的前端開發設計[J].電腦知識與技術，2018，14（22）：208-209.

[3]危華明，陳積常，汪小威.基于HTML5+CSS3.0的響應式網站前端設計與實現[J].福建電腦，2018，34（05）：15+31.

[4]于圣彬.基于HTML5技術下移動Web前端設計與開發的研究[J].中國新通信，2018，20（04）：47.

[5]李夏君.使用Bootstrap實現響應式布局[J].信息與電腦（理論版），2017（13）：24-25.

[6]謝印芬基于微信公眾平臺的碎片化學習模式研究[J].教育現代化，2018（22）.