- 相關(guān)推薦
多媒體教學(xué)網(wǎng)頁(yè)的制作過(guò)程與技術(shù)
導語(yǔ)：本文以實(shí)際經(jīng)驗為依據，比較詳細地論述了多媒體教學(xué)網(wǎng)頁(yè)的制作過(guò)程、技術(shù)要點(diǎn)和注意事項，包括立題、素材的搜集、多媒體制作和網(wǎng)頁(yè)的制作等內容。以下是小編整理的資料，歡迎閱讀參考。
關(guān)鍵詞：多媒體、教學(xué)網(wǎng)頁(yè)、制作
前言
計算機網(wǎng)絡(luò )技術(shù)的飛速發(fā)展，使網(wǎng)絡(luò )逐漸滲透到了人類(lèi)生活的方方面面。特別是國際互聯(lián)網(wǎng)的日益普及，越來(lái)越多的人們投入到網(wǎng)絡(luò )這個(gè)無(wú)限的空間中去。在教育領(lǐng)域，將網(wǎng)絡(luò )運用于教學(xué)，已越來(lái)越得到人們的重視。目前，各類(lèi)多媒體軟件很多。但一般的多媒體軟件動(dòng)輒兩、三百兆，由于網(wǎng)絡(luò )傳輸速率的限制，這樣的龐然大物根本無(wú)法在網(wǎng)上應用；況且，就算網(wǎng)絡(luò )速度跟得上，這些并非為網(wǎng)絡(luò )量身定做的軟件，其形式和鏈接關(guān)系也不適合在網(wǎng)絡(luò )上使用。如何在現有條件下，把網(wǎng)絡(luò )的快捷、方便、可共享等特性應用到教學(xué)中去，就成為一個(gè)關(guān)鍵而迫切的現實(shí)問(wèn)題。
一個(gè)好的辦法就是將教學(xué)內容制成多媒體網(wǎng)頁(yè)（教學(xué)網(wǎng)站或網(wǎng)校），使學(xué)習者可以不受時(shí)間和空間的限制自由訪(fǎng)問(wèn)，并且在直接訪(fǎng)問(wèn)中了解和學(xué)習知識。本文以某一小型電源系統的調壓器為例，對多媒體教學(xué)網(wǎng)頁(yè)的制作過(guò)程和技術(shù)做一探討。
一、前期準備工作
�。ㄒ唬┙虒W(xué)內容的準備
主要是對教學(xué)內容進(jìn)行選取，確定各部分內容的媒體形式。對字幕表述進(jìn)行推敲，對其它形式定出表現方案，最后還是要形成一個(gè)腳本。
�。ǘ﹫D片素材的收集
1、背景圖的取得
背景圖的來(lái)源主要是書(shū)報資料和素材庫光盤(pán)中的一些圖片，如果圖片效果不太理想，可以用photoshop進(jìn)行必要的修飾。
2、實(shí)物圖片的取得
一般沒(méi)有現成的實(shí)物圖片，我們可以找了一個(gè)比較完好的實(shí)物，從多個(gè)角度進(jìn)行拍攝，分解后，再對各個(gè)部件進(jìn)行拍攝。最后，選擇出效果好的圖片，利用掃描儀掃描得到數字文件，當然也可以直接使用數碼相機拍攝。必要時(shí)，也要用photoshop處理。
二、多媒體制作過(guò)程
�。ㄒ唬┤S動(dòng)畫(huà)制作
用3DMAX3.0制作三維動(dòng)畫(huà)的過(guò)程大致分為三部分，一是制作物體模型，二是設計動(dòng)畫(huà)效果，三是渲染與輸出。
首先，將調壓器可分為三個(gè)塊：支架（包括與散熱器連接的彈簧），散熱器和底板，每塊又可分為若干個(gè)子物體，如散熱器中就包括有散熱片、碳柱、螺桿、端蓋、鐵心、線(xiàn)圈、彈簧片,單就一個(gè)螺桿來(lái)說(shuō)也是分為六邊形桿，螺帽和帶有螺紋的一段圓形桿。三部分一一完成后再連接為一體，在這一制作過(guò)程中主要用到了3DMAX命令面板中的Create(創(chuàng )建)面板和Modify(修改)面板,開(kāi)始用Standard primitives(原始幾何對象),像Box,Cone等通過(guò)對Parameters(參數欄)中的參數的調整來(lái)完成所建對象的長(cháng),寬,高,半徑,變數(平滑度)等的調整以完成所要求的基本物體形狀。需要合并兩個(gè)分別做出的物體時(shí)，先點(diǎn)取文件菜單中的Xref Objects選項，在彈出的對話(huà)框中點(diǎn)取右上角的添加命令按鈕(Add)隨后在出現的打開(kāi)文件對話(huà)框中打開(kāi)需要加入的物體文件。即可完成導入操作。將兩物體通過(guò)托以旋轉，使其位置配合好之后可同時(shí)選中并結合成組以后便可以當成一個(gè)物體操作。另外各物體在制作完成時(shí)一般給它指定材質(zhì)。對有關(guān)材質(zhì)與貼圖的操作都集中在材質(zhì)編輯器中，可以在工具條中單擊Material Editor按鈕將材質(zhì)編輯器打開(kāi)，另外也可以直接在鍵盤(pán)上按”M”鍵。3DMAX中有一部分自帶的現成材質(zhì)，也可以在材質(zhì)樣本框中修改后用Assign Material to selection可將其指定給所選中的物體。其實(shí)碳調各部件大都是外表涂了油漆或金屬表面，所以也可以直接在材質(zhì)編輯面板中，通過(guò)自行調整參數獲得與真實(shí)部件相似的外觀(guān)，主要是選擇好材質(zhì)類(lèi)型，在調整其反光特性等參數。
各個(gè)部件基本完成后就要將其做成動(dòng)畫(huà)，更清楚的表示出調壓器的結構和各部件的安裝位置。主要的動(dòng)畫(huà)就是旋轉和移動(dòng)。
如果要實(shí)現一個(gè)物體的旋轉，比如支架和散熱器部分都有轉動(dòng)的展示�？梢詥螕艄ぞ邫谥羞x擇并旋轉工具(Select and Rotate)將時(shí)間滑塊拖到50幀，打開(kāi)動(dòng)畫(huà)記錄按鈕，在透視圖中以Y軸為中心將物體旋轉180度完成了部件轉動(dòng)展示的動(dòng)畫(huà)。
要是需要讓某個(gè)或某些部件移動(dòng)位置，像散熱器拆解動(dòng)畫(huà)，磁鐵拆解動(dòng)畫(huà)等就需要為其設一條路徑，也就是移動(dòng)的路線(xiàn)，選擇型建模工具中的Line命令，在左視圖中創(chuàng )建一條合適的路徑曲線(xiàn)，路徑曲線(xiàn)設好了再把要移動(dòng)的部件導入，單擊File菜單中的Merge命令，在Merge file對話(huà)框中，可設置渲染的幀數段。最后輸出時(shí)一般選Active Time Segment，在Output size中選320*240。在下面的Options中的選項，可以用其默認設置。Reder Output區中需設定要保存輸出文件的位置，名稱(chēng)及格式，這里選AVI文件，在Reder scene對話(huà)框中第二個(gè)卷質(zhì)欄是MAX Default Scanline A-Buffer(MAX缺省線(xiàn)掃描渲染器A緩沖區)這里的設置也很重要但一般情況下取默認設置也可以輸出較好的效果。
�。ǘ┤S文字制作
在小的GIF字體動(dòng)畫(huà)及立體文字的制作中，用Ulead公司的Cool3D是很方便的，這個(gè)軟件雖然不大但功能并不少，操作也很簡(jiǎn)單。比如，主頁(yè)的標題文字就可以做成一個(gè)GIF動(dòng)畫(huà)，在Cool3D中的制作過(guò)程如下：
先建立一個(gè)新文件，調整尺度為384*58像素，再點(diǎn)擊輸入文本按鈕在彈出的對話(huà)框內輸入“********”，然后將其選中改為方正行楷字體，可以通過(guò)移動(dòng)、旋轉、縮放等操作配合添加關(guān)鍵幀來(lái)完成動(dòng)畫(huà)的制作，當然還要增加一些Cool3D提供的光線(xiàn)、紋理、傾斜等效果，使文字更加飽滿(mǎn)圓潤，并悅目的紋理和光澤，還可以選擇漂亮的背景。各項工作做完后再按需要調整動(dòng)畫(huà)的幀數來(lái)控制播放時(shí)間的長(cháng)短，通過(guò)調整物體（文字）屬性工具蘭中的環(huán)境、光源、表面、反光等各項的亮度、飽和度和色調來(lái)達到最佳視覺(jué)效果。另外在整個(gè)過(guò)程中隨時(shí)可以用編輯文本按鈕對所輸入的文字進(jìn)行修改最后一步就是導出動(dòng)畫(huà)（GIF或AVI）文件或導出JPEG圖像，并且可以自行確定影像的輸出質(zhì)量，比如外場(chǎng)維護中的“工作點(diǎn)的調整”、“外場(chǎng)維護”兩個(gè)按鈕的制作就是這樣完成的。當然，質(zhì)量越高渲染起來(lái)就越耗時(shí)，著(zhù)很大程度上也取決于計算機的硬件配置。
在對一些GIF格式的動(dòng)畫(huà)進(jìn)行簡(jiǎn)單的修改以及繪制平面圖是我們選擇了Macromedia公司的Flash4.0中文版，他提供了影片巖石，修改及刪除、添加幀等操作，還可以自行配音，Flash4.0支持很多格式的聲音文件，而且提供了比較齊全的繪圖工具，如鋼筆、鉛筆、吸管、筆刷、墨水瓶等十幾種再配合圖層工具用起來(lái)很方便，操作也更加靈活多樣。
�。ㄈ﹫D片、背景的處理
在對圖片的處理以及按鈕的制作中主要用到了Photoshop5.0CS,如所用到的背景圖片大都在Photoshop5.0中經(jīng)過(guò)亮度、對比度以及色相、飽和度、色彩均衡等的調整，使之和頁(yè)面色調相配合，達到最令人滿(mǎn)意的效果，另外對一些過(guò)大的圖片還要進(jìn)行裁切，調整大小等操作。例如，對真實(shí)碳片電壓調節器進(jìn)行拍照，掃描得到的通常分辨率高達3400*4600以上，其文件也有1M甚至3—4M大，而網(wǎng)頁(yè)頁(yè)面默認分辨率只有800*600，所以必須對掃描得到的圖片進(jìn)行縮放，裁切，旋轉等處理，使其大小和角度均達到要求。
像碳調的調壓原理中，就有“必要性”、“方法”和“原理”三部分它們是通過(guò)三個(gè)按鈕來(lái)連接的，又如調節誤差中有“準確性”及“穩定性”兩個(gè)按鈕，碳調結構中有“支架”、“主體”、“配置”三個(gè)按鈕，用作這些按鈕的圖片都是通過(guò)Photoshop5.0制作完成的。例如“準確性”和“穩定性”兩個(gè)按鈕，是先選擇了一副木紋的材質(zhì)圖作為底圖，然后叢中剪切280*110像素大小的一部分成一新文件（假設命名為P1然后選取左側工具欄中的文字工具，在P1窗口中單擊鼠標左鍵，在文字工具對話(huà)框內輸入“穩定性”，并將大小定為90像素字體采用方正行楷顏色為黑色，其他各項取默認設置。然后為其添加圖層蒙版，對文字進(jìn)行處理，選取濾鏡菜單中的藝術(shù)效果—壁畫(huà)濾鏡工具�？蓪�(huà)筆大小，細節，紋理等參數定為2，8，1。單擊“好”確認操作，再應用斜面和浮雕效果，使字體具有一定的立體感。為了使按鈕更有層次感，可以選取背景圖層加入光照效果再合并圖層并導出為JPEG格式的圖片文件，完成操作。而“支架”、“主體”、“配置”按鈕的制作則稍微復雜些，選取背景后，建立一新通道，再輸入“支架”兩字選中宋黑色字體，然后再復制一個(gè)新通道Alpha2，將第一通道載入選區打開(kāi)濾鏡菜單中的模糊工具選取“高斯模糊”濾鏡對話(huà)框，設半徑為5像素，然后再選擇反選再一次使用高斯模糊，設半徑為8像素，這樣字體不在棱角分明而有一種朦朧感，然后應用風(fēng)格化中的“查找邊緣”濾鏡對文字進(jìn)行描邊處理，再經(jīng)調整亮度/對比度后整體再應用一次輕度的高斯模糊，然后打開(kāi)燈光效果對話(huà)框，選擇“Default”類(lèi)型燈光，適當設置參數，如強度15，光澤10，材料60，曝光度0，環(huán)繞7，紋理通道選擇復制的通道Alpha2，再將Alpha1載入選區調整色相/飽和度為色相140，飽和度30，亮度25，并選中著(zhù)色復選框。最后合并圖層剪切調整大小即得到我們用來(lái)做按鈕的原始圖片。調壓原理中用到的三個(gè)按鈕制作過(guò)程相對來(lái)說(shuō)比較簡(jiǎn)單，主要是應用了圖層蒙版和斜面浮雕效果，具體過(guò)程就不再詳述。
上面提到在對掃描得到的圖片的處理中，需要換成比較美觀(guān)的背景，所以較多用到選取操作，選取工具很多，如套索或磁性套索工具，魔棒工具以及自由鋼筆工具。在被選物與背景色差較大時(shí)用魔棒工具是可以得到事半功倍的效果的，不管使用那一種工具再把物體選中后再選擇反選，剪切圖象后把背景復制為一新圖層調整其大小至與邊框相配合，然后把物體設為最上層就完成了制作。
�。ㄋ模┢矫鎴D、文字、聲音和音樂(lè )的制作
平面圖、文字、聲音和音樂(lè )等幾種媒體形式的制作、錄入、合成以及連接都比較簡(jiǎn)單，不再詳述。
三、網(wǎng)頁(yè)的制作
�。ㄒ唬〧rontPage2000簡(jiǎn)介
隨著(zhù)國際互聯(lián)網(wǎng)的日益普及，各種各樣的網(wǎng)頁(yè)設計工具應運而生。在各類(lèi)網(wǎng)頁(yè)工具，微軟的frontpage2000是少數真正“所見(jiàn)即所得”的網(wǎng)頁(yè)工具，很適合初學(xué)者使用。
進(jìn)入frontpage2000的操作環(huán)境，可以看到程序的界面大致可以分為以下幾個(gè)部分：
*菜單欄
*工具條
*視圖條
*工作區
*狀態(tài)欄
1、主頁(yè)的制作
對frontpage2000有了一定的了解后，下面，通過(guò)主頁(yè)為例，介紹一下網(wǎng)頁(yè)的制作過(guò)程。
首先，創(chuàng )建一個(gè)新網(wǎng)站。
進(jìn)入frontpage2000開(kāi)發(fā)環(huán)境后，選擇“文件”菜單中的“新建”菜單項，再選擇子菜單項中的“站點(diǎn)”菜單項。
在隨后彈出的“新建”對話(huà)框中，可以看到一個(gè)“站點(diǎn)”標簽頁(yè)，其中顯示了frontpage缺省的5中模板和3種向導，點(diǎn)擊右邊的兩個(gè)圖表可以切換列表顯示和大圖表顯示，組合下拉框中可以輸入路徑確定新站點(diǎn)的存放位置。
選擇最簡(jiǎn)單的空模板，里面什么也沒(méi)有，便于我們以后白手起家，建立自己獨特的風(fēng)格，然后單擊“確定”即可完成一個(gè)空站點(diǎn)的建立。（如圖）
然后，建立網(wǎng)站的導航結構。
要想使網(wǎng)站方便訪(fǎng)問(wèn)者瀏覽，網(wǎng)頁(yè)與網(wǎng)頁(yè)之間就必須有合理的結構、導航蘭和恰當位置的超鏈。最好的辦法是建立完整的導航結構。
進(jìn)入導航視圖，系統將當前頁(yè)默認為“主頁(yè)”，選中主頁(yè)，單擊新建圖標就可以建立相應的主頁(yè)的下一層網(wǎng)頁(yè)（ 如圖以此類(lèi)推），便可以快捷的建立一個(gè)完整、直觀(guān)的網(wǎng)站結構，結構建立后，在頁(yè)面上插入導航條時(shí)，frontpage 會(huì )自動(dòng)加入正確的鏈接，相當方便。
最后，建設主頁(yè)。
�。�、添加背景
返回頁(yè)面視圖，在工作區右擊，在彈出的菜單條中選中“網(wǎng)頁(yè)屬性”，在彈出的對話(huà)框中點(diǎn)擊“背景”標簽頁(yè)，在“背景圖片”和“水印”前打上鉤，在瀏覽框輸入背景圖片的路徑，單擊確定即可。（如圖）
�。�、設立共享邊框
在工作區右擊，在彈出的菜單條中選中“共享邊框”，在如圖所示的對話(huà)框中選中“所有網(wǎng)頁(yè)”“上（T）”“包含導航按鈕”，單擊確定。這樣共享邊框就設好了，設共享邊框的目的，是為了讓所有的頁(yè)面中都能顯示這部分內容，使網(wǎng)頁(yè)有一個(gè)相同的主題，同時(shí)減少重復工作。
�。�、創(chuàng )立表格
為了能夠方便的實(shí)現圖文混排，使網(wǎng)頁(yè)更生動(dòng)活潑，達到預想的效果，就必須使用好表格，單擊“查看/工具欄/表格”擊打開(kāi)了表格工具欄，選中“”圖標，即能進(jìn)行手動(dòng)制表，表格建立后，還可以編輯表格的屬性，根據需要決定表格的邊框粗細、單元格的間距甚至表格的背景等。（如圖）
�。�、導入圖片
在共享邊框里導入準備好的標頭，以及主頁(yè)的名稱(chēng)“炭調之核心地帶",再選中“炭調之核心地帶"，單擊圖片工具欄中的 圖標，把“炭調之核心地帶"移到表頭上面,主頁(yè)的橫幅就算大功告成了，由于前面設立了共享邊框，所以，在主頁(yè)以外的其他頁(yè)面上，也都能看到這個(gè)漂亮的橫幅了。用同樣的方法，把所需的圖片分別導入，然后稍加編輯即可。
�。�、導入文字
在frontpage2000里編輯文字和word完全一樣，所以，只要使用過(guò)word的人，都能在熟悉的環(huán)境里編輯文檔。當然，也可以先在別的文檔編輯器里編輯好后，直接導入。
�。�、字幕
為使網(wǎng)頁(yè)更顯生動(dòng)，我們在適當位置插入了一行活動(dòng)的歡迎信息。單級“插入/組件/字幕”再如圖所示的對話(huà)框中，輸入想要顯示的文字，選擇顯示速度、顯示方式，選擇字體、顏色等屬性。在主頁(yè)最下面的作者信息也采用了字幕效果。
�。�、超聯(lián)及導航條
現在，主頁(yè)的主體部分已經(jīng)基本上制作完成了，還剩下最后一項工作，建立超鏈。只有建立超鏈，主頁(yè)才能鏈接到其他的頁(yè)面上去，沒(méi)有超鏈的主頁(yè)不能算真正的網(wǎng)頁(yè)。單級“插入/超鏈接”再如圖所示的對話(huà)框種選擇所要鏈接的目標，單擊確定即可。
導航條其實(shí)是一系列超鏈的集合，通常導航條包含了主要頁(yè)面的超鏈，顯示在每個(gè)頁(yè)面上以方便訪(fǎng)問(wèn)者瀏覽。為了把導航條顯示在每個(gè)頁(yè)面上，當然要放在共享邊框中了,單級“插入/導航欄”再如上圖所示的對話(huà)框種選擇所要的效果即可。
�。�、背景音樂(lè )
到這里為止，我們的主頁(yè)已基本做完，再加上一段輕松的音樂(lè )，已增加網(wǎng)頁(yè)的吸引力。右擊，選擇網(wǎng)頁(yè)屬性（如下圖）選擇背景音樂(lè )，選擇反復播放 ，確定。至此，主頁(yè)就算大功告成了。最后效果如下圖所示。
參考文獻
1、《Front Page 2000現用現查》作者：余慶豐 中央廣播電視大學(xué)出版社 1999年5月
2、《中文版Photoshop 5.5效果與實(shí)例》作者：陳曉亞 倪楠 電子工業(yè)出版社 1999年11月
3、《火星人-3D Studio MAX三維動(dòng)畫(huà)大制作》作者：王琦 北京希望電子出版社 1998年8月
【多媒體教學(xué)網(wǎng)頁(yè)的制作過(guò)程與技術(shù)】相關(guān)文章：
多媒體教學(xué)網(wǎng)頁(yè)的制作過(guò)程07-05
多媒體課件與網(wǎng)頁(yè)制作比賽的方案07-04