学习平台前端设计和实现

减小字体 增大字体 作者:佚名??来源:本站整理??发布时间:2019/3/1 18:59:12
摘要?
  学习平台主要用来提供学习资源和安排任务,为用户提供交互性的学习模式,学生学习时按需要使用不同的模块完成自己的学习过程。学习平台的前端采用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?交

[1]?[2]??下一页

友情链接