E-page 教育訓練第二批網頁小達人

整合網站系統服務中心

1

登入後台• 網址列後方加上： /admin 。並輸入帳號密碼及驗證碼登入

( 例： http://iwsc.nkfust.edu.tw/admin)

2

快速設定• 輸入基本資料如上傳小圖標、輸入詳細資料及搜尋引擎優化等。

3

版面配置• 頁面分為：頭部、內容、底部；其內容又分為左欄、中欄、右欄。

4

建立網站架構表• 事先建立網站架構表，方便之後架構網站、管理及設計樣板。

5

頁面建立（ 1/3 ）• 分類頁面與資訊頁面之差別

1) 第一層必為分類頁面

2) 資訊頁面與分類頁面不能在同一層

3) 資訊頁面不會有路徑顯示

4) 資訊頁面不會呈現在網站地圖

5) 資訊頁面的上級分類會出現詳細資訊內容

6

頁面建立（ 2/3 ）• 快速建立多頁頁面

1) 進入網站後台後，點選「頁面建立」

2) 選擇頁面的分類項目

3) 點選「分類頁面」

4) 依序輸入「頁面名稱」

5) 按「新增」，完成多頁頁面建立

7

頁面建立（ 3/3 ）• 建立單頁頁面

1) 進入後台網站後，點選「內容管理」

2) 點選「新增分類」

3) 選擇頁面建立分類項目

4) 輸入「頁面名稱」

5) 按「儲存」，完成頁面建立

8

頁首連結（ 1/2 ）• 文字方式

1) 進入網站後台後，點選「頁面樣式」 > 「頁首連結設定」

2) 點選「新增頁首連結」

3) 選擇「上級分類」、「連結名稱」及「相關連結網址」 ( 可選擇開新視窗或原頁面 )

4) 按「新增」，完成首頁連結設定

5) 按「更改排序」可更改頁面連結順序

9

頁首連結（ 2/2 ）• 圖片方式

1) 進入網站後台後，點選「頁面樣式」 > 「頁首連結設定」

2) 進入「頁首連結設定」頁面後，點選「新增頁首連結」

3) 新增頁首連結 ( 以「關於第 e 書房」為例 )

• 基本資料輸入

• 樣式設定

10

文檔系統• 放置網頁文件、圖檔及媒體等。• 注意事項

1) 分類要做好

2) 檔名須用英文數字

3) 上傳壓縮檔注意是否要解壓縮

4) 網頁用圖或文件盡量備份在文檔系統

• 分為單件上傳及多件上傳兩種方式

11

頁面頭部建立（ 1/3 ）• 頁面頭部版面配置

• Logo ：依照學校規定，須有學校 Logo 、中英文校名、單位中英文名稱

• Topnav ：依序為首頁、網站地圖、…、第一科大

• Hdmenu

• Banner

12

頁面頭部建立（ 2/3 ）• 頭部語法

<div class="logo"><a href="/bin/home.php"><img alt="" src="/ezfiles/49/1049/img/950/logo.png" /></a></div>

<div class="topnav">　　 <ul>　　　 <li class="index"><a href="/bin/home.php"> 首頁 </a></li>　　　 <li class="map"><a href="/files/17-1049.php"> 網站地圖 </a></li>　　　 <li class="college"><a href="http://www.nkfust.edu.tw" target="_blank"> 第一科大 </a></li>　　 </ul></div>

%HeadMenu

<img alt=" 整合網站系統服務中心 " src="/ezfiles/49/1049/img/950/Banner.png" style="width: 900px; height: 184px" />

13

頁面頭部建立（ 3/3 ）• 建立方法

1) 進入頁面頭部建立

2) 新增頁面頭部（貼上語法）

3) 點選 head 的「設為預設」

14

BANNER 設定（ 1/2 ）• 使用頁面頭部建立方式放置網頁橫幅，但只能放置單一圖檔的橫幅

1) 上傳網頁橫幅至文檔系統中

2) 至「頁面頭部建立」更新網頁橫幅 (Banner)

15

BANNER 設定（ 2/2 ）• 使用連結模組的 flash 陳列樣式呈現網頁橫幅 (banner) 。

1) 在連結模組中新增「網頁橫幅」類別

2) 新增網頁橫幅圖檔至「網頁橫幅」連結模組類別中

3) 將「網頁橫幅」匯入「首頁畫面設定」中

4) 使用各類瀏覽器的「檢視原始碼」功能，捉取 HTML 語法

5) 將上步驟的 HTML 語法貼至頁面頭部裡

6) 移除首頁畫面設定中間欄的「網頁橫幅」連結模組

16

頁面內容 - 公告模組（ 1/4 ）• 新增公告模組及資訊

1) 點選「模組管理」 > 「公告模組」

2) 點選「新增公告模組」

3) 點選基本資料，在模組名稱輸入「最新更新」

4) 點選「最新更新」 > 「新增資訊」

5) 輸入「資訊名稱」、修改「發佈日及到期日」

6) 進入「 HTML 編輯 / 預覽」頁面進行編輯

7) 按「新增並返回」

17

頁面內容 - 公告模組（ 2/4 ）• 公告附件上傳

1) 點選「模組管理」 > 「公告模組」

2) 在「最新更新」公告模組中，按「新增資訊」

3) 輸入「資訊名稱」

4) 點選「附件」 > 「上傳附件檔案」，按「新增並返回」

• 資訊置頂圖標1) 點選「模組管理」 > 「公告模組」

2) 點選最新更新的「完整編輯」

3) 點選「置頂圖標」 > 上傳圖標檔案 > 按「儲存」

4) 選擇要放罝「置頂圖標」的資訊

18

頁面內容 - 公告模組（ 3/4 ）• 模組佈局

