1

Bliki 應用於教學上 資處科 / 蔡阿佩

一、前言

隨著時間，上課時問學生的問題也會不斷的跟著改變，2003 年問學生有沒有即時通帳

號?2005年問學生有沒有部落格?2010年問學生有沒有 facebook帳號?不論是之前的即時通訊、

部落格或是目前的開心農場、小小戰爭、水族箱…等等數不清的小遊戲，因為同儕的力量總

是有著令學生前撲後繼投入的吸引力。但，時間一久，便怠惰了，到底留下了什麼?想必很多

人都記不清了…或者是必須要從一堆的資料中去找出曾經寫下來的資料。這對於教學歷程來

說，都不能算是一項好工具，我們希望學生能過隨時隨地記錄自己的作品或是心得，而且是

分門別類的歸納，是一個有系統、有計畫且不斷進行的工作。

二、Bliki 介紹

在維基百科中是如此定義的：Bliki 是一個 Blog 內建 Wiki 功能，文章是發佈在 Blog，但

可以被其他人編輯的系統。 本校所使用的 Bliki 系統，由中興高中蔡宜坦老師所開發，不論是教師用來做個人教學網

站或授課計畫書或是學生用來做學習歷程都很容易上手，它與部落格的編輯器非常相似，大

部分學生都可以很快上手使用。首先，學生申請帳號使用 Bliki，接著教導學生如何上傳檔案、

建立超連結、如何使用 wiki 語法、章節語法、選單語法，再來就是建構自己的作品集。再加

上「選單語法」，可以馬上依自己的分類方式(或依學習主題)，將自己的資料分門別類的歸納，

非常的方便。 簡單介紹 Bliki 所使用到的三種語法： 1.wiki 語法：此語法可用來產生子網頁(下一層網頁)，語法格式如下：

[[關鍵字]] 或 [[關鍵字|取代名稱]] 使用後會變成「關鍵字」的超連結，點選時如果整個部落格主題沒有「關鍵字」這

個名稱，則會出現空白編寫畫面，否則就會出「關鍵字」這個超連結的頁面內容。如果

不要以關鍵字來顯示超連結，則可利用第二個語法，以「取代名稱」來顯示。 例：[[第一課]]

[[第二課|師說]] 完成編寫後，即可出現如圖 1 所示：

2

圖 1：wiki 語法顯示的畫面 2.章節語法

利用該語法可在子網頁中產生單獨可編輯的章節，用途為讓小組合作完成一篇報告

或文章。語法格式如下： ==章節名稱== 例：進入「第一課」編寫畫面後，輸入如下語法： ==摘要== ==作者介紹== ==解釋== ==歷年考題== 完成編寫後，即可出現如圖 2 所示

圖 2：章節語法顯示的畫面

3.選單語法

選單語法用途為將網頁的選單部份獨立出來，使用時再下選單語法，讓每個網頁都

出現該選單，其語法格式如下：

3

[=關鍵字=] 或 [=關鍵字|取代名稱=] 在編輯內容時下這個語法，系統會找尋整個部落格主題有沒有「關鍵字」這個名稱，

有則會出現選單內容，否則就會出「關鍵字」?這個連結，按「?」即可編輯內容。如果

不要以關鍵字來顯示，則可利用第二個語法，以「取代名稱」來顯示。 例：想製作一個部落格比賽的網頁，第一步先編寫新網誌，主題為「813135 表單」，

並在網誌內容輸入如下語法： [=813135 表單=] 由於整個部落格主題沒有「813135 表單」這個關鍵字，這時可點選後方的「?」，

