Step 1
規劃網站：目的、對象與 Sitemap
寫下網站要服務誰、解決什麼問題，確認 Sitemap 與主要 Page，決定首頁 CTA。這是後面所有步驟的依據。
檢查點 → 能用一句話說明網站目的，並列出要建立的頁面。
WEEK 04 / WordPress 網站建置
WordPress 3：從頭到尾架好一個網站
01｜這週你會做出什麼跟著教師完整示範，一次把網站架好：規劃頁面、設計首頁與主要 Page、發布 Post，並確認手機版可用。
2026-10-23（學期第 6 週）先理解底層概念，再跟著操作；卡住時查操作參考。查看完成標準 ↓
02 / UNDERSTAND
底層概念｜技術變了也要會判斷
一次看完整條流程，觀念才會串起來
架站的每個步驟都相互依賴：網站規劃決定頁面，頁面決定選單，選單與設計決定訪客怎麼找到內容。這一堂從頭到尾講完一次，邊做邊說明每個步驟背後的觀念，讓你看見全貌。
每頁都要回答訪客的問題
首頁要讓第一次來的人迅速知道這是什麼網站、提供什麼、下一步去哪裡。內頁聚焦一個主要目的；標題、圖片、留白與按鈕的安排，決定訪客先看見什麼。
用手機版驗收
完成後用手機重新檢查資訊順序、圖片裁切與按鈕位置，手機可讀、可點、找得到下一步，才算完成。
03 / MAKE
操作示範｜在 WordPress 與 Astra 實作
Step 2
建立頁面與選單
依 Sitemap 建立 Page，區分 Page 與 Post 的用途，設定主選單與頁首頁尾，確認全站外觀（Astra）設定一致。
檢查點 → 選單能連到每個主要 Page，沒有死連結。
Step 3
設計首頁
用明確標題、簡短說明、適合的圖片與一個主要按鈕組成首頁開頭，再加入 2–3 個有用途的內容區塊與內部連結，圖片補上替代文字。
檢查點 → 第一次來的訪客能看懂網站用途，CTA 點擊後到達正確位置。
Step 4
完成主要 Page 並發布一篇 Post
把關於或主題 Page 補成完整內容；發布一篇有分類的 Post，並從公開網址檢查呈現結果。
檢查點 → 主要 Page 可閱讀，Post 找得到、分類清楚。
Step 5
手機版與訪客視角驗收
用手機版預覽和實際手機檢查選單、圖片裁切、文字寬度與按鈕；請同學從首頁找一項指定資訊，觀察他在哪裡停住並修正。
檢查點 → 手機不需左右滑動，主要按鈕容易找到，能指出一項根據觀察做出的修改。
04 / REFERENCE
操作參考｜需要時再查
必看
開始操作前看重點，完成後用清單自查。
WordPress 從頭到尾完成一個網站
完整示範從規劃、建立頁面與選單、設計首頁到發布內容的整個流程；課堂跟做前後都可以回頭對照。
完整流程示範
在 YouTube 開啟 ↗首頁、內頁與手機版 Before／After 檢核
看訪客是否能理解網站、找到資訊，並完成主要下一步。
Before：三個按鈕同樣醒目。After：標題說明用途 → 短介紹 → 一個主要按鈕；次要資訊移到下方。
05 / DELIVER
本週成果
本週過關目標
一個可從公開網址瀏覽的完整網站：首頁、主要 Page、一篇 Post，手機版可正常使用
勾選供本次瀏覽自我檢核，重新整理後重設。繳交與期限依 Google Classroom 或學校 LMS 公告。
06 / DEBUG
常見問題 / Debug
跟不上示範的速度怎麼辦？
先記下卡住的步驟與畫面，跟上下一個步驟；課後依本頁的步驟與檢查點補完，並把問題帶到下週詢問。
圖片在手機上被裁掉怎麼辦？
檢查圖片比例、裁切焦點與容器高度；調整後同時查看手機與桌面版。
07 / KEEP GOING
下一週，繼續往前。
帶著架好的網站，下一單元學習網站維護與備份，並認識 Codex、Claude Code、Antigravity、OpenCode 等 AI 開發工具的差別。