xms+ 的網站中心頁面的資訊,透過以下機制提供模組化的方式,彈性規劃資訊的呈現位置。
  1. 版面設計
    提供完整的排版功能,可自行設計版型與 css 樣式,並在其中安排不同的模組 (例如公告、一般 Html、圖片輪播等)。
     
  2. 資訊規劃
    是「版面設計」的簡易版,只要在已經規劃好的版面,拖曳模組到適合的內容區域即可。
 
以安排 Html 模組為例,主要設計流程如下:
  1. 資訊規劃
    拖曳 Html 模組至特定的內容區域。
     
  2. 編輯模組
    透過「模組設定、設計內容、動畫設定」等工具,設計模組的外觀和內容。
     
  3. 啟用 / 停用模組
    設計中的模組,可以透過「停用」關閉不顯示,等完成後再「啟用」。
     
  4. 檢視頁面
    檢視目前規劃的頁面效果。
  5. 1429f4e0f15a12ca0b94684d0b00d757.png
Keypoint
  1. 1.
    資訊規劃
    在「資訊規劃」頁面 (註),將模組 (例如 Html) 拖曳到特定的內容區域,加入後,依然可以利用拖曳符號 5fbd3cd94f24328c6828ed5ec81383e6.png 來移動位置。
     
    附註:
    「資訊規劃」,可以從「選單與內容管理」的頁面工具 or 一般頁面下方的「資訊規劃」按鈕進入。 
    2245b9e56635efe566fad999f51b3627.png
  2. 2.
    模組設定
     
    可以設定模組的標題與外觀,若不想要在頁面顯示模組標題,選擇「隱藏」標題即可。
    e02596309020148844292fb18d730fa4.png
  3. 3.
    設計內容
    點擊鉛筆圖示,即可編輯模組的內容。
    f8e66dbe40679e1b919a6e56ab1729f2.png
  4. 4.
    動畫設定
    可以設計 scrollbar 捲動到模組資訊時的動畫,讓頁面呈現更活潑。相關設定說明如下:
    • 動畫
      系統提供「淡入」、「翻轉」、「飛入」、「縮放」 4 種動畫效果,每種動畫都可以在「效果選項」設定動畫的方向。
       
    • 動畫時間
      動畫持續的時間。
       
    • 緩動效果
      動畫期間的呈現效果,包含:逐漸加快、漸緩後加快、加快後漸緩。
       
    • 錨點位置
      可以設定滑鼠滾動到網頁哪個位置 (top / center / bottom) 時動畫會出現跟消失。
    小提醒:
    僅「Html」及「文字方塊」模組具有「動畫設定」的功能。
    3bd4b5b266941a1f8be34555f346e905.png
  5. 5.
    檢視頁面
    點擊「檢視頁面」,就能返回頁面,檢視設計成果。
     
    小提醒:
    在檢視頁面時,還是可以執行「模組設定、設計內容」等功能,方便編輯後馬上看到結果。
    da726cd2a8272dd55d5943de97f1ee07.png
  6. 6.
    快速修改模組標題
    點擊模組標題,可以修改標題名稱,方便設計時辨識用。
    32b2b4fba26590d695bb20220fccd032.png
  7. 7.
    停用 / 啟用模組
    預設是「啟用」狀態,點擊狀態圖示可以「停用」,模組就不會顯示在網頁上。再點擊一次圖示,即可重新「啟用」。
    b8e6d827c5bc7e80206f863b0c8928a6.png