1. 知識庫
  2. 目錄總覽
  3. 線上操作說明
  4. XMS+ 網站基礎管理
  5. 系統管理 ~ 設計網站外觀 (自訂頁面)
設計 or 套用版面之後，就可以開始設計頁面的內容。
 
學習目標:
1. 編輯模組 (區塊) 內容
2. 更換底圖
重點
  1. 1.
    修改內容
    進入頁面後，將滑鼠移到要修改的區塊，就會出現工具下拉選單中，選擇「內容管理」。
    17366bb8d6c1277e238cc733f396dea6.png
  2. 2.
    編輯網頁的文字內容
     
    因為這是 HTML 模組，就會開啟網頁的編輯器。
     
    註: 可以透過適當的換行來進行簡單的排版。
    443677a5561184646c845e89343a20e4.png
  3. 3.
    入版面設計
    在自訂頁面的工具下拉選單 (圖1) 或網頁的最下方的「版面設計」 (圖2)，進入。
     
    圖1: 下拉工具選單
    403d66d7230a60b03a7e5d887443ee15.png
     
    圖2: 頁面最下方
    63560ecd837a74c668d6d883e75cfa0d.png
  4. 4.
    點擊「背景樣式」
    滑鼠移到區塊上方，就會出現區塊的工具列，點擊「背景樣式」的圖示 96c3e73fa4e080aee6b3bd7fb83dc1bf.png。
    9889a1ce7f987362b5779a33b33bb390.png
  5. 5.
    更換背景圖片
    點擊圖片，從選擇背景圖片的檔案。因為會固定高度，且手機和電腦的寬度差異很大，因此圖片可能會有上下邊緣或左右邊緣被裁切看不到的現象，例如，下圖就是在不同寬度的裝置下，左右被裁切的現象。
     
    5352b1572913b312a2c93b4017e886cc.png
     
    以下是背景圖片的注意事項:
    1. 圖片的寬度
      基於電腦版面以及高解析螢幕的考量，圖片的寬度建議 > 1280px 以上，因為是背景，解析度的要求也不用特別高，主要是高解析的圖片檔案比較大，下載顯示的速度就會比較慢。
       
    2. 圖片的高度
      因為電腦、手機的寬度、高度差異很大，雖然很多人會使用手機瀏覽，但還是建議以設計電腦版為主的 banner 即可，通常也都可以同時滿足手機的閱讀。
       
    3. 圖片上的文字
      盡量靠近中心，避免顯示時上下左右被裁切後無法完整呈現。
    a1377fcbe9fb6f434facacb86a312d20.png
    上一篇 下一篇
      1. Q1.
        編輯版面，一定要系統管理者嗎?
      ...

      集智學習科技股份有限公司 | CWisdom Learning Technology Co., Ltd.

      800高雄市新興區中山二路472號8F-8

      Tel: 07-2157889 / Fax: 07-2157890

      © Copyright since 2019 by CWisdom Learning Technology Co., Ltd.