A. 版面規劃
版面設計，需要有很好的網頁 css 基礎，因此，以下內容是給已經熟悉 CSS 設計的專業人士參考。
fms 的版面設計 (圖1)，可以同時支援電腦、手機的閱讀，架構上，是以 row 為基礎 (region)，每一個 row 最多可以有 4 個 column (block)，block 裡面則是放內容 (模組 module) 的地方。
除了基本的設定 (如背景圖、背景色、編輯器) 之外，fms 允許 region / block 直接設計 CSS 樣式，藉此提供彈性且多元的設計需求。
圖1: 版面設計
圖2: 檢視頁面
重點
- 1.規劃版面 (內容區塊)將適合的區塊，拖曳到版面後，每個區塊，可以設定1. 展開與否2. CSS 樣式
- 2.加入模組從模組清單中加入模組，其中文字方塊的模組，可以允許 js 程式碼。
- B. 基本工具
- 3.編輯文件的原始碼方便針對特定網頁元素設定樣式
- 4.編輯樣式目前系統提供以下的樣式設定: 全站樣式、region 樣式、block 樣式
- C. 使用技巧
- 5.banner 展開全版面在 region 直接點擊
- 6.深色底、白色字因為編輯器是白色底，用白色字會看不到而無法編輯
技巧:1. 使用 region 的編輯樣式，將字體顏色設成白色2. 使用 padding，讓文字適度留白
- 7.按鈕樣式1. 按鈕: 使用 bootstrap 的 class='btn btn-default';2. 寬度: 使用 em，避免字體大小造成寬度的問題
- 8.區塊間的距離為了保留適度的空間，在 region 編輯樣式，設定 maring-top、padding-top，以這個頁面為例，做了以下設定:margin-top: 40px;padding-top: 20px
- 9.設定背景 (顏色、圖片)如果以 row 為基礎，例如，灰色和白色底間隔，就可以在 region 中透過「編輯樣式」設定。
- 10.電腦版、手機版字體大小調整使用「編輯全頁 CSS」，透過 media query 完成。123@media (min-width:768px) {body {font-size: 18px}}
未登入或權限不足!
集智學習科技股份有限公司 | CWisdom Learning Technology Co., Ltd.
Tel: 07-2157889 / Fax: 07-2157890
© Copyright since 2019 by CWisdom Learning Technology Co., Ltd.