×
切換帳號
集智學習科技官方網站
線上手冊
Evercam 課程錄製
TMS+ 課程中心
KM+ 知識管理
Project+ 專案管理
ee-class 3易課平台
Q&A 問題集
關於我們
關於集智
創辦人的話
產品介紹
EverCam 10課程錄影軟體
eeClass易課學習平台
tms+微學習培訓平台
km+知識共享平台
Project+專案協作平台
教育部精進專案
客戶服務
下載EverCam
產業資訊與媒體報導
VIP客戶服務專區
平台試用申請服務
官方Line@客服
登入
×
全站搜尋
搜尋
集智學習科技官方網站
登入
線上手冊
Evercam 課程錄製
TMS+ 課程中心
KM+ 知識管理
Project+ 專案管理
ee-class 3易課平台
Q&A 問題集
關於我們
關於集智
創辦人的話
產品介紹
EverCam 10課程錄影軟體
eeClass易課學習平台
tms+微學習培訓平台
km+知識共享平台
Project+專案協作平台
教育部精進專案
客戶服務
下載EverCam
產業資訊與媒體報導
VIP客戶服務專區
平台試用申請服務
官方Line@客服
集智學習科技官方網站
線上學習的專家,值得信賴的夥伴
列印日期 : 2024/03/29
集智學習科技官方網站
知識庫
目錄總覽
線上操作說明
KM+
km+ 自媒體知識共享平台線上說明
×
×
loading ...
×
×
私密分享
狀態
啟用
連結
https://www.cwisdom.tw/media/s/
重新產生
複製連結
×
QR code
×
選擇網頁檔案
loading ...
×
設計知識點
×
建立新版本
×
刪除提醒
×
loading ...
×
版面設計的技巧
分享
QR code
瀏覽: 1103,
最近修訂: 2019-12-22
版面設計的技巧
分享
QR code
瀏覽: 1103,
最近修訂: 2019-12-22
來源:
http://fms.formosasoft.com/media/e/170
版面設計,需要有很好的網頁 css 基礎,因此,以下內容是給已經熟悉 CSS 設計的專業人士參考。
fms 的版面設計 (圖1),可以同時支援電腦、手機的閱讀,架構上,是以 row 為基礎 (region),每一個 row 最多可以有 4 個 column (block),block 裡面則是放內容 (模組 module) 的地方。
除了基本的設定 (如背景圖、背景色、編輯器) 之外,fms 允許 region / block 直接設計 CSS 樣式,藉此提供彈性且多元的設計需求。
圖1: 版面設計
圖2: 檢視頁面
重點
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}
}
×
×
複製檢核清單
loading ...
×
×
×
關閉
×
loading ...
上一篇
下一篇
討論
筆記
(0)
詳細
未登入或權限不足!
位置
知識庫
目錄總覽
線上操作說明
KM+
km+ 自媒體知識共享平台線上說明
資料夾名稱
km+ 自媒體知識共享平台線上說明
發表人
集智學習科技客服
單位
集智學習科技官方網站
建立
2019-11-07 17:58:19
最近修訂
2019-12-22 03:08:50
來源
http://fms.formosasoft.com/media/e/170
1.
快速入門
1.1
km+ 知識管理,10 分鐘快速人門
1.2
km+特色短片
1.3
特色功能
1.3.1
影片索引 ~ 方便跳段閱讀
1.3.2
重點整理 (SOP) ~ 掌握要領
1.3.3
討論 + FAQ ~ 深度學習 + 累積知識
1.3.4
影片筆記
1.3.5
FAQ 整理
1.3.6
影音教材庫的應用
1.3.7
全文檢索
1.4
5 分鐘就上手!
1.5
分享至其他系統 (以 moodle 為例) | fms / tms+ ~ 聰明的教育訓練
1.6
簡單、聰明的知識管理
1.7
建立實驗室的網站
1.8
建立實驗流程的步驟
2.
功能、名詞解釋、權限
2.1
權限說明 (知識庫)
2.2
名詞解釋 (知識庫)
2.3
km+ 知識庫功能總覽
3.
建立內容
3.1
編輯技巧 (含上傳檔案)
3.2
建立目錄、資料夾
3.3
上傳 EverCam / 影片
3.4
建立文件
3.5
設計重點 (SOP)
3.6
插入圖片
3.7
整理 FAQ
3.8
設計影片問題
3.9
連結知識
3.10
上傳 word 檔
3.11
上傳檔案,例如 jpg, zip, excel 等
3.12
嵌入 YouTube 影片
3.13
上傳 HTML 網頁
3.14
連結知識中心
4.
整理與查詢內容
4.1
檢視模式 (排序文件)
4.2
設定資料夾權限
4.3
整理資料夾的 FAQ
4.4
編排章節
4.5
移動媒體 (檔案) 到其他資料夾
5.
文件維護、審核
5.1
維護清單簡介 (主要流程)
5.2
設定維護清單
5.2.1
啟用與設定管理者
5.2.2
維護指定的資料夾
5.2.3
設定維護條件
5.2.4
人工指定維護文件
5.2.5
建立新文件
5.3
維護與審核流程
5.3.1
指派文件(清單管理者)
5.3.2
編輯文件(承辦人)
5.3.3
複查 (複查者)
5.3.4
審核 (審核者)
6.
實用的小技巧
6.1
手機操作技巧
6.2
分享的小技巧
6.3
圖文編排技巧 ~ 用表格排版
6.4
版面設計的技巧
6.5
私密分享
7.
應用 ~ 知識管理
7.1
知識管理 ~ 需求、挑戰與突破
7.2
知識 ~ 進得去 (整理 SOP、FAQ)
7.3
知識 ~ 找得到,且符合現況!
7.4
整理 FAQ,輕鬆搞定!
7.5
教材庫應用 ~ 5 分鐘快速入門