第叁章 研究方法與步驟
一、研究工具
(一)多媒體（實驗影片）製作設備
1.硬體部分
(1)國中自然與生活科技課本（南一版第四冊）
(2)實驗相關器材及藥品
(3)數位攝影機 DV（Panasonic PV-GS70 3CCD）
(4)個人電腦
中央處理器：Intel Pentium 2.60GHz 記憶體：512MB
硬碟：Maxtor 120GB HD
顯示卡：WinFast A340 顯示卡 IEEE 1394 卡
2.軟體部分
(1)Windows Movie Maker（影像擷取）
(2)會聲會影 7.0 SE DVD（Ulead VideoStudio 7.0 SE DVD）
(3)網路影音視訊播放軟體 Windows Media Player
(二)網站架設設備
1.硬體部分 (1)伺服器
中央處理器：Intel Pentium 2.20GHz 記憶體：RAM 256MB
硬碟：HITACHI 40GB HD
網路卡：SiS 900-Based PCI Fast Ethernet Adapter
2.軟體部分 (1)伺服器軟體
Microsoft Windows XP Professional AppServ V2.30
1.Apache WebServer Version 1.3.29 2.PHP Script Language Version 4.3.4 3.MySQL Database Version 4.0.16 (2)網頁製作軟體
XOOPS 2.06（eXtensible Object-Oriented Portal System）
（可擴充的物件導向入口網站系統）
影像處理軟體 Ulead PhotoImpact 7 記事本
二、研究步驟
學習網站製作
學習者問卷 實施網路學習 網站規劃設計
1.課程規劃 2.系統規劃
網路學習 多媒體教材
實驗影片製作 1.影片腳本設計 2.實驗影片製作
提出研究結論與建議
圖 3.1.1
三、實驗影片的拍攝與製作
(一)實驗影片拍攝
1.實驗影片拍攝流程圖
進行實驗影片拍攝 拍攝工作準備 1.DV 及 DV 帶準備
2.燈光及場地佈置 準備各項 實驗器材及藥品
製作腳本 選定主題
圖 3.3.1-1
2.選定主題
本次研究的實驗主題是從南一版國中自然與生活科技第四冊實 驗（化學）中挑選出來，挑選條件如下：
(1)實驗較具危險性：有些實驗牽涉到強酸、強鹼、燃燒及產生有毒氣 體等，這些比較具危險性的藥品或實驗操作，如能將其拍成影片，
則可減少實驗操作意外的發生率。
※相關實驗主題：實驗 3-2 酸和鹼的性質 實驗 4-1 金屬的氧化 實驗 4-2 非金屬的氧化
(2)實驗藥品較具污染性：有些實驗藥品在實驗完後，若排放至大自然 中可能對環境造成污染，如能將其拍成影片，則可減輕實驗對環 境所造成之污染。
※相關實驗主題：實驗 2-2 濃度對化學平衡的影響
(3)需要較繁雜的藥品處理：有些實驗需要重複稱量藥品質量，藥品要 敲碎或磨粉處理，並且要不斷量取溶液體積，繁複的各項處理流 程可能會耗費相當多的時間，若能將其拍成影片，不但節省時間，
而且不需重覆作藥品處理即可重覆觀看實驗。
※相關實驗主題：實驗 2-1 濃度與表面積對反應速率的影響
3.製作腳本
(1)實驗影片腳本設計圖(本圖版面已略做調整) 實驗影片腳本設計圖
實驗名稱： 畫面號碼：
畫面 畫面說明
藥品
器材
文字 旁白
圖 3.3.1-2
實驗名稱：實驗的名稱。
畫面號碼：整個實驗影片畫面出現的順序編號（採流水號編號）。
畫 面：畫面簡圖，包括實驗器材及藥品位置，文字出現位置 畫面說明：此畫面拍攝時間，各項器材藥品擺放的位置、出現順序、
時間間隔及鏡頭拉遠拉近等。
藥 品：該實驗畫面中所需之實驗藥品。
器 材：除了該實驗畫面中所需之實驗器材外，還包括拍攝時所需 之輔助器材，例如：黑色背板（此背板可當背景使用，
使實驗觀察更加清楚）。
文 字：該實驗畫面中所需出現之文字（包括文字的位置、大小、
出現順序及時間）。
旁 白：此畫面出現時之旁白內容、旁白時間、與畫面出現及結束 間的時間間隔。
(二)實驗影片製作
本次影片製作所使用的軟體為微軟公司的 Windows Movie Maker 2.0 與友立資訊公司的會聲會影 7.0 SE DVD（Ulead VideoStudio 7.0 SE DVD）
圖 3.3.2-1
Windows Movie Maker 2.0
圖 3.3.2-2
會聲會影 7.0 SE DVD
1.實驗影片製作流程圖
圖 3.3.2-3
2.影片擷取
本次影片擷取所使用的軟體為微軟公司的 Windows Movie Maker 2.0，這是 Windows XP 中所附加的軟體，功能強大，操作簡便。以 下為影片擷取步驟。
(1)先將 DV 與電腦以 IEEE1394 線連接，打開 DV 電源，將功能開至 VCR 播放功能。
(2)開啟 Windows Movie Maker 2.0 選擇「從視訊裝置擷取」。 設定轉場特效
錄製旁白
建立視訊檔 加入文字 影片修剪編輯
影片擷取
圖 3.3.2-4
(3)選取你要用於擷取的視訊擷取裝置（也就是你的 DV 型號），本次 使用 DV 為 3CCD 產品，一般 DV 為單 CCD，3CCD 就是用三片 CCD（chrge-couple device）處理三原色 RGB。3CCD 是把光線利 用光學菱鏡分為 R/G/B，再分別由 3 個 R/G/B 濾色 CCD 來感應讀 取，因此色彩較真實，而單 CCD 是由 1 個 CCD 負責感應讀取，
再模擬成 RGB 三原色，顏色較易失真。
圖 3.3.2-5
(4)輸入擷取後視訊檔存放的「位置」及「檔案名稱」。
圖 3.3.2-6
(5)選擇儲存檔案類型，建議選擇 AVI 檔案格式，AVI 格式是由微軟公 司所定義的，其品質優良，幾乎沒有經過任何壓縮，因本研究所 製作之實驗影片在剪輯過程中會經過壓縮處理，因此在擷取時最 好不要壓縮，以免經過太多次壓縮而使影像不清楚，因此擷取時 建議選擇 AVI 檔案格式，不過 AVI 檔案格式檔案會非常大，需要 非常大的硬碟來儲存（一分鐘影片約 178MB，一捲六十分鐘的 DV 全部從頭到尾擷取下來大概要 10GB 的硬碟空間）
圖 3.3.2-7
(6)選擇自動擷取全部磁帶，在這裡我們先將全部的帶子擷取下來，再 交由會聲會影 7.0 SE DVD 來做剪輯的動作，我們不在這裡作剪輯 的動作。
圖 3.3.2-8
(7)電腦會自動將 DV 倒帶，並且開始擷取，擷取結束後會自動停止並 且存檔。
圖 3.3.2-9 (8)到此全部影帶擷取完成。
3.影片修剪編輯
(1)打開「會聲會影 7.0 SE DVD」。 (2)點選工具列上「編輯」
圖 3.3.2-10
(3)點選 按鈕載入視訊
圖 3.3.2-11
(4)點選「金屬氧化」檔案，按「開啟」。
圖 3.3.2-12
(5)載入「金屬氧化.avi」檔案。
圖 3.3.2-13
(6)開始修剪視訊
圖 3.3.2-14
(7)首先拉動「即時預覽列」上按鈕至欲修剪影片開始位置，可從
「時間碼」再進行微調至正確開始位置。
(8)按下 「標記開始時間」鈕，再拉動「即時預覽列」上按鈕至欲 修剪影片結束位置，可從 「時間碼」再進行微調至正 確結束位置。
(9)再按下 「標記結束時間鈕」，在「修剪列」上出現修剪的影片段 落。
(10)按下「儲存修剪的視訊」，檔名為「金屬氧化-1.avi」，繼續修剪其 他需要的視訊片段。
其他修剪的視訊
圖 3.3.2-15
(11) 開始編輯視訊，首先將視訊素材按實驗順序拖放至腳本區
圖 3.3.2-16
註：記得將各視訊片段設成靜音（本實驗影片拍攝時不必擔心 聲音問題，因為在剪輯後可將影片設為靜音，然後事後再 配音或錄製語音旁白）。
4.設定轉場特效
(1)點選工具列上「特效」標籤。
圖 3.3.2-17
(2)選擇轉場特效種類及類型，拖放至「腳本區」兩視訊中間之轉場特 效區。
種類 類型
轉場特效區 圖 3.3.2-18
(3)設定轉場期間(轉場時間預設值為 1 秒)。
圖 3.3.2-19
5.加入文字
(1)點選工具列上「標題」標籤
圖 3.3.2-20
(2)將「時間軸」的開始位置移至「文字」要開始出現的位置上。
圖 3.3.2-21
(3)點選「製作標題」
圖 3.3.2-22
(4)在畫面上輸入要出現的文字「鎂粉燃燒」。
圖 3.3.2-23
(5)設定文字「字型」、「大小」、「顏色」等格式後，點選「更新標題」。
圖 3.3.2-24
(6)做好「編輯」設定後，再按「動畫」標籤進行文字動畫設定。
圖 3.3.2-25
(7)設定好後，到「標題文字軌」上用拖曳的方式將「文字」長度拉至 適當位置。
圖 3.3.2-26
6.錄製旁白
(1)點選功能表列「音訊」標籤。
圖 3.3.2-27
(2)將「時間軸」的開始位置移至要開始播放旁白的位置。
圖 3.3.2-28
(3)點選「錄製語音」標籤。
圖 3.3.2-29
(4)此時會跳出「調整音量」視窗，你可以測試麥克風聲音是否可進入 電腦，確定後按下「開始」進行錄製，依照「實驗影片腳本設計圖」
中「旁白」項目內容錄製旁白。
圖 3.3.2-30
(5)錄製完畢後點選「停止錄製語音」標籤，結束錄製旁白。
圖 3.3.2-31
(6)錄製完成後可在「語音軌」上看到剛剛錄製的旁白檔案。
圖 3.3.2-32
7.建立視訊檔
(1)點選功能表列「共用」標籤。
圖 3.3.2-33
(2)點選「建立視訊檔」標籤。
圖 3.3.2-34
(3)選擇檔案格式為「Windows Media 串流(*.wmv)」檔案較小，適合 網路播放，但是影像較不清楚，若選擇檔案格式為 NTSC Mpeg2 720× 480(29.97 fps)，影像較清晰，但檔案較大不適合網路播放。
圖 3.3.2-35
(4)輸入檔名「金屬氧化」，至此整個實驗影片製作完成。
圖 3.3.2-36
(5)記得點選功能表列「檔案」標籤中的「儲存」標籤，儲存成專案「金 屬氧化.VSP」，如此以後才能繼續增刪或修改實驗影片內容。
圖 3.3.2-37
四、學習網站製作
網站製作對一般人來說並不是非常容易，尤其要製作具有互動性及 完善管理介面的網站更是不容易，因為這可能要懂一些程式語言及資 料庫觀念，而一個好的學習網站互動性及完善管理介面卻又是不可或 缺的。
在一次偶然機會，我接觸到一個免費的架站軟體 XOOPS，XOOPS 是一種以 PHP 撰寫並搭配 MySQL 資料庫來儲存資料的架站工具，
XOOPS 是 eXtensible Object-Oriented Portal System （可擴充的物件導 向入口網站系統）的縮寫，是一個以物件導向為主的架站模組，你可 以隨心所欲的決定你的網站需要哪些功能，並且只要一些簡單的設 定，就可自由排列網站版面區塊，最重要的是它具有下列幾項優點。
一、跨平台的服務環境：XOOPS 可在不同作業系統上運作。
二、簡單安裝程序：就算你沒有學過網頁設計、程式設計、資料庫，
你也可以參考坊間相關書籍，一步一步快速安裝好 XOOPS。
三、自由的介面設計：XOOPS 的畫面架構是由布景與區塊所構成，你 可以自由排列區塊、更換佈景。
四、功能強大的管理介面：功能強大的網站管理系統，可以讓你快速 又方便的管理整個網站的功能架構以及網站的內容及資料。
五、嚴謹的開發過程：XOOPS 的整體架構核心是由一群專業的開發人 員來控管，而模組的開發則由廣大的 PHP 社群來設計，這樣核心 架構有其安全性與穩定性，而模組的開發也有其多樣性。
當然最重要的是 XOOPS 是免費的，因此你可以免費使用它以及修 改它。
XOOPS 的設計是在 Apache + PHP + MySQL 環境下運作，Apache 是網站伺服器，你也許聽過 Windows 平台的 IIS 及 PWS，這些也是伺 服器的一種，PHP 是一種程式語言，如同你所聽到的 ASP 一樣，這些 程式都可以讓你做到互動網站的效果，MySQL 是一種資料庫軟體，其 它像 MS-SQL Server、Oracle 等，也都是資料庫軟體，當然最重要的是 Apache、PHP 及 MySQL 這三種軟體都是免費的。
所以本次網站製作採取 Apache + PHP + MySQL + XOOPS 的架構，
再修改一些程式碼，加入一些模組，再將一些教學素材，例如：自製 實驗影片、掃描的圖片等加入其中。
(一)網站製作流程圖
文獻探討 1.網路學習 2.多媒體教材 3.學習網站製作
確定網站內容
網站架設 1.XOOPS 2.Apache 3.PHP 4.MySQL
學習網站
加入多媒體
加入課程內容 修改程式及版面
圖 3.4.1
(二)確定網站內容
本網站名稱為國中自然與生活科技學習網，課程內容以國中自然 與生活科技領域學習為主，教材內容採南一版第四冊（化學內容）
為主，網站設計理念如下：
一、提供學生一個完整的學習歷程。
二、利用網路學習社群理念於自然與生活科技教學。
三、整合教學各項媒體資源，提供學生多元學習方式及模式。
網頁使用採會員制,只有註冊的會員才能使用，網站內容可分為 學習區、測驗區、資訊區、管理區共四部分，茲說明如下：
1.學習區
(1)課本內容區：由原有軟體的「精華文章區」功能改編而來，為南一 版自然與生活科技課本電子檔,學生可查詢課文內容而不用邊上網 邊翻課本。
(2)名詞解釋區：由原有軟體的「FAQ-問題與解答區」功能改編而來，
提供課本中一些相關名詞解釋及與此名詞相關延伸教材內容,並可 利用搜尋功能輸入關鍵字,即可查詢到與此名詞相關內容
(3)問題討論區：由原有軟體的「討論區」功能改編而來，提供一個解 決學生疑惑的地方，課本內每一章皆設置一討論版,學生對課本或 自然有任何問題皆可在此提出,由自然老師負責解答，學生也可解 答他人提出之問題。
(4)多媒體區：由原有軟體的「檔案下載區」功能改編而來，提供一些 自然與生活科技方面的教學媒體,如影片、圖片、簡報、動畫等...
供學生下載觀看,學生亦可提供自己在網站上看過不錯的教學媒體
供他人下載,不過必須經過管理者的審核,才能公佈.
(5)網站連結區：為原有軟體之功能，提供一些與自然與生活科技學習 相關的網站連結,加深加廣學生學習，學生亦可提供連結,不過必須 經過管理者的審核,才能公佈。
(6)南一版專區：由軟體中「新增區塊」功能新增區塊，提供南一版教 材附贈之教學媒體及南一版網站網頁資源連結。
(7)實驗影片區：為自行自網路上下載之模組功能，為本網頁的重點, 為一實驗影片的隨選系統,會員可由目錄中點選實驗影片,或教學 影片觀賞。
(8)搜尋區：為軟體本身既有的功能，你只要輸入關鍵字詞,即可查詢 到網頁中與此字詞相關主題及內容。
2.測驗區
(1)線上測驗區：線上題庫供學生練習,繳卷後會公佈答案,並將分數儲 存於資料庫，提供學生自我評量機會。
3.資訊區
(1)誰在線上區：為軟體本身既有的功能，上線同學最常會看哪一些人 有上線，此區可發揮網路學習社群與合作學習的功能，
(2)發表數排行區：為軟體本身既有的功能，每個會員(學生)所發表的 文章,或在討論區上提問或回答問題的篇數皆會被計算為發表數, 發表數最多的前 10 名同學的帳號會被公佈在首頁,如此可增加學 生的競爭,有助於學生學習興趣提昇。
(3)個人資訊區：為軟體本身既有的功能，記錄個人基本資料及學習的 歷程，也有會員間互相通訊的功能，有維持社群存在的功能。
4.管理區
(1)網站管理系統：為軟體本身既有的功能，在此可輸入課程，設定一 些網站參數，其中會員監視器的功能是至網路上下載之模組，可 記錄會員登入的時間及次數，及其所瀏覽的頁面與開啟的檔案名 稱及次數。
(三)網站架設
1.在 Windows XP 作業系統上安裝 Appserv（Apache+PHP+MySQL）網 頁伺服器軟體，並做相關設定(安裝方法請參閱 XOOPS2 一看就懂，
吳聲毅，民 93)19。
2.安裝 XOOPS 架站軟體軟體，並做相關設定(安裝方法請參閱 XOOPS2 一看就懂，吳聲毅，民 93)19。
3. 更改模組名稱、圖片及功能：
圖 3.4.3-1
4.「課本內容區」的製作：
(1)點選 按鈕，進入網站管理系統。
(2)點選 按鈕
(3)至「新增課本內容」區輸入「課本內容名稱」及「課本內容圖片」
檔名(該圖檔事先以 Photoimpact 7 元件設計師製作好備用)。
圖 3.4.3-2
(4)新增「主題」名稱，將該章節課本事先用掃描器掃成圖片檔，利用 插入圖片語法將圖片檔輸入至「內容」區，按下新增文章。
圖 3.4.3-3
5.「名詞解釋區」的製作：
(1) 點選 按鈕，進入網站管理系統。
(2)點選
(3)點選「增加分類」，輸入「名詞」內容及「排序」，按下「確定送出」，
即可增加名詞解釋分類。
圖 3.4.3-4
(4)點選「名詞與解釋」鈕
圖 3.4.3-5
(5)於「增加名詞」區內輸入「名詞」名稱及「排序」，並於「解釋」
區內輸入名詞解釋的內容資料，點選「確定送出」鈕。
圖 3.4.3-6
(6)即可增加名詞
圖 3.4.3-7
6.「問題討論區」的製作：
(1)點選 按鈕，進入網站管理系統。
(2)點選 鈕。
(3)點選「新增分類」。
圖 3.4.3-8
(4)輸入「分類名稱」，按下「建立分類」鈕，新增分類。
圖 3.4.3-9
(5)點選「新增討論版」，輸入「討論版名稱」及「討論版簡介」，選擇
「版主群」，選擇「討論群分類」，按下「建立新討論版」鈕，即完 成新討論版的建立。
圖 3.4.3-10
7.「多媒體區」的製作：
(1) 點選 按鈕，進入網站管理系統。
(2)點選 鈕。
(3)點選「新增、修改及刪除分類/檔案」。
圖 3.4.3-11
(4)於「新增主分類項目」區輸入「項目」名稱後，按下「新增」鈕。
圖 3.4.3-12
(5)於「新增次分類項目」區輸入「項目」名稱後，按下「新增」鈕。
(次分類項目包括動畫、影片、簡報及圖片四種)
圖 3.4.3-13
(6)於「新增檔案」區輸入檔案的「下載名稱」、「下載網址」、「分類」
及「來源網站」，並於「檔案內容」區內對此檔案大概內容作一說 明，按下「新增」鈕後，即完成多媒區多媒體檔案新增的工作。
圖 3.4.3-14
8.「網站連結區」的製作：
(1)點選 按鈕，進入網站管理系統。
(2)點選 鈕。
(3) 點選「新增、修改及刪除分類/位置」。
圖 3.4.3-15
(4) 於「新增主分類項目」區輸入「項目」名稱後，按下「新增」鈕
（主分類項目可分為化學、物理、生物、地球科學及理化等五類）。
圖 3.4.3-16
(5)於「新增網址」區輸入檔案的「網站名稱」、「網站網址」及選擇「分 類」，並於「網站簡介」區內對此網站大概內容作一說明，按下「新 增」鈕後，即完成網站連結區新增網站的工作。
圖 3.4.3-17
9.「南一版專區」及「線上測驗區」的製作：
(1)點選 按鈕，進入網站管理系統。
(2)點選 鈕。
(3)點選「區塊管理」按鈕。
圖 3.4.3-18
(4)於「新增區塊」區，「區塊形式」選擇（區塊位置-右），「排序」輸 入 3，「顯示於」選擇（全部頁面），並且輸入「主題」為（南一版專 區），在於「內容」區輸入超鏈結語法，按下「確定送出」鈕，即完 成南一版專區區塊建立，線上測驗區的建立方法同上。
圖 3.4.3-19 10.「實驗影片區」的製作：
(1)安裝好 mediashow 模組後，直接將製作好之實驗影片檔（副檔名可 為*.avi、*.mpeg、*.wmv）複製到資料夾中即可。
圖 3.4.3-20
