多媒體教學網頁的製作過程與技術

導語：本文以實際經驗為依據，比較詳細地論述了多媒體教學網頁的製作過程、技術要點和注意事項，包括立題、素材的蒐集、多媒體制作和網頁的製作等內容。以下是小編整理的資料，歡迎閲讀參考。

關鍵詞：多媒體、教學網頁、製作

前言

計算機網絡技術的飛速發展，使網絡逐漸滲透到了人類生活的方方面面。特別是國際互聯網的日益普及，越來越多的人們投入到網絡這個無限的空間中去。在教育領域，將網絡運用於教學，已越來越得到人們的重視。目前，各類多媒體軟件很多。但一般的多媒體軟件動輒兩、三百兆，由於網絡傳輸速率的限制，這樣的龐然大物根本無法在網上應用；況且，就算網絡速度跟得上，這些並非為網絡量身定做的軟件，其形式和鏈接關係也不適合在網絡上使用。如何在現有條件下，把網絡的快捷、方便、可共享等特性應用到教學中去，就成為一個關鍵而迫切的現實問題。

一個好的辦法就是將教學內容製成多媒體網頁（教學網站或網校），使學習者可以不受時間和空間的限制自由訪問，並且在直接訪問中瞭解和學習知識。本文以某一小型電源系統的調壓器為例，對多媒體教學網頁的製作過程和技術做一探討。

一、前期準備工作

（一）教學內容的準備

主要是對教學內容進行選取，確定各部分內容的媒體形式。對字幕表述進行推敲，對其它形式定出表現方案，最後還是要形成一個腳本。

（二）圖片素材的收集

1、背景圖的取得

背景圖的來源主要是書報資料和素材庫光盤中的一些圖片，如果圖片效果不太理想，可以用photoshop進行必要的修飾。

2、實物圖片的取得

一般沒有現成的實物圖片，我們可以找了一個比較完好的實物，從多個角度進行拍攝，分解後，再對各個部件進行拍攝。最後，選擇出效果好的圖片，利用掃描儀掃描得到數字文件，當然也可以直接使用數碼相機拍攝。必要時，也要用photoshop處理。

二、多媒體制作過程

（一）三維動畫製作

用3DMAX3.0製作三維動畫的過程大致分為三部分，一是製作物體模型，二是設計動畫效果，三是渲染與輸出。

首先，將調壓器可分為三個塊：支架（包括與散熱器連接的彈簧），散熱器和底板，每塊又可分為若干個子物體，如散熱器中就包括有散熱片、碳柱、螺桿、端蓋、鐵心、線圈、彈簧片,單就一個螺桿來説也是分為六邊形杆，螺帽和帶有螺紋的一段圓形杆。三部分一一完成後再連接為一體，在這一製作過程中主要用到了3DMAX命令面板中的Create(創建)面板和Modify(修改)面板,開始用Standard primitives(原始幾何對象),像Box,Cone等通過對Parameters(參數欄)中的參數的調整來完成所建對象的長,寬,高,半徑,變數(平滑度)等的調整以完成所要求的基本物體形狀。需要合併兩個分別做出的物體時，先點取文件菜單中的Xref Objects選項，在彈出的對話框中點取右上角的添加命令按鈕(Add)隨後在出現的打開文件對話框中打開需要加入的物體文件。即可完成導入操作。將兩物體通過託以旋轉，使其位置配合好之後可同時選中並結合成組以後便可以當成一個物體操作。另外各物體在製作完成時一般給它指定材質。對有關材質與貼圖的操作都集中在材質編輯器中，可以在工具條中單擊Material Editor按鈕將材質編輯器打開，另外也可以直接在鍵盤上按”M”鍵。3DMAX中有一部分自帶的現成材質，也可以在材質樣本框中修改後用Assign Material to selection可將其指定給所選中的物體。其實碳調各部件大都是外表塗了油漆或金屬表面，所以也可以直接在材質編輯面板中，通過自行調整參數獲得與真實部件相似的外觀，主要是選擇好材質類型，在調整其反光特性等參數。

