1. 第十組組員:
B10113089 蘇家瑩
B10313054 蔡文瑜
B10105034 成孟儒
B10213146 姚彥志
B10313055 林雨岑
B10231044 陳丙其
B10102066 黃韵倢
2. 10-1建置區域網路系統
選擇適當的連線模式
配備
網站1個IP不夠用(郵件伺服器
和主網站分開建置才不易中毒) 製作網頁推薦網路型: 非固定制:提供IP不固定，無法24小時連線製作網頁
(該電腦關閉連線即網站連線中斷)
區域網路的規劃
ADSL為非對稱數位用戶線路
(把電話線分成了電話、上行和下行三個相對獨立的通道)
Cable Modem為纜線數據機(有線電視系統業者Cable指的是電纜)
辦公室網路系統的規劃
兩台以上電腦可
透過撥號連結上網
建置小型網路系統
電腦彼此間可
以傳遞資料互
通有無
CABLE MODEM透過電纜，速度比ADSL快將近四倍
但機房如不能負荷地區使用量，會開始塞車
有當機、部分時段下載的過程慢的窘況，用過CABLE MODEM的人都會抱怨連連
單機型配發固定1個IP，費用比網路型便宜
(具伺服器主機的內部網路系統。)
ADSL VS. Cable Modem
ADSL:
業者:ISP業者都必須請中華電信工程團隊
施工(向中華電信申請ADSL較妥當，電信局就可申請)
費率:使用固定制依IP個數可分二大類：網路型及單機型。
下行/上行速率:對製作網站來說上下行同等重要上行（從用戶到電信服務提供商方向，如上傳動作）
下行（從電信服務提供商到用戶的方向，如下載動作）
課本推薦ADSL
可以使用的IP數是5個，費用較高；
固定制須設定網路卡IP ；多台電腦連線時，必須準備集線器及UTP網路
課本推薦D-LINK 集線器
• 只有一台電腦:(電話線路→ADSL數據機(ATU-R) →電腦網路卡)，基本上不叫做區域網路。
• 兩台電腦:(電話線路→ADSL數據機(ATU-R) →電腦1→電腦網路卡1→電腦網路卡2→電腦2→電腦網路卡)建議最好只有一台連結網際網路與收發EMAIL
兩台以上電腦:必須再添購一台集線器(HUB)(電話線路→ADSL數據機(ATU-R) →HUB→電腦1→電腦網路卡1→電腦網路卡2→HUB→電腦2、3、4…→電腦網路卡)
兩台以上的電腦，建議把區域網路規劃成2個區段，第一區段是對外防火牆、防毒軟體與網站都建置安裝在這裡。第二區段是內部網路系統，就是內部工作人員所使用電腦的地方。
工作人員使用，基本是一人一組電腦，有部分工作人員必須用2台主機，每一組電腦都必須要有螢幕、鍵盤與滑鼠等電腦配備，
相當浪費寶貴的資源與金錢。
如果必須同時間使用到1台以上的電腦主機，不妨考慮添購電子式的電腦切換器
，可讓多台電腦能共同分享一套週邊設備，這樣不但可以節省
設備空間與費用，更可以提升工作的效率。。
4. 一、前置階段
建置網站之前，企劃人員需先提出網站的企劃書。
(一) 網站的需求分析-必須先定位此網站，並規劃網站的需求與目標
在撰寫前，企劃人員應先進行三項調查。
(二) 使用者的特性分析-應先釐清「誰」是使用者，以及他們想從網站裡讀到什麼資訊或做什麼？
(三) 組織的資源分析-規劃須同時滿足「網站目標」與「使用者需求」；考量能建置什麼樣的網站規模？
5. 二、建置階段
(一) 網站的概念設計
(二) 網站的具體設計與發展
(三) 網站的執行
網站的開發工作——從網站的草擬、設計與發展，一直到執行。此建置過程至少包含三層次：
「資訊設計」慮以下六點：
A. 檢查資訊是否正確、可靠、合邏輯
（logical），而且合法。
B. 依據使用者不同興趣需求，將資訊加以
分門別類，清楚標示其類目名。
C. 將資訊切割成有秩序（orderly）、合邏輯
的小組件。
D. 建立小組件之間關係、層級與連結。
E. 決定資訊的組織結構：線性的方式排列，
還是採用網絡（network）連結方式？
F. 保持結構的一致性。
「介面設計」必符合四
原則：
A. 簡單-讓使用者一眼就
能看懂介面。
B. 一致-介面保持一致，
使用者才不會混淆與困
惑。
C. 美觀-符合美學要求，
才能吸引使用者目光。
D. 正確且穩定-互動功能
必須有效，且能正常運
作。
「可用性」調查，其包含：
A. 效力性-使用者能否找到所要資訊？
B.效率性-使用者能否很快完成任務或到目的地？
C. 安全性-發生錯誤，使用者能否得到奧援，或有機會及時補救？
E. 有用性-使用者能否瞭解介面功能，並正確瀏覽網頁？
F. 易學性-使用者是否花長時間，才能瞭解網站瀏覽系統？
G. 可記性-使用者能否記住如何操作介面、瀏覽系統？
「瀏覽設計」則是用來幫助使用者在網站的資訊結構中，順利地移動與閱讀。
網站利用各種瀏覽工具（文字連結、按鈕、下拉式選單、網站地圖、或搜尋引擎
等），讓使用者清楚知道他的位置，包括他在哪裡、已經去過哪些地方，以及還能
去哪裡、做什麼。
6. 三、後置階段
負責內容更新與技術維修
(一) 網站的推廣與促銷
除入口網站登記網址外，也可到相關網站打廣告促銷，將所屬廣告、相關文件，產品包裝，附上網站網址，讓更多人知道
網站的存在。
(二) 使用者的回饋
除促銷網站外，更重要的是回覆使用者疑問與請求，並將使用者問題加以彙整，登在FAQ的網頁上。
(三) 固定的可用性調查
一個設計再好的網站，如果使用者覺得不好用，不願意點選，那麼就算網站具有完美的美學風格和精湛的網頁
技術，一切也是枉然。為瞭解使用者的需求是否隨著時間而改變，管理小組應在能力許可的範圍內，定期從事
「可用性」的調查，並將意見反映給建置小組，以便衡量網站有無必要進行全面的更新，還是只需修正網頁樣
版。
網站的設計與建置不是一次就成功。建置工作是一個持續且變動的過程，必須根據團隊情況、網站目標，及使用者的需求，不斷調整再調整
。而且，更重要的是建站者與設計者，應以「服務使用者」為最高準則。
7. 談到設計，設計者很容易將「美學」排在第一位
但網站是為了「使用者」而建置，網頁設計更須站在使用者立場，以需求作為設計主要考量。
10-3 網頁介面設計原則
一、「誰」是使用者？ 二、內容設計
設計者在著手網頁設計之前，必須先要求團
隊確定
「網站目標」與
「使用對象」，此將有助於他們瞭解網站所要形
塑的組織形象，以及可能應對的使用者。
設計者不僅需要瞭解網站的性質，還必須掌
握「誰是使用者？」，包括他們的興趣、需求、
期望，以及上網的經驗。一旦設計者瞭解使用者
的習性之後，便可以據此決定網站的內容與互動
設計
人的短期記憶一次不能超過5個項目，資訊須加以處理，才能放在網頁上
(一) 資訊呈現
1. 資訊的組織與呈現應符合網站的資訊結構
2. 資訊應標示出主題與關鍵字
3. 資訊組件應提供脈絡、方向與面向
4. 冗長資訊須重組與改寫
網站在建置之初，也應根據使用者的經驗，規劃出網站的資訊結構。
內容應有題目和標題，註明其主題與關鍵字。圖須附加文字說明，才能尋獲
幫助使用者瞭解不同組件之間的關聯與層級，並進行必要的超連結。
設計者應明確地建議內容提供者撰寫適合的內容。
(二) 網頁配置
1. 一般網頁:(1) 頁面長度(2) 文本(3) 顏色
(4) 圖形要素(5) 動畫與動態元件
2. 重要網頁:
(1) 首頁(2) 關於我們(3) 使用者的意見和常問問題
讓網頁空間配置，既能抓住使用者注意力，也方便閱讀與辨識內容
應含5W＋ 1H。用3-5種顏色
(2主一次避免混和色)
影響網頁的其他因素:
組成文本的字型（fonts）和文本配置（text layout），也會影響網頁的佈局。
圖形的使用1. 以圖形要素來輔助文本2. 以圖形要素來彰顯網站的形象
圖形須有實質意義功能。
避免用過多動畫、動態元件或多媒體影音資料。
a.
FLASH
首
頁
b.提供選單
（menu）
c.採用圖形
8. 三、互動設計
包含使用者介面和瀏覽系統。
(一) 使用者介面
1. 直覺性-使用者能不假思索地使用。
2. 一致性-在同一網站裡，相同介面指涉相同的事情
3. 美學性-抓住使用者的注意力
4. 簡易性-簡化繁瑣步驟，快速地完成任務
5. 預防性-能事先預防使用者可能犯下的錯誤。
6. 提醒性-讓使用者三思而後行。
7.協助性：提供使用者各種線上的協助。
(二) 瀏覽系統
1. 提供正確、簡易瀏覽系統
2. 網頁應將最重要資訊放最上方
3. 清楚標示路徑
4. 瀏覽設計是雙向既能後退也能前進跳躍到所需的網頁內。
5. 避免出現孤兒頁走死胡同。
6. 避免逼迫使用者一再拉動捲軸，造成觀看的不便
7. 圖形瀏覽工具重點放在「易讀」與「易用」上，而非其動態效果。
8. 利用顏色來區別「已閱覽過」和「未閱覽過」。
9. 經常檢視能否連結到正確的頁面
10. 如果超過30頁提供站內的搜尋引擎
總之，互動設計是為了鼓勵使用者與內容互動，如果不能發揮其功能，那麼設計
者只是浪費精力而已，甚至還可能因此流失使用者。
9. 四、網頁的近用性（accessibility） 五、好的網頁設計
如果網站訴求的對象是所有人，那麼網站
該如何設計才能讓所有人近用（access）？
在所有使用者中，有些可能是聽障者，無法聽到聲音；有些是視障者，
無法看到文字或影像；網站能否成為「無障礙」的資訊空間？
在設計時，提供「另一種」
（alternate）或「後退」（fallback）版本選擇。譬如：圖形內容可
能另提供文字解說，或文本內容可能另提供聲音檔。因此，網頁設計
必須以實質內容為主，一旦停止圖形檔案或關掉動畫效果，網頁仍是
值得瀏覽。有關近用問題，設計者可以參考全球資訊網聯盟（W3C）
的作法，或改用CSS（Cascading style Sheets）
讓網頁內容變得更易被近用。
1. 網站具有清楚的目標。
2. 實質具有價值的內容，無用、不相關的內
容都應刪除。
3. 網頁的設計應簡單、清晰而且一致。
4. 網頁應保持一致性：讓使用者對網站有整
體的地方感。
5. 網頁擁有完善的瀏覽系統。
6. 為了近用網頁，網頁提供另一種版本的選
擇。
7. 設計完畢後，以不同瀏覽器、螢幕大小、
解析度，以及不同軟體版本檢視一遍
8. 設計好的網頁，記得做「使用測試」，並
隨時修正，以符合使用者的需求。
避免以下7件事:
1. 避免使用不必要的網頁元件-必須具有實質的意涵。
2. 避免分心的要素-太花、顏色太多或太亮，及過多元件，都易造成分心。
3.避免網頁難以閱讀-文字和背景顏色不能太近、字體不能太小，
4. 不要使用太多新穎的技巧
5. 避免使用太大的圖形元件-以JPG壓縮，或進行GIF減色。
6. 避免網頁的檔案過大-每一網頁最好不要超50KB。
7. 避免要求使用者使用外掛軟體來打開網頁。
10. 10- 4 數位學習的策略規劃與設計製作解析
一
、
什
麼
是
數
位
學
習
？
（e-learning ）
顧
名
思
義
，
乃
是
透
過
數
位
化科
技
所進
行
的學
習
方
式
。
包
括「
以
電腦
為
主的
學
習」
「線
上
學
習」
、
「以
網
路為
主
的學
習」
「
遠
距
學習
」
）、
「
混合
學
習」
以及
「
行
動學
習
」等
。
(
一)
數
位
學
習
的
優
點
內
容
：
能
使
用
多
元
，
包
括
文
本、
圖
、聲
、
影像
、
動畫
、
模擬
等
。
管
道
：
能
採
用
多
種
，
包
括
電
腦
、網
路
、電
話
、手
機
、PDA 等
，
以同
步
或
非同步的方式進行教／學。
教
學
：
不
但
能
系
統
化
的
建
置
管理
教
學相
關
事務
，
也能
提
供個
人
化的
教
學
環
境
。
能
降
低
整
個
教
學
的成
本
。
學
習
：
只
要
時
間
許
可
就
能
學
習。
還
能自
行
決定
學
習的
目
標、
內
容，
或
選
擇
和
其
他
成
員
進
行
合
作
式的
學
習
商
機
：
數
位
學
習
具
有
跨
越
時
空的
特
性，
能
夠快
速
擴大
「
教育
商
務」
增
加
商
機
。
「
教
育
商
務
」
是
將數
位
學習
和
電子
商
務結
合
在一
起
。。
(
二)
數
位
學
習
的
缺
點
內容：若學習者缺乏高傳輸率的
設備，反而易造成學習的困擾。
管
道
：
提
供
者
和
學
習
者
必
須
擁有
並
知道
如
何使
用
這些
科
技
教
學
：
教
師
未
必
效
地
數
位
化
教學
過
程，
因
而影
響
教學
品
質和
學
習成
效
。
學
習
：
獨
自
進
行
探
索
性
的
學
習，
易
產生
惰
性或
迷
失方
向
。
商
機
：
仍
在
初
創
階
段
，
教
育
商務
風
險大
，
投資
未
必能
得
到回
收
。
由此來看，以學習者為導向的數位學習，比較適用於短期、特定目標、以任務或
知識為主，且具有階段性的課程上。
11. 二
、
數
位
學
習
的
採
用
( 一) 誰
（who ）
採
用
數
位
學
習
？
社
會：
政
府
推
動
全
民
數
位
學
習，
有
助帶
動
國
內
數
位學
習
產業
發
展，
刺
激學
習
者採
用
。
組
織：
是
否
意識
到
新風
向
，決
定採
用
數
位學
習
來培
訓
員工
或
教導
消費
者
？
教師：培訓人員和教師是否有意願將課程或訓練變成數位化的教學？
學
習
者：
學
習
者是
否
具有
基
本的
電
腦
和網
路
知識
，
能採
用
數位
學習
？
( 二) 為
什
麼
（why ）
他
們
要
採
用
？
社
會：
加
速
社會
ｅ
化，
改
善人
民生
活
品
質，
教
育資
源
普及
化
，有
效縮
短
數
位落
差
。
組
織：
組
織
為了
降
低成
本
、及
服膺
政
府
的政
策
，而
考
慮採
用
數位
學習
。
教
師： 為
有
效控
制
學習
各
種資
源，
及
讓
更多
人
近用
這
些資
源
，而
考慮
採
用
數位
學
習。
學
習
者：
為
了
近用
高
品質
、
低成
本
、
具個
人
化的
教
學設
計
，而
考慮
採
用
( 三) 什
麼
（what ）
是
採
納
過
程
的
重
要
議
題
？
知
覺：
社
會
、組
織
、教
師
和學習者
知
道
數位
學
習的
存
在。
瞭
解：
大
家
對數
位
學習
有
正確
的瞭
解
，
知道
其
優、
缺
點。
動
機：
不
同
對象
對
數位
學
習的
需求
能
被
激發。
經
驗：
不
同
對象
看
到數
位
學習
的運
作
，
或開
始
接受數
位學
習
。
價
值：
不
同
對象
知
道如
何
以數
位學
習
去
實現
其
目標
、
或獲得
利益
。
( 四) 如
何
（how ）
讓
他
們
願
意
採
納
？
成
功
的
經
驗
：
初
次
採
用
時
，
數
位
學
習
價
值
獲
得
成
功
的
經
驗
，
較
願
意
持
續
採
用
。
推
廣
：
政
府
須
大
肆
宣
傳
數
位
學
習
的
價
值
，
讓
民
眾
知
覺
其
存
在
。
市
場
：
加
速
數
位
學
習
產
業
的
發
展
，
讓
數
位
學
習
的
成
本
全
面
降
低
。
改
變
文
化
氛
圍
：
習
慣
傳
統
培
訓
課
堂
教
育
，
如
何
改
變
社
會
、
個
人
對
教
育
看
法
12. 三、數位學習發展之前的考量四、ADDIE模式在數位學習的應用
(一) 對象是誰？
誰是委託者（clients）提供資金，發展數位學習？
誰是學習者？
誰將負責發展或購買數位學習？
(二) 委託者想要什麼？
委託者想達到什麼目標？
委託者有何要求與限制？它們想要哪些特別的服務？
委託者是否用過數位學習？委託者對該次經驗有何意見？？
委託者這次計畫投資多少經費、科技設備、人力與時間？
委託者要求看到什麼樣的結果？哪種學習模式可能達到此要求？
(三) 學習者需要什麼？
學習者有哪些電腦知識與技巧？
他們的學習動機是？什麼情況，他們願意使用數位學習？
他們是否瞭解數位學習？他們擁有哪些科技，近用數位學習？
他們想完成什麼樣的任務？
(四) 發展者應做到哪些工作？
委託者希望發展者扮演何種角色與工作？
發展者如何定義委託者的需求與目標？
發展者如何決定計畫的目內容？如何評估其成敗？
(一) 分析階段
1.目標和任務分析-是否來訓練員工、還是進行教育商務？希望
學習者能學到什麼、或完成何種任務？
2. 現有資源分析-願意投入多少資金、人力及時間在數位學習上？
如果預算有限，能否根據現有的設備擬定一套方案？
3. 學習者分析-誰使用數位學習？是否具有基本的電腦知識與操
作技巧態度為何？對課程或訓練是否瞭解
4. 學習環境分析-學習者能近用什麼樣的數位學習環境？如
何讓他們彼此互動、分享資訊？
5. 選擇合適的方案-學習者學習方式的選擇，有助滿足目
標及學習環境需求，並有效地提高教學品質和縮短知溝？
(二) 設計階段
(三) 教材的開發準則
(四) 發展階段
(五) 執行階段
(六) 評估階段
教學系統設計當中，最常被使用的是ADDIE模式，：
分析（Analysis）階段：定義學習者該學什麼的過程；
設計（Design）階段：詳述學習者該如何學習的過程；
發展（Development）階段：開發與編寫教學教材的過程；
執行（Implementation）階段：在現實世界裡，實施教學的過程；
評估（Evalution）階段：決定教學的適當性（adequacy）並評鑑教學成果的過程
13. (二) 設計階段
1. 介紹
(1) 背景-所面對問題以數位學習做解決問題方案。
(2) 機會陳述-縮短各種知識與技巧的鴻溝。
(3) 定義學習者-學習者應有哪些電腦技巧與設備。
(4) 計畫目標-交代此方案的目標。
2.教學策略
(1) 宜先確定教學目標-教學策略及內容主題。
(2) 教學策略-內容呈現
(3)課程規劃與教材樣版（prototype）的設計
(三) 教材的開發準則
(四) 發展階段
1. 建置學習系統
. 2. 製作教材（courseware）樣版
3. 教學內容與媒體製作
4. 平台整合
(五) 執行階段
1. 組裝教材
2. 上線測試：
3. 數位學習的推廣
(六) 評估階段
瞭解數位學習的「可用性」和「滿意度」
五、成功的數位學習
下列情形更應避免
科技能力-學習者無法接近與使用數位科技，或不瞭解如何使
用學習系統。
時間太長- 課程的時間太長，讓學習者感到厭煩而提不起勁學
習。
缺乏互動或回饋不足-教材未提供正向的回饋，而且
缺乏足夠的互動，幫助學習者瞭解教學內容。
內容乏味或太重複-太嚴肅或太重複，學習者將無法感到興
趣
缺乏支持系統-如果要減少阻力，就須有適當支持系
統，提供學習者各種有關科技和內容的協助。
A. 擬定課程大綱
B. 描寫課程的處理方式
C. 規劃每個單元（或主題）的學習
活動
D. 寫出評量的策略
E. 擬定媒體教學的設計流程？
F. 編寫故事腳本
G. 評估課程規劃與教材樣版的設計
為了讓數位學習能符合組織的利益，發展者必須建議組織，組成一個維護小組，負責更新與維護數位學習系統。
維
14. 10- 5 MOD、VOD在線上學習與娛樂上的
技術重點與設計製作解析
一、何謂VOD與MOD:
VOD的英文全稱是Video-on-Demand，即是隨選視訊系統。
1. 隨選卡拉OK應用（Karaoke On Demand，KOD）
此類應用，可提供使用者音樂或歌曲點播，亦能設定不同的背景畫面、曲調、節
拍、音色，並在線上進行歌唱。
2. 隨選資訊應用（Information On Demand，IOD）
此類應用，使用者可透過網路擷取諸多資訊，諸如交通時刻表、醫院網路掛號、
樂透開獎資訊、各地時刻表等。此外，亦可提供即時新聞，使用者可選擇重點新聞
或詳細新聞，觀看模式可為純文字、含動態視訊等不同類型的播放方式。
觀眾始終處於被動，播放什麼節目或內容，只能全盤接受，毫無選擇權利。
但有了VOD後，觀眾便可以自由地從資料庫中選擇所喜愛的影片或節目
內容，既無時間亦無空間的限制，而這也是VOD最大的優勢。
3. 隨選視訊應用（Movies On Demand，MOD）
除指影片外，尚可包括MTV、新聞等類型的音訊內容。應用上可讓使用者執行如選擇、開始、暫停、停止、快速倒轉、快速前轉
等功能。
4. 視訊會議應用（Video-Conference）
使用者可立即傳送各類電子資料，
5. 遠距教學服務（Distance Learning）
此應用可包含有「虛擬教室」的服務。一位講師可同時教授不同地點的多位學
生做較有效率的互動教學。
6. 互動性電玩遊戲（Interactive Games）
此類應用可讓使用者透過網路進行線上遊戲的服務。一般而言，這種遊戲可分單
人或遠端多人等類型。
15. 二、數位內容VOD的數位學習應用
案例
(一) 數位內容的規劃與設計
需要數位化錄製流程輔助，才能夠生產出多元且高品質的數位學習課程。一般數位學習課程的製作可分為三個流程:
1.前製『課程設計與溝通』、『教材的準備與製作』是關乎課程成敗的兩個重要關鍵。
2. 錄製建置隔音優良與錄製流程完善的數位攝影棚，是數位課程製作的最好解決方案
3. 後製作後製作，主要是為了滿足前製作業中教學規劃的目標， 在片頭片尾插入適當的引導內容
(二) 台北縣網路社區大學與e-MBA中小企業學習網VOD應用
台北縣網路社區大學與e-MBA中小企業學習網的平台規劃，均是採取選課制度的理念，讓有興趣的學習者透過網路選課，讓課程連結與說明網頁發送到學習者的
會員介面中，學習者透過會員介面就可以點選課程，在家中或公司學習。這種學習模式，收看課程在一定期限內（三個月）是不限制次數的；同如以上的VOD的
說明，只要有網路連線的地方，學員都可以透過電腦或者電視機（需加裝機上盒STB）進行學習
(三) 數位內容VOD的數位機上盒應用案例
市場已經成功整合影音服務、資訊交流、多元數位內容服務，以電視機為媒體，發展出用遙控器為主要操作工具的影音機上盒。
(四) 數位內容VOD的視訊會議應用案例
五人同時在線的使用環境是最佳的，以一般的多人點對點視訊會議軟來說，目前可支援5個用戶端，
