銘傳大學 100 學年度上學期

教學卓越計畫子計畫一

「課程重構計畫」結案報告

課程名稱： 網站規劃與設計

教師姓名： 王開立

系所單位： 商業設計系

撰寫日期： 101 年 1 月 6 日

壹、計畫動機

2010年被視為電子書元年，近幾年來隨著電子閱讀硬體與軟體開發技術

的重大突破，讓過去關於網路電子書閱讀性不佳的質疑逐漸降低，無論是資

訊產業或是出版業均摩拳擦掌準備搶攻這塊電子書的龐大市場。截至今日，

關於電子書與數位學習的相關研究與論述已累積眾多的數量，其中以探討數

位閱讀的教學策略、互動設計、電子書的閱讀形式與操作介面等最為常見。

為了因應大專校院學習、認證及就業等之相關需求，發展優質的數位閱

讀課程以及建構數位學習實施模式，特研擬本課程重構計劃。本計劃將以「網

站規劃與設計」課程為重構對象，結合網頁製作軟體教學並導入數位學習與

數位閱讀之觀念於教學課程中，期望學生能藉由數電子書的編輯與製作過

程，提高設計專業知識之吸收興趣與學習效果。

貳、執行內容

一、教學目標

(一)引導學生如何善用數位學習工具來提高設計專業知識之學

習績效。

(二)透過電子書編輯技術與互動機制的學習，讓學生接觸最新數

位閱讀媒體相關知識。

(三)讓學生體驗多媒體化的數位學習互動機制與教學方式。

二、教學內容

本課程重構計畫將「網站規劃與設計」課程重心從原本著重在主題網

站之編輯建構與軟體教學擴展到數位學習與閱讀的領域，讓學習者可以通

盤了解目前在網路科技發展技術方面的應用現況，並且實際嘗試編輯製作

一套互動性強且資訊豐富的電子書。

(一)課程設計

1.針對目前數位學習與閱讀發展趨勢以及電子書操作技術，建立

網路數位閱讀課程教材之教學策略、應用模式與評量方式，以

提供日後設計相關課程數位化之依循。

2.本計畫以「網站規劃與設計」做為電子書製作的導入課程，指

導修課學生結合網頁設計軟體、互動設計、介面設計等相關專

業知識，學習電子書之製作原理，並實際參與編輯設計工作。

3.將原本平面出版品之設計概念轉換成為互動形式之電子翻頁書

呈現，並輔以動畫特效以增加閱讀趣味性。學生將學習如何進

行主題企劃、資料編整、互動性介面設計之電子書模型。

(二) 執行概念

本計畫主要的執行概念如下:

1.從數位閱讀之教學策略方面：

指導學生藉由數位學習方式來提高專業知識的學習績效，

讓學生認識到數位學習的互動機制、教學方式、媒體特性等相

關知識，並藉由本研究開發電子書的互動機制與創新內容的呈

現方式，以區隔傳統印刷書籍之閱讀經驗。

2.從電子書之設計規劃方面：

以電子書為閱讀平台結合基礎設計理論、美術設計、數位

設計、複合媒材，到人文教育等之領域，建立核心課程，並規

劃出統合性的課程設計，讓學生可隨時透過電子書的閱讀與製

作，學習到所欲了解課程之內容與知識。

三、教學活動設計

網站規劃與設計的教學目標主要是藉由網際網路專業軟體教學與影

像繪圖、多媒體軟體進行整合應用，並在課程規劃中導入互動式電子書之

設計單元，建立數位學習觀念與電子書的製作能力。

本課程為一學年的必修課程，也是本系的核心課程，每週上課兩小

時，對象為三年級的學生，修課的學生必須具備電腦繪圖、影像處理與排

版軟體的操作能力。本課程以「數位閱讀與電子書閱讀」為研究主題，導

入 FlippingBook™ HTML Edition 翻頁電子書製作模組，並且以 Flash 作

