R-Page V5.3.101 ｜ LiSY

院系標竿網頁更新規劃．頁面建置指南

適用 R-Page 後台的編輯人員。涵蓋架構規劃、逐步操作與常見錯誤提示。

01

頁面架構概覽

廣告模組 — 全寬
學院 Banner
cer2025bannerv4.png，固定於頁面頂部
頁籤模組 — 左欄（寬）
ABOUT CER 八章節
About CER Logo Teaching Research Facilities Industry International Accreditation
頁籤內各章節使用的模組類型
章節一、二、八 → 自定模組
章節三、四、五、六、七 → 公告模組
各章節對外連結 → 連結模組
複合模組 — 右欄（現有，保留）
最新消息
優良研究
學院活動
廣告模組
合作企業 Logo 輪播

版型設定為兩欄式，左欄約佔 3/4 寬度。右欄現有複合模組維持不動。

章節 模組類型 說明
一、ABOUT CER自定模組介紹文字＋Academic Programs／Faculty 連結
二、Logo Alignment自定模組兩張對照表格，在 HTML 模式製作
三、Teaching公告模組六個教學亮點，每亮點一筆公告
四、Research公告模組五個研究亮點，每亮點一筆公告
五、Facilities公告模組四個研究平台，每平台一筆公告
六、Industry公告模組六個合作面向，每面向一筆公告
七、International公告模組四個合作面向，每面向一筆公告
八、Accreditation自定模組IEET 認證說明文字
各章對外連結連結模組各系首頁、課程頁、研發處等連結統一管理
02

逐步操作說明

1
建立廣告模組（Banner）廣告模組
  1. 後台 → 模組管理 → 廣告模組
  2. 點「新增模組」，名稱填：ABOUT CER Banner
  3. 是否輪播選「否」（目前僅一張圖），儲存
  4. 點進剛建立的模組 → 點「新增廣告」
  5. 上傳 cer2025bannerv4.png，填寫圖片說明，儲存
「新增模組」與「新增廣告」是兩個分開的動作，模組建完後必須再進去新增廣告資料，否則模組是空白區塊。
2
建立連結模組連結模組
  1. 後台 → 模組管理 → 連結模組
  2. 點「新增分類」，名稱填：CER 相關連結，儲存
  3. 點進該分類 → 逐一「新增連結」
  4. 每筆填寫名稱（如 Academic Programs）、貼上網址、設定開新視窗，儲存
3
建立各章節公告模組（章節三至七）公告模組
  1. 後台 → 模組管理 → 公告模組
  2. 依序新增以下五個分類，每個分類下再逐筆新增公告
分類名稱對應章節公告筆數
Teaching Highlights第三章6 筆（六個教學亮點）
Research Highlights第四章5 筆
Research Facilities第五章4 筆
Industry Collaboration第六章6 筆
International Collaboration第七章4 筆
  1. 每筆公告：標題填亮點名稱，內文點「HTML 編輯／預覽」後貼入說明文字
  2. 顯示樣式選「普通樣式」（不要選跑馬燈）
公告模組有兩層：先建分類（容器），再在分類裡新增公告（內容）。內容要填在公告裡，不是分類名稱欄。
4
建立自定模組（章節一、二、八）自定模組
  1. 後台 → 模組管理 → 自定模組
  2. 依序新增三個模組，命名如下
模組名稱對應章節特別注意
About CER 主文第一章插入 Academic Programs 與 Faculty 連結
Logo Strategic Alignment第二章以 HTML 原始碼模式製作兩張對照表格
IEET Accreditation第八章貼入認證說明文字即可
  1. 每個模組內容皆選「HTML 編輯／預覽」模式
  2. 文字從 Word 複製前，先貼到記事本去除格式，再貼入編輯器
  3. 表格若前台跑版，切換到原始碼模式，在 <table> 標籤加上 width="100%"
直接從 Word 複製貼入，會帶入大量私有標籤導致前台樣式錯亂。務必先貼記事本去除格式。
5
建立頁籤模組頁籤模組
  1. 後台 → 模組管理 → 頁籤模組
  2. 點「新增模組」，名稱填：ABOUT CER 頁籤
  3. 在「選擇需加入模組」介面，依序完成以下流程，共八次
選擇模組 → 按「新增」按鈕 → 確認出現在清單中 → 重複下一個
順序模組名稱類型
1About CER 主文自定
2Logo Strategic Alignment自定
3Teaching Highlights公告
4Research Highlights公告
5Research Facilities公告
6Industry Collaboration公告
7International Collaboration公告
8IEET Accreditation自定
  1. 確認八個頁籤都在清單中後，按儲存
