基于网页样式改造的移动学习资源开发研究

关兆一++唐棣

摘 要：随着无线网络技术的快速发展和移动终端设备的普及，移动学习日益受到人们关注。移动学习资源是移动学习的第一要素。本文将一般网络学习资源与移动学习资源进行对比研究，分析二者的共同点与区别之处，基于HTML和CSS技术提出学习资源的样式改造方法，最后以“初中信息技术”网络课程为例，实现网络学习资源向移动学习资源改造的开发实践。

关键词：移动学习资源；网络学习资源；样式改造；CSS

中图分类号：G434 文献标识码：A 文章编号：1673-8454（2014）21-0039-03

一、引言

移动学习是使用移动便携式设备所开展的学习，即利用无线网络通信技术和移动终端设备获取教育信息、教育资源和教育服务的一种新型学习模式。[1]现阶段的移动学习发展主要得益于三个方面的条件：无线网络、移动终端设备和移动学习资源。而移动学习资源是移动学习中的核心，是对现有学习资源的一种拓展，是开展一切移动学习活动的基础。因此，移动学习资源质量的高低直接影响了移动学习的成效。[2]但是由于移动学习兴起时间尚短，移动学习资源建设有所不足，难以满足学习者需求，影响了移动学习的开展，是一个急需解决的重要问题。

二、网络学习资源与移动学习资源

网络学习资源是指学习者基于计算机网络开展的各种网络化的 信息资源的总称，它可以在网络环境下运行并且能够用浏览器来阅读。[3]并且经过长时间的积累，网络学习资源的内容已经非常的丰富。尽管网络学习资源在内容大小、文件格式等方面与移动学习资源有着不同，但是同样做为远程学习的一部分[4]，移动学习资源与网络学习资源也存在许多相似之处：

（1）内容丰富：网络学习资源和移动学习资源利用网络的开放性，拥有大量的可供选择的学习资源，为学习者提供了丰富的选择空间。

（2）资源共享：网络学习资源和移动学习资源一样，打破了传统学习资源的限制，使得学习者可以方便地从网络上获取学习资源。

（3）交互性强：网络学习资源和移动学习资源都可以进行同步或异步的交互，实现学习者与教师、学习者与同伴、学习者与资源之间的双向交流。

目前移动学习资源的开发主要有两个方面[1]。一是新建移动学习资源，二是对原有网络资源进行改造，二者是相互搭配的。对已有的网络学习资源进行改造不仅可以缓解一部分资源需求压力，而且可以有效地利用现有学习资源，节约开发成本。而且重要的一点是：移动终端设备可以适应多种学习资源[5]，这种适应性不仅能充分利用现有的学习资源，而且可以节约资源制作成本。所以，对原有的网络学习资源样式进行改造和开发新资源是移动学习资源建设的两个方法，科学的建设和合理的改造必然能够解决当前移动学习资源面临的困境。本文选取了对网络学习资源样式的改造这一方法进行深入研究。

三、移动学习资源的样式改造

1.总体流程

对网络学习资源基于样式的改造流程大体如图1所示。首先用户访问网络学习资源，当服务器判断其终端设备为移动设备后后，从样式库中调取与之配套的样式，然后对学习资源进行重新布局与渲染，使同样的内容在不同的移动设备上呈现出相应的显示效果。[1]

2.详细设计

布局与渲染是样式改造流程中的关键部分，本文将就这一部分进行深入研究。

（1）实现技术

实现移动学习资源样式的重新布局和渲染的两个元素为HTML和CSS。HTML的英文全称为Hyper Text Markup Language，它是网页超文本标记语言的缩写，是Internet上用于编写网页的主要语言。而CSS是Casading Style sheet 的缩写，又称为层叠样式表，简称样式表。它是一种用于定义如何显示HTML元素的标记语言，是实现移动学习资源样式改造的关键元素[6]。CSS具有以下优点：①表现和内容相分离，将设计部分分离出来放在一个独立样式文件中；②一个CSS样式可以控制多个页面的样式，可以将许多网页的风格格式同时更新；③样式表允许多种方式规定样式信息。添加CSS有4种方法：外联样式表、内部样式表、导入外部式样式表和内嵌样式。

CSS对于样式的描述主要由两个部分组成，选择器和一条或多条声明

Selector{declaration1；declaration2；….declarationN}