為電子書內容頁之製作軟體，指導學生設計以 SWF格式為主的翻頁式電子

書，目前已經累積了相當豐碩的教學成果與作品。

網頁製作軟體:Flash CS5 、Dreamweaver CS5

影像編輯軟體: Photoshop CS5 、Illustrator CS5

(一) 電子書閱讀格式

a.本計畫根據電子書形式與實際教學需求，將指定製作成「網路

電子書」(Web-accessible e-books)格式。

b.「網路電子書」則使用翻頁書方式呈現，讓學習者能夠保留與

傳統書籍相似的閱讀方式。

d.電子書製作內容將包括:文字(Text)、影像(Image)、聲音

(Sound)、動畫(Animation)，以及互動設計(Interactive

Devices)等元素。

翻頁電子書形式呈現的學生作品

(二) 操作介面

有別於傳統形式電子書僅單純將圖書進行數位化的過程，本計

畫將朝向電子書內容呈現的創新性與課程內容的適切性來進行規

劃與編輯。其中電子書的操作介面與內容呈現方式將依據平面設計

課程特性予以量身訂作。

a.強化電子書的視覺效果與編排美感，以符合平面設計課程的需

求與特色。

b.增加讀者與電子書的互動機制。包括關鍵字與目錄的搜尋、跳

頁閱讀與超連結設計、影音動畫的播放系統、線上設計的實務

操作等。

c.保留「翻頁書」(FlippingBook)基本的操作介面(例如: 縮放、

指定頁數、全螢幕等基本功能鍵)

FlippingBook 電子翻頁書的操作介面與學生作品

(三)製作軟體

1.本計畫製作的翻頁電子書採 FlippingBook™ HTML Edition製作

軟體。該軟體目前可支援SWF影片檔，且流通性廣，技術資源相

當多，加上操作容易，極適合教材編輯製作。

2.電子書之內容頁則採FLASH網頁動畫軟體製作。FLASH是目前網

路動畫與網站設計最專業的製作軟體，能夠創造多變化的互動

機制與動態內容視覺效果。至於程式則採ActionScript2.0以

上，以進行內容的串接與視覺特效。

四、教學評量

評量的目的是要考核學習的結果或教材品質。在教材實施之後開始進

行評鑑工作，是為了瞭解學生在使用這些教材之後的學習成效是否達到教

學目標，以及評估教學系統的品質，以做為數位教材修正的參考。本課程

重構計畫預計藉由實作評量方式來檢視學生整學期來各階段之的學習成

效。

研究報告：電子書市場與產品分析(20%)。

電子書企劃：主題設定與腳本製作(20%)

電子書實作：翻頁式電子書 (50%)

線上測驗：Flash與 Dreamweaver 題庫測驗(10%)。

參、計畫成果

一、摘述辦理情形

商業設計學系的課程特色之一便是強調人文藝術與數位科技整合

的設計教學，從基礎、專業到應用之多元化的課程內容來培育學生具

優秀設計專業能力，以便日後為各式媒體進行視覺規劃的工作。因此

若以商業設計的角度來進行電子書規劃，除了書籍內容之編輯外，本

系特別著重於美術設計、圖文編排、操作介面，以及整體視覺包裝等

因素，這正是目前電子書相關研究所欠缺之處。因此，本研究除了電

子書教學策略發展外，視覺設計將是著墨的重點。

二、課程實驗結果

(一) 電子書研究報告

將電子書相關主題報告分別以 PPT 與 PDF 製作並以論文寫作

方式完成。

學生電子書研究報告(PPT 格式)

學生電子書研究報告(PDF 格式)

(二)腳本製作

1.發想個人電子書的主題與內容，並為該主題命名，內容以不超

過 16頁為原則，並以五十字內說明。

2.將電子書的封面封底包含目錄頁的腳本分別依序以草圖方式描

繪出來，完成後存成 pdf檔上傳至 Moodle討論區。

學生電子書腳本製作(PDF 格式)

