基于Web2.0的三維動(dòng)畫設(shè)計(jì)精品課程的建設(shè)

摘 要 Web2.0是當(dāng)前互聯(lián)網(wǎng)發(fā)展的新形態(tài)，較之傳統(tǒng)網(wǎng)絡(luò)給人們帶來(lái)更多的便利。它的產(chǎn)生與發(fā)展給教育類網(wǎng)站注入新的血液。在分析互聯(lián)網(wǎng)與教育理論的發(fā)展歷史的基礎(chǔ)上，以三維動(dòng)畫設(shè)計(jì)精品課程建設(shè)為例，提出基于Web2.0的精品課程建設(shè)方案。

關(guān)鍵詞 Web2.0；精品課程；網(wǎng)絡(luò)教學(xué)；三維動(dòng)畫設(shè)計(jì)

中圖分類號(hào)：G642.3 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-489X(2011)24-0090-04

Design and Realization of 3d Animation Design Top-quality Course based on Web2.0//Yu Yong， Huang Xinyuan

Abstract Web2.0 is a new form of the current development of the Internet， compared to traditional network brings us more convenience. Its Production and development will inject new blood to educational Web site. This paper analyzed the development of Internet and education theory and proposed an excellent course building program based on Web2.0 taking the building progress of the three-dimensional animation design course for example.

Key words Web2.0; top-quality course; network-based teaching; 3d animation design

Author’s address Information School， Beijing Forestry University， Beijing， China 100083

1 引言

教育部辦公廳在精品課程申報(bào)工作的有關(guān)文件中指出：“以多媒體課件制作技術(shù)、錄播技術(shù)以及網(wǎng)站制作、發(fā)布和共享技術(shù)等信息技術(shù)手段為平臺(tái)，促進(jìn)精品課程信息化，是建設(shè)具有一流教師隊(duì)伍、一流教學(xué)內(nèi)容、一流教學(xué)方法、一流教材、一流教學(xué)管理等特點(diǎn)的示范性優(yōu)質(zhì)課程的強(qiáng)力支撐。”文件精神指出充分利用信息技術(shù)手段是建設(shè)“五個(gè)一流”精品課程的有力保證。

如今，互聯(lián)網(wǎng)已進(jìn)入Web2.0時(shí)代，新技術(shù)、新理念在不斷地更新。在高校的精品課程建設(shè)中，先進(jìn)的課程離不開先進(jìn)的技術(shù)手段作支撐，網(wǎng)絡(luò)技術(shù)的革新可以幫助各高校改善以往網(wǎng)站更新慢、交互性差等缺點(diǎn)，更好地體現(xiàn)課程建設(shè)的需求。

2 相關(guān)理論

2.1 從Web1.0到Web2.0互聯(lián)網(wǎng)的新變化

自從第一個(gè)網(wǎng)站在20世紀(jì)90年代初誕生以來(lái)，網(wǎng)頁(yè)設(shè)計(jì)者們奮發(fā)進(jìn)取，不斷地刷新著互聯(lián)網(wǎng)的外觀和內(nèi)涵，最近一次較大的革新是Web2.0相關(guān)概念的提出。

所謂Web2.0，是對(duì)新一代互聯(lián)網(wǎng)應(yīng)用的統(tǒng)稱，是互聯(lián)網(wǎng)的一次理念和思想體系的升級(jí)換代，是由原來(lái)自上而下的由少數(shù)資源控制者集中控制主導(dǎo)的互聯(lián)網(wǎng)體系轉(zhuǎn)變?yōu)樽韵露系挠蓮V大用戶集體智慧和力量主導(dǎo)的互聯(lián)網(wǎng)體系。Web1.0的主要特點(diǎn)在于用戶通過(guò)瀏覽器獲取信息，只能進(jìn)行單向的閱覽。Web2.0則更注重用戶的交互作用，用戶既是網(wǎng)站內(nèi)容的消費(fèi)者（瀏覽者），也是網(wǎng)站內(nèi)容的制造者。