选择器selector指需要改变样式的HTML元素，而声明declaration是由属性property和值style Arrtibute组成，属性指的是希望设置的样式属性，值指的是这个属性的取值[6]。

例如：h3{color：black；font-size：16px；}

该段代码的意思是将h3元素的文字设置为黑色16像素。

HTML和CSS都是对页面进行布局和美化的工具，利用CSS可以对同一个网络资源呈现出多种形式。这便是基于已有网络学习资源改造的基础，根据不同设备的分辨率等参数情况调整布局和样式方案。

（2）具体实验

以初中信息技术课程资源为例（如图2）。

该课程资源原本是作为网络教育的学习资源进行开发的，目标用户是使用个人电脑进行网络学习的学习者。可以看出，该页面采用的是传统的header、content和footer的结构布局。最上方为课程名称、logo和导航菜单，下方为当前栏目的学习内容。该页面默认显示的是第一章的第一节。整体来看，菜单栏和内容合理有效地整合在同一页面，适合学习者进行网络学习。针对该网络课程资源，本文为手机等移动设备开发了一套样式mobile.css，该样式的运行流程如下：

首先设置整个页面的样式、外边距和内边距，并设置文字的默认大小和背景图。以及主体页面宽度及背景颜色。该步骤的关键代码如下：endprint

body{

margin：0px；

padding：0px；

font-size：12px；

background-image：url（images/body.gif）；

}

#box{

width：320px；

margin：0 auto；

background-color：#FFFFFF；

}

其次是导航菜单的样式。设置整个菜单的高度和上边框，然后设置菜单中超链接元素的字体样式和间距：

#menu{

height：36px；

border-top：0px solid#000000；

}

#menu a {

font-family："宋体"；

font-size：12px；

color：#000000；

line-height：16px；

padding：0px 2px；

text-decoration：none；

display：inline-block；

}

设置各标题和正文段落的文字格式：

h3{

font-size：12px；

text-align：center；

border-bottom：1px dashed #999999；

line-height：35px；

}

h4{

text-align：right；

font-family：Arial， Helvetica， sans-serif；

font-size：12px；

color：#666666；

}

#content p {

font-size：12px；

text-indent： 2em；

line-height：25px；

margin-top：10px；

设置图片的显示效果。图片独占一行且居中显示在正文中间。需要知道的是，图片和普通文字一样是个内联元素。相当于一个比较大的文字，因此需要利用display属性来将图片转换为块元素：

#content img {

display：block；

margin：auto；

max-width：600px；

max-height：400px；

}

当学习者通过网络访问学习资源时，移动终端的自适应系统接受信息并判断学习者设备类型，确定是否为移动设备[7]。然后确定该设备型号，并从数据库中调出该设备的样式信息。将该样式运用到当前的内容上。

（3）实验结果

显示效果如图3。

手机上呈现的页面（如图3）和PC端呈现的页面存在着显著的不同，手机页面上的字体，字体大小，布局更加适合学习者在移动学习中操作。

四、结束语

网络学习资源的改造是移动学习资源建设的有效途径之一。本文通过HTML和CSS改变了原有网络学习资源的样式，使之适应移动学习终端的屏幕和分辨率，成为有效的移动学习资源，这个过程也是移动学习自适应系统的一部分。根据目前的移动学习资源建设情况，移动学习资源的开发不仅仅需要样式的改造，更要符合移动学习资源的开发原则[8]，将HTML和CSS技术与移动学习资源开发理论相结合，会使建设出高质量移动学习资源的前景将更为广阔。

参考文献：

[1]盛东方.移动学习资源开发与管理方法研究[D].南京大学，2013.

[2]刘应芬.移动学习环境下的学习资源描述研究[D].云南大学，2012.

[3]杨叶，陈琳，董启标.响应式Web移动学习资源技术实现与设计研究[J].现代教育技术，2013（6）：107-110.

[4]董坤坤，戴心来，陈恳.基于LMA软件的移动学习资源设计[J].现代教育技术，2009（6）：76-78.

[5]顾凤佳.微型移动学习资源的可用性研究[D].华东师范大学，2010.

[6]徐琴.CSS+DIV网页样式与布局[M].北京：航空工业出版社，2012.

[7]高辉.移动学习环境下信息内容自适应呈现的设计与实现[D].江苏师范大学，2012.

[8]刘明春.基于智能手机的移动学习[J].中小学电教，2012（4）：56-58.

（编辑：王晓明）endprint