NPO 網站改造觀摩賽 CMS 社群團隊網站建置報告

Open Source CMS Showdown for NPO – Team Report

Drupal Taiwan

團隊成員..............................................................................................................................................2完成項目..............................................................................................................................................4

網站上方主選單..................................................................................................................................4

網站首頁左欄設計..............................................................................................................................5

網站首頁中欄設計..............................................................................................................................6

網站首頁右欄設計..............................................................................................................................6時間/難易度.........................................................................................................................................7使用模組..............................................................................................................................................8客製化程式........................................................................................................................................10哪些功能/成果最令團隊自豪...........................................................................................................10客戶溝通............................................................................................................................................10

團隊成員

暱稱：花水木

本名：張恩慈　Hanamizuki

參加方式：遠端連線（目前人在澳洲凱恩斯）

負責：規劃、設定、前端整合、版型設計

自 介 ：學生時代就對寫網頁很有興趣，上大學之後開始接觸

Open Source CMS，並用此接案度日。目前最喜愛的 Open Source

CMS 為 Drupal。

暱稱：Hom

本名：蔡成鴻

參加方式：現場參加

負責：programing, template, html, java script coding

自介：從 Drupal 5.x 的版型製作開始入門，因為大學就有研究過

PHP 的關係所以上手很快。之後轉換跑道開始學習撰寫模組，習

慣之後開始覺得 Drupal 的 API 用起來很方便。最近開始研究 6.x

模組的撰寫。

暱稱：Ricky

本名：陳彥宏

參加方式：現場參加

負責：規劃、設定、程式

自介：網路創業一直是我的願景，所以我選擇了 Drupal 。

暱稱：Peiyu

本名：蔡沛宇

參加方式：現場參加

負責：美工、版面繪製

自介：廣電畢業但因對設計有興趣因此自學， 目前從事相關工作。

常用繪圖軟體：photoshop、illustrator。

暱稱：TKY

本名：鄭凱元

參加方式：現場參加

負責：組隊、設定、前端整合、CSS、中文化

自介：唸研究所的時候不知死活接下了替所上架設網站的工作，

什麼都不會，卻邂逅了 Drupal 這套 CMS，完成了第一個網站。

自此對 Drupal 一見鍾情，也開啟了往後以 Drupal 架設學術網站的

不歸路。

完成項目

•說明：主要改造目標為分散式內容上稿機制、簡化網站架構、整合多個外部網站、

版面改造與拓寬視野（由 740px 改為 960px）。這三部份均已完成。

網站上方主選單

1. 認識基金會

關於羅慧夫（外部連結）

緣起（靜態頁面）

宗旨（靜態頁面）

基金會大事紀（靜態頁面，原＂基金會行腳＂）

組織架構（靜態頁面）

出版品（設計 work內容類型，區分三個分類，以 views分別做「索引摘要」與「群組摘要」

的項目檢視畫面）

文學獎圖書繪本

醫療資訊系列

2. 提供服務（靜態頁面，原於「認識基金會」項目）

3. 新聞專區（設計 news內容類型，分成「新聞稿」、「得獎事蹟」兩個類別，以 views做出一個

摘要顯示頁面，透過 menu 上的 argument 過濾出不同類別的新聞稿）

新聞稿

得獎事績（原優良事蹟）

4. 活動訊息（原顱顏新訊，設計 activity內容類型，分成北、中、南三區總會活動訊息，以及

「大眾教育活動」與「兒童文學獎」五個類別，以 views做出一個摘要顯示頁面，透過 menu 上

的 argument 過濾出不同類別的新聞稿）

北部總會活動訊息

中部分會活動訊息

南部分會活動訊息

大眾教育活動訊息（資源開發組活動）

兒童文學獎訊息

5. 捐款&義工

捐款徵信（靜態頁面）

捐款方式（靜態頁面）

線上捐款（外部連結，連結到基金會既有的金流系統）

志工招募（增加 webform，將 doc表格轉換為可填寫的線上表單）

企業贊助（增加 webform，將 doc表格轉換為可填寫的線上表單）

6. 顱顏醫療百科（設計 medic內容類型，同時將複雜的樹狀分類匯入 Drupal分類系統。以

views做出一個摘要顯示頁面，左邊以模組生成的樹狀分類區塊，透過分類詞連結上的 argument