2.2 從教育1.0到教育2.0

與此不謀而合的是，教育領(lǐng)域也在經(jīng)歷一場(chǎng)教育理念2.0的變革。從教育1.0到教育2.0的轉(zhuǎn)變?nèi)绫?所示。

通過(guò)表1的比較不難看出，教育2.0與Web2.0在發(fā)展上有很多共性，如都強(qiáng)調(diào)以人為本，強(qiáng)調(diào)集體參與貢獻(xiàn)與分享等。

因此，將Web2.0的理念和技術(shù)與先進(jìn)的教育理論2.0相結(jié)合，必然會(huì)給現(xiàn)在的精品課程建設(shè)帶來(lái)更令人欣喜的成果。

3 Web2.0教育應(yīng)用的可行性

目前我國(guó)的精品課程網(wǎng)站從模式上看仍然以Web1.0為主，但Web2.0教育應(yīng)用發(fā)展的大環(huán)境已相對(duì)成熟，主要表現(xiàn)為：1）博客在高校網(wǎng)絡(luò)課程中得到廣泛應(yīng)用，Wiki、RSS等技術(shù)也在部分高校得到應(yīng)用；2）眾多高校科研機(jī)構(gòu)為Web2.0引發(fā)的教育變革提供理論指引和實(shí)踐經(jīng)驗(yàn)；3）大量的Web2.0網(wǎng)站的涌現(xiàn)和發(fā)展，其中一些網(wǎng)站已經(jīng)擁有廣泛的用戶基礎(chǔ)且深受學(xué)生群體歡迎，如人人網(wǎng)、土豆網(wǎng)、抓蝦網(wǎng)、豆瓣網(wǎng)等；4）Web2.0開源軟件不斷增多，出現(xiàn)豐富的應(yīng)用工具。

由此可見，Web2.0的外部環(huán)境已相對(duì)成熟，其與教育結(jié)合是完全可行的，在技術(shù)上即使不完全精通編程的人也可以通過(guò)插件或開源軟件建立起具備Web2.0特點(diǎn)的教育應(yīng)用網(wǎng)站，但在具體應(yīng)用中還需要結(jié)合不同的專業(yè)特點(diǎn)選擇不同類型的Web2.0應(yīng)用元素。

4 精品課程網(wǎng)站的設(shè)計(jì)定位

通過(guò)對(duì)現(xiàn)有精品課程的調(diào)研分析以及對(duì)教育部辦公廳關(guān)于精品課程相關(guān)的申報(bào)工作文件的研究并結(jié)合本校的具體情況，對(duì)三維動(dòng)畫設(shè)計(jì)精品課程做出定位。

1）人物定位：評(píng)審專家、教師和學(xué)生。

2）功能定位：滿足評(píng)審專家、教師和學(xué)生的需求，設(shè)計(jì)一個(gè)讀寫兼?zhèn)洹⒔换バ愿鼜?qiáng)的學(xué)習(xí)網(wǎng)站。

3）技術(shù)定位：采用符合Web標(biāo)準(zhǔn)的DIV+CSS代碼構(gòu)建整個(gè)網(wǎng)站；課程設(shè)置、教學(xué)效果、實(shí)踐條件、師資隊(duì)伍這幾個(gè)評(píng)審要求設(shè)計(jì)策略上都以方便展現(xiàn)給專家審閱為主，且內(nèi)容相對(duì)穩(wěn)定，更新量不大，故適合采用Web1.0的靜態(tài)模式，這樣做更容易被搜索引擎檢索；課程內(nèi)容、教學(xué)實(shí)踐等欄目以方便學(xué)生學(xué)習(xí)溝通為主，需要滿足交互功能和內(nèi)容的不斷更新，故適合采用Web2.0的交互模式；程序主要采用Asp+Access+JavaScript。

