chihlee_ta

\ ^_^ /

教學發展中心 TA教學助理平台 線

上

系

統

致理技術學院教學發展中心

企

劃

前

言

在WEB2.0純熟應用在網際網路個式平台的今天，傳統的網頁編撰技術早不足以應付即時、多元及功能性的需 求！而功能性的運用更強調〝簡單、即時效能、人性化管理操作介面等〞！對程式工程師與網站設計師而言，建構 一個具有設計美感且擁有多功卻又易於管理、維護的網路平台仍是一項艱澀的挑戰！ 本教學發展中資訊平台與TA教學助理平台採PHP語言+MySQL資料庫並加入AJAX技術開發管理系統，視覺版面 由XHTML+CSS樣式表規範！兼俱前、後台操作介面，讓使用者操作上更為方便、簡單！

Simple, Easy management, Real-time 打造一個簡單、易於管理、即時效能的平台是我們的目的！

Simple, Easy management, Real-time

5

4

理念與方式

6 10

架構核心

製作技術

8

執行步驟和流程 規劃依據 站台導覽

16

14

12

二、主要項目選單 三、 刊版頭與新聞快報

18 18

一、版面區塊

四、功能項目選單 行事曆

20

線上報名系統

23

討論區

25 27

26

28 33

線上評量

(投票區)

活動花絮

(相簿區)

活動花絮

(影音區)

資料傳輸區

附錄

(伺服器程式需求)

架 構 核 心

\ ^_^ /

資料庫整合平台

XHTML+CSS & PHP+MYSQL Modular layout Simple, Easy management, Real-time

教 學 發 展 中 心 資 訊 平 台

4

理 念 與 方 式

視覺設計化

Visual { Adobe photoshop Adobe Illustrator }

XHTML+CSS

User interfaces { Front operation Admin }

Login Module

Dynamic Database PHP+MYSQL 動態資料庫管理

使用者操作介面

T

A

教

學

助

5

理

平

台

平

台

規

劃

製 作 技 術

Database -> PHP+MYSQL

動態資料庫核心架構 以Apache為應用伺服器端，PHP資料庫驅動架構，MySOL資料 庫核心，以資料庫架構平台，隨時更新修改資料，達到動態管理 的目的。

教 學 發 展 中 心 資 訊 平 台

6

製 作 技 術

從視覺設計的原點出發，專業設計師工具從美感的角度出 發，Adobe Illustrator 做版面模組規劃，Photoshop做影像圖像整理 與網頁最佳化，Dreameaver整合CSS樣式表！在靜態視覺上做完整

Visual 從視覺出發

->

建構。

XHTML +CSS 樣式表

<-----'

T

A

教

學

助

7

理

平

台

執 行 步 驟 和 流 程

●本機端編輯作業： 靜態視覺設計、程式建構、資料庫繫結測試等。

二階段執行步驟與流程 依據結構項目與功能規劃區分作業流程 為兩大步驟：

●應用端作業： 操作、應用、維護與管理。

教 學 發 展 中 心 資 訊 平 台

8

一 結構項目與功能規劃

二 版面區塊規劃、視覺設計

本機端

三 程式資料庫本機端架構

四 網頁架構xhtml+css

五 主程式建構＋附屬應用編撰

六 本機端資料庫繫結測試 平台轉移測試

應用端

A 資料庫更新

B 平台管理技術移轉 (前後台操作)

C 維護與支援

T

A

教

學

助

9

理

平

台

平 台 規 劃 功能與設計感 平台的規劃從客戶端架構出發，包含基本網頁編撰，根據功能擴充外掛、元件及加載所需程式架構！流程並涵 蓋版面視覺規劃，避免刻版的單純資料庫平台方式呈現！同時兼具功能與設計美感。

使用者操作介面 在使用者操作介面根據不同屬性與需求，建立「前台編輯者」操作介面及「後台管理者」介面，依使用者區分 前台登入編輯或後台登入管理！

●教學發展中心

●教學助理平台

站 台 導 覽

Simple, Easy management, Real-time

平

台

規

劃

首頁資料區塊

Block layout

1

topmemu

主選單與站外連結

2

newsflash

新聞快報

3

breadcrumb

版面區塊 5

user1

4

header

麵包屑字串

news

7

8

最新消息

banner subContents

6

9

user2

main 首頁資料

