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

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