(三)互動式電子書製作

以 FlippingBook™ HTML Edition 翻頁電子書製作模組，並且

以 Flash 作為電子書內容頁之製作軟體，指導學生設計以 SWF

格式為主的翻頁式電子書。

學生電子書作品(SWF+HTML 格式)

(三)互動式電子書作品 Moodle上傳

學生電子書作品 Moodle 上傳畫面

(三)期末專業軟體線上模擬考試

專業軟體 DreamWeaver 線上模擬考試畫面

三、執行成效評估

根據「100 上-期末考前-學習動機與策略問卷」中修課學生對於

一學期課程施行後，針對教師教學知能與老師的授課狀況方面的反應

均表示「良好」、「非常良好」。至於在教學建議開放式問卷中可以看出，

學生多半對於課程抱持肯定的態度，並且認為老師上課方式與講解內

容覺得有趣，受益良多；但也普遍反映上課進度有些快，部分學生似

乎跟不上進度。其實該情形在授課期間已經有同學反應，老師也在課

餘時間開放同學個別指導，並提供參考其他教材或學習資源作為自學

之線索。以下是問卷之內容：

（一）您對老師授課教材的內容是否有任何建議？(例如：課本選擇或投

影片內容等。)

1. 上課有趣。

2. 多介紹相關知識。

3. 老師講得很仔細。

4. 可以再多教一些語法。

5. 很好，受益良多，比之前 FLASH 動畫課學到更多更多。

（二）您對老師授課方式是否有任何建議？(例如：使用投影片或寫白板

或是上課音量是否需要調整等等。)

1. 很好

2. 老師上課很有趣。

3. 可以多教一些語法。

4. 可以將語法抄寫至黑板上。

5. 時間太緊湊，學習成效比較差。

6. 可以印小講義，提醒同學製作上可能會遇到的語法問題，或者開

討論區使師生、同學間的技術交流，更方便熱絡。

（三） 您對老師上課之進度是否有任何建議？(例如：太快、太慢或是適

中。)

1. 還好。

2. OK(2 人填答)。

3. 太快(4 人填答)。

4. 適中(5 人填答)。

5. 還 OK，有時快下課會比較趕一些。

（四）您對老師之考試方式、作業份量、報告份量或內容是否有任何建

議？

1. OK。

2. 還 OK，但可每週一個小作業，才不會期末太累。

3. 適中。

4. 作業好緊繃。

5. 平常多出一些小作業。

6. 可以採階段性的作業。

7. 期末作業較大量，時間較少。

8. 希望能一個步驟一個步驟教。

（五）您在學習本課程時是否會遭遇困難？ 如果有，那是什麼？

1. 語法。

2. 許多語法不懂。

3. 語法套用有問題。

4. 語法有問題，瞭解不夠多。

5. 語法有些還是不太會使用。

6. 語法，操作工作的熟悉度。

7. 語法有些困難，確實執行後卻無法成功。

8. 來不及做作業。

9. 無法快速做出想要的效果。

10. 作業某些地方不會實行，要花時間摸索。

11. YES，中文字看不懂。

12. 上課筆記來不及完成。

13. 講課太快，筆記來不及抄。

14. 有些 FLASH 程式語法真的令人抓狂，雖然多是 N 次就好，但仍

有答案自己摸不出來。

（六）請描述您給予老師其他教學上的建議。

1. 我需要一個 TA。

2. 希望能多學到一些特別的語法。

3. 老師很棒，可以提供很多資訊。

4. 期末電子書雖然執行過程遇到不少困難，但可著實將課堂所學應

用上，完成後覺得確實有學習到成果。

5. 很好的老師，但期末作業真是非常恐怖，雖說學到非常多但期末

壓力真的好可怕，應該是量最大的課程。

四、課程反思

(一) 學生對於在目前課程中導入電子書製作單元普遍抱持肯定的態

度，但對於軟體學習與課程進度感到吃力。

