版面設計範例
  • 1,927 views,
  • 2015-09-25,
  • 上傳者: Peishan Yu,
  •  0
您可以藉由改變「版面配置」或透過「CSS 語法」來調整網站外觀,
以修改「白色醫學」樣板為例,步驟如下:
 
39693601622ab1aa5e5b229b1a3cd7ed.png
 
>> 範例提供之背景圖 (點擊後按右鍵 > 另存影像)
步驟
A.
進入「版面配置」
點選「系統管理 > 自訂頁面」,點擊首頁展示的「版面配置」
B.
配置網頁資訊
1. 選擇「內容區塊」,拖曳「二欄」式內容區塊至 #top (頂端)
 
2. 選擇「模組清單」,拖曳 3 個「HTML」模組至二欄式區塊的左端
3. 將「廣告看板」放於二欄式區塊的右端
 
C.
編輯區塊樣式
1. 在放置 3 個 HTML 模組的區塊,點擊右上角「編輯區塊樣式」
2. 選擇「進階設定」,輸入以下 CSS 語法
margin:0;
width:248px;
 
3. 在放置廣告看板模組的區塊,點擊右上角「編輯區塊樣式」
4. 選擇「進階設定」,輸入以下 CSS 語法
margin:0;
margin-right:-1px;
D.
編輯模組樣式
1. HTML 模組 >「編輯樣式」,在「區塊佈景」中輸入背景色碼
2. 在「進階設定」中輸入以下 CSS 語法
margin-bottom:0;
padding:7px;
 
E.
編輯模組資訊
HTML 模組 >「編輯」,輸入想呈現的資訊
 
57ba567903261328f14e44c0fefa3764.png
F.
修改背景圖
1.「全站樣式」 >「編輯全站 CSS」
2. 在最下方加入以下 CSS 語法 (括號內請更改為圖片網址)
#page {background:url(插入圖片或輸入背景網址) repeat-x}
 
訪客如要回應,請先 登入
    發表時間 :
    2015-09-25 15:47:00
    觀看數 :
    1,927
    發表人 :
    Peishan Yu
    部門 :
    台灣數位學習科技
    QR Code :