發展階段

發展階段將根據分析階段的各項規劃進行視覺設計、動畫與影片製作、網頁編

輯、程式撰寫、系統各元件整合與發展評估計畫。在發展階段將完成的「e-Drawing 線 上 教 學 系 統 」 的 網 頁 將 存 放 於 公 東 高 工 電 腦 繪 圖 科 的 伺 服 器 中

（http://cad.ktus.ttct.edu.tw/e-drawing /），並不斷重複進行測試與修改的工作，直到所有 內容素材與功能皆確認無誤。

一、視覺設計

「e-Drawing 線上教學系統」全球資訊網之標誌圖案（參見圖 3-2），以「ｅ」代 表數位化，以「齒輪」代表機械，以「Drawing」和「滑鼠」表示電腦繪圖。由研究者 採用 Ulead PhotoImpact 軟體製作元件與特效處理，該軟體是一種擁有視覺化親和介面 操作且功能強大的影像編修及繪圖軟體，可自動進行影像特效處理，讓作品看起來專 業細緻；不需要了解複雜的程式與指令，就可作出多種花樣的繪圖物件。Flash 軟體是 一種向量繪圖軟體、動畫軟體、網頁製作軟體廣泛應用於網頁動畫，用 PhotoImpact 軟體製作元件與特效處理後，再使用 Flash 軟體製作齒輪之旋轉動畫，使畫面生動活 潑。

「e-Drawing 線上教學系統」全球資訊網首頁（圖 4-3）以鮮明藍色波紋為底，將 教育部顧問室「創造力入口網站」之標誌圖案置於左側，右側為台東大學與公東高工 校徽交替切換，意味教育部、台東大學與公東高工合作建置之網站；以最廣泛使用之 萬用序列埠（USB）接頭當按鈕連結進入次網頁，代表快速傳輸、隨處可用之設計；

最下方則提醒使用者瀏覽本網頁時最佳螢幕解析度為 1024x768 像素。

圖 4-3 「e-Drawing 線上教學系統」全球資訊網首頁

二、示範動畫與 3D 影片製作

本研究在視訊化教材的編製方面，主要採用 Camtasia Studio，Camtasia Studio 是一 款專門用來錄製螢幕影音的軟體，它能在任何顏色模式下錄製螢幕動作，包括影像、

音效、滑鼠移動的軌跡、解說聲音等，另外還具有及時播放和編輯壓縮的功能，可對 視頻片段進行剪接、增加轉場效果等（圖 4-4）。Camtasia Studio 中的五個子軟體提供 所有在製作影片時所需要的功能，從錄製、擷取、加入文字符號、圖片效果、轉檔、

壓縮等。先由 Camtasia Recorder 錄製螢幕；Camtasia Audio Editor 可對錄製的聲音作後 製編輯；錄製好的影片可由 Camtasia Studio 加入文字、指標、圖片來加強影片的說明 效果；Camtasia Theater 則提供您將錄製好的各個 Flash 影片整合成網頁式的互動選 單；Camtasia MenuMaker 則提供您快速的將各個影片整合成自動播放檔，並作成互動 式選單，方便您將影片燒錄到光碟中、最後提供了 Camtasia Player 來撥放。

圖 4-4 Camtasia Studio 操作畫面

此軟體可應用在如軟體介紹、產品說明、行銷活動等，影片也能轉成多種常用格 式包括有：AVI、Macromedia Flash (SWF)、Macromedia Flash Video(FLV)、Windows Media (WMV)、QuickTime (MOV)、RealMedia (RM)、Executable(EXE)、Animated GIF。為使影 片播放順暢，匯出採用 Macromedia Flash (SWF)格式，此檔案格式易於瀏覽器播放，為 提供學習者自主，必須能彈性調整以順應學習者的學習狀態，因而使用 Camtasia Studio 的特性，在瀏覽器播放畫面下由學習者可自行拖曳控制調整、選擇播放的起點，依照 自己的學習能力決定內容，自行安排學習進度與次序，並可快速反覆播放學習片段（圖 4-5）。

圖 4-5 瀏覽器播放 Camtasia Studio 所製作教學影片畫面

三、網頁編輯

在人力資源部份除研究者以外，其他教師皆不熟悉網頁編輯，因而教材部份請教 師們提供後，由研究者以 Microsoft FrontPage 軟體製作網頁，圖片處理部份仍使用 PhotoImpact 軟體，動畫處理亦採用 Flash 軟體。

Microsoft FrontPage 的網站建置及管理工具能容易地管理網站，它屬於 Microsoft Office 系列套裝軟體之一，操作介面與 Microsoft Word 大致相同，網頁設計時可將元 件準確地置放在網頁中，讓該網站所有的網頁保有一致風格及外觀，並可自由的輸入 與編輯 HTML；使輕易運用最新的網路科技，卻完全不需撰寫任何程式。網頁編輯完 成後，再以 FTP 軟體上傳至伺服器。

四、程式撰寫

