目錄

目的

分析

構思

比較

應用

測試與評估

結論與討論

參加文件

1
目的
學校正在重新整理它的網站.校方希望建立特定的網頁以發佈須經常作更新的資
訊.當中的資訊會包括學校通告、課外活動日程、功課表等等.這些資訊的對象會有
學生、家長及老師.

學生希望能在網站內學習,並可即時與其他同學交流.他們也想在網站內得知”今
天的功課”.他們便可在網頁登入報,查閱功課的資料。
家長瀏覽學校網站時,想知道更多關於家教會資訊.例如家教會的幹事成員,甚至
它的最新動向.他們也想查看學校的通告或活動,更可在網頁內即時報名參與。
教師希望在網站內即時發佈通告及學術性的檔案,例如上載測驗答案結同學改正.
所以,網頁提供了一個平台給老師,可以隨時隨地方便的上載有關檔案。

分析
為了更方便的管理網站,我便嘗試加入一些互動的元素.例如老師可在網站即時發
佈通告等等.而網站內的資訊經已分類,包括學生、家長及老師三部份.這可使各使
用者更容易的找到相關的資訊.

解決方法
學校可透過郵寄方式把家長通告寄出,但這實在太費時.所以最好的方法是把通告
交給學生,經他們轉送給家長.
若學生把通告掉失,便要向校務處索取,但這會麻煩到校務處的職員.所以,學生可
以在學校網站內下載通告.既方便又不用麻煩學校.
有些學生很好學,希望在學校網站學習.所以我便在網站內加設學科網頁.同學可
選擇某科目,再進行該科的練習.然後,再跟其他同學互相交流.另外,他們亦可查看
”今天的功課”.
教師在網站可即時上載檔案,例如測驗答案,甚至功課.當有消息要通知家長和學
生時,他們更可立即發佈通告,可謂十分方便.

發送資訊的方式
方式 優點 缺點

電子郵件 能即時收到,快捷 沒有電腦便不能閱讀

學校告示版 教職員能即時貼上通告 家長不能隨時閱讀

郵寄 沒有電腦都能閱讀 可能會寄失並費時

2
電子告示版 可在網站內即時更新 必須在電腦內更新

構思
我設計了兩個構思,從而能作出比較.

解決方法 1
當學校有新通告時,便會通知網站管理員,把通告以電子郵件方式傳送給學生及家
長.
學校有活動要舉行 ,例如旅行日 ,便會把詳細資料交給網站管理員 .他們以純
HTML 來製作網頁,所以不能在網站即時發佈資訊.旅行日的網頁完成後,網站管
理員把檔案上載至網站伺服器.學生及家長亦可隨即查看有關資訊.
教師想把測驗答案上載至網站,便要經網站管理員把檔案上載.同樣地,教師想把
最新的功課上載,以給學生下載,他們也要把檔案交給網站管理員代為上載.
學生對功課有問題時,會傳送一個電子郵件給老師.若他們想在網站內與其他同學
討論,這是沒可能的.

解決方法 2
當學校有新通告時,可隨時找一個職員,把通告發佈到網站或傳送電郵.學生及家
長也能即時查看.
學校有活動要舉行,例如旅行日,負責老師進入網站登入後,便可自行把有關資料
發佈.因這是一個互動性網站.學生及家長便可更快隨查看有關資訊.而他們也能
即時報名參與活動.
教師想把測驗答案上載至網站,只需在登入後,便能上載檔案.他們也能把最新的
功課上載,以給學生下載.另外,學生也可即時查閱功課表.
學生對功課有問題時,除了傳送電郵給老師.也能在網站內即時與其他同學交流.

3
比較

兩個構思的比較
資訊傳送方式 方法 1 方法 2
通告的發佈 由網站管理員負責 教職員可自行發佈
活動消息 由網站管理員負責 教職員可自行發佈
上載檔案 由網站管理員負責 教職員可自行上載
即時參與活動 不可以 可以
即時的討論及交流 不可以 可以

最後.,我選擇了方法 2. 因為方法 2 的好處在於互動性較高. 老師、教職員能即時把

資訊傳送出去,不用經網站管理員,亦可減輕他的工作負擔.學生及家長能即時報
名參與活動,這明顯地消除了時間及地域的限制,自由度更高.

