來源: http://fms.formosasoft.com/media/e/170
版面設計,需要有很好的網頁 css 基礎,因此,以下內容是給已經熟悉 CSS 設計的專業人士參考。
 
fms 的版面設計 (圖1),可以同時支援電腦、手機的閱讀,架構上,是以 row 為基礎 (region),每一個 row 最多可以有 4 個 column (block),block 裡面則是放內容 (模組 module) 的地方。
 
除了基本的設定 (如背景圖、背景色、編輯器) 之外,fms 允許 region / block 直接設計 CSS 樣式,藉此提供彈性且多元的設計需求。
 
圖1: 版面設計
649ec67e78e01f356b8035b8c63e6a9c.png
 
 
圖2: 檢視頁面
92d32a72daec637508850c3e84beb234.png
重點
  1. A. 版面規劃
  2. 1.
    規劃版面 (內容區塊)
    將適合的區塊,拖曳到版面後,每個區塊,可以設定
    1. 展開與否
    2. CSS 樣式
    191fd8fdc328756650622403fc8e00ca.png
  3. 2.
    加入模組
    從模組清單中加入模組,其中文字方塊的模組,可以允許 js 程式碼。
    ba30a23aa9c4be884c0dc2338686b912.png
  4. B. 基本工具
  5. 3.
    編輯文件的原始碼
    方便針對特定網頁元素設定樣式
    b79419a8ea743348771dbe3e054569c0_thumb.png
  6. 4.
    編輯樣式
    目前系統提供以下的樣式設定: 全站樣式、region 樣式、block 樣式
  7. C. 使用技巧
  8. 5.
    banner 展開全版面
    在 region 直接點擊 
     
    891392e94698e9fa32f49fee604ffc52.png
  9. 6.
    深色底、白色字
    因為編輯器是白色底,用白色字會看不到而無法編輯
    699934bad4fb8648c379dce3fc2e7d3f.png
     
    技巧:
    1. 使用 region 的編輯樣式,將字體顏色設成白色
    2. 使用 padding,讓文字適度留白
    f9c9e0f98ef8269abd95caaa4da6d16c_thumb.png
  10. 7.
    按鈕樣式
    1. 按鈕: 使用 bootstrap 的 class='btn btn-default';
    2. 寬度: 使用 em,避免字體大小造成寬度的問題
    500bd65a01a8e53589ce0d2dbfa9532b_thumb.png
  11. 8.
    區塊間的距離
    為了保留適度的空間,在 region 編輯樣式,設定 maring-top、padding-top,以這個頁面為例,做了以下設定:
    margin-top: 40px;
    padding-top: 20px
    1519dede66149418885ddab84e5754fa_thumb.png
  12. 9.
    設定背景 (顏色、圖片)
    如果以 row 為基礎,例如,灰色和白色底間隔,就可以在 region 中透過「編輯樣式」設定。
    ddc20d52c58240c7f6a4349b5b0b4b18_thumb.png
  13. 10.
    電腦版、手機版字體大小調整
    使用「編輯全頁 CSS」,透過 media query 完成。
    1
    2
    3
      @media (min-width:768px) {
                 body {font-size: 18px}
       }
    位置
    資料夾名稱
    km+ 自媒體知識共享平台線上說明
    發表人
    集智學習科技客服
    單位
    集智學習科技官方網站
    建立
    2019-11-07 17:58:19
    最近修訂
    2019-12-22 03:08:50
    來源
    http://fms.formosasoft.com/media/e/170
    1. 1.
      快速入門
    2. 2.
      功能、名詞解釋、權限
    3. 3.
      建立內容
    4. 4.
      整理與查詢內容
    5. 5.
      文件維護、審核
    6. 6.
      實用的小技巧
    7. 7.
      應用 ~ 知識管理