選完模組後必須按「新增」，不是直接按儲存。跳過這步，選擇不會被記錄，頁籤建完會是空的。這是整個流程最常被略過的動作。
6
建立合作企業廣告模組（選配）廣告模組
  1. 同步驟一流程，新增廣告模組，名稱：合作企業 Logo
  2. 是否輪播選「是」，設定切換時間間隔
  3. 逐一上傳合作企業 logo 圖片，上傳前統一裁切至相同尺寸
7
配置頁面版型與模組位置
  1. 後台 → 頁面管理 → 自定頁面管理，找到 ABOUT CER 頁面
  2. 「頁面佈局」選「兩欄式」，設定左欄較寬（約 3:1）
  3. 在「模組列表」中將模組拖曳至對應位置
欄位位置放置模組
左欄上方ABOUT CER Banner（廣告模組）
左欄中段ABOUT CER 頁籤（頁籤模組）
右欄上方現有複合模組（保留，不動）
右欄下方合作企業 Logo（廣告模組）
  1. 拖曳完成後按「儲存」
  2. 至前台以強制重整（Windows：Ctrl+Shift+R，Mac：Cmd+Shift+R）確認畫面
拖曳模組後系統沒有自動儲存提示，拖完離開頁面配置就會消失。務必手動按儲存。
03

容易出錯的地方

!
步驟一、六｜廣告模組
建完模組沒有新增廣告資料
新增模組和新增廣告是兩個分開的動作。模組建完後要再點進去執行「新增廣告」，上傳圖片才算完成。跳過這步，前台模組會是空白區塊。
!
步驟三｜公告模組
把內容填在「分類名稱」而不是「公告」裡
公告模組有兩層結構：先建分類（容器），再在分類裡新增公告（才是真正的內容）。初次使用者常在建完分類後就以為結束了，沒有進去新增公告。
!
步驟三、四｜公告模組、自定模組
沒有切換到 HTML 編輯模式就貼入內容
系統預設是純文字模式，無法排版。必須點選「HTML 編輯／預覽」進入 CKEditor 才能設定格式。在純文字模式貼入 HTML 標籤，標籤會原樣顯示在前台。
!
步驟四｜自定模組
從 Word 直接複製貼入導致樣式錯亂
Word 文件夾帶大量私有 XML 標籤，貼入後前台排版會錯亂。正確做法：先貼到記事本去除所有格式，再從記事本複製貼入編輯器。
!
步驟四｜自定模組
表格儲存後在前台跑版
CKEditor 儲存時會清除部分內聯樣式。解決方式：切換到原始碼模式，在 <table> 標籤補上 width="100%"，再儲存。
!
步驟五｜頁籤模組
選完模組沒按「新增」就直接儲存
加入流程是：選模組 → 按「新增」→ 確認出現在清單中 → 再進行下一個。跳過中間的「新增」按鈕，選擇不會被記錄，最後按儲存後頁籤會是空的。這是整個流程最容易踩的陷阱。
!
步驟五｜頁籤模組
頁籤標籤名稱過長
頁籤的顯示名稱沿用子模組的名稱。建議在步驟三、四建立子模組時就把名稱訂短，例如用「Teaching」而非「Teaching Excellence and Educational Features」。
!
步驟七｜頁面配置
拖曳模組後忘記按儲存
模組拖曳到位置後系統沒有自動儲存，也沒有明顯提示。拖完離開頁面，配置就會消失。每次調整版型後都必須手動按儲存。
!
步驟七｜頁面配置
前台重整後仍顯示舊版面
瀏覽器快取可能讓你看到舊版。請用強制重整：Windows 按 Ctrl+Shift+R，Mac 按 Cmd+Shift+R。若仍未更新，等數分鐘後再試。
04

通用注意事項

每個模組都要個別儲存 系統沒有全域自動儲存。跨頁操作時特別容易遺漏，建議每完成一個模組就立刻按儲存。
頁籤模組建立前先完成所有子模組 頁籤模組的加入介面只顯示已存在的模組。建議步驟一到四全部完成後，再進行步驟五。
圖片統一尺寸後再上傳 廣告輪播中若圖片尺寸不一，切換時版面會跳動。上傳前先在本機裁切至相同寬高比。
每個大步驟完成後到前台確認 後台預覽與前台實際顯示有時不一致。建議每完成一個步驟就到前台確認，不要等全部做完才檢查，問題愈早發現愈容易處理。