4）結(jié)構(gòu)定位：一級(jí)評(píng)審指標(biāo)設(shè)計(jì)在主導(dǎo)航區(qū)，二級(jí)評(píng)審指標(biāo)要分別對(duì)應(yīng)出現(xiàn)在一級(jí)評(píng)審指標(biāo)的下一級(jí)導(dǎo)航區(qū)內(nèi)，除了首頁(yè)采用三欄布局外其余各頁(yè)采用通欄布局。

5）風(fēng)格定位：依據(jù)“少就是多”的美學(xué)原則，追求簡(jiǎn)潔、高效、易讀性的風(fēng)格。

5 精品課程網(wǎng)站整體設(shè)計(jì)

5.1 策劃準(zhǔn)備階段

1）系統(tǒng)設(shè)計(jì)框架圖。如圖1所示，根據(jù)前面的分析制定一個(gè)系統(tǒng)設(shè)計(jì)框架圖，以便對(duì)整個(gè)網(wǎng)站的結(jié)構(gòu)有個(gè)清晰的把握。

2）資源收集整理。根據(jù)系統(tǒng)設(shè)計(jì)框架圖中所標(biāo)明的特定內(nèi)容收集并處理各種資料，將精品課程可視化，使抽象的要求變成具體的可視資料。這部分內(nèi)容包括圖片、文字以及視頻的處理，使其格式統(tǒng)一、規(guī)范，并建立文件夾分類命名保存。

5.2 網(wǎng)站前臺(tái)設(shè)計(jì)

由于本課程是一門以三維動(dòng)畫設(shè)計(jì)學(xué)習(xí)為主的精品課程，所以在內(nèi)容表現(xiàn)上不僅要體現(xiàn)精品的內(nèi)涵，又要兼顧課程自身的特點(diǎn)。

1）網(wǎng)站頁(yè)面布局。實(shí)踐證明，直觀、結(jié)構(gòu)組織相對(duì)整齊的版面是能夠最快獲得用戶認(rèn)同的。因此，在首頁(yè)采用左中右三欄布局，并放置少量最有效的信息，目的是展示網(wǎng)站形象并引導(dǎo)訪問者；內(nèi)頁(yè)都采用通欄布局，每頁(yè)都分為頭、主體和腳三部分，頭包含Logo和主導(dǎo)航區(qū)，主體包含二級(jí)導(dǎo)航區(qū)和內(nèi)容顯示區(qū)，腳包含網(wǎng)站的相關(guān)說(shuō)明信息。

2）導(dǎo)航區(qū)。網(wǎng)站主導(dǎo)航在整個(gè)站點(diǎn)的幾乎每個(gè)頁(yè)面上都會(huì)出現(xiàn)，通常要設(shè)計(jì)得簡(jiǎn)潔，明顯區(qū)別于網(wǎng)頁(yè)其他內(nèi)容，以便于點(diǎn)擊和選擇。把導(dǎo)航放在頁(yè)面上方最顯著的位置并通過(guò)不同色相的對(duì)比區(qū)分不同的菜單類型，針對(duì)不同菜單分別設(shè)計(jì)不同色相作為鼠標(biāo)的交互響應(yīng)。在二級(jí)導(dǎo)航區(qū)采用大標(biāo)簽的菜單形式，在功能實(shí)現(xiàn)上通過(guò)JavaScript代碼和CSS樣式表控制頁(yè)面內(nèi)容的切換而無(wú)需頁(yè)面的重新加載。這樣做避免了傳統(tǒng)Web1.0時(shí)代頁(yè)面分欄過(guò)多所造成的信息擁擠，從而節(jié)省版面空間。

3）網(wǎng)站色彩。首先選擇低純度的藍(lán)色作為網(wǎng)站的基本色，配以近似藍(lán)作為輔助色，這樣可以顯得沉穩(wěn)大氣。為了增加一些活潑感，在導(dǎo)航按鈕的設(shè)計(jì)上采用絢麗的半透明彩色作為點(diǎn)綴。