(二) 由於軟體操作熟練度不足，目前作品的創意與精緻度仍有極大的進

步空間。

(三) 關於數位閱讀與電子書的相關研究與資料蒐集成果令人滿意。

(四) 本重構計畫須經過一段較長的實施過程，始可累積出更豐富的學習

成效。建議以一學年的時間融入教學活動為宜。

五、後續調整規劃

根據上述問卷結果以及期末學生作品表現可以看出，本課程經過

重構計畫的實施之後的確可以提升學生的學習興趣與學習品質，建構

式的教學法讓學生從過去的被動授教轉變為主動的知識探尋，證明在

數位課程的實施是肯定的。然而由於時間的限制與課程內容的緊湊，

導致學生普遍感到專業軟體學習壓力大，有些吃力，總覺得進度有些

快，害怕跟不上進度。

因此針對上述問題，日後將課程主題朝向更為單一，將學期作業

分成數個階段，並讓學生在各階段的學習單純化，一次達成一種課程

進度的基本需求即可。另外，在學習時間規劃上，可以考慮將軟體學

習時間拉長，讓學生有更充裕的時間來熟悉軟體操作，以便進行電子

書的規劃與設計。

另外，在 Moodle教學平台的運用也仍有成長的空間，未來可以將

本課程的學習教材、教學成果與作品範例上傳，讓日後學習同學可以

分享學習經驗。

肆、建議與改進

一、以現今電子書技術發展趨勢看來，互動式電子書(Interactive E-book)似乎可

以將各式教材格式的特色整合起來，兼具圖文閱讀、影音動畫、內容檢索、

互動式操作等特性，讓數位教材變得更加輕巧、易於閱讀。

二、雖然強調互動式的教材設計或電子書具有較高的學習評價，但相對的其技

術門檻也比較高，非一般師資能力所及，培育一批熟悉數位教材製作技術

的人才來投入互動式電子書的製作與開發，似乎成為當務之急。

伍、補充說明

一、課程照片

二、參考資料

1.朱則剛(2000)，教育傳播與科技，師大書院。

2.吳聲毅(2008)，數位學習觀念與實作，學貫行銷股份有限公司。

3.顏春煌(2008)，數位學習:觀念、方法、實務、設計與實作，碁峰資訊。

4.林裕淩等(2008)，以方法目的鏈探求數位學習平台需求之研究，數位學習科

技期刊，創刊號。

5.楊正宏等(2008)，台灣高等教育數位學習現況與展望，數位學習科技期刊

Volume1, Number1。

6.施文玲(2007)，以學習理論為基礎的數位化教學策略，生活科技教育月刊，

四十卷 第二期。

7.王金龍、賴守全等(2008)，校園數位教學平台之規劃與實現，台灣教育傳

播暨科技學會 2008 年學術研討會論文集。

8.陳美莉(2010)，電子出版品標準規範的現狀與發展，2010 資訊工業策進會

電子產業推動聯盟講義。

9.創市際研究案例：電子書篇(2011)，創市際市場研究顧問公司網站，

http://www.insightxplorer.com/specialtopic/2011_01_17.htm

10.數位學習品質認證中心-認證規範，http://www.elq.org.tw/service_learning002.php

11.財團法人資訊工業策進會， http://www.iii.org.tw/

12.電子閱讀產業推動聯盟，http://ereading.tca.org.tw/index.php

13.台灣數位出版聯盟協會，http://netreading.wordpress.com/

14.Branch, Robert Maribe(2009), Instructional Design: The ADDIE Approach,

Springer Verlag New York Inc.

15.Robert Heinich（2002）, Instructional Media and Technologies for Learning,

Pearson Education, Inc.

16.M.D. Roblyer（1995）,Integrating Educational Technology into Teaching,

Pearson Education, Inc.

17.Donald W. Mocker（1982）, Lifelong learning: Formal Learning and Informal

Learning, and self-directed, National Center Publications.