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