關(guān)兆一++唐棣

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

關(guān)鍵詞：移動(dòng)學(xué)習(xí)資源；網(wǎng)絡(luò)學(xué)習(xí)資源；樣式改造；CSS

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1673-8454（2014）21-0039-03

一、引言

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

二、網(wǎng)絡(luò)學(xué)習(xí)資源與移動(dòng)學(xué)習(xí)資源

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

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

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

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

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

三、移動(dòng)學(xué)習(xí)資源的樣式改造

1.總體流程

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

2.詳細(xì)設(shè)計(jì)

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

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

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

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

Selector{declaration1；declaration2；….declarationN}

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

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

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

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

（2）具體實(shí)驗(yàn)

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

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

首先設(shè)置整個(gè)頁面的樣式、外邊距和內(nèi)邊距，并設(shè)置文字的默認(rèn)大小和背景圖。以及主體頁面寬度及背景顏色。該步驟的關(guān)鍵代碼如下：endprint

body{

margin：0px；

padding：0px；

font-size：12px；

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

}

#box{

width：320px；

margin：0 auto；

background-color：#FFFFFF；

}

其次是導(dǎo)航菜單的樣式。設(shè)置整個(gè)菜單的高度和上邊框，然后設(shè)置菜單中超鏈接元素的字體樣式和間距：

#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；

}

設(shè)置各標(biāo)題和正文段落的文字格式：

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；

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

#content img {

display：block；

margin：auto；

max-width：600px；

max-height：400px；

}

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

（3）實(shí)驗(yàn)結(jié)果

顯示效果如圖3。

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

四、結(jié)束語

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

參考文獻(xiàn)：

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

[2]劉應(yīng)芬.移動(dòng)學(xué)習(xí)環(huán)境下的學(xué)習(xí)資源描述研究[D].云南大學(xué)，2012.

[3]楊葉，陳琳，董啟標(biāo).響應(yīng)式Web移動(dòng)學(xué)習(xí)資源技術(shù)實(shí)現(xiàn)與設(shè)計(jì)研究[J].現(xiàn)代教育技術(shù)，2013（6）：107-110.

[4]董坤坤，戴心來，陳懇.基于LMA軟件的移動(dòng)學(xué)習(xí)資源設(shè)計(jì)[J].現(xiàn)代教育技術(shù)，2009（6）：76-78.

[5]顧鳳佳.微型移動(dòng)學(xué)習(xí)資源的可用性研究[D].華東師范大學(xué)，2010.

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

[7]高輝.移動(dòng)學(xué)習(xí)環(huán)境下信息內(nèi)容自適應(yīng)呈現(xiàn)的設(shè)計(jì)與實(shí)現(xiàn)[D].江蘇師范大學(xué)，2012.

[8]劉明春.基于智能手機(jī)的移動(dòng)學(xué)習(xí)[J].中小學(xué)電教，2012（4）：56-58.

（編輯：王曉明）endprint