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