編輯選單內的項目，這時可利用 Wiki 語法 ( 如 [[813135 寫真集 | 寫真集 ] | [[813135Photoshop 作品|Photoshop 作品]] | [[813135Flash 作品|Flash 作品]] | [[813135 計概

作業|計概作業]] | [[813135 證照證明|證照證明]] | 回首頁) 製作選單。 完成編寫後，即可出現如圖 3 畫面：

圖 3：在選單中上傳橫幅，並使用選單語法+wiki 語法所顯示的畫面

三、應用實例

99 學年度，使用 Bliki 系統的班級有資二 1 及廣一 3，兩班皆完整使用了一學年。首先，

學生申請帳號使用 Bliki，接著教導學生如何上傳檔案、建立超連結、如何使用 wiki 語法、章

節語法、選單語法，再來就是建構自己的作品集。看似簡單，其實當中最困難的還是學生作

品的蒐集，我們利用課堂時間，藉著每次主題的練習，將學生完成的電子檔上傳至系統中，

一點一滴慢慢地累積，才能夠展現出成果，也希望藉此記錄學生的學習。

4

廣一 3 的課程屬計算機概論基礎課程(授課計畫如附表 1、附表 2)，除理論之外，實作部

分有 Word--交換禮物、網路遊戲介紹；PhotoScape 製作相片版型、微軟卡通秀製作卡通公仔；

胸章製作--手繪胸章；Flash--電腦繪圖、賀卡、移動、音樂短片製作；PowerPoint--暑假計畫；

每位學生的作品集如圖 4 所示。

圖 4：廣一 3 學生作品集

資二 1 的課程(授課計畫如附表 3、附表 4)偏向網頁設計，於是有影像處理、動畫製作、

丙級網頁設計檢定等課程製作的作品。在影像處理上使用 Photoshop cs4，有變形、內容感知、

編修、網點、馬賽克、化粧、教師節賀卡…等作品，最後以「個人寫真集」作為階段評量的

項目，再指定學生參加校內所舉辦的「母親節明信片」比賽；動畫製作方面，則利用 Flash cs4，從基礎的移動、描圖、導引線、遮色片…等作品，再加上參加校外宏碁數位創作獎與校內電

腦繪圖比賽為第二階段評量項目；待完成按鈕、骨塊、心理測驗作品，並分組完成賽假相關

校外比賽網頁製作，最後以首頁動畫、創意就是力量比賽、把握當下比賽作為結束，並藉此

挑選全國技藝競賽網頁設計組的選手；而丙級網頁設計檢定課程，首先鎖定學科部分，以每

星期 50 題的進度搭配每次上課的測驗，逐步完成學生的訓練，再慢慢的擴大範圍，術科部分

則從 99 年 12 月開始進行教學，在本校檢定使用的軟體是：PhotoImpact 12 及 FrongPage 2003，有別於之前所使用的軟體，也趁此機會讓學生使用不同的軟體。學生一整年所蒐集的作品如

圖 5 所示。

5

圖 5：資二 1 學生作品集

四、結論

教學是一連串的小單元所構成，學生的作品也是點滴所累積，要不斷的、持續以恆的蒐

集、整理，最後才能擁有完整的紀錄；老師要做的就是時時叮嚀，讓學生不要忘了這件事，

久而久之，有了默契及標準的流程，把習慣養成，慢慢的學生會把其他相關資料(例如：計概

作品、證照)也一併擺上來，這樣對學生來說，不必等到三年級做備審資料時才到處找資料，

因為我們平常已經在做這件事。對教師本身來說，所有的課程都在網路上，可以視學生學習

狀況調整教學進度，等到學期末時，屬於該科目的授課明細也可以完整的紀錄著，慢慢的累

積，教師也在建構自己的教學資料庫，當資料愈來愈豐富，教師的教師愈可以隨手取用。找

到一個好工具，真的是很棒的事，也推薦給大家。

6

附表 1：廣一 3 的 99 學年度上學期授課計畫表

週次 日期 預定教學進度 預定作業 教學活動與輔助媒體

1 08/29~09/04 1-1 電腦發展簡史 1-2 電腦科技的生活應用 實習場所安全守則宣讀、環境介紹

2 09/05~09/11 1-2 電腦科技的生活應用 1-3 資訊安全與保護 中打 201-205

習作 CH1 解答 QR code 簡介、QR code 產生器

3 09/12~09/18 2-1 電腦的架構與組成 中打 206-210 第 1 章測驗

未來 10 年科技 2003~2010(1)、(2)、(3) 機器人(HONDA)、(iROBOT)、(PELO)

4 09/19~09/25 2-2 主機內部的零組件 中打 211-215 主機組裝測試

5 09/26~10/02 2-2 主機內部的零組件 2-3 電腦週邊設備與連接 中打 216-220

匯流排的種類、記憶體的分類、硬碟工作方式

6 10/03~10/09 2-3 電腦週邊設備與連接 中打測驗Ⅰ(201-220) 習作 CH2 解答

中區國稅局南投縣分局--稅務 e 樂園、會員稅如意(答案：34141 24444)

7 10/10~10/16 期中考Ⅰ 試題

8 10/17~10/23 2-4 電腦的操作與保養 3-1 電腦作業系統的功能與類型 中打 221-225 多點觸控、電腦使用健康手冊

9 10/24~10/30 3-1 電腦作業系統的功能與類型 3-2Windows XP 的基本操作 中打 226-230

10 10/31~11/06 3-2Windows XP 的基本操作 中打 231-235 幫忙投票給 3、4 號

11 11/07~11/13 3-3Windows XP 的檔案管理 中打 236-240 習作 CH3 解答

12 11/14~11/20 4-1 電腦軟體分類與文件格式 4-2 電腦軟體授權與著作權 中打測驗Ⅱ(221-240) 胸章成品欣賞、ImageChef

13 11/21~11/27 期中考Ⅱ

14 11/28~12/04 4-2 電腦軟體授權與著作權 4-3 常用工具軟體簡介 中打 241-245

[[991 廣一 3 作品集]] 交換禮物(文字、圖片) ftp://168.168.0.5

15 12/05~12/11 4-3 常用工具軟體簡介 中打 246-250

16 12/12~12/18 4-3 常用工具軟體簡介 中打 251-255 習作 CH4 解答

17 12/19~12/25 5-1 網路通訊與搜尋 中打 256-260 世界最貴的網頁、世界最寬的網頁

18 12/26~ 100/01/01

5-1 網路通訊與搜尋 5-2 網路應用實例 中打 261-265

網路遊戲介紹 1.班級、座號、姓名 2.遊戲名稱 3.遊戲規則 4.遊戲畫面 5.遊戲心得

19 01/02~01/08 5-2 網路應用實例 中打 266-270

指紋算命、來年的-文字占卜(中文解說)

20 01/09~01/15 5-2 網路應用實例 中打測驗Ⅲ(241-270) 習作 CH5 解答

21 01/16~01/22 期末考

7

附表 2：廣一 3 的 99 學年度下學期授課計畫表

週次 日期 預定教學進度 預定作業 教學活動與輔助媒體

1 02/06~02/12 課程介紹、作品登錄系統介紹、bliki介紹、PhotoImpact 橫幅製作 英打練習：p201-202

[[99廣一3學生作品]] [[991 廣一 3 作品集]]

實習場所安全守則(宣讀) [[bliki 操作說明|操作說明]]

2 02/13~02/19 Microsoft Cartoon Maker 介紹 下載點：【官方】 英打練習：p203-207

CM 作業 微軟卡通秀

3 02/20~02/26 Flash 介紹、繪圖 英打練習：p208-212

4 02/27~03/05 Flash 繪圖工具 英打練習：p213-218 繪圖作業 全字庫

5 03/06~03/12 Flash 賀卡製作 英打：E101

6 03/13~03/19 Flash 練習 英打測驗Ⅰ

7 03/20~03/26 期中考Ⅰ 賀卡作業

電子賀卡(參考 1、參考 2、參考3)

8 03/27~04/02 Flash 移動補間 ★創意就是力量

9 04/03~04/09 Flash 移動補間動畫製作 英打：E102-E106 移動作業 全民資安素養自我評量

10 04/10~04/16 Flash 聲音剪輯 英打：E107-E111

GoldWave(中文化)--基本教學 音效檔

11 04/17~04/23 Flash 聲音剪輯 英打：E112-E116

12 04/24~04/30 Flash 動畫製作 英打：E117-E121

13 05/01~05/07 Flash 練習 英打測驗Ⅱ

[[99ad3音樂短片分組名單|音樂短片分組名單]]

14 05/08~05/14 期中考Ⅱ ★2011 漢字動畫競賽

15 05/15~05/21 Office--Excel 介紹 英打：E122-E126 音樂短片作業

16 05/22~05/28 Office--Excel 練習 英打：E127-E131

dr.milker 小確幸、e 觸即發 線上問卷調查、我喜歡的綠色商店

17 05/29~06/04 Office--PowerPoint 介紹 英打：E132-E136

18 06/05~06/11 Office--PowerPoint 練習 英打：E137-E141

19 06/12~06/18 期末總複習 英打測驗Ⅲ 簡報作業

20 06/19~06/25 期末上機考 [網路活動]部落客寫鹿港 21 06/26~07/02 期末補考

8

附表 3：資二 1 的 99 學年度上學期授課計畫表

週次 日期 預定教學進度 預定作業 教學活動與輔助媒體

1 08/29~09/04 課程介紹(教學環境使用介紹) Photosho 介紹

[[dp98 作品集]] 轉正 02(原圖、完成圖) 歪斜轉正 03(原圖、完成圖)

2 09/05~09/11 作業系統環境的介紹 學科：1-100 題 變形/曝光/編修工具

變形作業 內容感知作業 編修作業

修正變形 04(原圖、完成圖) 內容感知比率 05(原圖、完成圖)、06(原圖、完成圖)、07(原圖、完成圖) 曝光範例：08、09、10、11、12 編修工具(原圖、完成圖)

3 09/12~09/18 作業系統環境的設定 學科：101-200 題 T 恤的網點印刷風格

網點作業 原圖、完成圖

4 09/19~09/25

檔案管理 學科：201-300 題 透明馬賽克、化粧術(解說參考)

馬賽克作業 化粧作業 賀卡作業

透明馬賽克完成圖 如何擺 pose、這時怎麼拍才漂亮(電子書) 賀卡完成圖、筆刷下載(168.168.0.5)

5 09/26~10/02 系統管理與磁碟維護 學科：301-400 題

6 10/03~10/09 鍵盤及指法介紹 學科：401-500 題 寫真作業

中區國稅局南投縣分局--稅務 e 樂園、會員稅如意(答案：34141 24444)

7 10/10~10/16 期中考Ⅰ 試題

8 10/17~10/23 中文輸入法簡介 學科：501-600 題 Flash 傳統補間動畫

[[991 資二 1 宏碁分組|宏碁分組名單]] 移動作業

未來十年科技、蔡依林、外國的台灣廣告、回家的路、孩子、

9 10/24~10/30 嘸蝦米輸入法-形 學科：601-700 題 Flash 繪圖工具(描圖)

描圖作業

★宏碁數位創作獎報名★ 圖檔：飛機、汽車、帆船

10 10/31~11/06 嘸蝦米輸入法-音 術科：960301 聲音剪輯

交通工具移動作業

GoldWave(中文化)-- 基本教學 音效檔 創用 CC 請求免費授權(範本)、授權書(範例)

11 11/07~11/13 嘸蝦米輸入法-義 術科：960301

12 11/14~11/20 認識文書處理軟體 術科：960306 國稅局抽獎結果

13 11/21~11/27 期中考Ⅱ 宏碁作業 ★宏碁數位創作獎截止★

14 11/28~12/04 文件編輯與格式設定 術科：960306 導引線作業

★地方產業與文化之數位內容建置 ★2010 全國高中職網頁設計 ★南華大學高中職電子商務設計比賽

15 12/05~12/11 版面設計與頁面美化 術科：960302 遮色片作業 電腦繪圖比賽

16 12/12~12/18 圖文整合與外部物件使用 術科：960302、960307

網頁術科電子檔 繪圖比賽作業

17 12/19~12/25 表格的建立與編修 術科：960307

按鈕作業 骨塊作業 確定賽假上網頁丙檢的時間

18 12/26~ 100/01/01

文件超連結的設定與使用 術科：960303

[[991 資二 1 旅遊分組|旅遊分組名單]] 確定寒假分組名單

19 01/02~01/08 文件的合併列印 術科： 960303 追蹤分組進度、繳交報名表

20 01/09~01/15 期末考 1/13(四)期末大掃除、講解明信片設計

21 01/16~01/22 期末補考 心理測驗

寒假作業--母親節明信片設計 全字庫

9

附表 4：資二 1 的 99 學年度下學期授課計畫表

週次 日期 預定教學進度 預定作業 教學活動與輔助媒體

1 02/06~02/12 準備週 ★線上教學 FollowMe(帳號 pthc 密碼請洽 beta)

[[dp98 作品集]]

寒假「網頁檢定研習」照片

2 02/13~02/19

課程介紹(教學環境使用介紹) 認識儲存格、工作表及活頁簿、資料輸入、美化與驗證 完成「母親節明信片」、Flash「旅遊網站」作業

明信片 旅遊作業

實習場所安全守則(宣讀) ★寒假作業--母親節明信片設計 ★2010 全國高中職網頁設計

3 02/20~02/26

公式與函數的應用、排序、小計與篩選 學科 1-200 完成 Flash「心理測驗」作業

心理測驗 全字庫

4 02/27~03/05

資料的匯入與匯出、試算表版面設定技巧 學科 201-400 術科：02 [操作步驟]：0204A.gif 、0205A.gif、message.htm

★地方產業與文化之數位內容建置

5 03/06~03/12

統計圖表的製作、樞紐分析圖報表 學科 401-600 術科：07 [操作步驟]：題組 07 與題組 02 不同之處

6 03/13~03/19 試算表及活頁簿的保護、試算表工具的應用技巧 學科 601-700

7 03/20~03/26 期中考Ⅰ(學科 40%、術科 20%、首頁動畫 40%) 學科試題

首頁動畫

「首頁動畫比賽」 製作要求 1.尺寸大小：符合 1024*768 螢幕大小 2.主題：介紹自己的 xxx 3.動畫時間：7~12 秒 4.要有音樂 5.要有「再看一次」及「跳過」的按鈕 6.播完動畫，直接跳到個人作品集 範例：--1--2--3--4--5--6--7--8--9--10-- --11--12--13--14--15--16--17--18--19--20--21--22--23--24--25--

8 03/27~04/02

列印功能的操作、範例練習 學科 1-700 術科：05 [操作步驟]：0508.gif、0510a.gif [操作步驟]：album2、album5

◎2010 全國高中職網頁設計得獎名單 --林冠妤、許譯云、柯怡瑋、陳冠翰、張庭甄 ◎首頁動畫比賽得獎名單 --陳盈瑄、廖珮伃、黃新雅、林冠妤、林怡君 全民資安素養自我評量 ★創意就是力量 (範例：--1--)

10

9 04/03~04/09

基本編輯、簡報版面配置及設計、範本的套用與修改 學科 1-700 術科：10 [操作步驟]：題組 10 與題組 05 不同之處

◎地方產業與文化之數位內容建置得獎名單 --陳冠翰、黃新雅、巫珮渝、游庭毓

10 04/10~04/16

插入檔案的操作、插入表格與圖形繪製、圖表設計、特殊效果建立 學科 1-700 術科題組 10 測驗

◎母親節明信片設計得獎名單 --林冠妤、張庭甄、周佳姿、黃新雅、蔡姈真、陳盈瑄

11 04/17~04/23

多媒體簡報設計、投影片放映設定、製作簡報網頁、列印功能的操作 學科 1-700 「創意就是力量」動畫製作

12 04/24~04/30 掃瞄器設定與操作 學科 1-700 「創意就是力量」動畫製作

創意就是力量

◎「創意就是力量」繳交注意： 1.檔名請用「座號+姓名」存檔，例：50Beta 2. swf 請上傳至.96 的「創意就是力量」資料夾 3.請準時繳交

13 05/01~05/07 色彩原理與影像類型 術科：09、08

14 05/08~05/14 期中考Ⅱ(學科 50%、術科 50%) 學科試題 5/14 網頁設計丙檢學科測驗

15 05/15~05/21 影像處理軟體操作、繪圖工具的介紹 術科：07、06

[網路活動] 我喜歡的綠色商店 [網路活動] e 觸即發 [網路活動] 線上問卷調查

16 05/22~05/28 影像的格式化處理、相片修補與美化 術科：05、04 [網路活動] dr.milker 小確幸

17 05/29~06/04 影像特效處理 術科：03、02、01

18 06/05~06/11 列印功能的操作、範例練習 術科測驗

◎創意就是力量獲獎名單 --張庭甄

19 06/12~06/18 文字辨識系統的操作 術科測驗 把握當下

網頁設計主題：把握當下，圖檔請至.96 下載

20 06/19~06/25 期末上機考(術科 50%、創意就是力量作品 50%) ★校園反霸凌

21 06/26~07/02 期末補考 [網路活動]部落客寫鹿港