使用者項目

footer

10

footer

版權資訊

版面區塊化，依據功能屬性靈活調整！

教 學 發 展 中 心 資 訊 平 台

12

popular 熱門文章

功能選單

mainContents

刊版頭

站

台

導

覽

topmemu

header

newsflash breadcrumb

popular

news user1

Example 版面區塊範例

mine user2

footer

版面區塊化，兼顧功能與美感！

T

A

教

學

13

助

理

平

台

平

台

規

劃

banner

1

1

topmemu

主要項目選單與站外連結

2

newsflash

新聞快報

3

breadcrumb

topmemu

主要項目選單與 站外連結 主選單項目：為平台中重 最重要的選單，可自行規 劃與安排顯示項目，根據 網站架構安排核心項目； 包含Home(首頁)、關於我 們、

●Home(首頁)： 無論在網站中任何頁面， 點選後均回首頁畫面。亦 是進入網站第一畫面！

教 學 發 展 中 心 資 訊 平 台

14

Home

麵包屑字串

4

header

刊版頭

站

台

導

覽

分類版面 ●項目選單： 主項目依單元架構排列並 可\依據不同屬性單元呈 現版面！完整階層式樹狀 管理〈單元、分類項目、 文章〉

項目版面

文章版面

T

A

教

學

15

助

理

平

台

平

台

規

劃

banner

2

1

topmemu

主要項目選單與站外連結

2

newsflash

新聞快報

3

breadcrumb

4

header

刊版頭

麵包屑字串

newsflash 新聞快報

即時輪播：看板式快速訊息發佈使用者每次進入網站隨機更新！即時、效率、 簡單！多筆資料隨機輪播為特色！

即時輪播： 看板式快速訊息發佈使用 者每次進入網站隨機更 新！即時、效率、簡單！ 多筆資料隨機輪播為特 色！

教 學 發 展 中 心 資 訊 平 台

16

站

台

導

覽

breadcrumb

3

麵包屑字串 breadcrumb： 讓閱讀更方便的麵包屑字 串功能！讓自己隨時知道 所在位置與層級！網站瀏 覽不迷路！

原有logo範例

header

4

刊版頭 刊頭設計： 刊頭設計依教學發展中心 特質發想！採中心 logo設 計！

T

A

教

學

17

助

理

平

台

平

台

規

劃

subContents 5

5

user1 功能選單

user1

功能選單：平台中資料庫繫結項目功能！包含行事曆、線上

功能選單

報名、線上評量、資料上傳及下載等…程式資料庫應用！

●行事曆： a. 彈性化選項式行事曆功能！年份、月份、週曆、分類、本 日活動顯示選項！ b. 滑鼠移入跳出摘要視窗 a.

站內搜尋

b.

6

user2 使用者項目

c. 進入行事訊息發佈頁面

教 學 發 展 中 心 資 訊 平 台

18

站

台

導

覽

a

行事曆 前台編輯說明： 由前台登入編輯者管理帳號、密碼

a. 滑鼠移入欲增加活動項目、訊息 紀錄日期可出現+號摘要項目

b. 使編輯者操作介面包含： b

主題、分類、顏色標籤、閱讀層 級、文章發佈區塊、地點、連絡 人、其他等… c. 進入時間設定介面包含： 開始、結束之日期、時間，重複 方式等…。

c

T

A

教

學

19

助

理

平

台

平

台

規

劃

subContents ●線上報名： a. 依據活動類型項目分類 b. 主頁面摘要資訊顯示

5

user1 功能選單

a.

b.

站內搜尋

c. 進入線上報名系統頁面

6

user2 使用者項目

教 學 發 展 中 心 資 訊 平 台

20

站

台

導

覽

a

線上報名 前台編輯說明： 由前台登入編輯者管理帳號、密碼

a. 編輯者操作介面，提供線上訊息 發佈。 b

b. 新增活動項目

c. 進入活動發佈介面包含： 分類、開始、結束之日期、時 間，報名截止日期、時間等…。

d. 相關參數依編輯發佈者自行設定 可分必填與非必填！

c

d

T

A

教

學

21

助

理

平

台

平

台

規

劃

subContents 6

5

user1 功能選單

user2

使用者項目：提供站站內搜尋、登入者系統！讓同屬性之使

使用者項目

用者有效率閱讀與使用！

