◆這一課會用到的工具
每一項都可以免費開始。如果你在操作當天發現某個工具改成付費，直接改用清單裡的其他免費工具，不需要為了作業付費。
- Claude免費可開始
長文件閱讀、長篇整理、格式穩定的輸出、網頁草稿
- ChatGPT免費可開始
對話、文案、摘要、腳本、辦公文件、網頁草稿
1教材
先讀一遍，不用背，看得懂就好。
很多人聽到「做網頁」就先舉手投降，覺得那是工程師的事。這一課要拆掉這個心理障礙。網頁其實就是一份「會排版的文件」 — 它是一個檔案，副檔名是 .html，你用瀏覽器打開它，就會看到有標題、有圖、有按鈕的畫面。今天你不會寫任何一行程式，你只會做兩件事：用中文把需求講清楚，以及複製貼上。
整個流程只有五步，請先把它背起來：描述需求 → 產出 → 預覽 → 修正 → 發佈。這五步跟我們前面學過的所有 AI 應用完全一樣，差別只在成品從文字換成了網頁。第一次做完大概二十分鐘，之後每次改版只要幾分鐘。
第一步「描述需求」是決定成敗的一步。一個能用的網頁需求描述要講清楚六件事：這個網頁是給誰看的、要達成什麼目的（讓人聯絡我／讓人看到我的作品／讓人報名）、要有哪幾個區塊、每個區塊要放什麼內容、風格與色調、以及手機上要看得清楚。第六點特別重要，因為大多數人是用手機打開你的網頁的。
第二步「產出」很單純：AI 會給你一大段看起來像亂碼的英文與符號，那是網頁的原始碼。你完全不需要看懂它。你只要知道兩件事 — 它是純文字，而且它必須被完整複製，從第一個字元到最後一個字元，一個都不能漏。
第三步「預覽」有兩種做法，選一種你順手的。第一種：有些 AI 工具會在對話旁邊直接開一個預覽視窗，程式碼一產生就能看到成品，改一句話畫面就跟著更新，這是最快的方式。第二種：把程式碼貼進電腦內建的純文字編輯器（Windows 的記事本、Mac 的文字編輯），存成一個檔案，然後用瀏覽器打開它。
存檔這一步有三個新手一定會踩的坑，先講清楚就不會卡住：一、檔名結尾必須是 .html，不能是 .txt，例如「mypage.html」；二、存檔類型要選「所有檔案」，不要讓系統偷偷幫你加上 .txt；三、編碼要選 UTF-8，否則中文會變成一堆問號或亂碼。存好之後，在檔案上點兩下，它就會用瀏覽器打開 — 那就是你的網頁。
第四步「修正」延續我們一貫的原則：一次只改一個地方，而且用「使用者的話」描述，不要用技術術語。你不需要說「把 padding 調成 24px」，你只要說「上面那塊的留白太擠，請放寬一點」「按鈕顏色太暗，改成溫暖一點的橘色」「手機上標題會被切掉，請縮小字級」。AI 看得懂你的中文形容。
第五步「發佈」是很多人卡住的地方，因為它牽涉三個新名詞，我用白話解釋：檔案要放在一台永遠開著的電腦上，這叫「主機／託管」；別人要有一個地址才找得到你，這叫「網域」，就是那串 www 開頭的網址；把檔案送上去的動作叫「上線」。對零基礎的人來說，最簡單的做法是使用支援「把檔案直接拖曳上傳」的免費靜態網頁託管服務，拖進去就會給你一個網址，不需要安裝任何東西。
有幾件事請務必守住。第一，網頁是公開的，不要在上面放身分證號、住家地址、私人手機這類個資，聯絡方式建議用一個專門的信箱或表單。第二，AI 幫你寫的內容（營業時間、價格、服務範圍、法規說明）一定要逐項核對，這正是課程鐵則：AI 的答案會影響決策時，一定要自己查證 — 網頁是對外的，寫錯就是對外承諾錯了。第三，把最終的檔案自己留一份備份，未來換工具、換平台都不怕。
最後給你一個很實際的期待管理：AI 做出來的單頁網頁，非常適合作品集、個人簡介、活動報名頁、店家資訊頁、課程介紹頁這種「一頁講完一件事」的用途。如果你需要的是會員登入、線上金流、庫存管理，那已經是另一個層級的系統，該找專業的人或用現成的平台，不要硬做。知道界線在哪裡，跟會做本身一樣重要。
2實作示範
- 打開瀏覽器，網址列輸入 claude.ai（或 chatgpt.com），畫面停在已登入的對話首頁 2 秒，口白說明今天全程只用瀏覽器。
- 滑鼠點一下輸入框，逐字輸入完整需求：「請幫我做一個單頁網頁，用純 HTML 與 CSS 寫在同一個檔案裡，不要用任何外部連結的檔案。主題是我的個人烘焙工作室。訪客是想訂購手工蛋糕的人。需要五個區塊：主視覺標題、關於我、三項服務、常見問答、聯絡方式。風格溫暖、乾淨、米色系。手機上也要好讀不跑版。請把完整程式碼一次給我。」按 Enter。
- 原始碼開始逐行出現，鏡頭不動 5 秒，口白強調：這一大串你完全不需要看懂，我們只需要它完整。
- 如果工具旁邊出現預覽視窗，滑鼠移過去，畫面呈現成品網頁，上下捲動一次讓學員看到五個區塊都在。
- 示範修正第一次：回到輸入框輸入「主視覺的標題太小，請放大，並在標題下面加一句一行的說明文字。其他區塊都不要動。」按 Enter，等預覽更新後對照前後差異。
- 示範修正第二次：輸入「聯絡方式那一區太空，請加上一個明顯的按鈕，按鈕文字是「寫信給我」。其他不要動。」按 Enter，滑鼠指向新出現的按鈕。
- 示範手機檢查：在瀏覽器視窗右邊緣按住滑鼠左鍵，把視窗拖窄成手機寬度，展示版面自動堆疊、文字沒有被切掉。
- 滑鼠移到程式碼區塊右上角的「複製」按鈕點一下，畫面出現已複製的提示。
- 按下 Windows 鍵搜尋「記事本」並開啟，在空白視窗按 Ctrl+V 貼上，畫面出現滿滿的原始碼。
- 點選「檔案」→「另存新檔」，在存檔視窗中：檔名輸入 mypage.html、存檔類型下拉選「所有檔案」、編碼下拉選 UTF-8，滑鼠依序停在這三個欄位各 2 秒，然後按「存檔」。
- 打開存檔的資料夾，在 mypage.html 上點兩下，瀏覽器自動開啟，畫面出現完整的網頁成品，捲動一次展示五個區塊與中文顯示正常。
- 切到瀏覽器新分頁，開啟一個支援拖曳上傳的免費靜態網頁託管服務首頁，把 mypage.html 所在的資料夾拖進上傳區，畫面出現一組新網址。
- 滑鼠複製該網址，貼到手機或另一個分頁開啟，展示同一個網頁在別的裝置也打得開，字幕壓上：「這就是上線。」
- 最後回到 AI 對話輸入：「請列出這個網頁對外發布前我該逐項核對的內容清單。」畫面停在回覆上，字幕壓上：「內容正確，永遠是你的責任。」
3可直接複製的提示詞
按一下就能複製，貼到 AI 的輸入框裡直接用。
請幫我做一個單頁網頁，用純 HTML 與 CSS 寫在同一個檔案裡，不要連結任何外部檔案。主題是（你的主題），訪客是（你的目標對象），目的是（讓對方聯絡我／看到我的作品／線上報名）。需要五個區塊：主視覺標題、關於我、三項服務或作品、常見問答、聯絡方式。風格（溫暖乾淨米色系），手機上也要好讀不跑版。請把完整程式碼一次給我。
主視覺的標題太小，請放大，並在標題下方加一句一行的說明文字。其他區塊、顏色、排版全部不要動，請把完整程式碼重新給我一次。
請幫我寫這個網頁五個區塊的文字內容：主視覺一句標語（20 字內）、關於我（100 字內）、三項服務各一個標題與兩句說明、五題常見問答、聯絡區一句邀請語。語氣親切專業，不要誇大不實的宣傳詞。
請檢查這個網頁在手機上的顯示：字級是否夠大、按鈕是否好按、區塊是否會自動上下堆疊、圖片是否會超出畫面。請直接修正並把完整程式碼給我，不要只說明。
我要把這個單頁網頁公開發布。請列出發布前的逐項核對清單，至少包含：文字內容是否有錯誤或誇大、營業或服務資訊是否正確、有沒有不該公開的個人資料、聯絡方式是否可用、手機顯示是否正常，每項用一句話說明我該怎麼確認。
4換我試試
不寫程式，用 AI 做出一個屬於你自己的單頁網頁，完成預覽與兩次修正，存成可以雙擊打開的 .html 檔案，並完成發布前的內容核對。
- 打開瀏覽器進入 claude.ai 或 chatgpt.com，用你的 email 註冊或登入。
- 先想清楚六件事並寫在紙上或記事本：網頁給誰看、要達成什麼、要哪五個區塊、每區放什麼、風格色調、手機上要好讀。
- 把上面六件事填進本課的「單頁網頁完整需求」提示詞送出，等 AI 產出完整程式碼（如果它中途停下，回覆「請接續剛才中斷的地方繼續，直到結束」）。
- 用工具旁邊的預覽視窗看成品；若沒有預覽，先跳到第 6 步存檔後用瀏覽器打開來看。
- 做兩次修正，每次只改一個地方，用你自己的話描述，例如「標題太小請放大」「聯絡區加一個明顯的按鈕」，並要求 AI 每次都把完整程式碼重新給你一次。
- 按程式碼區塊的複製按鈕，開啟記事本貼上，選「檔案」→「另存新檔」，檔名輸入 mypage.html、存檔類型選「所有檔案」、編碼選 UTF-8，按存檔。
- 在檔案上點兩下用瀏覽器打開，確認五個區塊都在、中文沒有亂碼；接著把瀏覽器視窗拖窄成手機寬度，確認版面會自動堆疊、文字沒被切掉。
- 選擇性進階：把檔案拖到一個支援拖曳上傳的免費靜態網頁託管服務，取得一組網址，用手機開啟確認可以正常瀏覽。
- 完成發布前核對：逐項確認文字有沒有寫錯、服務與時間資訊是否正確、頁面上有沒有不該公開的個資、聯絡方式是否真的可用，把核對結果寫成四行筆記。
- 最後把 mypage.html 複製一份到另一個資料夾當備份，命名為「我的網頁_v1_備份.html」。
5你應該會做出什麼
- 你的電腦裡有一個 mypage.html 檔案，點兩下會用瀏覽器打開，畫面上出現五個區塊：主視覺標題、關於我、三項服務或作品、常見問答、聯絡方式。
- 網頁上的中文全部正常顯示，沒有問號或亂碼 — 因為你在存檔時把編碼選成了 UTF-8。
- 你可以把瀏覽器視窗拖窄成手機寬度，看到版面自動上下堆疊、標題不會被切掉、按鈕仍然好按。
- 你做過兩次修正，而且能明確說出每一次改了什麼、畫面上哪裡不同 — 因為你遵守了「一次只改一個地方」。
- 你的筆記上有四行發布前核對結果：內容正確性、服務資訊正確性、有無外洩個資、聯絡方式是否可用。
- 你有一份「我的網頁_v1_備份.html」備份檔，即使之後改壞了也隨時可以回到這個版本。
- 如果你完成了進階步驟，你手上有一組真的可以傳給別人的網址，用手機打開也看得到同一個網頁。
6隨堂測驗
選一個答案，馬上看到解析。答錯也沒關係，解析才是重點。
你把 AI 給的網頁原始碼貼進記事本，存成「mypage.txt」，點兩下打開後只看到滿滿的英文與符號，不是網頁畫面。最主要的原因是什麼？
7這一課的重點筆記
- 網頁＝一份會排版的文件；一個 .html 檔案，用瀏覽器打開就是成品。
- AI 建站五步：描述需求 → 產出 → 預覽 → 修正 → 發佈。
- 需求要講清楚六件事：給誰看、要達成什麼、哪幾個區塊、每區內容、風格色調、手機好讀。
- 原始碼不需要看懂，但必須完整複製，一個字元都不能漏。
- 預覽兩條路：AI 內建預覽視窗（最快）／貼進記事本存檔後用瀏覽器打開。
- 存檔三個坑：檔名結尾要 .html、存檔類型選「所有檔案」、編碼選 UTF-8。
- 修正原則：一次只改一個地方，用白話描述，不必用技術名詞。
- 發佈白話版：託管＝放在一直開著的電腦上；網域＝你的網址；上線＝把檔案送上去。
- 最簡單的發佈方式：可拖曳上傳的免費靜態網頁託管服務，不需安裝任何東西。
- 網頁是公開的：不要放個資，聯絡方式用專用信箱或表單。
- 鐵則：AI 寫的營業時間、價格、規定會影響決策，一定要自己逐項查證。
- 界線：作品集、簡介、報名頁很適合；會員登入、金流、庫存請找專業或用現成平台。
這一課對你有幫助嗎？
你的回饋會直接影響我們接下來要先改哪一課。不需要留下姓名或 email。