• 01:28 1.
    展開、刪除、編輯區塊樣式
  • 00:24 2.
    規劃版面 (內容區塊)
  • 01:03 3.
    編輯文件的原始碼
  • 00:15 4.
    編輯樣式
  • 00:26 5.
    banner 展開全版面
  • 01:03 6.
    深色底、白色字
  • 01:05 7.
    按鈕樣式
  • 00:24 8.
    區塊間的距離
  • 00:50 9.
    設定背景 (顏色、圖片)
  • 00:44 10.
    電腦版、手機版字體大小調整
  • 00:57 11.
    補充: 版面支援 (平板 or 電腦)
  • Index
  • Notes
  • Discuss
  • Fullscreen
版面設計的技巧
Duration: 08:46, Browse: 1288, Update: 2018-06-01
版面設計,需要有很好的網頁 css 基礎,因此,以下內容是給已經熟悉 CSS 設計的專業人士參考。
 
fms 的版面設計 (圖1),可以同時支援電腦、手機的閱讀,架構上,是以 row 為基礎 (region),每一個 row 最多可以有 4 個 column (block),block 裡面則是放內容 (模組 module) 的地方。
 
除了基本的設定 (如背景圖、背景色、編輯器) 之外,fms 允許 region / block 直接設計 CSS 樣式,藉此提供彈性且多元的設計需求。
 
圖1: 版面設計
649ec67e78e01f356b8035b8c63e6a9c.png
 
 
圖2: 檢視頁面
92d32a72daec637508850c3e84beb234.png
Keypoint
  1. A. 版面規劃
  2. 1.
    規劃版面 (內容區塊)
    將適合的區塊,拖曳到版面後,每個區塊,可以設定
    1. 展開與否
    2. CSS 樣式
  3. 2.
    加入模組
    從模組清單中加入模組,其中文字方塊的模組,可以允許 js 程式碼。
  4.  
    B. 基本工具
  5. 3.
    編輯文件的原始碼
    方便針對特定網頁元素設定樣式
  6. 4.
    編輯樣式
    目前系統提供以下的樣式設定: 全站樣式、region 樣式、block 樣式
  7.  
    C. 使用技巧
  8. 5.
    banner 展開全版面
    在 region 直接點擊 
     
  9. 6.
    深色底、白色字
    因為編輯器是白色底,用白色字會看不到而無法編輯
     
    技巧:
    1. 使用 region 的編輯樣式,將字體顏色設成白色
    2. 使用 padding,讓文字適度留白
  10. 7.
    按鈕樣式
    1. 按鈕: 使用 bootstrap 的 class='btn btn-default';
    2. 寬度: 使用 em,避免字體大小造成寬度的問題
  11. 8.
    區塊間的距離
    為了保留適度的空間,在 region 編輯樣式,設定 maring-top、padding-top,以這個頁面為例,做了以下設定:
    margin-top: 40px;
    padding-top: 20px
  12. 9.
    設定背景 (顏色、圖片)
    如果以 row 為基礎,例如,灰色和白色底間隔,就可以在 region 中透過「編輯樣式」設定。
  13. 10.
    電腦版、手機版字體大小調整
    使用「編輯全頁 CSS」,透過 media query 完成。
    1
    2
    3
    @media (min-width:768px) {
        body {font-size: 18px}
    }
    • 01:28 1.
      展開、刪除、編輯區塊樣式
    • 00:24 2.
      規劃版面 (內容區塊)
    • 01:03 3.
      編輯文件的原始碼
    • 00:15 4.
      編輯樣式
    • 00:26 5.
      banner 展開全版面
    • 01:03 6.
      深色底、白色字
    • 01:05 7.
      按鈕樣式
    • 00:24 8.
      區塊間的距離
    • 00:50 9.
      設定背景 (顏色、圖片)
    • 00:44 10.
      電腦版、手機版字體大小調整
    • 00:57 11.
      補充: 版面支援 (平板 or 電腦)
    Location
    Folder name
    知識中心 (fms) 手冊
    Uploaded by
    蘇德宙
    Division
    專案部
    Create
    2017-11-22 14:30:09
    Update
    2018-06-01 10:25:36
    Browse
    1,288
    Duration
    08:46