傳統教材 vs. 互動教材 投影片 3

對老師與學生各自創造什麼價值 投影片 4

生成式 AI 負責什麼，老師負責什麼

一句話：AI 降低「製作門檻」，教學設計決定「學習價值」。

先定義「學什麼」，不要先叫 AI 做網站 投影片 11

學習目標要寫成「看得到的行為」。用可觀察的動詞：判斷、分類、計算、說明、選擇。避免「了解、認識、熟悉」，因為你沒辦法從畫面上看出學生有沒有「了解」。

本課案例：投資風險 10 分鐘微課程 投影片 7

整個工作坊用同一個例子走完：先「照抄」完成一次，再換成你自己的教材。

隨堂小測

三個角色先記住 投影片 38

流程記成一句：AI 改內容 → GitHub 存版本 → Cloudflare 發布給學生。

字卡：先回想，再翻面

名詞對照表 投影片 39

配對遊戲

隨堂小測

① 即時回饋選擇題 投影片 5

最基本也最有效。關鍵是答錯也要顯示解析，而且解析要說「為什麼」，不是只說「正確答案是 B」。

② 分類判斷活動

對應學習目標中的「判斷」。學生每點一次就得到一句理由，比一次做完再對答案更能修正想法。

③ 教材與題目互相連結

這是讓網站真正比紙本好用的設計。每段課文有編號，每題標註「出處段落」。答錯時，網站直接帶學生回到該段複習；讀完某段，也能一鍵跳到對應題目練習。

④ 字卡

用來記名詞、公式、法條。完整示範在 單元 2 的字卡：先回想再翻面，按「會了／再複習」，只看未熟的卡片。適合放在課前預習或課後複習，學生用手機就能做。

⑤ 滑桿模擬

當概念是「一個變數改變，結果怎麼變」，滑桿比文字清楚十倍。拖動看看：持股越多，總風險下降，但會停在一條降不下去的線，那就是系統性風險。

⑥ 情境分流

讓學生做決定，再看到決定的後果。不同選擇走不同路徑，最後都回到核心概念。適合倫理、法規、客服、投資決策等「沒有唯一路徑」的主題。

⑦ 排序題

用來記流程與步驟，例如實驗步驟、行政流程、本課的上線流程。

隨堂小測

任務規格：10 分鐘微課程 投影片 10

老師手上的原始教材 投影片 12

練習時，請換成你自己課程中「學生最常搞混」的一段。不用重寫，直接拿現有講義的一段。

可直接複製的 Prompt 投影片 13

Prompt 的結構：對象是誰 → 網站包含哪些區塊 → 學習目標（單元 1 寫的那句）→ 設計要求 → 技術要求 → 教材。前五行掌握教學結構，最後一行換成你的內容。

Prompt 產生器：填表就生成你的 Prompt

不想自己改 Prompt？填下面的表，右邊會即時生成完整 Prompt，按「複製」貼給 AI 即可。勾選的互動會自動加上對應的規格（例如教材題目互連、字卡大字）。

跟著做：把 Prompt 交給 AI 投影片 14

1. 貼上 Prompt＋教材並送出投影片 14

   在 ChatGPT、Claude 或 Gemini 的對話框貼上 Prompt（含教材），按送出。Prompt 很長沒關係，一次貼完整比分好幾次貼更穩定。

   我完成了
2. 複製 AI 產生的完整程式碼投影片 15

   AI 會回覆一大段以 <!DOCTYPE html> 開頭的程式碼。按程式碼區右上角的「複製」。確認開頭是 <!DOCTYPE html>、結尾是 </html>。

   成功長這樣程式碼最後一行是 </html>，中間沒有「……（省略）」這類字樣。
   卡住怎麼辦AI 中途停住（沒有 </html>）：輸入「請繼續，從中斷處接著寫完」。AI 只給部分程式碼或寫「其餘同上」：回覆「請輸出完整、可直接存檔的 index.html，不要省略任何部分」。
   我完成了