過濾出不同類別的新聞稿）

7. 國際合作

緣起與目標（靜態頁面）

國際合作新訊（靜態頁面）

國際合作方案（靜態頁面）

合作國家（靜態頁面）

大事紀（靜態頁面）

種子醫師專區（靜態頁面）

8. 顱顏家族（靜態頁面，製作三個 icon 連結到外部相關網站）

得福家長聯誼會

小耳症家庭聯誼會

得福青年俱樂部

網站首頁左欄設計

1. 顱顏百科分類詞區塊（以外掛製作樹狀結構之分類詞區塊，結合 jqury menu隨選收合次連

結。設定本區塊僅在檢視medic類型文章中出現）

2. 次要連結區塊（利用外掛模組自動在點選主連結時，顯示主連結底下的次連結，方便導覽）

3. 重要連結圖標（設計相關圖標，連結到已建立的重要頁面）

我要捐款（連結到捐款靜態頁面）

我要當義工（增加 webform，將 doc表格轉換為可填寫的線上表單）

新生兒通報單（增加 webform，將 doc表格轉換為可填寫的線上表單）

兒童文學獎（連結到文學獎索引頁面）

討論區（匯入現有的 phpbb系統會員與文章，以外掛模組建置類似的使用介面）

電子報（整合與連結原有的 phplist發報系統）

下載專區（設計 file內容類型，分成桌布與文件等四個主要類別，以 views做出一個

grid顯示頁面，展示桌布圖片並直接提供下載連結）

聯絡我們（靜態頁面）

4. 微網誌連結（建立三個連結圖標，連結到基金會微網誌帳號）

噗浪

推特

Facebook

9. 友站連結圖標

菲律賓分會連結

美國分會連結

Smile Train

長庚顱顏中心

BabyHome兔寶寶家族

網站首頁中欄設計

1. 幻燈片廣告圖片輪播（設計 ad內容類型，上傳圖片與連結，以 views showcase做出一個

showcase顯示頁面，展示圖片輪播並直接提供連結）

2. 最新活動訊息（以 views 製作區塊，濾出 activity 最新五則內容標題，提供連結）

3. 最新新聞公告消息（以 views 製作區塊，濾出 news 最新五則內容標題，提供連結）

4. 部落格聯播（以核心 aggregator 模組，自動蒐集訂閱的 RSS feed items，並以 views 製作一個

區塊，列出最新的五個部落格文章標題。最後設定本區塊僅會出現在「首頁」）

網站首頁右欄設計

1. Youtube影片播放區塊（建立 youtube_link內容類型，可嵌入外部影片 list，並在區塊中直

接播放顯示。播放清單顯示最新五則影片，點選可即時播放）

播放區塊

播放清單

2. 義賣商品展示區塊（建立 product內容類型，可上傳圖片與提供外部連結。以 views建立區

塊，提供圖片和標題連結到外部拍賣網站產品。）

3. 熱門討論（核心模組區塊）

4. 線上人數（核心模組區塊）

時間 /難易度

•哪些需求/功能最容易做到？哪些最困難/花最多時間？

最容易的部份

所有靜態頁面、選單架構的建置

網站表單的建立，只需花時間建立欄位就好

投票、活動、新聞、義賣、檔案下載只需依照需求建立內容欄位即可

部落格聯播、熱門討論、線上人數皆為內建

會員系統、自訂權限皆為內建

最困難

電子報的完美整合

首頁 Youtube影片切換功能

版型設計的完整客製

顱顏百科：具有完整彈性的分類系統

討論區的轉移

使用模組

（列出 CMS系統內建與外掛之模組列表，並簡述其用途）

1. Drupal 核心

Drupal 6.14

包括: Aggregator, Block, Book, Color, Comment, Contact, Content translation, Database logging,

Filter, Forum, Garland, Help, Locale, Menu, Node, PHP filter, Path, Poll, Profile, Search, Statistics,

Syslog, System, Taxonomy, Tracker, Trigger, Update status, Upload, User

2. 模組

1. Administration menu 6.x-1.5 管理：後端管理頁首下拉選單

2. Advanced Forum 6.x-1.1 討論區：討論區外觀改善

3. Author Pane 6.x-1.0 討論區：文章作者資訊面板

4. Backup and Migrate 6.x-1.2 管理：資料手動或自動定期備份

