網站首頁設計 ~ 使用自訂頁面 (教育訓練的版型)

講者：德宙蘇

日期：2026-07-14

觀看: 33

00:00 1.
設計網站首頁
00:05 2.
首頁 (自訂頁面) 簡介
01:15 3.
版面設計
03:34 4.
網站名稱、版權說明等設定
04:33 5.
設計選單
05:30 6.
重點整理

分享
- 嵌入網址
- QR code

索引
筆記
討論
全螢幕

網站首頁設計 ~ 使用自訂頁面 (教育訓練的版型)

長度: 05:49, 瀏覽: 34, 最近修訂: 2026-07-14

系統首頁是透過「自訂頁面」的功能設計，每一個資訊區塊，都是獨立的模組。可以滿足更多樣性的資訊呈現，特色包括:

可以隨意安排要呈現的內容、功能與版型。
提供「模版」，快速設計美觀、有質感的頁面。
支援電腦、平版、手機等各種裝置的瀏覽。

以下是如何將「預設範本」調整成自己網站的主要步驟。

重點

1.
調整模組內容

範例中的首頁，分別應用了以下的模組：

圖片輪播：「一般模組 / 圖片輪播模組」

最新公告：「公告模組 / 系統公告」

我的學習：「課程模組 / 我的學習數據模組」

最新課程：「課程模組 / 課程瀏覽模組」

精選媒體、學習方法：「知識庫模組 / 媒體瀏覽」

協助中心：「一般模組 / 選單模組」

修改內容的方式很簡單，點模組右上角工具列的「設計內容」即可編輯。

關於各個模組的說明，請參考文件「模組簡介」。
2.

版面設計

如果想調整頁面上的資訊 (例如：新增、更換或移動模組位置)，可以從網頁下方的「版面設計」進入版面的管理頁面進行設計。

關於版面設計的詳細介紹，請參考文件「版面的結構說明」。
網站基本設定
3.
修改網站名稱、版權說明等基本資訊

進入「系統管理 / 網站設定」後，通常進行以下設定即可 (圖片紅框處)：

網站名稱

banner 標題、logo 和背景圖片 (目前預設不顯示，讓內容有更多的空間呈現)

網站版權 (顯示在每一頁的最下面)

為了在不同裝置有好的呈現效果， banner 背景圖片的設計需要一些技巧，更詳細的說明，請參考文件「設計 banner 背景圖片」。
4.
設計選單

在「系統管理」側欄展開「選單管理」，可依需求修改網站的選單，包含

系統選單

網站選單

使用者選單 (登入後才顯示)

詳細的操作說明，請參考文件「設計選單」。