×
switch account
fms / tms+ ~ 聰明的教育訓練
線上手冊
Log in
English
繁體
简体
Regular
Medium
Large
Index
00:00
1.
展開、刪除、編輯區塊樣式
01:28
2.
規劃版面 (內容區塊)
01:53
3.
編輯文件的原始碼
02:57
4.
編輯樣式
03:13
5.
banner 展開全版面
03:39
6.
深色底、白色字
04:42
7.
按鈕樣式
05:48
8.
區塊間的距離
06:13
9.
設定背景 (顏色、圖片)
07:04
10.
電腦版、手機版字體大小調整
07:48
11.
補充: 版面支援 (平板 or 電腦)
Notes
(0)
Not logged in or insufficient permissions!
Comment
Video quiz
questionnaire
vCard
Subtitles
AD
×
Take notes
loading ...
00:00
1.
展開、刪除、編輯區塊樣式
01:28
2.
規劃版面 (內容區塊)
01:53
3.
編輯文件的原始碼
02:57
4.
編輯樣式
03:13
5.
banner 展開全版面
03:39
6.
深色底、白色字
04:42
7.
按鈕樣式
05:48
8.
區塊間的距離
06:13
9.
設定背景 (顏色、圖片)
07:04
10.
電腦版、手機版字體大小調整
07:48
11.
補充: 版面支援 (平板 or 電腦)
×
Embed URL
Embed code
Copy the link
Resolution
720x404
1280x720
1364x768
Custom
Source code embedding
Source code embedding (Aspect ratio 4:3)
Source code embedding (Aspect ratio 16:9)
Custom
x
×
QR code
Share
Embed URL
QR code
Index
Notes
Comment
Fullscreen
Print date : 2025/03/23
fms / tms+ ~ 聰明的教育訓練
Media Center
...
知識中心 (fms) 手冊
版面設計的技巧
Duration: 08:46,
Browse: 3868,
Last Updated: 2018-06-01
Play Video: https://fms.formosasoft.com/media/170
版面設計,需要有很好的網頁 css 基礎,因此,以下內容是給已經熟悉 CSS 設計的專業人士參考。
fms 的版面設計 (圖1),可以同時支援電腦、手機的閱讀,架構上,是以 row 為基礎 (region),每一個 row 最多可以有 4 個 column (block),block 裡面則是放內容 (模組 module) 的地方。
除了基本的設定 (如背景圖、背景色、編輯器) 之外,fms 允許 region / block 直接設計 CSS 樣式,藉此提供彈性且多元的設計需求。
圖1: 版面設計
圖2: 檢視頁面
Keypoint
A. 版面規劃
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 完成。
1
2
3
@media (
min-width
:
768px
) {
body {
font-size
:
18px
}
}
×
×
Copy checklist
loading ...
×
×
×
Close
×
loading ...
Prev
Next
Index
Comment
Details
00:00
1.
展開、刪除、編輯區塊樣式
01:28
2.
規劃版面 (內容區塊)
01:53
3.
編輯文件的原始碼
02:57
4.
編輯樣式
03:13
5.
banner 展開全版面
03:39
6.
深色底、白色字
04:42
7.
按鈕樣式
05:48
8.
區塊間的距離
06:13
9.
設定背景 (顏色、圖片)
07:04
10.
電腦版、手機版字體大小調整
07:48
11.
補充: 版面支援 (平板 or 電腦)
Location
Media Center
...
知識中心 (fms) 手冊
Folder name
知識中心 (fms) 手冊
Uploader
蘇德宙
Branch
專案部
Created
2017-11-22 14:30:09
Last Updated
2018-06-01 10:25:36
Duration
08:46
Media Center
...
知識中心 (fms) 手冊
1.
新增內容
1.1
編輯技巧 (含上傳檔案)
1.2
上傳 EverCam / 影片
1.3
手機上傳影片
1.4
嵌入網路影片 (如 YouTube)
1.5
播放清單
1.6
上傳 HTML 網頁
1.7
連結知識中心
2.
資料夾管理
2.1
建立目錄、資料夾
2.2
設定資料夾權限
2.3
編排章節
2.4
移動媒體 (檔案) 到其他資料夾
3.
實用的小技巧
3.1
手機操作技巧
3.2
分享的小技巧
3.3
圖文編排技巧 ~ 用表格排版
3.4
版面設計的技巧
4.
媒體分享
4.1
私密分享