基于網(wǎng)頁樣式改造的移動學習資源開發(fā)研究

關兆一++唐棣

摘 要：隨著無線網(wǎng)絡技術的快速發(fā)展和移動終端設備的普及，移動學習日益受到人們關注。移動學習資源是移動學習的第一要素。本文將一般網(wǎng)絡學習資源與移動學習資源進行對比研究，分析二者的共同點與區(qū)別之處，基于HTML和CSS技術提出學習資源的樣式改造方法，最后以“初中信息技術”網(wǎng)絡課程為例，實現(xiàn)網(wǎng)絡學習資源向移動學習資源改造的開發(fā)實踐。

關鍵詞：移動學習資源；網(wǎng)絡學習資源；樣式改造；CSS

中圖分類號：G434 文獻標識碼：A 文章編號：1673-8454（2014）21-0039-03

一、引言

移動學習是使用移動便攜式設備所開展的學習，即利用無線網(wǎng)絡通信技術和移動終端設備獲取教育信息、教育資源和教育服務的一種新型學習模式。[1]現(xiàn)階段的移動學習發(fā)展主要得益于三個方面的條件：無線網(wǎng)絡、移動終端設備和移動學習資源。而移動學習資源是移動學習中的核心，是對現(xiàn)有學習資源的一種拓展，是開展一切移動學習活動的基礎。因此，移動學習資源質量的高低直接影響了移動學習的成效。[2]但是由于移動學習興起時間尚短，移動學習資源建設有所不足，難以滿足學習者需求，影響了移動學習的開展，是一個急需解決的重要問題。

二、網(wǎng)絡學習資源與移動學習資源

網(wǎng)絡學習資源是指學習者基于計算機網(wǎng)絡開展的各種網(wǎng)絡化的 信息資源的總稱，它可以在網(wǎng)絡環(huán)境下運行并且能夠用瀏覽器來閱讀。[3]并且經(jīng)過長時間的積累，網(wǎng)絡學習資源的內(nèi)容已經(jīng)非常的豐富。盡管網(wǎng)絡學習資源在內(nèi)容大小、文件格式等方面與移動學習資源有著不同，但是同樣做為遠程學習的一部分[4]，移動學習資源與網(wǎng)絡學習資源也存在許多相似之處：

（1）內(nèi)容豐富：網(wǎng)絡學習資源和移動學習資源利用網(wǎng)絡的開放性，擁有大量的可供選擇的學習資源，為學習者提供了豐富的選擇空間。

（2）資源共享：網(wǎng)絡學習資源和移動學習資源一樣，打破了傳統(tǒng)學習資源的限制，使得學習者可以方便地從網(wǎng)絡上獲取學習資源。

（3）交互性強：網(wǎng)絡學習資源和移動學習資源都可以進行同步或異步的交互，實現(xiàn)學習者與教師、學習者與同伴、學習者與資源之間的雙向交流。

目前移動學習資源的開發(fā)主要有兩個方面[1]。一是新建移動學習資源，二是對原有網(wǎng)絡資源進行改造，二者是相互搭配的。對已有的網(wǎng)絡學習資源進行改造不僅可以緩解一部分資源需求壓力，而且可以有效地利用現(xiàn)有學習資源，節(jié)約開發(fā)成本。而且重要的一點是：移動終端設備可以適應多種學習資源[5]，這種適應性不僅能充分利用現(xiàn)有的學習資源，而且可以節(jié)約資源制作成本。所以，對原有的網(wǎng)絡學習資源樣式進行改造和開發(fā)新資源是移動學習資源建設的兩個方法，科學的建設和合理的改造必然能夠解決當前移動學習資源面臨的困境。本文選取了對網(wǎng)絡學習資源樣式的改造這一方法進行深入研究。

三、移動學習資源的樣式改造

1.總體流程

對網(wǎng)絡學習資源基于樣式的改造流程大體如圖1所示。首先用戶訪問網(wǎng)絡學習資源，當服務器判斷其終端設備為移動設備后后，從樣式庫中調取與之配套的樣式，然后對學習資源進行重新布局與渲染，使同樣的內(nèi)容在不同的移動設備上呈現(xiàn)出相應的顯示效果。[1]

2.詳細設計

布局與渲染是樣式改造流程中的關鍵部分，本文將就這一部分進行深入研究。

（1）實現(xiàn)技術

實現(xiàn)移動學習資源樣式的重新布局和渲染的兩個元素為HTML和CSS。HTML的英文全稱為Hyper Text Markup Language，它是網(wǎng)頁超文本標記語言的縮寫，是Internet上用于編寫網(wǎng)頁的主要語言。而CSS是Casading Style sheet 的縮寫，又稱為層疊樣式表，簡稱樣式表。它是一種用于定義如何顯示HTML元素的標記語言，是實現(xiàn)移動學習資源樣式改造的關鍵元素[6]。CSS具有以下優(yōu)點：①表現(xiàn)和內(nèi)容相分離，將設計部分分離出來放在一個獨立樣式文件中；②一個CSS樣式可以控制多個頁面的樣式，可以將許多網(wǎng)頁的風格格式同時更新；③樣式表允許多種方式規(guī)定樣式信息。添加CSS有4種方法：外聯(lián)樣式表、內(nèi)部樣式表、導入外部式樣式表和內(nèi)嵌樣式。