製作網頁的工具
Macromedia Dreamweaver
優點: 1.採用所見即所得的介面,而且可即時轉換成 HTML 來觀看. 2.可使用樣版
來統一整個網站的介面. 3.操作介面較 Front Page 華麗. 4.與 Macromedia 家族整
合,可方便插入其他多媒體元素,如 Flash 等. 5. User friendly 的介面.
缺點: 1 若第一次使用會較難上手. 2.使用的資源較 Front Page 高.
Microsoft Front Page
優點: 1. 若第一次使用會較易上手,因介紹跟 Microsoft Office 差不多 2.使用的資
源較 Dreamweaver 低 3.採用所見即所得的介面
缺點: 1.較難編寫複雜的網頁.

4
 製作 網站所 使用的 軟件

用以製作整個網站
選擇原因: 功能較 Front page 多,而且可使用樣板,製作時更方便.

製作首頁的動畫
選擇原因: 要製作較高質素的動畫,暫停只可使用 Flash.所以別無他選.

5
 Banner 及某些小圖示都以它製作
選擇原因: 操作上較 PhotoShop 簡單,而且功能不差於 PhotoShop.

用以製作背景圖及某些小圖示
選擇原因: 較容易製作一些特別的效果.

Cap 圖時用,十分方便.
選擇原因: 使用的資源極低,而且每部電腦都有,十分方便.

6
 這是根據方法 2 而製作出來的網站

頁框設 計
網頁主要分為三個部份:上部份為網站 Banner 及按鈕連結;中間部份為網頁內容;下部份是其
他按鈕連結.
顏色運 用
整個網頁的主色是藍色. 藍色會使人覺的平靜、舒適,令瀏覽者有一個良好的印象.
其他特 色
網站內有各項不同的互動功能,在應用部份將會詳細介紹.

7
 製作日 程表
30/6/07 搜集其他學校網站的資料
10/7/07 開始設計網站的樣板(完成度 0.1%)
13/7/07 製作首頁(完成度 0.2%)
14/7/07 製作首頁的動畫(完成度 1%)
15/7/07 編寫網站的主要內容(完成度 5%)
17/7/07 著手研究內聯網(完成度 10%)
21/7/07 成功製作內聯網(完成度 12%)
1/9/07 研究學生專區及教師專區的交流系統(完成度 30%)
5/9/07 成功製作交流系統(完成度 45%)
10/9/07 研究電郵系統(完成度 50%)
15/9/07 成功製作電郵系統(完成度 80%)
28/9/07 完成網站指南中的樹狀圖(完成度 85%)
28/9/07 開始撰寫報告(完成度 90%)
29/9/07 撰寫報告中(完成度 92%)
1/10/07 盡力做到最好(完成度 95%)
2/10/07 第一次繳交 Project(完成度 95.5%)

應用
學生

8
 點選學生專區.

首先出現的是學科網頁.
同學可選擇某一科目,然後進行相關的練習.

例子

9
選擇電腦科

之後便出現了有關電腦科的練習.

10
 這是其中一個練習

當有問題的時候,同學們可進行交流區互相討論

11
 討論區的頁面

按發表文章可發表自己的文章.

12
同學可在此看查看最新的活動,甚至即時報名.

例如選擇國慶煙花觀賞團

13
活動的詳情便會顯示在頁面

若有興趣參加,更可即時報名

14
同學可在此看查看最新的通告.

隨即出現通告的列表

15
這是其中一項通告

同學可在此看查看功課表.

16
首先要輸入學生證編號,以識別學生的班別及詳細資料

識別完成後,便會出現功課表.
當中顯示了各科的功課項目以及遞交日期.

17
家長

點選家長專區.

首先出現的是家教會的資料

按一下活動資訊,便可查看家教會最近舉辦的活動.

18
 出現了相關的活動

選擇其中一個活動,可得知活動詳情,更可即時參加.

19
教師

點選教師專區.

之後便會顯示這個頁面. 教師先要登入才能正式進入,這可提高安全性.

20
 登入後的頁面

在左面的選單按收發電郵.

21
教師可在此檢查及撰寫電郵

在左面的選單按上載檔案

22
教師可把測驗答案或最新的功課等等上載至網站.
他們可選擇上載至指定班別或/及指定班級.

在左面的選單按發佈通告.

23
然後,教師便可在這裡輸入通告的詳情,再選擇發佈的對象.

按一下發佈便可正式發出通告.

24
學生與家長

點選學校活動.

會顯示學校最新的活動資訊

25
 例如觀看相片

課外活動的資訊及集會時間

26
公眾、家長、學生

點選學校介紹

首先會介紹樂善顧超文中學的資料,如外貌,辦學宗旨等.

按教職員名單

27
 可查看本年度的教職員名單

按學校位置

28
可即時看到學校的地圖

若按詳細的衛星地圖,便會顯示
一張由美國太空總署提供的衛
星地圖以顯示學校位置.