●前台登入系統： 多層管理系統，群組機制，依使用者屬性規劃前台編輯與後 台管理不同權限，有效分工與管理網站。

站內搜尋

●迷你行事曆： a 首頁配置迷你行事曆，連結、同步行事曆資料發佈！

6

user2 使用者項目

b 由首頁進入行事曆訊息頁面

教 學 發 展 中 心 資 訊 平 台

22

站

台

導

覽

討論區(專屬論壇) a. 點選進入論壇首頁，最新討論區 塊。

b. 進入分類討論項目。 a

c. 進入討論區使用者頁面，發文、 回應、爬文等…

b

c

T

A

教

學

23

助

理

平

台

平

台

規

劃

討論區(專屬論壇) a. 可發表回應，參與意見討論。

a

b

由前台登入會員帳號、密碼 b. 新增主題討論

c. 編輯者操作介面

教 學 發 展 中 心 資 訊 平 台

24

站

台

導

覽

a

線上評量(投票區) a. 問券調查投票介面

b. 結果分析比較資訊與圖列

c. 問券題目可依需要自行設定！

b

c

T

A

教

學

25

助

理

平

台

平

台

規

劃

活動花絮 支援html程式碼，可內嵌各式電 子相簿，輕易展示與製作各示 活動成果並節省伺服器空間！

a. 進階編輯支援程式碼！內嵌電 子相簿。 (範例為 flickr 相簿)

c. 前台幻燈秀展示活動照片。 a

b

教 學 發 展 中 心 資 訊 平 台

26

站

台

導

覽

活動花絮 支援html程式碼，可內嵌各式影 音平台。

a. 進階編輯支援程式碼！內嵌 youtube 影音檔。

c. 前台播放活動影音檔。

a

b

T

A

教

學

27

助

理

平

台

平

台

規

劃

資料傳輸區 a 資料傳輸區可設定權限，提供各式 格式資料之文件上傳與下載！ b

下載 a. 進入資資料傳輸區頁首。

b. 依屬性可設定多筆分類目錄夾。

c

c. 選擇所需類別。

d. 資料區細項清單功能區及文件摘 要，並可點選詳細內容查看文件記 錄！

d

教 學 發 展 中 心 資 訊 平 台

28

站

台

導

覽

資料傳輸區 資料傳輸區可設定權限，提供各式 格式資料之文件上傳與下載！

e. 詳細文件記錄說明。

T

A

教

學

29

助

理

平

台

平

台

規

劃

資料傳輸區 資料傳輸區可設定權限，提供各式

a

格式資料之文件上傳與下載！ b

上傳 由前台登入會員帳號、密碼 c a. 提交新檔案。

b. 選擇檔案來源。

c. 選擇檔案路徑。

d. 選擇類別項目，註記摘要資料！ d

教 學 發 展 中 心 資 訊 平 台

30

站

台

導

覽

mainContents 7

6

7

news

於首頁顯示最新消息！提供最新資訊內容發佈，更新！

最新消息

顯示多筆資料可由編輯者自行設定！

popular

於首頁顯示最多點閱！依點擊數將受注意文章顯示於首

最多點閱

頁，方便了解近日大家所關心與注意的內容。

8

news

9

7

popular

mine

foontpage 首頁顯示

首頁可依編輯者設定將想發佈於網 站首頁的資料，顯示於入口。並可 設定閱讀全文標籤。 a. 點選閱讀全文，進入內頁本文。

a

T

A

教

學

31

助

理

平

台

平

台

規

劃

main

a

JCE Editor

WYSIWYG 使用者介面

●本文前台編輯： 由前台登入編輯者管理帳號、密碼 進入編輯者模式。 a. 點選文件編輯圖示進入。

b. JCE 編輯器： JCE WYSIWYG 編輯器！是目前 網際網路上功能最強大的文件編 輯器，以 Moxiecode 的 TinyMCE 為依據。包括先進的圖像/媒體 和處理的檔案，支援插件，和管 理介面設定。

教 學 發 展 中 心 資 訊 平 台

32

b

JCE 編輯器

附

錄

伺服器程式版本需求 Apache Web Server Version 2 以上 PHP Script Language Version 5 以上 MySQL Database Version 5 以上 phpMyAdmin Database Manager Version 2.10.3

T

A

教

學

33

助

理

平

台