4）文字。用CSS樣式表控制字體、字號(hào)、間距、行距、色彩，使信息內(nèi)容之間疏密得當(dāng)、整齊有序。

5）圖片。對(duì)每個(gè)圖片都采用加細(xì)邊框并在四周留白的處理，效果的實(shí)現(xiàn)以CSS中的border和padding屬性來(lái)控制。

6）視頻。鑒于對(duì)網(wǎng)站風(fēng)格以及視頻播放器易用性的考慮，選擇FLV播放器，這種播放器可以根據(jù)網(wǎng)站風(fēng)格的需要設(shè)計(jì)不同的皮膚，只要懂一點(diǎn)Flash編程語(yǔ)言就很容易做到，而且它對(duì)SWF的格式文件有很好的支持，可以避免用戶下載視頻播放插件的時(shí)間。調(diào)用時(shí)只需要將FLV播放器的代碼嵌入網(wǎng)頁(yè)。

7）網(wǎng)頁(yè)架構(gòu)。代碼采用符合Web標(biāo)準(zhǔn)的DIV+CSS布局模式，這種方式使網(wǎng)頁(yè)內(nèi)容和表現(xiàn)分離，減少網(wǎng)頁(yè)代碼，加快網(wǎng)頁(yè)顯示的速度，也方便日后進(jìn)一步維護(hù)。

5.3 后臺(tái)設(shè)計(jì)

鑒于本校服務(wù)器只能支持ASP類型的程序，同時(shí)考慮到系統(tǒng)的通用性，決定采用ASP加ACCES數(shù)據(jù)庫(kù)的方式來(lái)搭建系統(tǒng)平臺(tái)。

網(wǎng)站后臺(tái)功能模塊主要包括網(wǎng)站基本信息管理、用戶信息管理、欄目管理、文件上傳管理、留言管理和插件管理，Web2.0的應(yīng)用主要通過(guò)在插件管理模塊下的自由編輯區(qū)域里添加相應(yīng)的JS代碼來(lái)實(shí)現(xiàn)。系統(tǒng)主要功能模塊結(jié)構(gòu)如圖2所示。

5.4 Web2.0插件的應(yīng)用

1）RSS的應(yīng)用。由于3DMAX軟件近幾年來(lái)升級(jí)較快，幾乎每年都會(huì)推出一個(gè)新的版本，而且伴隨著這種更新，與其相關(guān)的一系列舊版插件都不再可用，必須下載相關(guān)插件的最新版本。因此，授課內(nèi)容要注意隨時(shí)革新，緊跟時(shí)代步伐。借助于RSS可以讓學(xué)生不必訪問網(wǎng)站就能及時(shí)了解到最近的更新。在網(wǎng)站的課程資源、學(xué)生作品等欄目提供RSS源，學(xué)生只需要下載RSS閱讀器，通過(guò)添加頻道就能訂閱網(wǎng)站的更新內(nèi)容。

2）JiaThis插件的應(yīng)用。JiaThis是一個(gè)提供網(wǎng)頁(yè)地址收藏、分享及發(fā)送的Web2.0按鈕工具，網(wǎng)站的瀏覽者可以方便地分享到人人網(wǎng)、開心網(wǎng)、QQ空間、新浪微博等一系列社會(huì)化關(guān)系網(wǎng)絡(luò)站點(diǎn)。學(xué)生在學(xué)習(xí)中遇到的問題可以通過(guò)這個(gè)小工具分享到自己的網(wǎng)絡(luò)社交圈里尋求集體的幫助。實(shí)現(xiàn)這種功能只需將標(biāo)準(zhǔn)按鈕JS代碼嵌入課程網(wǎng)站的各個(gè)頁(yè)面，或頁(yè)面的某一部分。

