設計 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
    位置
    資料夾名稱
    系統管理 ~ 設計網站外觀 (自訂頁面)
    發表人
    Alex
    單位
    集智學習科技官方網站
    建立
    2021-03-11 13:43:45
    最近修訂
    2021-03-22 18:05:24