“聊聊京劇”教學之技術(shù)篇

　　獲取素材
　　
　　要制作一個Web學習平臺，可不是一件容易的事情。首先，要根據(jù)教學內(nèi)容設(shè)計相關(guān)的網(wǎng)站欄目以及各個欄目所需要的資源。然后，通過多種途徑進行素材的獲取和整理。
　　本課的Web學習平臺主要包括以下幾個欄目：京劇小知識、京劇欣賞、京劇ABC、在線視聽、京劇大舞臺（任務版）、京劇圖庫、京劇下載、聊聊京劇、京劇大舞臺（教師版）。針對各個欄目，我們開始了素材的搜索。
　　制作Web平臺的素材主要是一些相關(guān)的圖片、聲音、視頻、asp源程序等。比如京劇小知識、京劇ABC等欄目需要一些京劇方面的文字資料和相關(guān)圖片，通過搜索引擎的圖片搜索功能即可輕松獲取。其他的資源，如制作京劇欣賞欄目需要一些京劇唱腔的MP3和唱詞，京劇下載中的京劇片段伴奏都可以通過www.baidu.com中的mp3搜索來進行，只要知道京劇片段名稱就可以搜索到，唱詞則可以通過百度搜索引擎中的歌詞搜索功能來尋找。其他的資源，比如制作Web學習平臺的動易4.03文章系統(tǒng)、制作京劇ABC和京劇大舞臺Flash界面的矢量圖，都可以通過搜索引擎來進行素材的搜索和下載。特別是京劇圖庫欄目中京劇臉譜圖片素材的獲取，我通過www.baidu.com中的圖片搜索引擎，利用關(guān)鍵詞“京劇臉譜”，搜索并下載了大量的圖片素材。另外，學習平臺中的一些京劇視頻片段，有的我們通過搜索引擎進行搜索并下載，有的則從京劇VCD中截取片段，獲取相應的素材后，我把各個素材以文件夾的形式進行了分類和整理，以便于Web平臺的制作。
　　
　　處理素材
　　
　　并不是所有從網(wǎng)上或者一些光盤上獲取的素材就直接可以運用到Web網(wǎng)站的制作當中。有很多時候，素材必須經(jīng)過特別的處理才能更好地被使用。在本網(wǎng)站的制作過程中，我就對各種素材進行了多方面的處理。例如在制作《京劇ABC》和《京劇大舞臺》多媒體課件時，為了使其更加美觀，我把下載的圖片通過Photoshop軟件進行了各種處理，比如統(tǒng)一大小、統(tǒng)一圖片格式等，然后再導入Authorware進行后期制作。又例如在制作學習平臺主頁面時，我們利用Photoshop、Macromedia Fireworks MX 2004進行了網(wǎng)站的美工處理，使整個學習平臺的風格和學習主題融為一體。另外，我們還對大量的京劇視頻片段運用Premiere 6.5進行了剪輯和格式轉(zhuǎn)換，使其在網(wǎng)頁中能順利地播放。
　　
　　各欄目的具體制作
　　Web學習平臺框架的搭建
　　
　　為了讓學習平臺各欄目的風格各個統(tǒng)一，制作和管理更方便，我們選擇了使用動易4.03文章系統(tǒng)進行網(wǎng)站框架的搭建。
　　動易4.03中文章系統(tǒng)使用的方法很簡單，可先到http://www.asp163.net下載ASP代碼，解壓后將免費版目錄下的所有文件復制到服務器虛擬目錄下，然后進行動易組件的注冊，根據(jù)說明文檔進行數(shù)據(jù)庫鏈接的更改，最后運行install.asp進行安裝和網(wǎng)站的簡單設(shè)置就可以使用了。如圖1所示安裝完畢以后，進入程序后臺，進行網(wǎng)站各個欄目的相關(guān)設(shè)置，如欄目的名稱，欄目的內(nèi)外部鏈接地址等。如圖2所示，其中京劇小知識、京劇欣賞、京劇大舞臺由后臺的文章發(fā)布系統(tǒng)發(fā)布和管理，京劇圖庫、京劇下載、聊聊京劇這些欄目由后臺其他管理欄目發(fā)布并生成，其優(yōu)點在于資源的發(fā)布和更新方便，以方便今后的管理。
　　
　　
　　京劇小知識
　　
　　這個欄目我們通過文章管理系統(tǒng)進行京劇小知識的發(fā)布，如圖3所示。
　　
　　文章發(fā)布的方法非常簡單，根據(jù)后臺提示進行相應的文字輸入和圖片導入就可以了。需要注意的是發(fā)布文章時要選擇好所屬的欄目，輸入標題、關(guān)鍵詞、內(nèi)容等，通過工具欄插入需要的圖片，然后發(fā)布就可以了。修改也很方便，只要選擇“京劇管理”就可以實現(xiàn)修改、刪除、推薦、固定等功能。
　　
　　京劇欣賞
　　
　　這個欄目我們也通過文章管理系統(tǒng)進行京劇唱腔MP3及唱詞的發(fā)布，如圖４所示。
　　
　　具體的發(fā)布方法同京劇小知識欄目，不同的是通過工具欄中的Mediaplayer工具插入了京劇唱腔的MP3，以實現(xiàn)MP3的在線視聽功能。注：原本系統(tǒng)并沒有MP3上傳的功能，我們在頻道管理欄目中進行了設(shè)置，在“允許上傳的文件類型”中加入了MP3上傳。如圖５所示。
　　
　　
　　在線視聽
　　
　　這個欄目我們也通過文章管理系統(tǒng)進行京劇視頻片段的發(fā)布，如圖６所示。
　　
　　
　　具體的發(fā)布方法同京劇欣賞欄目，不同的是通過工具欄中的realplayer工具插入了京劇視頻文件，以實現(xiàn)視頻的在線視聽功能。需要注意的是視頻文件比較大，因此必須在“系統(tǒng)設(shè)置”、“頻道管理”、“京劇世界”中進行欄目參數(shù)的設(shè)置，將“允許上傳的文件大小”的數(shù)據(jù)設(shè)置得大一點，我們設(shè)置的參數(shù)為102400KB，如圖7所示。
　　
　　京劇大舞臺
　　
　　這個欄目我們也通過文章管理系統(tǒng)進行各組任務以及視頻片段的發(fā)布。（圖略）
　　
　　京劇圖庫
　　
　　這個欄目我們通過動易的圖片管理系統(tǒng)進行臉譜和京劇有關(guān)圖片的發(fā)布，如圖8所示。
　　
　　圖片的發(fā)布非常簡單，利用圖片系統(tǒng)的“添加圖片”就可以非常方便地實現(xiàn)圖片的發(fā)布及管理。只需要將事先準備好的圖片進行上傳就可以了，系統(tǒng)會自動進行圖片的發(fā)布。
　　
　　京劇下載
　　
　　這個欄目我們通過動易的下載管理系統(tǒng)進行京劇唱段伴奏MP3的發(fā)布，如圖9所示。
　　
　　京劇唱段伴奏MP3的發(fā)布非常方便，通過下載系統(tǒng)的“添加下載”就可以實現(xiàn)MP3伴奏的發(fā)布及管理。使用方法與圖片的添加類似。
　　
　　聊聊京劇
　　
　　這個欄目我們通過動易的留言管理來實現(xiàn)師生和生生間的交流，如圖10所示。
　　
　　學生的留言在網(wǎng)站上并不是實時顯示的，必須通過老師的審核才能夠在網(wǎng)站上顯示，這一功能方便了老師對留言的過濾和管理，老師可以通過這個系統(tǒng)進行必要的回復和指導，管理非常方便。
　　
　　京劇ABC
　　
　　這個欄目我們使用Authorware7.0進行制作。制作方法非常簡單，新建一個Authorware文件，然后把從網(wǎng)上下載的有關(guān)圖片運用Photoshop進行處理后一張張放到流程圖上，每張圖片都設(shè)置好過渡的方式，各圖片之間放一個等待鍵（等待時間設(shè)置為1秒）、一個擦除鍵，在程序中必要的地方放置一些音樂文件，為了方便交互，我們把課件做成了熱區(qū)的形式，可以通過參數(shù)goto任意返回首頁，在主頁面放置一個計算圖標并設(shè)置參數(shù)：quit(0)使課件點擊可以退出。由于課件中的文字使用了文鼎古印體，為了使沒有裝過這種字體的電腦都能顯示出這一文字效果，因此我們特意把所有文字做成了圖片形式插入到Authorware中，如圖11、圖12所示。
　　
　　
　　京劇大舞臺（教師版）
　　
　　這個欄目我們也使用Authorware7.0進行制作。制作的方法和“京劇ABC”類似，只不過插入了一些視頻文件，也使用了熱區(qū)，增強了交互性。其中主頁面由Flash制作（圖13）。
　　
　　特別要提到的是，為了使學習網(wǎng)站風格更統(tǒng)一、使用更方便，我們把用Authorware制作的課件打包成了網(wǎng)頁的形式，通過網(wǎng)站的后臺融合到了學習平臺中。只要教師電腦下載并安裝Authorware WebPlayer 7就可以在網(wǎng)站上使用課件了，效果相當不錯。
　　
　　網(wǎng)站的搭建和發(fā)布
　　
　　所有的欄目制作完成以后，我們開始了網(wǎng)站的搭建和發(fā)布。為了使學生和老師能更方便地使用學習網(wǎng)站進行學習，我們對動易的主頁面index.asp進行了必要的修改，將原始的網(wǎng)站風格改成了與本課“京劇”相融合的古色古香的風格，網(wǎng)站的圖片均用Photoshop和Fireworks MX 2004進行了專門的處理，然后進入后臺的網(wǎng)站首頁模板管理對CSS代碼進行設(shè)置。根據(jù)教學的需要我們在主頁加入了百度搜索引擎，并更改了友情鏈接的顯示方式。
　　此外，其他欄目的頁面均由動易的后臺來進行設(shè)置，非常方便，比過去使用Dreamweaver MX軟件進行搭建，添加導航方便了許多。原本使用Authorware制作的欄目，比如京劇ABC、京劇大舞臺，我們在打包時特意打成了Web格式，并通過后臺與網(wǎng)站融合在了一起，使用瀏覽器就可以自動安裝插件，在網(wǎng)頁中就直接可以播放。于是，整個Web學習平臺就這樣被搭建起來了。由于本節(jié)課是基于Web學習平臺的自主學習模式，整個網(wǎng)站需要ASP后臺的支持，因此，為了方便學生和老師進行互動學習，我們通過學校的服務器對整個網(wǎng)站進行了相關(guān)的設(shè)置，如圖14所示。
　　
　　希望我們的這篇文章能為老師們今后制作Web學習平臺帶來一點啟發(fā)，希望通過網(wǎng)絡(luò)與老師們作更多的探討和交流，網(wǎng)址：http://zaxx.jdedu.net/jingju。