研究者並非資訊科教師，對程式語法認知不深，但憑藉個人興趣習得少許知識，

撰寫新程式實有困難，但網路上有許多前輩、高手將設計好之程式分享，使本研究之 構想得以落實。本研究在程式撰寫部份皆採用 ASP（Active Server Pages）語法，即「動 態伺服器網頁」簡稱為 ASP， ASP 之所以能受到大家的重視與使用的原因，主要在 於所產生的執行結果都是標準的 HTML 格式，而且這些程式是在網路伺服器端中執 行，使用一般的瀏覽器（如 IE 或 Netscape 等） 都可以正確的獲得 ASP 的「執行」

結果，並且將這 ASP 執行的結果直接在瀏覽器中「瀏覽」，不像 VBScript 或 JavaScript 是在使用者客戶端（Client）的瀏覽器上執行，若使用 VBScript 來設計程式 ，客戶端 在 IE 瀏覽器中可以顯示程式執行的結果，可是，客戶端若使用 Netscape 瀏覽器就無 法顯示 VBScript 的執行結果。本研究所用線上測驗、聊天室與討論區三部份，分別說 明如下：

（一）、線上測驗部份：取自台南高工林義順老師所撰寫的程式，由林老師開放 原始碼下載後，並依其說明做下列之設定：

1. 在伺服器的 IIS 目錄下建立一目錄 qc。

2. 下載解壓縮首頁檔至目錄 qc 。

3. 下載解壓縮 QC_V123.dll 至 IIS 下的 Scripts 目錄（圖 4-6）。

圖 4-6 Scripts 目錄

4. qc 下建立 database 目錄。

5. 下載解壓縮 EDC.mdb MDC.mdb 至 database 目錄。

6. 設定 edc.mdb 、mdc.mdb 的安全權限（圖 4-7）。

圖 4-7 安全權限設定

7. 由 控制台/系統管理工具/資料來源，設定 ODBC 資料庫，分別為 EDLevelC / MDLevelC（圖 4-8）。

圖 4-8 ODBC 資料庫設定

8. 如此一般，一個線上測驗的範例平台建立完成，接著是如何修改其資 料，合於各學科所用。

9. 資料庫格式 : 以 Access 開啟 EDC.mdb ， 有 3 個 tablet ，只要將 是非題與選擇題分別放在 YN 與 CH 檔案即可（圖 4-9）。

圖 4-9 Access 資料庫編輯

10. 圖片部份將檔案置於 img 資料夾，再以 html 語法，給予正確的圖檔 路徑連結（圖 4-10、圖 4-11）。

圖 4-10 是非題資料庫編輯

圖 4-11 選擇題資料庫編輯

11. 因受到程式內定的欄位長度不可大於 255 bytes，所以題長最多為 255 bytes。

12. 以 Frontpage 編輯 default.asp （圖 4-12）。

13. 連接線所指的部份是 from 內的物件與 dll 溝通的名稱切勿更動。

圖 4-12 編輯 default.asp 檔案

14. 命題範圍之參數的數值，可依題庫的多寡而變動（圖 4-13、圖 4-14）。

圖 4-13 是非題命題範圍設定

圖 4-14 選擇題命題範圍設定

15. 模擬測驗時總題數之設定（圖 4-15）。

圖 4-15 總題數之設定

16. 設定完成，測試使用。

（二）、討論留言區：使用淡江大學電機工程學系陳家榜所撰寫之程式，從藍色 小舖（http://www.blueshop.com.tw/）下載，提供非商業行為完全免費使用，目前已經出 到第三版 CJB-ASP 3.02，完全是由 ASP 技術來開發，作者允許可以任意變更程式內容，

僅需保留版權宣告。「CJB-ASP 論壇」大部份的基本的功能都相當的完善，且須先註

冊才能留言，可避免不當使用留言，使用者身份分為譚主、版主及一般會員，各有不 同權限，管理方便。使用時解壓縮至目錄下即可使用，不需特別設定，使用起來也相 當的簡單（圖 4-16）。

圖 4-16 討論留言區

（三）、線上聊天室：由作者阿德設計撰寫之程式，從藍色小舖下載，提供非商 業行為免費使用，下載後解壓縮使用，需將 global.asa 檔案放在虛擬目錄的根目錄下，

主畫面為 chat.asp 登入時可選擇發言顏色，登入後主畫面分割成五部份：

（1）title.asp：表頭，會顯示訪客的姓名，IP 及登入時間。

（2）chatlist.asp：顯示聊天內容。

（3）peolist.asp：顯示線上人名，若是管理者登入會有「踢人」的功能。

（4）menu.asp：輸入管理者密碼，管理者有清除聊天內容的功能，其餘訪客有離 開的功能。

（5）chatin.asp：提供輸入聊天訊息的表單。

使用相當簡單，安裝亦不難，作者並提供電子信箱使有疑難者可查詢（圖 4-17）。

圖 4-17 線上聊天室