AI 產生後的五項驗收 投影片 16

不會寫程式也能改：驗收語言句庫

發現問題時不需要看懂程式碼，只要用白話描述「問題＋期待結果」，請 AI 回傳修改後的完整檔案。點任一句即可複製。

隨堂小測

1. 開啟記事本，貼上程式碼

   Windows：開始 → 輸入「記事本」→ 開啟 → Ctrl＋V 貼上。
   Mac：建議使用 VS Code；若用「文字編輯」，請先按「格式 → 製作純文字」，否則會存成 RTF 格式。

   先在桌面建立資料夾 risk-course，之後整個資料夾會被上傳。

   我完成了
2. 另存新檔為 index.html投影片 17

   檔案 → 另存新檔，進入 risk-course 資料夾：① 檔名輸入 index.html　② 存檔類型選「所有檔案 (*.*)」　③ 編碼選 UTF-8（中文才不會變亂碼）　④ 存檔。

   我完成了
3. 確認副檔名正確投影片 18

   開啟檔案總管進入 risk-course：檢視 → 顯示 → 勾選「副檔名」。類型應顯示為 HTML 文件。按兩下用 Chrome 開啟。

   卡住怎麼辦看到 index.html.txt：在檔名上按右鍵 → 重新命名 → 刪掉 .txt → 系統詢問是否變更副檔名時選「是」。不需要重新請 AI 產生程式。
   我完成了
4. 本機測試：完成一輪「學生旅程」投影片 19

   網址列顯示 file:///，表示這是你電腦裡的檔案，還沒上網，別人看不到。從首頁按「開始學習」一路做到最後：看概念 → 看案例 → 判斷活動 → 測驗 → 看結果。

   成功長這樣手機版也可以先測：在 Chrome 按 F12 → 點左上角手機圖示，就能模擬手機畫面。
   我完成了
5. 故意答錯，檢查回饋投影片 20

   至少故意答錯兩題。確認錯誤時有出現解析而不是空白；「下一題」可以按；最後能看到分數。最後按 F5 重新整理一次，確認網站仍正常。

   我完成了
6. 交換測試

   請旁邊同學操作，不要先解釋。觀察他在哪一步停住，記下一個最需要改的地方，用 驗收語言 請 AI 修改。

   場域驗證問題不要只問「好不好看？」，請問「你在哪一步不知道要做什麼？」這個問題最容易找到真正的介面問題。
   我完成了

常見問題速查

隨堂小測

註冊與登入

1. 開啟註冊頁並填資料投影片 22

   前往 dash.cloudflare.com/sign-up。① 填入可即時收信的 Email　② 設定密碼（至少 8 碼，含數字與符號）　③ 按 Sign up。也可以用 Google 帳號直接註冊（Continue with Google）。

   我完成了
2. 到信箱完成驗證投影片 23

   打開 Cloudflare 寄來的「Please verify your email address」，按 Verify email address。看到驗證成功後回到 Cloudflare。

   卡住怎麼辦先查「垃圾郵件」；5 分鐘仍未收到再按重寄。學校信箱常擋驗證信，改用 Gmail；或先與鄰座同組，課後再補做。
   我完成了
3. 登入 Dashboard投影片 24

   前往 dash.cloudflare.com/login，輸入 Email、密碼，按 Log in。登入後若跳出「選擇方案／加入網域」引導頁，直接略過（本課不需要網域）。

   我完成了

建立 Pages 專案

1. 進入 Workers & Pages投影片 25

   左側選單找到 Workers & Pages（新版介面收在「Compute (Workers)」分類下）。找不到時，用上方搜尋框輸入「Pages」。

   我完成了
2. 按 Create application投影片 26

   右上角藍色按鈕 Create application。第一次進來列表是空的，這是正常的。

   我完成了
