功能性

（1）自動排版系統

系統開起網頁後，向伺服器請求回應，同時傳回課文字串後，經過解碼 等步驟，系統便依據解析過的字串自動排版。課文於完全下載完畢後，會將 課文內容呈現於頁面中，也因ㄧ次完全下載課文內容，而可以省去了與伺服 器間請求與回應時間。

課文的排版依據管理者所上傳的課程內容，自動編排為直書系統，換行 後縮排兩個字元，預設行距為 0.5 倍行距，上邊界預設值為 30 畫素，下邊界 預設值為 50 畫素，右邊界預設值為 25，左邊界預設值 50。

圖 4.1.7 課文展示與功能

（2）、翻頁、頁數與總頁數

系統在接收字串的同時，先以預設的縮排、上下左右邊界等排版值，以 字串長度為迴圈的值進行直書排版，並將編排過程中，記錄每頁的起始字與 終點字的序號，依次存入陣列中，系統依據陣列判斷總頁數，以及確定翻上、

下頁時起始字編排課文內容。

三、字體的放大與縮小

編排文字的類別中，將字體的大小以變數的方式表示，系統可以運用改 變參數大小來控制字體。系統中，為了使系統能達到順暢的編排方式，避免 字體過大或過小，失去了編排的意義，於是將字體大小的範圍設定於由 11 到 49 間。

字體大小會涉及到總頁數，字體越大，頁數越多，字體越小，頁數越少，

所以在設定字體大小後，系統會依據更新的字體大小，重新排列，並重新記 錄，起點字序於陣列中，提供系統更新總頁數及翻頁起始字。

圖 4.1.8 字體放大與縮小

（4）閱讀指標器

如同一般書籍，讀者會用手指著閱讀的地方，以便換行閱讀時，不會看 錯行，閱讀指標器的功能便是如此。使用者按下閱讀鈕時，文章會從頭開始，

自動且逐一的將字變成紅色，閱讀使順著紅色指標閱讀，可以輕易的了解下 一行的位置。需要暫停時，再按一下按鈕即可。

圖 4.1.9 閱讀指標器

（5）線上文字註記

字體放大與縮小控制

系統工具列設計於課文左方，按下文字註記功能鍵後，開啟移動式文字註 記視窗，視窗可以由滑鼠進行移動與刪除，透過滑鼠點選課文文字可自動輸 入欲註記的名詞與輸入解釋後，按下確認鍵，系統將資料儲存於資料庫，等 到系統監聽到完成儲存指令後，再從資料庫中下載註記內容。

圖 4.1.10 文字註記功能與移動式視窗

系統接收到更新訊號後，無須重整頁面，系統便即時自動搜尋頁面中符合 該註記內容的所有名詞，將該名詞以螢光筆(highlight)的方式呈現。並於滑 鼠移過後，再行與行字間，出現該註記的解釋內容。

圖 4.1.11 螢光筆註記與文字註記的呈現

文字註記功能

（6）線上圖片註記

圖片註記工具列設計於課文左方，按下圖片註記功能鍵後，就能夠開啟 移動式圖片註記視窗，如同文字註記視窗的功能，透過滑鼠點選課文文字可 自動輸入註記的名詞，再將自己事先蒐集的線上資源並存放在網頁的圖片網 址貼上，按下確認鍵，系統將資料儲存於資料庫，等到系統監聽到完成圖片 註記儲存指令後，再從資料庫中下載圖片註記內容。

圖 4.1.12 線上圖片註記的輸入

系統接收到圖片註記更新訊號後，重新整理頁面，系統自動搜尋該頁面 中，符合所有註記名詞的所有名詞，將該名詞以螢光筆(highlight)的方式標 示出。當滑鼠移過螢光筆註記時，會再註記的左方或右方出現該註記圖片，

在按下註記後，便形成可移動式的圖片註記視窗，可由使用者隨自己需求變 換圖片註記的位置，不需要時，也可隨時關閉視窗。

圖 4.1.13 可移動式圖形註記

線上註記也可以利用上傳檔案的方式呈現，在使用文字註記的方式選出註 記名詞後，此時，在註記列表找出該名詞，按下插入圖片。頁面會出現儲存 檔案的欄位，按下瀏覽，選出想要儲存的圖片，按下儲存鍵，也能達成圖片 註記的目的。

圖 4.1.14 上傳圖片註記

（7）線上聲音註記

線上聲音註記，由註記列表中，插入聲音處匯入，利用上傳檔案的方式輸 入。在註記列表找出該名詞後，按下插入聲音，頁面會出現儲存檔案的欄位，

按下瀏覽，於檔案中選出想要儲存的聲音，按下儲存鍵，也能達成聲音註記 的目的。當名詞有聲音註記時，滑鼠移過時，會出現聲音播放器，按下後便

可操控聲音播放器的播放、暫停、停止、結束及移動等功能。

圖 4.1.15 聲音註記

（8）線上圖形註記

線上個人圖形註記工具列放置於右方，功能列依次為展開畫布、顏色盒、

線條盒、文字註記、橡皮擦及存檔。使用者在展開畫布後，課文上劃出現 alpha 值為 0.3 的畫布，按下滑鼠左鍵設定線的起始點，放開左鍵後為線的終點，

此時系統依據起始點及終點座標位置劃出線條。

線條盒為 36*36*6 種色階的調色盤，使用者選擇該顏色色盤後，線條盒會 變成該顏色，劃出的線條變與線條盒顏色相同。線條盒按下後，會出現線條 尺寸為 1 到 10 大小不等的粗細線條，使用者可依照個人喜好選擇線條。

聲音註記播放

圖 4.1.16 圖形註記工具列-顏色盒與線條盒

系統中也增加了與線條相對應的文字註記功能，按下線條工具列中的

「文」，會跳出一可移動式的對話方塊，將欲註記的內容輸入於對話方塊欄位 中，按下儲存鍵，便自動將線條起始點、顏色、線條粗細、與該對應的文字 儲存於資料庫中。

圖 4.1.17 線上圖形註記的對應文字註記的輸入

系統也支援跨行註記，有些句子由於換行的因素需要有 2 條或 2 條以上的 線條，來表示同一個註記的內容，此系統在使用時，從劃入多條線、輸入文 字註記到儲存都屬於同一事件，滑鼠移過同一事件的線條，會出現相同的註

劃線註記工具

記內容。

圖 4.1.18 跨行註記表示同一事件

儲存後，系統會接收到線條個人註記更新訊號，無須重不必新整理頁面，

系統自動比對線條對應文字，劃出所有個人註記的線條及線條顏色、粗細。

當滑鼠移過個人註記線條時，會在頁面左上角出現該註記的文字方塊，在按 下線條後，便形成可移動式的註記視窗，可由使用者隨自己需求變換註記的 位置，不需要時，也可隨時關閉視窗。

圖 4.1.19 圖形註記與文字註記的對應

在同一行間，可以多重註記，此方式解決了同一句中，有生字、語詞及 句子需要不同註記時可以使用，其同一行註記的數量多寡，則視線條粗細而 定。除此之外，線上圖形註記，記錄課文序號以及頁數頁碼，所以註記於翻 至註記所屬的課文以及符合的頁數時，才會出現。

圖 4.1.20 行與行間的多重註記