各個部件基本完成後就要將其做成動畫，更清楚的表示出調壓器的結構和各部件的安裝位置。主要的動畫就是旋轉和移動。

如果要實現一個物體的旋轉，比如支架和散熱器部分都有轉動的展示。可以單擊工具欄中選擇並旋轉工具(Select and Rotate)將時間滑塊拖到50幀，打開動畫記錄按鈕，在透視圖中以Y軸為中心將物體旋轉180度完成了部件轉動展示的動畫。

要是需要讓某個或某些部件移動位置，像散熱器拆解動畫，磁鐵拆解動畫等就需要為其設一條路徑，也就是移動的路線，選擇型建模工具中的Line命令，在左視圖中創建一條合適的路徑曲線，路徑曲線設好了再把要移動的部件導入，單擊File菜單中的Merge命令，在Merge file對話框中，可設置渲染的幀數段。最後輸出時一般選Active Time Segment，在Output size中選320*240。在下面的Options中的選項，可以用其默認設置。Reder Output區中需設定要保存輸出文件的位置，名稱及格式，這裏選AVI文件，在Reder scene對話框中第二個卷質欄是MAX Default Scanline A-Buffer(MAX缺省線掃描渲染器A緩衝區)這裏的設置也很重要但一般情況下取默認設置也可以輸出較好的效果。

（二）三維文字製作

在小的GIF字體動畫及立體文字的製作中，用Ulead公司的Cool3D是很方便的，這個軟件雖然不大但功能並不少，操作也很簡單。比如，主頁的標題文字就可以做成一個GIF動畫，在Cool3D中的製作過程如下：

先建立一個新文件，調整尺度為384*58像素，再點擊輸入文本按鈕在彈出的對話框內輸入“********”，然後將其選中改為方正行楷字體，可以通過移動、旋轉、縮放等操作配合添加關鍵幀來完成動畫的製作，當然還要增加一些Cool3D提供的光線、紋理、傾斜等效果，使文字更加飽滿圓潤，並悦目的紋理和光澤，還可以選擇漂亮的背景。各項工作做完後再按需要調整動畫的幀數來控制播放時間的長短，通過調整物體（文字）屬性工具蘭中的環境、光源、表面、反光等各項的亮度、飽和度和色調來達到最佳視覺效果。另外在整個過程中隨時可以用編輯文本按鈕對所輸入的文字進行修改最後一步就是導出動畫（GIF或AVI）文件或導出JPEG圖像，並且可以自行確定影像的輸出質量，比如外場維護中的“工作點的調整”、“外場維護”兩個按鈕的製作就是這樣完成的。當然，質量越高渲染起來就越耗時，着很大程度上也取決於計算機的硬件配置。

在對一些GIF格式的動畫進行簡單的修改以及繪製平面圖是我們選擇了Macromedia公司的Flash4.0中文版，他提供了影片巖石，修改及刪除、添加幀等操作，還可以自行配音，Flash4.0支持很多格式的聲音文件，而且提供了比較齊全的繪圖工具，如鋼筆、鉛筆、吸管、筆刷、墨水瓶等十幾種再配合圖層工具用起來很方便，操作也更加靈活多樣。

（三）圖片、背景的處理

在對圖片的處理以及按鈕的製作中主要用到了Photoshop5.0CS,如所用到的背景圖片大都在Photoshop5.0中經過亮度、對比度以及色相、飽和度、色彩均衡等的調整，使之和頁面色調相配合，達到最令人滿意的效果，另外對一些過大的圖片還要進行裁切，調整大小等操作。例如，對真實碳片電壓調節器進行拍照，掃描得到的通常分辨率高達3400*4600以上，其文件也有1M甚至3—4M大，而網頁頁面默認分辨率只有800*600，所以必須對掃描得到的圖片進行縮放，裁切，旋轉等處理，使其大小和角度均達到要求。