3）心情TAG的使用。心情標(biāo)簽是一套表達(dá)心情的小圖標(biāo)組插件，用戶在觀看網(wǎng)頁(yè)內(nèi)容后可以用這些可愛生動(dòng)的小圖標(biāo)來(lái)表達(dá)自己對(duì)所學(xué)習(xí)的內(nèi)容感受。教師可以從用戶所使用的圖標(biāo)的頻率數(shù)字來(lái)統(tǒng)計(jì)出哪些內(nèi)容是受學(xué)生歡迎的，從而決定增刪或改善相關(guān)學(xué)習(xí)資料。這種小功能的使用能加強(qiáng)網(wǎng)站互動(dòng)性，增加網(wǎng)站亮點(diǎn)，帶動(dòng)網(wǎng)站氣氛的活躍。

4）在線答疑系統(tǒng)的使用。在線答疑系統(tǒng)是一款帶數(shù)據(jù)庫(kù)的客服插件，與傳統(tǒng)的留言薄相比，它具有動(dòng)態(tài)實(shí)時(shí)性和可擴(kuò)展性的特征。這種插件集合了即時(shí)聊天工具QQ、MSN、Skype等，可以方便地將學(xué)習(xí)中遇到的問題即時(shí)地和教師溝通。它包含4個(gè)文件：一個(gè)JS文件，一個(gè)CSS樣式表，一個(gè)數(shù)據(jù)庫(kù)文件，一個(gè)可修改的界面模板。使用時(shí)首先要進(jìn)行一些代碼設(shè)置，如修改QQ號(hào)等聯(lián)系人號(hào)碼，使其處于激活狀態(tài)，然后需要將JS文件和數(shù)據(jù)庫(kù)等文件放置在網(wǎng)站的根目錄并用JS代碼調(diào)用到網(wǎng)頁(yè)內(nèi)。

6 總結(jié)

以上介紹了基于Web2.0的三維動(dòng)畫設(shè)計(jì)精品課程網(wǎng)站開發(fā)設(shè)計(jì)過(guò)程和實(shí)現(xiàn)技術(shù)。該網(wǎng)站已經(jīng)實(shí)現(xiàn)Web2.0理念的基本功能，可以較好地工作，并可以比較方便地進(jìn)行擴(kuò)展。但是該網(wǎng)站還不十分的完善，仍有待于改進(jìn)，比如在學(xué)習(xí)測(cè)驗(yàn)中，還可以利用維基功能實(shí)現(xiàn)在線提交作品，通過(guò)該功能可以促進(jìn)學(xué)生之間對(duì)同一個(gè)設(shè)計(jì)主題的完成效果進(jìn)行對(duì)比學(xué)習(xí)，從而激勵(lì)自己并提高作品的制作水平。

參考文獻(xiàn)

[1]Web2.0教育應(yīng)用綜述[EB/OL].http://Blog.sina.com.cn/s/Blog_4db3c41f0100hszt.html

[2]宦成林.Web2.0時(shí)代的精品課程建設(shè)[J].浙江現(xiàn)代教育技術(shù)，2008(1)

[3]羅慈.論Web2.0網(wǎng)站簡(jiǎn)潔的視覺風(fēng)格及成因[J].藝術(shù)與設(shè)計(jì)，2009(6)

[4]肖榮榮，張鳳斌，劉亞麗，等.Web2.0應(yīng)用情況調(diào)查分析及其啟示[J].圖書館理論與實(shí)踐，2009(9):22-24

[5]劉遠(yuǎn)東.Web1.0與Web2.0網(wǎng)絡(luò)課程比較研究[J].中國(guó)電化教育，2009(7):73-78

[6]全國(guó)高等學(xué)校精品課程建設(shè)工作[EB/OL].http://www.jpkcnet.com

[7]中國(guó)互聯(lián)網(wǎng)協(xié)會(huì).2005-2006中國(guó)Web2.0現(xiàn)狀與趨勢(shì)調(diào)查報(bào)告[R/OL].[2006-02-23].http://report.internetdigital.org