3. 最容易迷路的一頁：切換到 Pages投影片 27

   這一頁預設顯示 Workers 選項，本課程先不用。往下找到「Looking to deploy Pages?」旁的 Get started。

   卡住怎麼辦不要點上面的 Upload static files（那是 Workers）。
   我完成了
4. 選 Drag and drop your files投影片 28

   LEVEL 1 選右邊 Drag and drop your files → Get started。左邊 Import an existing Git repository 是 LEVEL 2（單元 8）使用。

   重要限制Direct Upload 專案日後不能直接切換成 Git integration；要改成 Git 整合，必須另建新的 Pages 專案。長期教材最好一開始就決定是否需要 Git。
   我完成了
5. 輸入專案名稱投影片 29

   Project name 輸入英文小寫、數字與連字號，例如 risk-course-demo。下方會顯示未來網址 risk-course-demo.pages.dev。按 Create project。

   卡住怎麼辦名稱已被使用時，Cloudflare 會在網址後自動加一段亂碼（例如 risk-course-demo-3xk.pages.dev），一樣可以用；想要好記的網址就換名稱。
   我完成了

上傳、部署、取得網址

1. 拖入資料夾並部署投影片 30

   把桌面上整個 risk-course 資料夾拖進虛線框（或 select from computer → Upload folder）。確認清單中出現 index.html，按 Deploy site。

   卡住怎麼辦打開網址顯示 404：資料夾「最上層」就要有 index.html，不要多包一層資料夾。
   我完成了
2. 成功！取得網址投影片 31

   出現 Success! 後點網址打開。第一次可能需要 1–2 分鐘生效，看到錯誤頁請稍候重新整理。按 Continue to project 進入專案頁，之後改版也從這裡進入。

   成功長這樣用另一台裝置（手機）打開網址，能從首頁一路做到測驗結果。
   我完成了
3. QR Code 交換測試投影片 32

   Chrome 打開你的網址 → 網址列右側「分享」圖示 → QR 圖碼 → 下載。投影或貼在講義上，讓同學掃描試用，問他：「你在哪一步不知道要做什麼？」記下 1 個改善建議。

   我完成了
4. 改版：Create deployment投影片 33

   在本機改好 index.html（覆蓋原檔）→ 進入專案頁 → 按 Create deployment → 選 Production → 再拖一次資料夾 → Save and Deploy。舊版本保留在 All deployments 列表中。網址不變，學生重新整理就看到新版。

   我完成了

什麼時候 Direct Upload 就夠？ 投影片 34

隨堂小測

為什麼需要 GitHub 投影片 37

註冊與登入

1. 填寫註冊資料投影片 40

   前往 github.com/signup。① Email　② 密碼（15 碼以上，或至少 8 碼且含數字與小寫字母）　③ Username：英數與連字號，會出現在網址中，例如 teacher-han　④ Continue。接著有「我不是機器人」小謎題，完成後 GitHub 寄 8 位數驗證碼到信箱。

   我完成了
2. 輸入信箱驗證碼投影片 41

   輸入 8 位數驗證碼 → Continue。之後的問卷（團隊人數、用途）可略過，方案選 Free。

   我完成了
3. 登入 GitHub投影片 42

   前往 github.com/login，輸入帳號或 Email、密碼 → Sign in。新電腦登入時 GitHub 可能寄驗證碼（Device verification），照指示輸入。

   卡住怎麼辦機構帳號或學校網路可能限制 GitHub。若無法建立 Repository，改用個人帳號，或在課堂改看講師示範。
   我完成了

建立 Repository 並上傳

1. 開啟 New repository投影片 43

   右上角「＋」→ New repository（左側綠色 New 按鈕也可以），或直接前往 github.com/new。

   我完成了
2. 設定 Repository投影片 44

   ① Repository name：risk-course（出現綠色勾勾代表可用），Description 可寫中文。② Visibility：Public＝任何人可看原始碼；Private＝只有你和協作者。兩者都能部署到 Cloudflare，教材含未公開題庫請選 Private。③ 按 Create repository。

   卡住怎麼辦「Add README」先不要開，空的 Repo 才會出現下一步的上傳連結。
   我完成了