1) 點選「模組管理」 > 「公告模組」

2) 點選「最新更新」 > 「完整編輯」

3) 點選「模組佈局」，選擇「自定義佈局」

4) 選擇適當的陳列樣式進行公告模組佈局設計

• 頁面佈局1) 點選「模組管理」 > 「公告模組」

2) 點選「最新更新」 > 「完整編輯」圖示

3) 點選「頁面佈局」，選擇「自定義佈局」

4) 陳列樣式以「表格」方式呈現

19

頁面內容 - 公告模組（ 4/4 ）• 模組外觀修改

1) 點選「頁面樣式」 > 「首頁畫面設定」

2) 「公告 > 最新更新模組」 > 「模組外觀」

3) 修改公告模組外觀

• 模組標題樣式1) 點選「頁面樣式」 > 「首頁畫面設定」

2) 「公告 > 最新更新模組」 > 「模組外觀」

3) 修改公告模組樣式

20

頁面內容 - 連結模組（ 1/2 ）• 新增連結分類

1) 點選「模組管理」 > 「連結模組」

2) 「新增連結分類」

3) 輸入分類名稱

• 新增文字連結及圖片連結1) 點選「模組管理」 > 「連結模組」

2) 選擇「網站連結分類」 > 「新增連結」

3) 新增連結資料

21

頁面內容 - 連結模組（ 2/2 ）• 模組佈局 - 文字、圖片

1) 點選「模組管理」 > 「連結模組」

2) 點選「網頁範例」 > 「完整編輯」

3) 點選「模組佈局」，選擇「自定義佈局」

4) 選擇適當的陳列樣式進行連結模組佈局設計

• 模組佈局 -清單1) 點選「模組管理」 > 「連結模組」 > 點選「新增連結分類」

2) 新增連結

22

頁面內容 - 選單模組• 建立選單模組

1) 點選「模組管理」 > 「選單模組」

2) 點選「新增選單」

3) 輸入「選單名稱」，按「新增並返回」

4) 點選剛輸入的「選單名稱」 > 「新增選單項」

5) 新增選單項資料

23

頁面內容 - 表單模組• 建立表單模組

1) 點選「模組管理」 > 「表單模組」

2) 點選「新增表單模組」

3) 建立表單內容

• 查詢報表內容1) 點選「模組管理」 > 「表單模組」

2) 點選欲看表單的「查看報表」

3) 「查詢列表」

4) 顯示已填報資料內容

24

頁面內容 - 圖庫管理（ 1/2 ）• 新增圖庫推薦及相片

1) 點選「圖庫管理」 > 「圖庫推薦」

2) 點選「新增圖庫推薦」按鈕

3) 輸入「模組名稱」後，按「新增並返回」

4) 點選剛輸入的「模組名稱」 > 「增加圖庫」

5) 輸入「圖庫名稱」

6) 點選「圖檔上傳」

7) 上傳相片，並點選「新增並返回」

25

頁面內容 - 圖庫管理（ 2/2 ）• 更改排序

1) 點選「圖庫管理」 > 「圖庫推薦」

2) 點選「模組名稱」 > 「更改排序」

3) 按「修改」按鈕

26

頁面內容 -自定模組• 為空白模組，可運用嵌入語法到網頁中，以下為網頁常用到的一些範例

1) 無障礙說明內容

2) 文字跑馬燈

3) 訊息搜尋語法

4) Google 語言翻譯

5) 活動照片展示

6) 嵌入 Flash

7) 嵌入 Facebook

27

頁面內容 - 頁籤模組• 建立頁籤模組

1) 點選「模組管理」 > 「頁籤模組」

2) 「新增頁籤模組」

3) 新增公告模組或是其他模組至頁籤模組

28

首頁畫面設定• 設置首頁畫面的模組配置

1) 點選「頁面樣式」 > 「首頁畫面設定」

2) 進入「首頁畫面設定」頁面後，點選「頁面佈局」

3) 在「頁面佈局」中，選擇「頁面佈局樣式」並輸入頁面欄位寬度

4) 點選「模組列表」，首頁加入各類模組

29

預設畫面設定• 設置預設畫面的模組配置

1) 點選「頁面樣式」 > 「預設頁面設定」

2) 在「當前頁面設定」下拉選單點選「預設明細頁面」

3) 點選「頁面佈局」

4) 選擇頁面佈局樣式，並輸入頁面欄位寬度

5) 預設明細頁面加入各類模組

30

頁面底部建立• 頁面底部資訊如下：

• 學校 + 單位全名 ( 中英文皆可 )、電話

• 負責人 Email

• 版權所有

31

參數設定• 下級分類顯示筆數

1) 點選「參數設定」 > 「軟體功能設定」

2) 進入「軟體功能設定」 > 「下級分類每列顯示筆數」輸入數值

3) 按「儲存並返回」按鈕

32

參數設定• 網頁小圖標

1) 點選「參數設定」 > 「學校資料」

2) 上傳小圖標圖檔 ( 只允許上傳「 .ICO 」文件 )

3) 按「修改」

33

帳號管理（ 1/2 ）• 權限管理

1) 點選「系統管理」 > 「權限管理」

2) 點選「新增權限類別」

3) 輸入「類別編號」、「權限說明」後，按下「新增並返回」

4) 點選「工讀生網站使用權限設定」類別

5) 依各單位需求勾選適當權限後，按「修改」

34

帳號管理（ 2/2 ）• 新增帳號

1) 點選「系統管理」 > 「帳號管理」

2) 按「新增資料群組」

3) 輸入「群組編號」、「群組名稱」後，按下「新增並返回」

4) 點選「群組名稱」 > 「新增帳號」

35