相較於「資訊規劃」,「版面設計」還提供選擇「內容區塊」及編輯版面樣式等進階功能。每一個「內容區塊」都可以拖曳模組、調整排序、設計樣式,滿足更彈性的設計需求。
 
在「版面設計」上方的設定區塊,主要功能說明如下:
  • 版面設定
    是否顯示 banner、全站搜尋以及側欄等。
     
  • 版面支援
    可選擇排版所支援的裝置寬度,例如選擇「平板」時,平板以上都會套用多欄的排版,手機則一律單欄顯示。
     
  • 編輯全頁 CSS
    編輯這個頁面的 CSS,所編輯的內容會覆蓋「全站 CSS」。
     
  • 檢視頁面
    檢視設計的最後呈現效果。
 
e8a26f093c2690d065462cc81014f579.png
 
以下將以排版的功能為主,關於模組的設計,可以參考另一份文件「資訊規劃 & 模組設計」。
 
重點
  1. 1.
    進入「版面設計」
    系統提供 2 種方式進入「版面設計」:
    • 從「選單與內容管理」
      點擊各頁面右側的工具列,選擇「版面設計」。
      a45f7cd0946d33763c2af7a83cbd5eea.png
       
    • 從頁面進入
      在頁面下方,點擊「版面設計」按鈕。
      1b0f6bd31bdfc29fe6755a5f52433592.png
  2. 2.
    設計版面內容
    將要使用的「內容區塊」,拖曳到想擺放的位置後,即可在內容區域安排模組。
  3. 3.
    調整內容區塊
    加入「內容區塊」後,可以移動區塊的位置,或是編輯樣式,例如:背景顏色、圖片。
  4. 4.
    設定版面展開 / 置中
    點擊頁面右側「展開 / 置中」圖示,即可調整版面呈現形式。選擇「展開」,就會以滿版顯示內容。
     
    小提醒:
    由於顯示器的解析度變化很大,除非有特殊考量,建議「置中」顯示,讓內容的排版更容易。
    位置
    資料夾名稱
    系統管理 ~ 網站中心
    發表人
    黃湘君
    單位
    專案部
    建立
    2020-11-06 08:30:19
    最近修訂
    2021-01-15 17:04:07
    引用
    1