5. Bbcode 6.x-1.2 討論區：內容輸入格式彙整

6. Chaos tool suite 6.x-1.0 外觀：支援 penal 模組

7. Node clone 6.x-1.0 輸入：複製文章內容標籤

8. Content Construction Kit (CCK) 6.x-2.5 內容類型建置

9. Date 6.x-2.4 輸入：CCK 日期欄位

10. Dynamic display block 6.x-1.0-rc6

11. Devel 6.x-1.18 管理：工程師進階管理工具

12. Embedded Media Field 6.x-1.7 輸入：CCK多媒體檔案欄位

13. FCKeditor - WYSIWYG HTML editor 6.x-1.4 輸入：所見即得編輯器

14. FileField 6.x-3.1 輸入：CCK檔案上傳欄位

15. ImageAPI 6.x-1.6 影像處理

16. ImageCache 6.x-2.0-beta10 影像處理

17. ImageField 6.x-3.1 輸入：CCK檔案上傳欄位

18. IMCE 6.x-1.2 輸入：fckeditor編輯器檔案管理系統

19. jQuery Media 6.x-1.4-beta1

20. jQuery Update 6.x-1.1

21. JQuery menu 6.x-2.3

22. Link 6.x-2.6 輸入：CCK 網站連結欄位

23. Menu block 6.x-2.2 外觀：左欄子選單區塊自動產生

24. ModuleInfo 6.x-1.2 管理：各模組進階資訊顯示與管理

25. Panels 6.x-3.0 外觀：進階頁面、區塊與區域管理

26. Pathauto 6.x-1.1 自動改寫網址

27. Secure Password Hashes (phpass) 6.x-1.x-dev (2008-11月-25) 討論區：匯入 phpbb討

論區

28. phpBB2Drupal 6.x-1.4 討論區：匯入 phpbb討論區

29. PNG Fix 6.x-1.0 外觀：修正 ie瀏覽器無法處裡透明 png檔案問題

30. Privatemsg 6.x-1.0-rc3 討論區：匯入 phpbb討論區私人訊息

31. Taxonomy Manager 6.x-2.1 管理：進階分類詞管理

32. Advanced Taxonomy Blocks 6.x-2.5 管理：自動產生特定樹狀結構分類詞區塊

33. Token 6.x-1.12 管理：重要函數支援功能

34. Views 6.x-2.6 管理：強大的文章內容整合與顯示管理系統

35. Views Showcase 6.x-1.0-beta2 顯示：首頁廣告圖片輪播與連結

36. Webform 6.x-2.7 快速建立與有效管理的線上表單

3. 版型

Zen 6.x-1.0

修改為 NNCF專用版型

客製化程式

影片播放區塊點選下方影片連結 可以變更上方播放的影片內容

客製化程式 javascript + php

行數: 28

說明: 使用 php 調整影片清單樣板，輸出第一個連結同時於上方輸出嵌入影片以

及載入 javascript 每個影片連結則調整為點擊時呼叫 javascript 函數變更上方影片

播放內容。

哪些功能 /成果最令團隊自豪

呈現 CMS特性：

彈性與多樣化的內容類型建立功能

強大的分類能力

CCK + Views搞定大部分的動態資料輸入與輸出呈現

絕大多數的功能以模組套用即可完成，真正需要 coding的地方不多

NPO非常滿意：

各種線上表單(webform)非常方便好用

版型比之前大，看起來比較舒服。

版面區塊比以前豐富與彈性

複雜的顱顏知識分類系統很不錯

多媒體整合完整

部落格聯播整合完整

客戶溝通

（請說明與 NPO 工作者針對網站規格書，所做的討論與調整建議）

首頁區塊調整，以求版面整齊與對稱

文學獎作品與活動訊息分離，顯示不同類型的資料型態

討論區會員整合完成，但主題部份僅有 50%的資料。這是由於NPO無法讓

CMS 隊伍連進 phpbb 資料庫， 所以在 import 時整理上很困難，只 import

50%部份的資料進來。

電子報因為沒有權限做整合，遂以電子報內容類型做外部連結與資料展示。

線上金流部份因為沒有權限做整合，所以用外部連結取代。

廣告輪播的部份不如NPO所想像，未來若採用網站希望能夠改善外觀與配色

的部份。