W. 平台架設與內容產製 / WEB LAB進入課程 ↗

RESOURCES

卡住時，從這裡找答案。

先照本週步驟做，需要時再查對應資料。每週最多三份；不用把文件從頭讀完。

每週精選

必看：操作前重點與完成檢核。卡住再看：官方操作文件。想進一步再看：選用補充。

Week 1｜AI 時代，為什麼還要學網站？前往本週步驟 →

課堂一起觀察四個不同目的的網站，案例與比較表都在 Week 1。

Week 2｜WordPress 1：建站與啟用 Astra前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

網站架設的基本概念 01

先理解網站前端與後端各自負責什麼，以及 WordPress 在架站流程中扮演的角色。

課前影片

在 YouTube 開啟 ↗

申請 WordPress 與決定網站架構

認識 WordPress 的基本介面與建立網站前要先做的架構決定。

課前影片

在 YouTube 開啟 ↗

更改網站圖示

跟著操作設定網站圖示，讓瀏覽器分頁與網站識別更容易辨認。

課前影片

在 YouTube 開啟 ↗
Week 3｜WordPress 2：全站框架與內容類型前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

WordPress 預設編輯器：Page 與 Post 的設定

示範在 WordPress 預設編輯器中如何建立與設定 Page 和 Post，對照兩種內容類型的用途與操作差異。

約 27 分鐘

在 YouTube 開啟 ↗

頁首頁尾與全站設定

示範 Astra 的全站設定，包含頁首、頁尾與整站共用的外觀規則，說明全站設定與單頁設定的差別。

約 28 分鐘

在 YouTube 開啟 ↗
必看 · Cheat Sheet

Sitemap、Page／Post 與全站框架檢核

先決定內容用途和主要入口，再檢查全站樣式與共用頁首頁尾。

地方活動網站：主選單放「活動資訊／參加方式／交通資訊」，固定介紹用 Page，活動紀錄用 Post；首頁可以有不同版面，但全站字體仍一致。

Week 4｜WordPress 3：從頭到尾架好一個網站前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

WordPress 從頭到尾完成一個網站

完整示範從規劃、建立頁面與選單、設計首頁到發布內容的整個流程；課堂跟做前後都可以回頭對照。

完整流程示範

在 YouTube 開啟 ↗
必看 · Cheat Sheet

首頁、內頁與手機版 Before／After 檢核

看訪客是否能理解網站、找到資訊，並完成主要下一步。

Before：三個按鈕同樣醒目。After：標題說明用途 → 短介紹 → 一個主要按鈕；次要資訊移到下方。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

Week 5｜網站維護與備份＋認識 AI 開發工具前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

WordPress 備份

WordPress.com 的更新、清理與備份示範：找到備份、留下備份紀錄，並了解還原入口與還原會覆蓋什麼。

約 15 分鐘

在 YouTube 開啟 ↗

WordPress 與 Vibe coding 的差異

從網站運作、AI 模型與 AI 開發工具的底層邏輯，說明 WordPress 幫你做的事換成 AI 架站後由誰來做，並比較四個 AI 開發工具。

約 14 分鐘

在 YouTube 開啟 ↗
必看 · Cheat Sheet

更新與備份檢核

依「先備份、再更新、再檢查」的順序維護網站，並留下可檢查的備份紀錄。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

卡住再看 · 網頁

Plugin：安裝與選擇 ↗

英文官方操作文件。外掛只留真正需要的；不用的停用後移除，並定期檢查更新。

Week 6｜AI 架站 1：Codex＋GitHub＋Vercel前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

LLM 基礎概念

大型語言模型如何產生文字與程式，以及為什麼需求要寫清楚、結果一定要驗收。

約 18 分鐘

在 YouTube 開啟 ↗

Gemini 生成網站與提示詞工程

示範用 Gemini 產生網站，並說明怎麼寫提示詞，讓 AI 做出符合規劃的頁面。

約 26 分鐘

在 YouTube 開啟 ↗

