1、網頁製作程序.doc18/12/291教學網頁製作程序（一）決定參與製作的人員如同電影工業一般，教學網頁設計產品是一種多重專業的整合。包括內容專家、教學設計、傳播藝術視覺、聽覺、出版技術、軟體資訊技術。為確保產品完成，須要一位製作推動人。製作推動人是確保製作計劃能克服種種困難使其完成的人。如果一個人能夠積極地參與一個符合自己想法和興趣的計畫，那麼這樣的人就可以成為教學網頁產品的推動者，或是一個工作群。教學網頁設計產品的推動者通常是這個計劃的提議人，也是最熱心的人；是一個驅動想法以付諸實現的人。由於網頁和劇場演出都是人類相互溝通的一種方式，因此，參與教學網頁企劃和製作的人員與劇場演出製作人員相似
2、；不過，因為運用了新媒體科技，需要更多不同領域的人員相互配合。因此，一個教學網頁企劃和製作小組的成員應包括以下各類人員或功能：觀眾或使用者、出版者、法律顧問、執行製作人、製作經理、創意指導、市場與行銷經理、內容專家、腳本寫作與編輯、資料收集者、電腦美術設計師、攝影師、音樂設計師、音響工程師、動畫設計師、錄影師、資訊設計師、介面設計師、程式設計師。（二）、觀眾或使用者Audience 各種類型的教學產品可能訴諸於不同的使用者和傳播管道，就傳統的教學傳播媒體（如錄影帶、影碟機、幻燈片）和其內容而言，他們早已有了許多使用者。在許多情況下，電腦多媒體也是吸引和傳統媒體相同的使用者，然而，電腦多媒體教學
3、卻能透過新的互動方式，走出傳統媒體教學的侷限，提供更深更豐富的內涵。典型教學多媒體產品設計的方向，若不是指向單一的客戶a custom，就是朝向廣大的老師或自學使用者（mass-market audience） 。這合稱為顧客群網頁製作程序.doc18/12/292custom audience）的兩種使用者都有著非常不同的特質和偏好。因此，產品在設計上要能滿足他們特別的需要。顧客群的成員可能是學校的教師、公司的訓練人員、自學人員或者是教育計劃案裡的學生等。而針對顧客群所設計出的產品有：教學多媒體資料庫multimedia databases、公司訓練corporate training、簡報
4、 presentations、產品視覺化visualizations 、展示碟片demo disks、和教學多媒體系統等，當我們為客戶服務時，務必要能同時使客戶和客戶觀眾感到滿意。要辨識電腦教學網頁產品的消費者市場consumer market 是極富挑戰性的。大型的消費者市場常因技術發展不足而未能成長，而造成此種事實的另一個原因，是電腦教學網頁的水準和設備不能和消費者要求的水準和價格相合，教師群期望的電腦設備水準現在只剛開使合乎要求而已。像數位化影碟，教師希望有電視般的水準，音效audio呢，則能和 CD 的品質一樣。教學行政者期望著產品具有娛樂價值，還要不貴、使用簡單、不容易損壞。他們要的
5、是便利和可預知性。此外，在教師和學習者（學生）者互動的本質上、電腦教學網頁呈現形式的適當上，都還在發展階段。教師或學生不僅使用電腦教學網頁的產品，他們有時還協助網頁產品的設計和測試，其實可能除了生產之外，目標使用者的意見幾乎涉入了網頁設計的每一步發展過程之中。例如：成為教學網頁裡焦點團體focus group的一員，提供產品設計考量上的回應。而若在雛形的發展階段中使用參與設計法participatory design approach的話、來自潛在使用者的代表經由對實物模型的反應，協助定義了新產品，甚至提供了教學測試test teaching的回應。最後附帶一提的是，教師對教學網頁的意見和回應
6、，可提供作產品下一個版本的參考。（三）、教師或自我學習者Clients 儘管有些電腦網頁的產品是直接為消費市場而產生，但有一大部分卻是在特別的指示下為某些教學者（教師）而做。教師會提供金錢或以贊助的方式，要求電腦網頁的設計者做成特別的產品。他們不用自己學校的人力或設備，而是採取以佣金的方式，請設計人員在新的內容，或重新給予內容目標的基礎上，設計出一互動性的計劃案。雖然教師可以贊助生產以廣大市場為導向的產品，他們大部分卻只為使用一次或學校內部需要的計劃案提供基金。低成本、能快速將成果上網的特點，使得教學網頁的產業中有很大的部份是落入在這種由教師或政府提供佣金的計畫案中。通常教師或政府會提供內容、
7、主題的方向、以及他們使用者的背景，他們在一計畫的形成上扮演了重要的角色，但在合作的程度上確有著相當廣的範圍變化。有的教師或政府會詳細陳述一完整的計畫，而有的卻是在產品發展的過程中緊密合作，參與所有的過程和決策，協助計畫的完成。網頁製作程序.doc18/12/293合約和草案Contracts and Proposals一個客戶、承包商關係的成立，可以是不正式的方式，不用任何準備，只要雙方找時間聚會，擬定一合約即可。但另一方面也可以很正式，先行提出草案請願書request for proposals，PFR和草案proposals之後，雙方進行一次正式的投標議價程序。草案請願書PFR）通常由客戶
8、擬定，它描繪出一計劃案其目標和要求的基本輪廓、分送給一些有興趣、會回寄草案的公司。而草案則是一份正式的文件，它概述客戶和承包商間的關係，包含對未來工作的描述、投標的條件和情況等。在許多情況下，草案可作為合約書，其它的情形則是以草案作為指導方針來擬定合約。（四）、計畫執行人員Project Managers 許多電腦教學網頁開發都強調一點，成功的產品欠缺不了好的管理。執行製作人executive producers、產品經理project managers和創意指導creative directors 這三種角色可以由一個人來扮演，也可以是三個人。從電影業的角度來看，執行製作人做的是簽訂合約、籌
9、措資金的工作；產品經理就是影片的製作人，負責管理人事、後勤支援，和公司資源；而創意指導則是導演，為影片注入創意和場景。這三者多多少少都要了解電腦教學網頁，雖不用像生產廠商那麼了解，但至少在面對不確定的情形時，能很快地對工具、技術、人員、及市場上迅速做出決定。執行製作人Executive Producers執行製作人負責一個組織裡企業管理方面的工作。他要花時問安排合約、運籌資金等。在較大的組織裡，他們被稱做發展副總理vice-presidents of development 。而在較小的公司裡，產品經理實際上擔任了這項職務，他們站在第一線上，直接面對客戶、上級主管，及一個產品的誕生和完成。產品
10、經理Project Managers產品經理是完成一項產品的要人，他們承擔產品的成敗，使產品的預算、進度和資源相配合。完美扮演此角色的人，常會使門外漢無法察覺他們的功能。事實上，任何一種職業裡的行家，雖然他們能以精確、毫不費力的方式完成工作，往往是得不到業餘者的賞識的。產品經理與客戶及其他經理交涉時，具有編列預算及進度的能力是很重要的。好的經理人能決定多拍五分鐘的影片，或者是增加兩項程式功能的底線。當一組工作人員生了一個禮拜的病時，他們知道如何處理。他們知道這對預算及其他工作人員的影響，他們會改變任務的先後次序和職責，以免去一場災難。上述的技巧都是從經驗中學來的，產品經理要懂得從過去吸取經驗，
11、才能對未來的產品有更深刻的了解。創意指導Creative Directors創意經理可說是產品經理的一種，他們負責維持產品一致性的設計和互動網頁製作程序.doc18/12/294模式。生產中的許多工作人員，如：設計師designers、作家writers 、編輯editors、藝術家artists、動畫設計師animators、音樂家musicians、甚至程式設計師programmers，都歸創意指導管理。他要建立並維持個別單元以及整體產品的標準和風格。市場與行銷經理Marketing and Sales Managers 在變化快速的多媒體市場中，具備一個創新且具彈性的市場銷售分配策略，更
12、能夠確保產品的利益。市場經理能夠幫助界定潛在市場，提供潛在顧客的需求資料，以及技術的可能性。同時他必須決定產品的價格，在面對競爭時做決定。行銷經理則是決定產品的銷售方式和管道。有效的市場調查可以協助計畫的執行者、行銷者、設計者瞭解觀眾的需求和喜好。市場調查最重要的是要做市場區隔，也就是以觀眾的某些特性如：性別、年齡、興趣等來分類，然後挑出一批適當的觀眾群作為多媒體產品的目標市場。市場調查的進行方式有許多種，其中最常使用的就是焦點團體的訪談。焦點團體是指某一市場區隔中代表性的一群人，藉由對他們的深入訪談以獲取資料。此外市場調查也必須衡量其他的競爭產品，以做到差異化的產品區隔。目前市面上有許多市場
13、調查公司都可以幫助我們完成這些事情。市場調查和技術研究有密不可分的關係。市場調查的範圍必須包括市面上技術的現況，再做技術的深入研究。技術面的考量對於設計上會有所限制，如內容的大小，效果的呈現等的設計都和市場上的技術息息相關。技術的研究不但提供如何製作產品，更能使得產品更好、更實用、更便宜。技術研究的範圍包括了傳送媒體CD-ROM、磁碟片、錄放影機、 Photo CD、硬碟、卡帶、網路、MO 等、傳送平台PC 、麥金塔、傳送技術、及未來技術（如數位訊號處理器、互動電視、虛擬實境等） 。（五）、內容專家Content Expert 內容，包含了內文、影像、音效及插畫等，來表達一教學網頁的主題。內容
14、專家需深知一教學網頁產品的主題，如此才能協助工作人員揀取合適的材料。內容專家可以是各行各業的人：老師、歷史學者、業餘收集者、或者是對一主題有相當知識和權威的人。一主題的呈現，因內容專家的幫助，將具有深度、廣度、及精確度。如果沒有內容專家，一內容收集者content researcher可取代他的工作，從文學、舊有歷史、訪問、及其他材料等來源上獲得資訊。內容收集者除了為主題的內容、教學網頁產品的目的做選擇外，他還要能評估來源的可信度。就像一名優秀的記者，他要深思熟慮、查明各種不同的發展方向，將資訊有意義、並有次序地組織成一體。網頁製作程序.doc18/12/295關於內容，可以是原始的、處理過的
15、、授權過的、或是公開的資料。舉些例子：作曲家可以提供原創的樂譜，影像擇取服務clip art service可提供不需版權的影像而抽取佣金，製片人可同意使用劇中的情節，而政府機構則能提供相關的檔案等。和上述內容提供者的互動包含了商討生意和授權合約，從個人或團體獲取知識和材料等。資訊的來源就如同教學網頁產品的主題一樣範圍廣大。一個尋找主題的好起點是圖書館，雜誌和貿易期刊提供了許多潛在的內容專家，而專題研討會、演講會是另一個好時機。另外，教育學者也能提相關於主題最新的知識和研究情形。（六）、作家、編輯和研究員Writers ，Editors and Researchers 遠在電傳媒介electr
16、onic media發明之前，寫作是對大眾溝通、傳遞經驗最主要的方法，有了網頁媒體之後，內容將超出只用文字敘述的侷限，一個影像將取代一兩頁的內容。文字內容仍然非常重要，但它必須和其他媒介，如音效和影像等結合。教學網頁出其不意地帶入一要素一互動性，這使得人們擁有自己的路徑path和探索explore。特別是超媒體hypermedia讓使用者隨意志所在，建立連結和運作，有些產品還可能需要使用者獻出他們自己的材料呢。隨著新發明的產生，內文必須建立和他們良好的溝通。因此，身為內文專家的作家和編輯得一起努力，以達成此一目標。作家Writers 作家以文字給予原始資料外觀和意義。這些能讓大眾閱讀及演說的文
17、字，作家還要依產品的要求，賦予不同的語調，啟發的或是實用的。舉個例子：互動式醫學訓練內文的語調若採用輕鬆、聊天的方式，可能會吸引門外漢，但這就忽略對醫學專業應有的尊重了。內容作家content writer對話題做深入的闡釋，他們可以和內容專家合作，或是他本身就是內容專家。內容作家通常和互動及界面設計師interaction and interface designers共事，以確保真正地表達出內文的含意。腳本作家scriptwriters是作家中很特別的一類，他們寫對話、敘述、和旁白，是 3D 遊戲和電影網頁教學中不可少的角色。腳本作家深知傑出對話的本質，所以他們能選用正確的造詞和句子，創造
18、出迷人的對話，並且維持各幕間的一致性和均衡感。而為了影像的內文部份，他們得和界面設計師以及演員們密切合作。有時候，作家還得為公文documentation、草案proposals、合約contracts、法律協定legal agreements、報章雜誌press releases、廣告advertisements等寫作或編輯，而對這些領域中所常用的術語或習慣，多少都要了解。網頁製作程序.doc18/12/296編輯Editors若有人說世界上沒有好的原創作品，只有好的改寫作品 ，那麼這個人一定是指編輯。編輯的工作就是閱讀作家的作品之後加以修改，使之簡單、有效率，合乎產品要求的標準。主編pri
19、ncipal editor需要熟悉溝通其中不同的風格和習慣，才能使內容精簡實用。而所有編輯都要對產品有一清晰的概念，以此為基礎，來塑造色調、語調和內容。另外，謄寫編輯copy editor 也是一重要的角色。他使內容正確無誤、各幕互相串連。這份職責的內容至少包括了修改文法、標點符號，以及商標使用的正確與否等。資料收集者Researchers研究顧問research consultants對於難以搜尋的資料獨有專精。雖然完備的圖書館有一般的資料，但若非經驗老到的收集者，要找到特別的資料可說是既艱難又耗時。而資料收集者還能幫助搜尋產品中相關於內文的版權問題，但這一切都要視產品的本質而定。（七）、美
20、術專才Graphics Professionals 對所有教學網頁的產品而言，美術技能是不可或缺的。圖像、版面設計、電子產品的視覺設計等，都少不了它們。此外還有包裝、說明書、附屬印刷品等。相片、插畫增添的意義和了解，是內文和音效所不能做到的。當然，影像必須和其他媒介相配合，例如相片的感覺必須合於音樂的氣氛。美術設計師Graphic Designer美術設計師陳設景幕、設計視窗圖像、符號、建立造型色調，以達到整體視覺的均衡效果。許多設計任務，如：背景設計、字體形狀、影像大小等，都需要在雛型時期完成，而不帶入生產階段。另外，資訊設計師會同美術設計師一同檢視內容，以期達到一可駕馭的系統。插圖畫家Il
21、lustrator插圖畫家創造圖畫、圖案、圖表、地圖、卡通等，他們創造出人物、物體、地方、意念、過程或觀念的完美形象，當相片呈現太多資訊或無法釐清概念時，插圖特別有用，醫藥說明書就是一個好的例子。一個簡單的圖案，就可明確表達照片所不能明示的成份和特性。在造型和效果上，插畫有多種不同的風格。攝影師Photographer 相片可成為教學網頁計畫的焦點，也可以是支持的角色。數位化相片可能出現在多種的設計中，包括：目錄catalogs 、簡報 presentations 、多媒體導覽系統kisoks 、電子相片文集 electronic photo essays和相片資料庫picture datab
22、ases等。另外，呈現成一系列的照片，通常用於創造互動式的故事。現今的攝影師可經由相片完工服務photo-finishing service，將相片數位化，轉化成光碟相片photo CD的格式。而攝影師重要的技術之一、就是能抓住物體上的光影。同時，攝影師要能和所有的主題，從幼童到名人一起相網頁製作程序.doc18/12/297處並溝通。掃描及影像處理專家Scanning and Image Processing Specialists運用掃描器和影像處理程式，這些專家將圖像及相片數位化，以合於電腦系統的格式。就他們技術上的職責，包含了：開創、轉化儲存空間、維持品質水準等。運用影像完工服務，將幻
23、燈片、底片轉化成光碟相片的方法，可能會取代掃描法，但是在清理及強化影像上，有些影像處理的技術仍然相當重要。像特效濾光鏡可創造出數位化影像新的詮釋和風格，而影像處理還能修正燈光、色調均衡及對比上的瑕疵，清理有損壞或不對焦的影像等。（八）、音效專家Sound Professionals 音效設計整合在教學網頁的生產過程中，可創造出不同層次的溝通。就算有其他事物正在進行，音效也可達到其溝通的效果。旁白、賣際演說能表達出完全不同於文字內容的意義和感情。優秀的音效專家將使一教學網頁計畫大大地不同。就算加入了動畫或影像，也不能低估音效的重要。音效設計師和研究員Sound Designers and Res
24、earchers音樂設計師負責創造出接連不斷音樂景soundscape，適時製造緊張和情感的藝術家。而在建立情緒和情感上，音效可能是最經濟的方式。透過數位化音效處理器digital soundprocessors可重新處理音效soundtracks ，或是利用混音和平衡音準sound Levels以達到同一音感sonic experience的方式，可以和教學網頁計畫中的其他媒體互相配合及互動。而音效研究員的職責則在於搜尋音響和音樂，以求得合適的音效。有時他還能幫助解決有權音材的授權問題。音樂家和口技專才Musicians and Voice Talent音樂家常為互動式遊戲和電影作曲或作背景
25、音樂，通常他們也參予在公共場所的音樂表演。在光碟音響CD-audio disks以伴隨磁碟的方式成為教學網頁的一員，以及在互動式唯讀光碟CD-ROM產品裡加入 CD 品質的音效這兩個例子中，音樂家都是焦點人物。他們可能會拿已發表的作品，和其他非音樂的成份，如文字、圖案、影像等配台，使教學網頁更為豐富。而自從電腦有了內建的電子合成器MIDI功能，以及許多工具能提供 MIDI 之後，MIDI 使成了錄音、演奏、和音樂創作上很普遍的方法。口技專才的工作，不外乎提供對話、旁白，為人物或物體配出卡通式的聲音，以及為國外的市場翻譯產品等。有時聲音的質感或美感還比不上傳達出情感的重要，就像許多電視和電影明星
26、為卡通人物廣告以及紀錄片配音，他們聲音的特質可表達出產品獨特的風格。音響工程師Audio Engineers音響工程師為聲音、特別音效、以及背景音樂錄音，有時他們還協助電影做訪問錄音、原聲帶等。當音效是和影帶同步錄下時，特別是使用多重攝影機網頁製作程序.doc18/12/298multicamera時，音質的講究是非常重要的。通常會發生的情況是，影帶背景的雜音會使劇中的對話和特殊音效難以理解，這時音響工程師就負起使音響完美的責任，精密的麥克風和專業的錄音技巧是一位好音響工程師必備的工具和條件。（九）、動畫設計師Animators 動畫，是教學網頁中很常見的成份。透過畫面的進行，它幫助使用者了解
27、文字或簡單圖形所不能表達的過程、想法、或者是抽象的觀念。有時還因影帶製作的昂貴，動畫成了唯一可行的方式。其實，像教學網頁導覽系統、電子書、電玩等任何形式的產品，只要在合乎產品的內容和風格之下，都可以使用動畫。動畫設計師運用對動作和深度的想像力，提出動態手法的點子。而好的設計師，有構思動畫、了解故事綱要、描繪想法、以及和設計人合作的能力，在時限、現有技術、以及內容和觀眾的要求之內完成任務。對於抽象觀念、細節問題上，他們是瞭若指掌的。動畫設計師可分成平面2D，及立體3D非常不同的兩類。平面動畫是從傳統漫畫演進而來，雖然不需非常卡通化，但風格要比立體動畫多變，立體動畫感覺比較真實。平面動畫設計師2D
28、 Animators 平面動畫設計師仍然使用像素描簿、鉛筆、複寫紙等傳統的工具作畫，然後將角色、場景掃描進電腦，再加上顏色、組織以及動作，一格格地創造出空間及人物。他們所使用的工具還包括了掃描器、影像處理器、和平面動畫的應用軟體等。立體動畫設計師3D Animators立體動畫設計師運用電腦科技，立體化呈現物體及景觀。首先透過造形程式modeling programs，創造出幾何圖形和物體，然後再運用動畫程式animation rendering programs，可計算出：遠近、光線、結構、體積、動作，以及其他真實的特徵。物體可在空間中移動，隨設定的路線運轉。由此可知，處理影像的能力是很重要
29、的。和平面動畫設計師相較之下，立體動畫設計師幾乎都以電腦的動畫程式工作，而對需要設計燈光效果、演員臺步、舞臺動作，及攝影機位置的動畫設計師而言，可就教於影片製作人及舞臺設計師。（十）、資訊設計師、界面設計師、程式設計師Information Designers, Interface Designers, and Programmers 一個教學網頁產品儘管有豐富的內容，若少了以組織化獲得資訊的方法，網頁製作程序.doc18/12/299少了清晰、好用、動人的界面，還是不能發揮它的功效。資訊和界面設計能增廣產品的型態，而為了讓一般大眾使用教學網頁導覽系統、互動式電玩、電子書，或是互動式教學軟體，
30、設計小組和藝術家合作，以期生產出動人、容易使用、獲取資訊容易，以及有趣的產品。不同於傳統教學媒介直線發展的方法，教學網頁的軟體可因應使用者的選擇而有不同的發展方向，這對設計小組而言是工作上的一大挑戰。以檢視內容為例，界面設計師可能會設計出一組互動式的地圖，包含一般的圖形、空間方向，以及使用者按鈕。這樣的設計牽涉了離開現有畫面的視覺導引系統，隨畫面改變的音效變化，以及動畫指引的內容選擇等。在小型的計劃案中，資訊、界面、美術設計師常為同一人，如此能創造出凝聚性強的產品；而在教學網頁的製作過程中，資訊、界面和程式設計師承擔發展出產品雛型的主要責任。資訊設計師以內容為基本，將它以合於計畫的方向和目的的
31、方式重新組織。當一雛型被接受時，資訊和界面設計師完成了他們大部分的工作。而程式設計師接著將設計完成，他的工作是將每一個傳輸系統裡的使用者路徑、軟體裝載，以及技術表現等極大化。資訊設計師Information Designers資訊設計師精通於各種不同組織資訊的方式。資訊設計是高於視覺上表面文字描述的抽象次序，許多產品在這方面都將一切視為理所當然。像字典的組織順序，一定是按字母排列；地圖的北方一定在上方等。但若以非傳統、明顯不同的方式來組織，可能會得到全新以及更豐富的展現。好比在選擇時，使用者可使用多重的資訊視窗，可能會產生個人獨特的組織資訊型態。界面設計師User Interface Desi
32、gners一位優秀的界面設計師一定熟習電腦世界裡的視覺呈現和互動技巧。他們在電腦世界裡以版面、字體、地圖設計、顏色、圖案等來溝通資訊。所以設計師要了解產品和使用人的本質，並且在工具和使用習慣的設計上，都能輕易地進入產品的每一個部份。界面設計師通常和程式設計師緊密合作，以得到反應和轉換的時間、使用者的回應，讓工作順利進行。好用的界面和互動設計讓人使用起來毫不費力，如果使用者花很多時間在弄清怎麼使用一界面，而不是讀進內文、注視螢幕上的影像或影帶，這無疑表示界面出了問題。程式設計師Programmers 程式設計師和界面設計師的關係非常密切，由於他們同時處理同一個螢幕畫面，因此通常要在一起工作。一個
33、好的程式設計師同時又懂教學網頁多媒體的人，是很不容易找到的。程式設計師和界面設計師對於界面的表達方法以及所用的結構語言是很不一樣的。製作進度管制表要完成一個教學網頁產品，製作進度管制表是最有價值的參考工具，配合進度表，可以繼續不斷地溝通，使每個製作小組的成員有預覽表可以知道進度。以下舉二種時間進度表：一種是用以提供計畫經理協調各種進度發展的單項網頁製作程序.doc18/12/2910媒體製作進度管制表media production schedule；另一種是顯示教學網頁設計和發展整個過程的整體製作進度管制表Overall Production Timeline。（十一）、完成紙上設計紙上設計
34、包括內容導覽流程圖 、 分鏡腳本以及互動功能操作規範 。教學網頁的製作和電影的製作很像，有演員、作家、導演、製作人、節目策劃者、美術人員等，他們各有自己專業工作領域。但有時候他們必須集合在一起工作，互相配合、協調。這個合作所使用的一個媒介就是分鏡腳本。電影製作中的美術人員必須草擬出電影的每一個場景，導演、服裝設計師、舞台背景設計師和電影攝影技師，便使用這個分鏡腳本去設定攝影的角度、決定服裝造型、場景內容、燈光和音響效。然而在教學網頁製作和電影製作之間還是有所差異的。電影是直線進行的，一個場景接著一個場景。而教學網頁設計卻非直線進行，使用者可能選擇任何途徑，然後繼續發展教學，因此還須要製作內容的
35、導覽流程圖。內容導覽流程圖教學網頁產品的設計部份從構思內容導覽流程圖開始。流程圖能為參與工作人員提供教學網頁的內容組織和導航的設計概念。通常分鏡腳本是一連串的畫面用來描繪教學網頁設計的整體概念；而流程圖則是提供教學網頁的結構和與使用者之間的互動關係。它將分鏡腳本中所提到的相關東西串連在一起。透過流程圖的架構，有許多策略可用來組織教學網頁的內容。一般來說，樹狀結構系統是最簡單最常用的組織策略。分鏡腳本開始設計分鏡腳本時，畫面的標題不須要特別花俏，或是很精確。它只要能提供簡略的圖解概念就可，其目的是在激勵人們儘可能去思考。因此用所謂一頁表達一個主題的創作觀念是非常好的。若每一頁設計能提出三個草圖，
36、每個草圖包含一或二個畫面標示。這樣，可以在短時間內產生許多好構想。分鏡腳本完成時將呈現計畫標題的所有主畫面，每個畫面包含描寫背景和與使用者互動的主要文字，及具有動感的媒體元素，如聲音就是。當產品的原創者有了關於如何建構內容和如何與使用者互動的第一個念頭，就產品發展而言，內容導覽流程圖和分鏡腳本是可以藉著腦力激盪被批評討論的；因此在這階段，能有一個設計者參與是非常重要的。通常，設計者被稱為產品的化妝師。因此，教學網頁設計者就像建築師一樣，要能設計完整的結構並且使產品更親切、更友善。互動功能操作規範互動功能操作規範指引使用者，一個鏡頭接一個鏡頭，輕鬆地操作產品上的每個情節和螢幕上的細部動作，並說明
37、如何在螢幕上與產品彼此互動。例如，網頁製作程序.doc18/12/2911螢幕上顯示一個人走過，互動操作規範會說明：將滑鼠移到人的輪廓裡面，人就會如何如何的反應給使用者；或是如果使用者在人的上面點一下，接著人也會有如此這般的回應。再舉個例子，如果滑鼠往按鈕上移動，按鈕變得明亮，則表示這個按鈕可提供另一項功能。互動功能操作規範可用簡單的繪圖來處理。事實上，越抽象越好，因為這樣使用者可以專注去了解其中所說明的功能。（十二）、製作產品雛形設計階段的最後部份是製作產品雛形以測試教學網頁的構想，使它能夠實際應用。如果互動功能操作規範的說明完整且創意明確，就可以開始著手製作產品雛形。製作雛形前須先確認內容
38、腳本和紙上設計是否完整。對於設計師而言，能事先看到自己的構想、理念化為實際行動，同時觀察到未來產品可能的優點和缺點是最好不過的事了。市場上有很多方法可以用來探討產品雛形的好壞。方法之一是直接使用一個友善的授權軟體工具，實驗使用者的互動和圖樣的被認知效果。另外的方法是：選擇主題裡一個具代表性的部份，使用你想用的各種授權軟體去組合雛形。以這兩種方式設計者皆有機會看看其所想要發展的軟體是否適用。製作產品雛形在設計部份是絕對必要的；也就是說任何使用者界面設計、平面設計，或結構最後的改變都須經過雛形製作以測試之，因為接著下一個步驟，我們將進入發展階段。（十三）、使用者測試產品雛形使用者測試是極為重要的試
39、作，此試作應該在整個設計與發展過程中發生。花幾個小時以焦點群體一群隨機選擇的教師，它們代表你的教學目標市場測試你的原型，將可以省下往後數百個小時的製作時間。結構化與使用者介面，是由真正了解教學網頁及其如何運作與如何遨遊其中的人所決定的。一旦設計團隊熟悉一個計劃案之後，每一個工作成員會很容易將結構化與使用者介面視為當然的事。尤其是對多媒體不熟的人，一個全新的看法將很快告訴他哪些是有意義，哪些沒有意義。這個人將幫助你衡量是否這項產品對大眾是可以理解的。（十四）、生產產品發展階段是以製作教學網頁產品的完成品為起始工作。當產品中大部分教學網頁製作工作接近完成時，就可以開始進行程式設計的工作。從那時候到
40、成品完成，製作工作要經歷三個重要階段：即為阿法測試、貝塔測試與母片製作。在此產品發展階段，教學網頁製作成員必須將產品所需要的所有圖形、動網頁製作程序.doc18/12/2912畫、聲音、影像至少做到某一程度，使得程式設計者可以將它們整合成為一個架構。通常製作不同的教學網頁都有不同的標準和不同的工作限制，因此事先要針對不同教學網頁需求以不同的方法做準備工作。還有，在此階段，所有的製作工作都要以最佳工作效率為目標而進行協調。因此若在此刻還要更改設計，即始是一點點的修改，都會嚴重影響其他製作領域的工作進度。（十五）、程式設計經由教學網頁編輯工具，程式設計師可以根據紙上設計所定的設計結構，開始組合已經
41、完成的各種不同教學網頁形式的內容或導引功能，使整個產品架構可以看到一個完整的樣子，以充分顯示產品的特徵。同時要隨時準備進入阿法測試階段，接受教師（使用者）的測試。阿法測試在進入阿法測試之前，教學網頁產品要發展到能充分顯示產品的特徵。使測試者在阿法測試過程，能隨時取得任何他想測試的事物和功能，以找出未來使用者將碰到的任何產品缺點。品質保證Quality Assurance 或 Q. A.是阿法測試的工作標竿。找尋產品的缺點就好像是用一把很細的梳子，不斷的將頭髮裡的髒東西找出，直到頭髮上看不到髒東西為止。因此程式設計師和教學網頁製作成員要不斷的配合，共同解決找出來的任何重大問題。一但能確定不會有重
42、大錯誤存在時，教學網頁產品的發展就隨時可以進入貝塔階段，以接受使用者的測試。貝塔測試貝塔測試是在教學網頁產品在完成與可以複製之前的最後工作。經由使用者的測試，進一步發現產品的許多小問題。在此階段，應該只剩下小問題才行。對於這些小問題要以優先順位排列並做適當的處理。否則，這些微調過程，將讓產品生產的完成不確定的拖延下去。（十六）、找尋產品缺點由於教學網頁編輯軟體工具各有其功能的極限，多種教學網頁媒體之間相互搭配的複雜性，以及大部份的電腦使用者的電腦設備一定多屬陽春型，因此每一件教學網頁軟體產品發行上市後，一定會發現許多缺點。通常這些缺點會導致使用者的電腦當機。產品缺點有很多種。為了以後的改進工作，應該將它們有系統的分類，依其嚴重性和重要性，安排解決的先後次序。最後交由負責品質保證的人解決，這些人通常都是這方面的專家。這些專家參與阿法測試、貝塔測試，將產品的每一個按鈕或互動之處都操作過，找出所有的缺點，記錄下來並整理成一個缺失總表。測試工作並不限於產品本身，還要測試軟體在各種電腦平台上使用的狀況。網頁製作程序.doc18/12/2913找尋產品缺點是件持續性的工作，因為使用者的需求是永遠不能被滿足的。習題:1、請比較網頁教學設計與一般電腦輔助教學的異同點。
