網站中心的頁面內容,採模組化的設計,可以彈性地在頁面不同的位置設計不同的資訊。239c4a6e6b422f74afe630a58c55b52b.png
以設計 HTML 模組 為例,主要設計流程如下:
  1. 資訊規劃
    拖曳 HTML 模組至特定的內容區域。
     
  2. 設計內容
    使用「設計內容」,編輯 HTML 的內容。
     
  3. 模組設定
    設計模組的標題與外觀 (是否要顯示標題、模組圖片等)。
     
  4. 設計動畫
    當頁面內容很多時,設計 scrollbar 捲動到模組資訊時的動畫。
  5. eb268c9e89ca9865cef6ae90e65a5a77.png
  6. 以下是常用的模組介紹。
Keypoint
  1. 1.
    「HTML」模組
    就是一個典型的網頁編輯器,除了可編輯文字、圖片之外,也可以透過「嵌入」的功能,整合網路上的資源,例如 YouTube 影片、Google 地圖等。55df170383920e81fd718404af68fae6.png
     
  2. 2.
    「文字方塊」模組
    相較於 HTML 模組,文字方塊雖然只能寫純的「文字」,但卻允許使用 JavaScript 的語法。
     
    特別提醒
    使用 JavaScript 語法要特別小心,避免造成 XSS 的資安漏洞。
    7549aa0555926fe85d5ae2ff09520158.png
  3. 3.
    「圖片輪播」模組
    以自動輪播的形式呈現圖片資訊 (包括圖片說明、連結等),例如:展示研究成果簡報、活動照片等。
    5a824754e6f7e36e5ee4a606b55bc85e.png
  4. 4.
    「圖文區塊」模組
    以區塊的方式呈現圖文並列的資訊,除了設定圖片和標題以外,還可以編輯文字說明和設定連結網址,引導使用者了解更多相關資訊。
    6ba2a3469317a6dbd06494a7811ab56c.png
  5. 5.
    「連結」模組
    提供「圖片 + 連結」的形式,讓一般單純的文字連結更視覺化與美觀。
    c385b07eece29719b9e6d7b2d28f7615.png
  6. 6.
    「選單」模組
    類似側欄選單 (網站地圖) 的功能,可建立結構化的網頁選單 (直向 or 橫向),方便使用者前往相關頁面。
    7ce03e531addea856f431e1b41ed7f8a.png
  7. 7.
    「登入」模組
    可以在頁面加入使用者登入入口,也可以設定登入後要顯示的資訊 (例如:系統提醒訊息、個人化數據)。5b9d472ddd513ffb0df3f4b6d7ed7383.png
  8. 8.
    「系統公告 / 自訂公告」模組
    系統公告是網站預設的公告 (只有一個),自訂公告,則可以建立多個 (彼此獨立)。因此,在任何頁面加入「系統公告」模組時,都會顯示同樣的公告內容。
     
    小提醒:
    在網站中建立的公告模組,會自動在「公告頁面管理」產生專屬的公告頁面,提供完整的公告列表,也就是模組中公告筆數較多時,點選「>> 更多」連結顯示的頁面。
    ce9a330780f94dbcd01c760a485a322b.png
  9. 9.
    「公告捷徑」模組
    若要在特定頁面顯示已建立的公告模組,可以透過「公告捷徑」模組來指定「公告來源」以及要呈現的公告分類。
    c58ca88280fd5c4b6b4af0ea49059b29.png
  10. 10.
    「媒體瀏覽」模組
    可以連結知識庫的特定媒體,包括:最新媒體、熱門媒體、精選媒體,或是指定資料夾的媒體,可應用在顯示活動相簿。
     
    小提醒:
    由於資料夾有閱讀權限的設定,如果沒有開放訪客瀏覽 (公開),訪客在頁面就會看不到「媒體瀏覽」的內容。
    cec739251912a9cdf3dc1ea2cf4ed465.png
  11. 11.
    「目錄瀏覽」模組
    可以顯示知識庫的「目錄總覽」資訊,也就是資料夾的目錄結構 (含連結)。
    c7381981fb02f307fe8930c04f728365.png
  12. 12.
    「熱門標籤」模組
    知識庫的媒體與資料夾有提供標籤的功能,「熱門標籤」模組會依據熱門程度 (被使用的次數) 列出標籤排序,並提供標籤搜尋的功能。
    31bcfa3a56446a79682bcd0255cbe9e0.png