實際建置國小環境教育網站

本研究所建置之國小環境教育網站，伺服器硬體設備位於屏東縣潮州鎮四林 國民小學資訊室內，網站名稱為「屏東縣四林國小環境教育網站」。依據網站內 容形態之不同，依序介紹：(一)實際建置網站之基本資料架構、(二)實際建置網 站之教育資料內容、(三)實際建置網站之互動性功能、(四)實際建置網站之使用 者介面，(五)小結，共分五小節依序介紹。

一、實際建置網站之基本資料架構

本研究實際建置的網站名稱為：屏東縣四林國民小學環境教育網站。網址為 http://163.24.56.141/~green。依據本章第一節所呈現的資料架構，大項目有「行政 與管理」、「教育宣導與活動成果」、「校園環保實務」、「教學資源提供」以及「學 校環境特色」五大類。另外又增加「其他資源」主目錄，用以存放網站的其他功 能，如圖 2 呈現之畫面。

圖 2 網站首頁與主目錄按鈕圖

資料架構之小項目，例如：實施計畫、推動小組、會議記錄、當前困境與願 景、教學活動、校內外宣導、環境參訪、研習心得、節能減碳、資源回收、綠色

61

採購、資源再利用、環境整潔、環境安全、融入領域教材、家鄉環境、環境知識、

學習單，主題環境規劃、多層次植栽、生物多樣化以及其他空間營造則顯示在網 頁次目錄上。操作網頁時，按下主目錄會在下方立即呈現各項次目錄按鈕，如下 一列開始圖 3 至圖 8 所呈現之畫面。

圖 3 行政與管理主目錄和次目錄按鈕圖

圖 4 教育宣導成果主目錄和次目錄按鈕圖

圖 5 校園環保實務主目錄和次目錄按鈕圖

圖 6 教學資源提供主目錄和次目錄按鈕圖

圖 7 學校環境特色主目錄和次目錄按鈕圖

圖 8 其他資源主目錄和次目錄按鈕圖

從圖 3 至圖 8 可以發現按下目錄按鈕後，按鈕顏色會改變，讓使用者清楚知 道目前呈現的資料是哪一個目錄底下，這也是使用者介面上一個貼心的設計。

二、實際建置網站之教育資料內容

網站內的網頁資料是智慧與經驗的累積，是人文薈萃的結晶，資料內容只會 日益增多，為了瀏覽或存取方便，必須設立目錄來管理。主目錄和次目錄在形式 上像個資料夾，操作上則是個按鈕，是用來收納龐大之網頁資料，方便瀏覽者快 速找到資料。但是真正的網頁資料，則是放在次目錄下，一筆一筆陳列出來的標 題，並在按下標題後才會見到廬山真面目；也有些網頁資料，因為較為獨特重要，

所以會設計成在按下次目錄後直接顯示出來。

因本研究網站剛新成立，國小環境教育網站資料，截至目前只有 121 筆，如 見圖 9 所示。所幸本網站不像書本一旦出版後就不易再增減內容，而是隨時可以 上線增加網頁內容，日後會廣邀學校師長及學生共同編輯，假以時日內容必定更 加豐富。

圖 9 最新網頁資料與篇數總計圖

本網站 121 筆網頁資料下，依主目錄區分篇數「行政與管理」共 12 篇、「教 育宣導成果」19 篇、「校園環保實務」23 篇、「教學資源提供」14 篇、「學校環 境特色」31 篇以及「其他資源」22 篇，詳細如圖 10 所呈現之畫面。

圖 10 網站地圖與各目錄網頁資料篇數圖

63

以上圖 9 是本研究國小環境教育網站之網站地圖，除了可以一覽各目錄名稱 並了解各目錄網頁篇數外，還可以當按鈕超連至所屬的網頁。依據圖 10 所呈現 之各主次目錄網頁篇數，可以發現雖然各篇數不多，但基本上每一項目錄都有呈 現網頁資料。至於各網頁所呈現之資料內容是否符合國小環境教育網站之內涵，

則留待本章第三節，請專家評估後再分析結果。

三、實際建置網站之互動式功能

網站如果設計成只是資料的展示，那麼這個網站只能像是一本供人方便瀏覽 的圖書館，而不是一台可以製造產品的機器。如果學校環境教育網站，只有展示 全球性、通用性的環境教育知識，那就沒那麼高的價值，因為比起浩翰如海的網 路資源和搜尋功能，學校所展示的環境教育知識實在微不足道。如果學校環境教 育網站展示的是國小特色的環境教育相關資料，雖然很有價值，但是如果每一次 網頁的更新都需要先用網頁編輯器製作，再上傳到網頁伺服器上，用不了多少時 間，就會發現網站久久才更新一次，因為這實在是一件很累很煩索的工作。所以 最好的方式是架設有互動式功能的網站，管理者或教師可以直接在網站線上編輯 資料，學生也可以上線回答問題，非常直接方便，網站運作就會更為熱絡，背後 所代表的教育宣導就更加有效果。

本研究國小環境教育網站建置，就是為了能在網站線上編輯及互動訊息這個 理念而架設完成。本網站所設計之功能依據第二章文獻探討分析及第三章網站內 容規畫確定後，目前已設計完成，依序為：(一)會員登入權限分級制，(二)後台 管理工具，(三)各類型網頁模組設計，(四)網頁線上編輯器模組套用，(五)多重資 料搜尋工具。

