> For the complete documentation index, see [llms.txt](https://help.teaches.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.teaches.cc/user-guide/edit-your-website/design.md).

# 網站視覺設定

### **第一步：佈景主題**

準備好你的網站 Logo 我們就開始吧！

* 上傳學校 Logo、網頁圖標
  * 學校 Logo (尺寸建議大於250 x 60 px、檔案小於 4 MB)
  * 網頁圖標 (尺寸建議大於 50 x 50 px、檔案小於 4 MB)
* 選擇網站色系：選擇符合企業的顏色

### **第二步：頁面及設計**

選擇要編輯的頁面，然後選擇**加入新段落 > 圖片**，選擇喜歡的樣式後開始編輯：

![](/files/J9NX4mxJgAAU3gHlBQtm)

![](/files/x2CxPNHpCp2ML4tesZuU)

* **「圖片」** 
  * 尺寸建議2880 x 1000 px、檔案小於 4 MB
  * 圖片可設定點擊超連結。
  * 圖片因應手機版瀏覽左右各被裁切840px，如下圖所示：

![搭配手機版最佳瀏覽狀況，建議重要資訊建議集中於中間區域](/files/-Mb_DdN9_fwH2Udt5_90)

![](/files/-Mb_ECgNtJkHS94fJ43Y)

* **「圖片Banner」**
  * 尺寸建議2880 x 1400 px、檔案小於 4 MB
  * 可輸入標題及內容，按鈕可設定超連結，文字、按鈕尺寸隨瀏覽設備縮放。
  * 圖片因應手機版瀏覽隨手機尺寸裁切縮小，建議只放純背景圖片，如下圖所示：

![電腦版瀏覽](/files/cPyfETpiFakpLoOY8wLS)

![手機版瀏覽](/files/IsbhWdrAFZiMFbzaXeUY)

* **「輪播Banner」**
  * 尺寸建議2880 x 840 px、檔案小於 4 MB
  * 可增加多張圖片呈幻燈片形式，每張Banner亦可設定超連結。
  * 圖片等比縮放，不因瀏覽設備裁切，如下圖所示：

![電腦版瀏覽](/files/piRrs2c3XRTG1SNPq5CT)

![手機版瀏覽](/files/YiI8BbTJeMhB0TnAV2Mf)

掌握以上製圖規則，相信你也能自己製作出符合自我風格的課程網站喔！