像碳調的調壓原理中，就有“必要性”、“方法”和“原理”三部分它們是通過三個按鈕來連接的，又如調節誤差中有“準確性”及“穩定性”兩個按鈕，碳調結構中有“支架”、“主體”、“配置”三個按鈕，用作這些按鈕的圖片都是通過Photoshop5.0製作完成的。例如“準確性”和“穩定性”兩個按鈕，是先選擇了一副木紋的材質圖作為底圖，然後叢中剪切280*110像素大小的一部分成一新文件（假設命名為P1然後選取左側工具欄中的文字工具，在P1窗口中單擊鼠標左鍵，在文字工具對話框內輸入“穩定性”，並將大小定為90像素字體採用方正行楷顏色為黑色，其他各項取默認設置。然後為其添加圖層蒙版，對文字進行處理，選取濾鏡菜單中的藝術效果—壁畫濾鏡工具。可將畫筆大小，細節，紋理等參數定為2，8，1。單擊“好”確認操作，再應用斜面和浮雕效果，使字體具有一定的立體感。為了使按鈕更有層次感，可以選取背景圖層加入光照效果再合併圖層並導出為JPEG格式的圖片文件，完成操作。而“支架”、“主體”、“配置”按鈕的製作則稍微複雜些，選取背景後，建立一新通道，再輸入“支架”兩字選中宋黑色字體，然後再複製一個新通道Alpha2，將第一通道載入選區打開濾鏡菜單中的模糊工具選取“高斯模糊”濾鏡對話框，設半徑為5像素，然後再選擇反選再一次使用高斯模糊，設半徑為8像素，這樣字體不在稜角分明而有一種朦朧感，然後應用風格化中的“查找邊緣”濾鏡對文字進行描邊處理，再經調整亮度/對比度後整體再應用一次輕度的高斯模糊，然後打開燈光效果對話框，選擇“Default”類型燈光，適當設置參數，如強度15，光澤10，材料60，曝光度0，環繞7，紋理通道選擇複製的`通道Alpha2，再將Alpha1載入選區調整色相/飽和度為色相140，飽和度30，亮度25，並選中着色複選框。最後合併圖層剪切調整大小即得到我們用來做按鈕的原始圖片。調壓原理中用到的三個按鈕製作過程相對來説比較簡單，主要是應用了圖層蒙版和斜面浮雕效果，具體過程就不再詳述。

上面提到在對掃描得到的圖片的處理中，需要換成比較美觀的背景，所以較多用到選取操作，選取工具很多，如套索或磁性套索工具，魔棒工具以及自由鋼筆工具。在被選物與背景色差較大時用魔棒工具是可以得到事半功倍的效果的，不管使用那一種工具再把物體選中後再選擇反選，剪切圖象後把背景複製為一新圖層調整其大小至與邊框相配合，然後把物體設為最上層就完成了製作。

（四）平面圖、文字、聲音和音樂的製作

平面圖、文字、聲音和音樂等幾種媒體形式的製作、錄入、合成以及連接都比較簡單，不再詳述。

三、網頁的製作

（一）FrontPage2000簡介

隨着國際互聯網的日益普及，各種各樣的網頁設計工具應運而生。在各類網頁工具，微軟的frontpage2000是少數真正“所見即所得”的網頁工具，很適合初學者使用。

進入frontpage2000的操作環境，可以看到程序的界面大致可以分為以下幾個部分：

*菜單欄

*工具條

*視圖條

*工作區

*狀態欄

1、主頁的製作

對frontpage2000有了一定的瞭解後，下面，通過主頁為例，介紹一下網頁的製作過程。

首先，創建一個新網站。

進入frontpage2000開發環境後，選擇“文件”菜單中的“新建”菜單項，再選擇子菜單項中的“站點”菜單項。

在隨後彈出的“新建”對話框中，可以看到一個“站點”標籤頁，其中顯示了frontpage缺省的5中模板和3種嚮導，點擊右邊的兩個圖表可以切換列表顯示和大圖表顯示，組合下拉框中可以輸入路徑確定新站點的存放位置。

選擇最簡單的空模板，裏面什麼也沒有，便於我們以後白手起家，建立自己獨特的風格，然後單擊“確定”即可完成一個空站點的建立。（如圖）

然後，建立網站的導航結構。

要想使網站方便訪問者瀏覽，網頁與網頁之間就必須有合理的結構、導航蘭和恰當位置的超鏈。最好的辦法是建立完整的導航結構。

進入導航視圖，系統將當前頁默認為“主頁”，選中主頁，單擊新建圖標就可以建立相應的主頁的下一層網頁（ 如圖以此類推），便可以快捷的建立一個完整、直觀的網站結構，結構建立後，在頁面上插入導航條時，frontpage 會自動加入正確的鏈接，相當方便。

最後，建設主頁。

１、添加背景

返回頁面視圖，在工作區右擊，在彈出的菜單條中選中“網頁屬性”，在彈出的對話框中點擊“背景”標籤頁，在“背景圖片”和“水印”前打上鈎，在瀏覽框輸入背景圖片的路徑，單擊確定即可。（如圖）

２、設立共享邊框

在工作區右擊，在彈出的菜單條中選中“共享邊框”，在如圖所示的對話框中選中“所有網頁”“上（T）”“包含導航按鈕”，單擊確定。這樣共享邊框就設好了，設共享邊框的目的，是為了讓所有的頁面中都能顯示這部分內容，使網頁有一個相同的主題，同時減少重複工作。

３、創立表格

為了能夠方便的實現圖文混排，使網頁更生動活潑，達到預想的效果，就必須使用好表格，單擊“查看/工具欄/表格”擊打開了表格工具欄，選中“”圖標，即能進行手動製表，表格建立後，還可以編輯表格的屬性，根據需要決定表格的邊框粗細、單元格的間距甚至表格的背景等。（如圖）

４、導入圖片

在共享邊框裏導入準備好的標頭，以及主頁的名稱“炭調之核心地帶",再選中“炭調之核心地帶"，單擊圖片工具欄中的 圖標，把“炭調之核心地帶"移到表頭上面,主頁的橫幅就算大功告成了，由於前面設立了共享邊框，所以，在主頁以外的其他頁面上，也都能看到這個漂亮的橫幅了。用同樣的方法，把所需的圖片分別導入，然後稍加編輯即可。

５、導入文字

在frontpage2000裏編輯文字和word完全一樣，所以，只要使用過word的人，都能在熟悉的環境裏編輯文檔。當然，也可以先在別的文檔編輯器裏編輯好後，直接導入。

６、字幕

為使網頁更顯生動，我們在適當位置插入了一行活動的歡迎信息。單級“插入/組件/字幕”再如圖所示的對話框中，輸入想要顯示的文字，選擇顯示速度、顯示方式，選擇字體、顏色等屬性。在主頁最下面的作者信息也採用了字幕效果。

７、超聯及導航條

現在，主頁的主體部分已經基本上製作完成了，還剩下最後一項工作，建立超鏈。只有建立超鏈，主頁才能鏈接到其他的頁面上去，沒有超鏈的主頁不能算真正的網頁。單級“插入/超鏈接”再如圖所示的對話框種選擇所要鏈接的目標，單擊確定即可。

導航條其實是一系列超鏈的集合，通常導航條包含了主要頁面的超鏈，顯示在每個頁面上以方便訪問者瀏覽。為了把導航條顯示在每個頁面上，當然要放在共享邊框中了,單級“插入/導航欄”再如上圖所示的對話框種選擇所要的效果即可。

８、背景音樂

到這裏為止，我們的主頁已基本做完，再加上一段輕鬆的音樂，已增加網頁的吸引力。右擊，選擇網頁屬性（如下圖）選擇背景音樂，選擇反覆播放 ，確定。至此，主頁就算大功告成了。最後效果如下圖所示。

參考文獻

1、《Front Page 2000現用現查》作者：餘慶豐 中央廣播電視大學出版社 1999年5月

2、《中文版Photoshop 5.5效果與實例》作者：陳曉亞 倪楠 電子工業出版社 1999年11月

3、《火星人-3D Studio MAX三維動畫大製作》作者：王琦 北京希望電子出版社 1998年8月