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