29
 地圖由美國太空總署(NASA)及 Google maps 提供.

按學校校歌

30
開始頁面後可看到校歌歌詞並能聽到悅耳的校歌.喜歡的話,可以看住歌詞來唱!

按得獎記錄

31
 可看到同學在往年得獎的記錄,見證大家努力的成果!

若學生,家長,教師及公眾對網站有意見,他們可在網站下部份的意見發表提出.

給大家提出意見.

32
發表意見的表單

33
用戶也可在網站查閱校曆表

查閱校曆表

34
網站內附上了一些有用的連結,方便用戶

有用連結

若用戶不明白網站的架構,他們可從網站指南中取得整個網站地圖.

查看網站地圖

35
用戶可看到整個網站地圖.

36
內聯網
內聯網是給學生使用,每位學生有特定的帳號及自定的密碼.因為要登入後,才能
使用內聯網的功能.這大大提高安全性.

登入內聯網

首先會要求用戶輸入 Login ID(登入名稱),以及 Password(密碼).

若用戶忘記 Login ID 或 Password,可按 Forget your ID or Password,便可通知網站
管理員.

37
 登入後的狀況

左面的功能表

顯示用戶的名稱

電郵信箱

下載老師給同學的檔案或上載檔案至伺服器

查看通告(只適用於老師給指定學生的通告)

可在此查看已借的圖書並進行續借

38
按一下便會顯示詳細功能

例如撰寫郵件

39
 檢查郵件

按檔案存取

40
學生可選擇科目,下載有關的檔案

上載檔案

41
 當老師有重要通告要給指定學生,該學生便可在
此查閱.而普通學生則不能檢視.

沒有足夠權限的學生,便不能進入

按一下圖書館

42
學生可查看借出的書籍

可在網上即時進行續借

43
用戶要登出,便要按 Back to Home & Logout

44
測試 與評估
為了使整個網站能順利運作,本人進行了一連申的測試計劃.

Plan A
把網站上載至網絡,然後邀請十位朋友瀏覽進行測試.
評估:由於每完成一頁後都會立即測試,所以網站應該很少問題.
Plan B
模擬自己是用戶,隨機地按連結.直至把整個網站全部瀏覽.
評估:同上
Plan C
主要測試圖片的連結.在一些相片集,按一下放大後,會否不能連結.
評估:某些圖片可能因某些檔案的移動而未能顯示.
Plan D
檢查 Flash 動畫是否正常運作.
評估:因為全個網站只有兩個 Flash,管理較方便,應該能夠正常顯示.

本人以兩日的時間,成功進行以上的測試計劃.結果令人滿意.
Plan A
十位測試者中,大多能完成瀏覽,沒有未能顯示的圖片或錯誤連結.其中一名測試
者沒有安裝 Flash Player,所以未能正常顯示首頁的動畫.
Plan B
本人使用了 20 分鐘的時間進行這計劃,發現途中有一至兩個的連絡有錯誤.我立
即暫停瀏覽並作出修改,最後都能完成.
Plan C
相片集的相片,按一下都能顯示較大的版本,沒有無法顯示網頁的出現或錯誤連結.
Plan D
在首頁的兩個 Flash 動畫都能正常運作.

結論 與討論
我根據各方面的需要,製作出來的網站能解決大部份的問題.例如我在加入了多種
互動的功能,使教師方便地發佈通告,課外活動日程等;學生及家長能隨時隨地閱
讀通告、家課表等,更可即時在線上報名參加活動. 這個高互動的網站促使家校兩

45
方面的合作與溝通,亦可藉以增加學校的透明度.
由初步計劃到構思,然後實踐製作一個完整的網站. 而且全部程序都是自己親力
親為,令我學到有用的知識,更吸取了不少經驗. 從前我製作一個網站,由於不懂使
用樣版功能,所以每次寫了一個網頁後,由要重新寫過另一版完全相同的網頁. 今
次我基於想把 Project 做得「好好睇睇」,所以我參考了不少書籍及上網請教網友.
使我得悉了一個在 Dreamweaver 中名為樣版的功能,令我在花在編寫網頁的時間
節省了不少.
此外,這是一個互動性的網站,所以要加入一些新元素,令網站更互動. 為了認識更
多,我在網上搜集了很多資料,務求為網站變得更互動. 例如,我學會了製作表單,讓
訪客留下意見.

資料 來源
樂善堂顧超文中學網站 http://www.lstkcmss.edu.hk/
腦地方 http://www.htmlplus.net/

參考 書籍
製作網頁超級攻略
Flash 應用 100 招
Dreamweaver 高手天書

46