Sci论文 - 至繁归于至简,Sci论文网。 设为首页|加入收藏

SCI论文网开场白:为SCI创作者提供分享合作的小而美圈子

当前位置:首页 > 教育论文 > 正文

基于 Bootstrap 框架的响应式课程设计与实现 ——以《高空气象观测》网络课程为例论文

发布时间:2020-01-18 10:03:32 文章来源:SCI论文网 我要评论














SCI论文(www.scipaper.net):

摘要:随着智能手机的普及以及网络学习逐渐向移动平台方向发展的趋势,响应式网络课程的设计作为一种新的设计理念,能实现一个课件对多种设备的兼容。本文以《高空气象观测》网络课程为例,探索并实践了基于Bootstrap框架的响应式课程设计,对改造传统网络课程适应移动学习环境具有重要的应用价值。

关键词:响应式课程设计;Bootstrap框架;响应式布局

本文引用格式:王永锋.基于Bootstrap框架的响应式课程设计与实现——以《高空气象观测》网络课程为例[J].教育现代化,2019,6(53):190-194,210.

        干部学院在开展面授培训的同时,大力开展远程培训,建成能够支持1万人同时在线、1000人同时浏览学习的远程教育网,充分发挥了远程网络培训超时空、跨地域、强辐射、低成本的优势。随着嵌入式硬件技术的不断发展以及智能手机、平板电脑、智能手表等各种智能移动设备的广泛应用,人们对知识的渴求日益增加,目前的教育平台不能满足现代社会中人们的碎片化学习需求。正是基于这种现状,为了适应互联网应用逐渐向移动平台方向发展的趋势,也建设移动学习平台,这就使得大部分在PC机上显示的教学资源不能很好地在移动互联设备上直接呈现。不能保持不同系统平台环境下网页布局的一致性,如何使传统课程资源适应移动学习,适配所有终端设备成为一个新的问题。基于Bootstrap框架的响应式网页设计就是一种全新的设计理念,根据这一理念所制作出来的网页框架可以作为通用模板,开发者根据需求选择模板,从而设计出适应不同设备的网站,增强用户体验[1]。

        本文以《高空气象观测》网络课程为例,探索并实践了基于Bootstrap框架的响应式课程设计,这对改造传统网络课程适应移动学习环境具有重要的应用价值。

\

 
一Bootstrap框架介绍

        Bootstrap是由Twitter公司主导开发的,基于HTML5、CSS和JS框架的一个用于前端开发的最流行的开源工具包,主要用于开发响应式布局、移动设备优先的Web项目,提供了精致、经典、通用,并使用HTML5、CSS和JS构建的组件,包括布局、网格、表格、按钮、表单、导航等,让前端开发更快速、简单地构建网页并适配所有设备。

二 响应式栅格系统

        响应式设计是目前比较流行的web应用技术,开发人员只需正确地实现响应式web设计,网页就可以适应于不同的设备。而Bootstrap响应式栅格系统抛弃了原有的以PC为核心的设计思维,完全内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列,通过指定1到12的值来表示其跨越的范围。例如,3个等宽的列可以使用3个.col-md-4(适用于中等屏幕)来创建。整个系统通过一系列的行(row)与列(column)的组合创建页面布局。

         另外通过媒体查询技术实现对不同设备的灵活支持。也包括一个最大宽度,限制CSS到一组较窄的设备中。



\

 
\

 

三 基于Boot⁃strap响应式设计的网络课程页面实现

           为了满足干部学院远程教育网的课件能够自动适应移动学习平台的需求,《高空气象观测》网络课程确立了实现响应式设计的技术目标。同时只考虑了两个媒体查询的断点:在小于768px的小屏中使用如图1所示的布局,否则就切换到图2的布局。



\

 

(一)排版架构

         页面排版的好坏直接影响产品风格。由于手机和电脑相比,屏幕小很多,不能把电脑所有的应用都移植过来,秉持一个简明的原则。本例手机排版结构包括两部分:每章导航(.navlist)和主体。主体又包括了标题、学习菜单(.menu1)、知识点视频讲解(.video1)和每章知识点(.zsd),结构示意图如图3所示。电脑排版结构示意图如图4所示。




\
\
 
\
 
\

 


          开发实践,对于改造传统网络课程适应干部学院移动学习平台具有很大的参考价值,避免了由于浏览设备差异进行的重复开发,不仅提高了效率,节省了大量人力物力,也保证了PC端和移动端网页视觉效果的一致性。

参考文献

[1]舒后,熊一帆,葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报,2016,24(2):47-52.
[2]未来科技.Bootstrap实践-从入门到精通[M].北京:中国水利水电出版社,2017:8.
[3]刘春茂.HTML5+CSS3+JAVASCRIPT网页设计案例课堂[M].北京:清华大学出版社,2018:1.

关注SCI论文创作发表,寻求SCI论文修改润色、SCI论文代发表等服务支撑,请锁定SCI论文网!
文章出自SCI论文网转载请注明出处:http://www.scipaper.net/jiaoyulunwen/11372.html
0

相关内容

发表评论

Sci论文网 - Sci论文发表 - Sci论文修改润色 - Sci论文期刊 - Sci论文代发
Copyright © Sci论文网 版权所有 | SCI论文网手机版