3. 點「uploading an existing file」投影片 45

   建立後會看到 Quick setup 頁面，點藍字 uploading an existing file。下方灰色指令區是給工程師用的，本課不用理會。

   我完成了
4. 拖入檔案並 Commit投影片 46

   把 risk-course 資料夾裡面的 index.html（和圖片等檔案）拖進來，不是拖外層資料夾。Commit message 寫清楚，例如「建立第一版：投資風險微課程」。選 Commit directly to the main branch → Commit changes。

   我完成了
5. 確認上傳成功投影片 47

   index.html 出現在檔案列表；點「1 Commit」可看所有版本；目前位於 main 分支（正式版）。

   成功長這樣Repo 首頁看到 index.html，最上方顯示你的 Commit 訊息。你已經有第一個可回復的版本。
   我完成了

線上修改與版本回復

1. 點鉛筆圖示進入編輯投影片 48

   在檔案列表點 index.html → 右上角鉛筆圖示（Edit this file）。用 Ctrl＋F 找到要改的文字直接修改，也可以把 AI 給的新版全文貼上覆蓋。

   我完成了
2. Commit changes投影片 49

   改完按右上角綠色 Commit changes…：Commit message 寫「修改第 3 題解析：補充受影響產業」；小修改直接 Commit 到 main，大改版建立新分支（單元 8）。

   Commit 訊息不要寫 update請寫「修改第 3 題解析」「新增手機版導覽」「更換首頁案例」，半年後才看得懂版本歷史。
   我完成了
3. 查看歷史與回復投影片 50

   在 Repo 首頁點「N Commits」：每次修改都是一筆紀錄。按「<>」可瀏覽當時的完整版本；點 index.html → Raw 複製舊版內容，貼回去再 Commit 一次，就完成回復。

   我完成了

隨堂小測

從「手動上傳」變成「自動發布」 投影片 51

以前：改檔 → 手動上傳 Cloudflare。現在：改 GitHub → Cloudflare 自動部署。GitHub 成為主要來源。

連線設定

1. 選 Import an existing Git repository投影片 52

   依單元 6 進入 Workers & Pages → Create application → Pages，這次選左邊 Import an existing Git repository → Get started。

   我完成了
2. 在 GitHub 授權 Cloudflare投影片 53

   第一次會看到 Connect GitHub，按下後跳到 GitHub 授權頁：① 選 Only select repositories　② 只勾 risk-course　③ Install & Authorize，完成後自動回到 Cloudflare。

   安全原則能只授權指定 Repo，就不要一次開放全部。
   我完成了
3. 選擇 Repository投影片 54

   確認 GitHub account 是你的帳號 → 點選 risk-course → Begin setup。

   卡住怎麼辦清單裡沒有 risk-course？按 Add account／Configure，回 GitHub 把這個 Repo 加入授權。
   我完成了
4. Build 設定：純 HTML 照抄投影片 55

   欄位	填什麼
   Project name	risk-course（＝網址 risk-course.pages.dev）
   Production branch	main
   Framework preset	None
   Build command	留空（若系統要求必填，輸入 exit 0）
   Build output directory	/（index.html 就在 Repo 最上層；留空亦可）

   按 Save and Deploy，等待約 1 分鐘。

   我完成了
5. 確認自動部署投影片 56

   專案頁顯示正式網址。之後每次在 GitHub Commit 到 main，All deployments 就自動多一筆，約 1 分鐘後網站更新。測試：回 GitHub 用鉛筆改一個字並 Commit，再回來看列表。

   我完成了

Preview：先測試，再發布

案例情境：你想新增第 6 題「關稅情境」，但學生正在使用網站，不能邊改邊壞。Preview 的核心價值，是把「修改」與「正式發布」分開。

1. 建立分支 quiz-update-oct投影片 57

   Repo 首頁點分支選單 main ▾ → 輸入新分支名稱 quiz-update-oct → 點「Create branch quiz-update-oct from main」。

   我完成了