(一) 會員登入權限分級制

如同機關團體一般，成員必須有階層之區別，並且賦予各階層不同之工作權 限，如此才能井井有條並且發揮較高的工作效率。國小環境教育網站，亦設計有 會員分級制，依據登入帳號之不同來區別權限大小。圖 11 網站會員登入畫面，

只需輸入已內建之帳號與密碼，就可以會員登入。

圖 11 網站會員登入畫面圖

目前本網站會員帳號分成三級制，如下說明：

1、最高權限管理者帳號

目前是研究者本身，才擁有此帳號，當然身為管理者也可以指派其他帳號亦 為管理者，就能擁有相同之權限。管理者帳號，是唯一能進入後台管理之帳號，

擁有網站網頁線上編輯之所有權限，例如：編輯主次目錄、編輯首頁橫幅設計、

管理會員之姓名、帳號及密碼。管理者帳號，雖然在使用網站上的資源擁有最高 權，但是並非一定是程式設計及伺服器硬體架設者，所以權限不在此列。

2、編輯者帳號

一般是指派給學校教職員，當然管理者亦能給予幾位環保小義工擁有編輯權。

此帳號，是擁有新增網頁、上傳檔案以及針對自己的新增的網頁或檔案進行修改 或刪除。換句話說，已建立好之網頁或上傳之檔案，只有管理者或原新增上傳者 才有權修改或刪除。如此安排，可以確保檔案之安全性，不會因為開放較多的編 輯帳號而使得網頁被修改得肢離破碎。圖 12 說明編輯者帳號擁有「新增」、「修 改」或「刪除」自已網頁的權限。

圖 12 編輯者可修改或刪除自己的資料圖

3、一般訪客

這是不必登入會員的一般瀏覽者，例如：學生、家長或校外訪客。一般訪客，

除了後台管理工具不可看見外，所有已建立好的網頁都可以完整瀏覽閱讀。此外，

一般訪客也可以使用網站內之留言板及討論區，只要在新增意見時輸入臨時性的 密碼，以便日後用來修改此筆資料比對之用，就可將此筆留言意見作安全性與方 便性之管理。

65

(二) 後台管理工具

國家有根本大法國家才能安定，房屋有棟梁支柱就可以支撐結構不傾倒，同 樣地網站也要有最根本的設定，只有管理者才能進入的區域。一方便兼顧修改的 彈性，所以此設定並不寫入固定於程式設計中，而是另外開闢一個後台管理區。

本研究所設計之國小環境教育網站，後台管理區有五種設定功能：會員管理 區、橫幅編輯區、主目錄管理區、次目錄管理區、修改網頁次目錄。

1、會員管理區

管理者可以管理(新增、修改、刪除)所有會員之帳號、密碼、姓名、權限以 及電子郵件地址。參閱圖 13 會員管理列表。

圖 13 會員管理列表圖

管理者俢改會員之基本資料，就會直接影響會員登入之權限，這樣設計可以 讓管理者更方便有彈性的經營管理網站資料。

2、首頁橫幅編輯區

每個機關學校、公司行號都有個地標，每家商店也都有個招牌，通常是設在 大門口，目的是讓人一目了然知道這是何處。網站也不外如是，網站的地標沒例 外，都是設定在首頁上方橫幅上。橫幅上一定要有網站名稱，和代表網站之背景 圖，設計講究的還可以加上該網站之專屬標誌。網站橫幅的目的，不但是要告訴 訪客網站的站名，還可以吸引訪客想進入一觀究竟。橫幅是個網站的門面，就算 訪客過門而不入，但至少還是看到了橫幅，因此網站經營者會將重大消息，利用 跑馬燈放在橫幅上，就達到了宣導的效果。

即然橫幅有這麼多重大用途，為了方便隨時更新橫幅畫頁，達到吸引參觀與 宣傳的效果，本研究所建置之「國小環境教育網站」，因此就設計了很方便的橫

幅編輯模組，可以直接在線上進行編輯修改。請參閱圖 14 首頁橫幅編輯區圖示。

圖 14 首頁橫幅編輯區圖

「首頁橫幅編輯區」主要是套用網路上現有免費的「html 線上編輯編輯器」， 本章節後面會再詳細說明此編輯器。「首頁橫幅編輯區」除了可以利用線上編輯 器，直接文字格式編輯、表格編輯或線上撰寫程式之外，也可以先利用影像編輯 軟體例如：coreldraw 軟體，將圖文結合美化後，再利用線上編輯器將此圖檔上傳 應用，如圖 15 本網站之橫幅就是利用此種方便製作。

3、主目錄管理區

主目錄就是本研究國小環境教育網站之資料基本架構中之主項目。管理者可 以線上新增、修改、排定呈現之順序以及變更可開啟的權限。因為考慮到主目錄 若被刪除，則其所屬之次目錄、網頁會因此永遠失去連結，所改沒有刪除的功能，

而改用變更瀏覽權限的方式來設定。

若主目錄可開啟的權限大於瀏覽者之權限，則網頁會隱藏不被開啟。若有主

若主目錄可開啟的權限大於瀏覽者之權限，則網頁會隱藏不被開啟。若有主