E-page教育訓練 - 第一科大epage教學網站

Download Report

Transcript E-page教育訓練 - 第一科大epage教學網站

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