CSS對于樣式的描述主要由兩個部分組成，選擇器和一條或多條聲明

Selector{declaration1；declaration2；….declarationN}

選擇器selector指需要改變樣式的HTML元素，而聲明declaration是由屬性property和值style Arrtibute組成，屬性指的是希望設置的樣式屬性，值指的是這個屬性的取值[6]。

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

該段代碼的意思是將h3元素的文字設置為黑色16像素。

HTML和CSS都是對頁面進行布局和美化的工具，利用CSS可以對同一個網(wǎng)絡資源呈現(xiàn)出多種形式。這便是基于已有網(wǎng)絡學習資源改造的基礎，根據(jù)不同設備的分辨率等參數(shù)情況調整布局和樣式方案。

（2）具體實驗

以初中信息技術課程資源為例（如圖2）。

該課程資源原本是作為網(wǎng)絡教育的學習資源進行開發(fā)的，目標用戶是使用個人電腦進行網(wǎng)絡學習的學習者?？梢钥闯?，該頁面采用的是傳統(tǒng)的header、content和footer的結構布局。最上方為課程名稱、logo和導航菜單，下方為當前欄目的學習內(nèi)容。該頁面默認顯示的是第一章的第一節(jié)。整體來看，菜單欄和內(nèi)容合理有效地整合在同一頁面，適合學習者進行網(wǎng)絡學習。針對該網(wǎng)絡課程資源，本文為手機等移動設備開發(fā)了一套樣式mobile.css，該樣式的運行流程如下：

首先設置整個頁面的樣式、外邊距和內(nèi)邊距，并設置文字的默認大小和背景圖。以及主體頁面寬度及背景顏色。該步驟的關鍵代碼如下：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；

設置圖片的顯示效果。圖片獨占一行且居中顯示在正文中間。需要知道的是，圖片和普通文字一樣是個內(nèi)聯(lián)元素。相當于一個比較大的文字，因此需要利用display屬性來將圖片轉換為塊元素：

#content img {

display：block；

margin：auto；

max-width：600px；

max-height：400px；

}

當學習者通過網(wǎng)絡訪問學習資源時，移動終端的自適應系統(tǒng)接受信息并判斷學習者設備類型，確定是否為移動設備[7]。然后確定該設備型號，并從數(shù)據(jù)庫中調出該設備的樣式信息。將該樣式運用到當前的內(nèi)容上。

（3）實驗結果

顯示效果如圖3。

手機上呈現(xiàn)的頁面（如圖3）和PC端呈現(xiàn)的頁面存在著顯著的不同，手機頁面上的字體，字體大小，布局更加適合學習者在移動學習中操作。

四、結束語

網(wǎng)絡學習資源的改造是移動學習資源建設的有效途徑之一。本文通過HTML和CSS改變了原有網(wǎng)絡學習資源的樣式，使之適應移動學習終端的屏幕和分辨率，成為有效的移動學習資源，這個過程也是移動學習自適應系統(tǒng)的一部分。根據(jù)目前的移動學習資源建設情況，移動學習資源的開發(fā)不僅僅需要樣式的改造，更要符合移動學習資源的開發(fā)原則[8]，將HTML和CSS技術與移動學習資源開發(fā)理論相結合，會使建設出高質量移動學習資源的前景將更為廣闊。

參考文獻：

[1]盛東方.移動學習資源開發(fā)與管理方法研究[D].南京大學，2013.

[2]劉應芬.移動學習環(huán)境下的學習資源描述研究[D].云南大學，2012.

[3]楊葉，陳琳，董啟標.響應式Web移動學習資源技術實現(xiàn)與設計研究[J].現(xiàn)代教育技術，2013（6）：107-110.

[4]董坤坤，戴心來，陳懇.基于LMA軟件的移動學習資源設計[J].現(xiàn)代教育技術，2009（6）：76-78.

[5]顧鳳佳.微型移動學習資源的可用性研究[D].華東師范大學，2010.

[6]徐琴.CSS+DIV網(wǎng)頁樣式與布局[M].北京：航空工業(yè)出版社，2012.

[7]高輝.移動學習環(huán)境下信息內(nèi)容自適應呈現(xiàn)的設計與實現(xiàn)[D].江蘇師范大學，2012.

[8]劉明春.基于智能手機的移動學習[J].中小學電教，2012（4）：56-58.

（編輯：王曉明）endprint