第 01 堂｜做出第一個介紹頁
找到檔案、用 AI 建立頁面，再親手修改自己的內容。
認識你的網站檔案
知道自己開的是哪一份檔案，分清楚內容與外觀。
先準備
- Cursor 免費版
- 瀏覽器
- 本堂練習檔
解壓縮後找到裡面的 portfolio，把整個資料夾複製到自己建立的 student-work 裡，再用 Cursor 開啟它。你要改的是自己的副本。
student-work/
└── portfolio/
├── index.html 網頁的內容
├── styles.css 網頁的外觀
└── assets/ APPA 與作品示意圖HTML：放什麼內容
姓名、介紹、標題、連結，寫在 index.html。
CSS：內容長什麼樣
字級、顏色、間距，寫在 styles.css。
跟著觀察
- 先看完成網站，指出介紹、服務與作品三個區域。
- 在自己的 Cursor 資料夾中找到 index.html、styles.css、assets/。
- 從自己的 portfolio 開啟 index.html。現在看到「我的第一個網站」是正常的起始畫面。
做完，自己確認
- 我能指出自己正在用的資料夾。
- 我知道儲存檔案與重新整理瀏覽器是兩個動作。
用 AI 做出第一個頁面
把需求交給 AI，將回覆存回兩個檔案，看到完整頁面。
先準備
- 自己的 index.html、styles.css
- 實際資料夾結構
- assets/appa.png 保留原位
先在 Cursor 內建 AI 對話附上骨架檔與實際資料夾清單，再貼生成 Prompt，請 AI 協助建立頁面。ChatGPT 作為 Cursor AI 無法使用時的備援。
這一步先保留暫定姓名「範例設計師」與技能「內容整理」，下一輪再親手修改。
跟著做
- 在 Cursor 內建 AI 對話附上自己的兩個骨架檔與檔案清單，再貼下方生成 Prompt。
- 先查看 Cursor 對 HTML 與 CSS 的修改差異，再保留並儲存；若 AI 只回覆程式碼，核對檔名後分別存回對應檔案。
- 儲存兩個檔案，切回自己的瀏覽器分頁，重新整理。
- 檢查三項服務、三個作品摘要、APPA，以及「查看練習作品」連結。
用 Cursor 生成第一個介紹頁
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 portfolio/index.html 與 portfolio/styles.css：附上目前的起始骨架。
- portfolio/ 實際檔案清單：貼成文字，列出 assets/appa.png 與三張作品圖；圖檔保留原位，不必重新生成或上傳圖片。
- 2．貼到哪裡
- 在 Cursor 開啟自己的 student-work/portfolio/，進入內建 AI 對話。
- 在輸入框輸入 @，從建議中選取 index.html、styles.css；確認附的是自己的骨架，再貼上檔案清單與下方 Prompt。
- 使用可用的 Agent 協助修改這兩個檔案；若只收到程式碼回覆，先核對檔名，再分別存回 HTML 與 CSS。
- 3．預期回覆與操作
- 取得完整介紹頁的 HTML、CSS，或看到 Cursor 對這兩個檔案的修改。
- 先查看檔案差異，確認沒有改動 assets/ 或其他專案，再保留並儲存修改。
- 4．自己檢查結果
- 重新整理自己的 index.html，確認介紹、三項服務、三個作品摘要與 APPA 都出現。
- 姓名先保留「範例設計師」、技能先保留「內容整理」；主要連結能跳到作品區。
- 確認紫綠配色與圖片正常；不要把程式碼框的反引號存進檔案。
生成介紹頁 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我已把本堂下載的 portfolio/ 複製到自己的 student-work/portfolio/，並用 Cursor 開啟這個資料夾。內有 HTML／CSS 骨架、assets/appa.png 與三張示意作品圖；這堂只顯示 APPA 與文字作品摘要。所有品牌與聯絡資料都是虛構練習內容。
本次任務：把附上的骨架改成青禾設計工作室的單頁個人介紹網站，只使用 index.html、styles.css 與既有 assets/appa.png，不增加 JavaScript 或外部套件。使用繁體中文、lang="zh-Hant"、viewport、語意 header/nav/main/section/footer，只有一個 h1「把想法整理成清楚的畫面。」；頁首顯示品牌及連到 #services、#works、#contact 的導覽。主視覺左側包含可單獨修改的姓名「範例設計師」、兩句簡介「我整理品牌想說的話，也練習把內容變成網站。」「這裡記錄我的設計服務與練習作品。」、獨立技能欄位「內容整理」，以及 href="#works"、文字「查看練習作品」的主要連結；右側放素材資料夾提供的完整 APPA 透明人物圖，alt 寫「APPA 紫色連帽角色，陪伴學員製作網站」，不把它當設計師本人照片、不重畫、不拉伸或裁切。三項服務為「品牌設計：整理品牌的視覺方向與基本識別。」「網站設計：規劃清楚的頁面內容與閱讀順序。」「版面設計：安排文字、圖片與資訊的先後。」；作品區含三篇文字摘要：「山間咖啡識別：用簡單色彩與字形，練習介紹一間虛構咖啡店。」「日常選物網站：把商品特色整理成容易閱讀的頁面內容。」「城市活動版面：用標題與留白，整理活動資訊的閱讀順序。」。聯絡區使用 mailto:demo@example.com 並明示範例信箱、不保證收信；頁尾明示虛構品牌、APPA 為課堂引導而非學員成果，原創示意作品圖與提供的 APPA 素材來源分開說明。使用本堂的 APPA 配色，建立 :root 色票：--night:#160e2c、--navy:#231146、--violet:#6633ff、--lime:#caff33、--muted:#c3bed2、--lavender:#e7deff、--white:#ffffff、--line:#ffffff26。背景用 night、主文 white、次文 muted、主視覺人物區用 violet、主要連結用 lime 配 navy 文字；服務卡深紫、作品卡淺紫配深紫文字；使用本機系統字型，內文至少 16px，內容最大 1080px 且左右留白，卡片有清楚內距。APPA 圖片顯示完整，桌面寬約 185px、手機約 145px，高度自動；figure 預留浮動空間，CSS 上下移動不超過 6px、週期約 6 秒，不改布局高度；prefers-reduced-motion:reduce 時停動畫。重複說明不另設展開提示，不加無用副標。桌面主視覺兩欄、服務與作品各三欄；未滿 700px 改單欄，320px 也不能水平溢出。圖片保留比例、連結能換行且有可見鍵盤焦點，不用固定高度截斷內容。標記唯一的姓名、技能與第三服務編輯位置；生成後先保留暫定姓名與技能，讓我下一步親手改成林小禾／版面設計。提供完整兩檔、儲存／開啟步驟及驗收項目；不用保證像素相同，需符合上述內容、版面與連結規格。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
看懂內容與外觀
找到姓名、技能與服務各自的位置，知道應該改哪個檔案。
先準備
- 已生成的介紹頁
- Cursor 中的 index.html 與 styles.css
先看一小段就好。標籤包住內容，class 是方便找到區塊的名稱。
<strong class="designer-name">範例設計師</strong>
<strong class="skill-name">內容整理</strong>把標籤中間的文字改掉，內容就會不同；改 CSS 的字級，則改變它看起來的大小。
h1 { font-size: 48px; }姓名與技能
介紹區的兩個獨立欄位，下一步親手修改。
第三項服務
服務區的標題與說明，稍後才請 AI 修改。
跟著觀察
- 在 HTML 搜尋 designer-name，再搜尋 skill-name，對照畫面位置。
- 找到第三項服務，確認它和技能欄位不是同一段。
- 在 CSS 找到 h1 的 font-size，說出這一行改變的是什麼。
做完，自己確認
- 我能分別指出姓名、技能與第三項服務。
- 我能說出 HTML 管內容、CSS 管外觀。
親手修改，再請 AI 延伸
先改兩個文字，再限制 AI 只修改一項服務。
先準備
- 自己的正常版本
- 一份修改前副本
先親手完成兩處修改
姓名
範例設計師 → 林小禾
技能
內容整理 → 版面設計
儲存、重新整理，先確認這兩處已更新。這一段不要交給 AI 代改。
再請 AI 只調整第三項服務
第三項服務改成「活動頁設計」，說明改成「整理活動資訊與報名入口的靜態頁面」。介紹區的技能仍要保留「版面設計」。
跟著做
- 複製正常版本留作備份，親手修改姓名與技能。
- 儲存並重新整理，保存修改前後的畫面或檔案差異。
- 在 Cursor 內建 AI 對話附上目前 HTML，貼延伸修改 Prompt，只處理第三項服務。
- 只套用第三項服務的修改，再確認其他兩項服務、姓名、技能與圖片沒變。
用 Cursor 只修改第三項服務
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 portfolio/index.html：先親手把姓名改成林小禾、技能改成版面設計，再附上這個最新版。
- 目前第三項服務的標題與說明；先保留一份修改前副本。
- 2．貼到哪裡
- 在 Cursor 開啟自己的正常 portfolio，用 @ 選取目前的 index.html。
- 把下方 Prompt 貼到內建 AI 對話，讓可用的 Agent 只修改第三項服務。
- 查看檔案差異；若收到修改片段，核對原文與位置後只替換指定部分。
- 3．預期回覆與操作
- 第三項服務改為「活動頁設計」，說明改為「整理活動資訊與報名入口的靜態頁面」。
- 修改範圍只在 index.html 的第三項服務，不應連帶改動姓名、技能、另外兩項服務、CSS 或圖片。
- 4．自己檢查結果
- 儲存並重新整理，確認第三項服務的標題與說明正確。
- 姓名仍是林小禾、技能仍是版面設計，其他兩項服務與圖片不變。
- 點作品入口，確認原有跳轉仍正常。
修改第三項服務 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我已把本堂下載的 portfolio/ 複製到自己的 student-work/portfolio/，並用 Cursor 開啟這個資料夾。內有 HTML／CSS 骨架、assets/appa.png 與三張示意作品圖；這堂只顯示 APPA 與文字作品摘要。所有品牌與聯絡資料都是虛構練習內容。
本次任務：將第三項服務『版面設計』改為『活動頁設計』，並把該項說明改成『整理活動資訊與報名入口的靜態頁面』。只改這一項文字，保留姓名、其他服務、作品、圖片與樣式。先指出預計改的檔案與區塊，再給最小差異，最後列出如何確認三項服務數量未變。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
看懂圖片為什麼不見
用檔名與資料夾位置解釋圖片路徑。
先準備
- 自己的 HTML
- assets/ 裡的檔案清單
圖片路徑是「從這份 HTML 出發，去哪裡找圖」。
<img src="assets/appa.png" alt="APPA 陪伴學員製作網站">assets/
先進入與 index.html 同一層的 assets 資料夾。
appa.png
找這個實際檔名，包含大小寫與副檔名。
alt 是圖片用途的替代說明，不是讓錯誤路徑自動恢復的設定。
跟著觀察
- 在 Cursor 對照 src 與實際 appa.png 的位置。
- 說出預期應看到什麼、實際看到什麼。
- 練習列出要交給 AI 的證據：HTML、檔案清單與失效路徑。
做完，自己確認
- 我知道不能靠換一張網路圖片掩蓋路徑問題。
- 我能把「圖片壞了」改說成具體的現象與證據。
修好問題，完成檢查
在獨立副本修復圖片，保留正常作品與檢查紀錄。
先準備
- 一份獨立的故障練習
- 正常作品保持不動
把解壓縮後的 portfolio 複製到 student-work/fault-L01/。先觀察，再收集證據；不要拿整份完成版蓋掉故障副本。
完成後，回到自己的正常作品，再做一次同學交叉檢查。
跟著做
- 開啟故障副本，寫下預期、實際現象與失效的圖片路徑。
- 在 Cursor 內建 AI 對話附上故障 HTML、檔案清單與觀察，再貼檢查修正 Prompt。
- 只套用必要修正，儲存、重新整理，檢查圖片與作品連結。
- 請同學看自己的正常作品，確認姓名、技能、三服務、三個作品及手機換行。
用 Cursor 找出圖片路徑問題
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 獨立故障副本 fault-L01/portfolio/index.html。
- 故障副本的實際檔案清單，包含 assets/ 內的檔名、大小寫與副檔名。
- 貼出失效的 src 路徑，以及「預期看到什麼／實際看到什麼」；截圖可選，正常作品保持不動。
- 2．貼到哪裡
- 在 Cursor 開啟自己的 fault-L01 故障資料夾，用 @ 選取故障副本的 index.html。
- 在內建 AI 對話先貼檔案清單與故障現象，再貼下方 Prompt。
- 請 AI 先說明判斷與需要的證據，再只修改故障副本的必要位置；查看差異後儲存。
- 3．預期回覆與操作
- 指出 HTML 的圖片路徑與實際檔名是否一致，說明已知原因與還缺的證據。
- 提供最小修正與重驗步驟，不以遠端圖片、電腦絕對路徑或整份完成版覆蓋故障。
- 4．自己檢查結果
- 重新整理故障副本，確認 APPA 恢復，原有文字與作品連結仍正常。
- 自己能指出實際改了哪個路徑、為什麼要改。
- 回到自己的正常 portfolio 確認未受影響，記下實際結果。
檢查圖片路徑 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我已把本堂下載的 portfolio/ 複製到自己的 student-work/portfolio/，並用 Cursor 開啟這個資料夾。內有 HTML／CSS 骨架、assets/appa.png 與三張示意作品圖；這堂只顯示 APPA 與文字作品摘要。所有品牌與聯絡資料都是虛構練習內容。
本次任務：故障副本中 appa.png 沒有顯示，其他內容正常。請根據我提供的 index.html、檔案樹及實際破圖路徑核對相對位置與大小寫；不猜測新圖片或改用遠端網址。先說明證據支持的原因，再只修 src 或檔名對應。列出修正後重新開啟、重新整理與 alt 的檢查步驟；沒有實測的項目明示待測。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。