GitHub 與 Vercel

把網站放上 GitHub 保存版本，再連接 Vercel 部署成公開網址。

約 22 分鐘

在 YouTube 開啟 ↗
必看 · 網頁

GitHub → Vercel 上線檢核 ↗

英文官方操作文件。Import 儲存庫、Deploy、取得公開網址；修改再 Push 後確認新版本。

Codex 建站 → Preview → GitHub Repository → Commit / Push → Vercel Import → Deploy → Public URL

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

Week 7｜Agentic AI 入門：從對話到行動前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

Antigravity 初試身手

跟著示範完成第一次 Antigravity 操作，認識 Agent 協作與基本工作流程。

依 YouTube 影片

在 YouTube 開啟 ↗

Antigravity 安裝設定

示範 Antigravity 的安裝與初始設定，為後續課堂操作準備環境。

依 YouTube 影片

在 YouTube 開啟 ↗
Week 8｜期中測試：Website Challenge前往本週步驟 →
Week 9｜Agentic AI 實作 I：規格、介面與後端功能前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

Week 10｜Agentic AI 實作 II：串接、除錯與部署前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

必看 · Cheat Sheet

把問題說清楚：互動需求與 Debug 範例

先選一個 Quiz、Filter、Search 或 Calculator，測成功、空值與錯誤輸入。

不清楚：幫我改漂亮。具體：手機版 Hero 太高，CTA 被推到首屏外。請只調整 Mobile Layout，桌面版維持原樣。修好後測 390px 寬度。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

想進一步再看

選用補充；不影響本週完成標準。

想進一步再看 · 網頁

改壞了怎麼辦：Instant Rollback ↗

英文官方操作文件。找回先前可用部署；回復部署後仍要修正 GitHub 原始碼，避免下次部署又帶回錯誤。

Week 11｜AI 內容產製：創作、編修與跨平台轉換前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

必看 · Cheat Sheet

Content Brief 與人工修稿範例

寫初稿前先填一句話需求，不把 AI 文字直接貼上發布。

Brief：給第一次參加市集的人，一份交通與準備指南。AI 初稿：「這是全台最受歡迎的市集。」人工修改：刪除無來源的排名，改成有依據的時間、地點與自己的交通觀察。

必看 · Cheat Sheet

AI 文章發布前 Checklist

Research → Brief → Draft → Human Edit → Fact Check → Image → Publish。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

Week 12｜內容可見性與網站上線健檢前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

必看 · Cheat Sheet

Website Audit：先修最影響使用的問題

把問題、證據、修改與 Before / After 留在同一份簡短紀錄。

問題：手機找不到報名按鈕。證據：390px 截圖。修改：縮短 Hero。Before：CTA 在首屏外；After：首屏可見且按鈕能用。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

卡住再看 · 網頁

WordPress Site Health ↗

英文官方文件。WordPress 路線可到工具 → 網站狀態查問題；依影響程度處理，不追求把所有提示一次清空。

卡住再看 · 網頁

Vercel 部署回復 ↗

英文官方文件。AI 網站路線遇到更新造成故障時，找先前正常的版本；GitHub 也要保留修正紀錄。

Week 13｜Final Demo Day前往本週步驟 →

必看

開始操作前看重點，完成後用清單自查。

必看 · Cheat Sheet

5–7 分鐘 Demo Storyline（建議排練）

這是排練建議，正式發表時長與場次仍依教師公告。

六個固定官方資料庫

查詢與備課入口，非額外指定閱讀。先用上方本週精選，還找不到答案時再到這裡搜尋。

卡住再看 · 網頁

WordPress Learn ↗

W2–W5｜依 Beginner、Site Editor、Theme、Plugin 找操作單元，不必整門修完。

卡住再看 · 網頁

OpenAI Codex ↗

W6–W7｜查當學期最新介面與使用方式。

卡住再看 · 網頁

Vercel Docs ↗

W6–W7、W12｜查部署、Git、Environment Variables、Rollback。