2. 在分支上修改並 Commit

   確認分支選單顯示 quiz-update-oct → 點 index.html → 鉛筆 → 貼上 AI 修改後的新版 → Commit changes。畫面與單元 7 相同，唯一差別是分支名稱。

   我完成了
3. 在 Cloudflare 看到 Preview投影片 58

   Cloudflare 自動為分支建立 Preview 部署，網址以分支名稱開頭：quiz-update-oct.risk-course.pages.dev。正式版完全不受影響。

   我完成了
4. 開 Pull Request、驗收、合併投影片 59

   GitHub 出現黃色提示「quiz-update-oct had recent pushes」→ Compare & pull request → Create pull request。Cloudflare 機器人會在 PR 留言 Preview URL，點開逐頁、逐題、用手機測試。確認沒問題後按 Merge pull request → Confirm merge。Merge 後 main 更新，Cloudflare 自動發布到正式網址。

   我完成了

模擬器：看懂 Commit、Branch、Preview、Merge

不用真的帳號，按按鈕就能看到每個動作對「正式版」與「測試版」造成什麼影響。

隨堂小測

三問判斷法：我該升級嗎？ 投影片 60

LEVEL 3：教材 Agent 團隊 投影片 62

推薦工作流：新資料 → Agent 產生修改 → GitHub branch → Cloudflare Preview → 品質檢查 → 教師確認 → merge main → Production。

LEVEL 4：從一個網站到品牌經營

當網站有固定受眾、固定主題、持續更新，它就開始成為品牌資產。這時要思考的不是單頁好不好看，而是入口、命名、導覽、更新規則與可信度。

自訂網域：pages.dev 很適合原型與工作坊；網站成為長期品牌時，可在 Cloudflare Pages 專案的 Custom domains 分頁設定。根網域與子網域的 DNS 設定不同，依 Cloudflare 當下指引操作；使用學校網域需先洽詢資訊中心。

同一位老師的成長路徑 投影片 63

隨堂小測

品質公式 投影片 64

教材網站品質 ＝ 內容正確 × 教學設計 × 互動價值 × 操作體驗 × 驗證。拖動滑桿看看：把任一項拉到很低，總分會怎樣？

發布前 10 個檢查點 投影片 65

卡關救援表 投影片 66

原則：不要讓一個帳號問題拖住全班。輸入關鍵字快速查找。

講師帶領節奏 投影片 67

每一段都固定使用同一個循環：① 我先示範 → ② 大家跟做 → ③ 停下檢查 → ④ 兩人互測 → ⑤ 修正一次 → ⑥ 再往下一步。每個操作段 10–15 分鐘；投影一張操作畫面只做一個動作；助教巡場時直接對照「成功長這樣」檢查。

每段都要有可見成果：本機網站（file:///）、pages.dev 網址、GitHub Commit、Preview URL。

講師課前檢查清單 投影片 71

• 工作坊前一天完整跑一次所有操作畫面
• AI／Cloudflare／GitHub 可登入；驗證信可收到；網站不被校園網路阻擋
• 備用 index.html（案例完成版）與已部署網址、Prompt 紙本、學員講義與 QR Code
• 每 4–6 人至少一位助教

隨堂小測

隨堂小測

總測驗

期末任務：30 分鐘做出自己的實用網站 投影片 68

最後一段不再跟做，改成真正應用：把 Prompt 產生器 的【教材】換成你的，其餘步驟照單元 5、6 再走一次。完成後到 作品分享牆 送出你們這組的網址（每組只能送一次）。

完成標準

成果互評：每人只給三句話 投影片 69

1. 我知道要做什麼嗎？第一次打開網站，是否知道下一步？
2. 互動有幫助嗎？互動是否讓我更理解，而不是只增加按鈕？
3. 最值得改哪一點？只給一個最重要的建議。

操作網址速查