> 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)
* 選擇網站色系：選擇符合企業的顏色

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

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

![](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2F6PUJv2SAAQNeYPT9INV9%2Fimage.png?alt=media\&token=73d03463-9899-477c-8f8f-f6e5cc3ed9a7)

![](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2FGM6zU1FQ6G0HQg4D6axZ%2Fimage.png?alt=media\&token=8645dfdb-a605-4627-82e7-73b61af9b44e)

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

![搭配手機版最佳瀏覽狀況，建議重要資訊建議集中於中間區域](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7f3d161J9iNhkzwCFc%2F-Mb_CCd19xnGdWmw3OFP%2F-Mb_DdN9_fwH2Udt5_90%2Fimage.png?alt=media\&token=9b78f9c3-c33d-4155-95dd-55d1fdc433d1)

![](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7f3d161J9iNhkzwCFc%2F-Mb_CCd19xnGdWmw3OFP%2F-Mb_ECgNtJkHS94fJ43Y%2Fimage-20210322-093948.png?alt=media\&token=105961e1-293c-41b3-b6e4-6d01839aca00)

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

![電腦版瀏覽](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2Fm2y9DIHCh64D3DOFqFTd%2F%E5%9C%96%E7%89%87Banner.png?alt=media\&token=2d068412-96e8-446d-83a7-764fbfbfdbbe)

![手機版瀏覽](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2FDzxEEDokOxuDLuYnx5Pk%2F%E5%9C%96%E7%89%87Banner-%E6%89%8B%E6%A9%9F%E7%80%8F%E8%A6%BD.png?alt=media\&token=da4c415b-a430-4fac-84fb-d43e5e616cef)

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

![電腦版瀏覽](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2FynSQsCaxdwiOQoetzTY8%2F%E8%BC%AA%E6%92%ADbanner.png?alt=media\&token=e2fbac43-841c-41d0-aade-05046b5dbc0f)

![手機版瀏覽](https://772079408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7f3d161J9iNhkzwCFc%2Fuploads%2FTNJTPKzfwxAXWDWWEkmx%2F%E8%BC%AA%E6%92%ADbanner-%E6%89%8B%E6%A9%9F%E7%80%8F%E8%A6%BD.png?alt=media\&token=d04360e9-b9ab-41fe-91d5-d0c2f2d13118)

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