用 AI 建立企業課程網站：首頁、課程、FAQ 到聯絡頁完整實作

重點摘要

每一頁只承擔一個主要任務，讓訪客知道下一步。
首頁負責建立信任與導流，課程頁負責比較與報名，FAQ 負責降低疑慮。
先建立共用頁首、頁尾與元件，再製作各頁，可降低修改成本。

首頁不是公司簡介，而是導覽與轉換入口

首頁第一個畫面應清楚說明成果、適用對象與主要課程方向，並提供「查看課程」及「免費資源」等明確按鈕。促銷訊息可以置於最上方，但要讓訪客看懂優惠內容、期限、價格與名額，不要只放模糊的「立即搶購」。

後續區塊可依序放課程卡、主題學習資源、免費下載、學員見證與聯絡行動。課程卡應包含圖片、名稱、形式、時數、重點、價格與兩種連結：站內詳細介紹及外部報名。

關於我們頁要回答信任問題

新手常把關於頁寫成空泛故事。更實用的結構是品牌成立原因、教學方法、服務對象、講師專業背景、證照／經驗、擅長工具、實際案例與社群連結。照片要有授權並設定正確替代文字。

若公開真實資料，應先確認哪些資訊適合揭露。教學範例可使用「林老師」、「台北市某區」、hello@example.com 與 02-2000-0000，避免把管理帳號或私人地址寫入文章與程式碼。

課程專區如何兼顧比較與單課詳情？

課程列表頁讓訪客快速比較主題、上課方式、時數與價格；每門課再有獨立詳情頁，說明適合對象、先備能力、完整大綱、成果、觀看期限、常見問題與報名按鈕。這種結構也比所有內容塞在一頁更利於搜尋。

若交易仍在舊平台進行，站內按鈕可以連到外部商品頁，但必須逐一對應正確課程，並加上 target=_blank 與 rel=noopener noreferrer。切勿讓所有「立即報名」都指向課程總表。

學習資源採主題群集而不是文章大雜燴

將文章分成幾個穩定主題，每個分類有自己的指南頁，並動態顯示該分類已發布的文章。文章連回分類頁，分類頁再連向所有文章，形成 Hub-Spoke 內部連結。新增文章時只要選對分類，就能自動出現在首頁與分類頁。

分類數量與文章數量應由後台資料動態計算，避免寫死「12 篇」但實際只有 5 篇。正式分類網址應採 /blog/topic-name，篩選參數網址則不要同時成為可索引主頁。

FAQ、聯絡與條款頁不可缺少

FAQ 應依報名、企業內訓、退款、軟體與設備分類，問題可展開收合，答案要能直接解決疑慮。聯絡頁則說明需要填寫哪些資料、用途與回覆方式；若採 mailto，必須提醒訊息仍需由訪客在郵件軟體中確認送出。

服務條款、消費者權益與退款政策要依實際服務模式撰寫，清楚揭露提供者、數位內容特性、觀看期限、帳號規則、取消與退款條件。教學文章只說明網站結構，不應複製其他商家的條款直接使用。

響應式與無障礙是基本功能

在 320px 手機寬度檢查導覽、表格、按鈕及表單是否超出畫面；在平板與桌機確認卡片欄數及留白。圖片使用固定寬高比例減少版面跳動，首圖採 WebP 並延遲載入非首屏圖片。

所有互動元件要有清楚焦點狀態，漢堡選單、FAQ 與表單能用鍵盤操作；色彩不能只靠顏色傳達狀態。完成後再用真實文字長度測試，而不是只看短短的範例內容。

新手實作：從一句需求到可預覽的多頁網站

ChatGPT Sites 可在 ChatGPT Work 中依自然語言建立、預覽、修改與發布互動網站或輕量應用程式。新手不必先準備完整程式碼，但應提供內容、檔案、連結與限制，並把工作拆成「先建立骨架、再匯入內容、最後測試發布」三輪。

在 Work 的提示中明確寫出「網站」或使用 @Sites。
要求先建立首頁、課程、關於、FAQ、聯絡及條款等路由。
檢查共用頁首、頁尾、手機選單及按鈕。
再逐頁補入真實內容與圖片。
要求檢查內部連結、表單、SEO、Schema 與無障礙。
先儲存版本並檢查預覽，確認後才發布。

可直接複製的提示詞：建立企業課程網站

請使用 Sites 建立一個響應式企業課程網站。品牌名稱為【品牌】，受眾為【受眾】，主色為【色碼】，輔色為【色碼】。建立首頁、關於我們、課程專區、課程詳情、學習資源、FAQ、聯絡我們與服務條款。首頁需有主視覺、課程卡、學習資源、見證與聯絡 CTA；課程卡需有圖片、形式、時數、價格、詳情及報名按鈕。所有外部連結安全開啟，圖片有 alt，手機使用漢堡選單。先建立可預覽版本，不要發布；完成後列出缺少資料與驗收結果。