先接任務，準備開始
內容分清楚，三頁就有方向。
青禾的介紹、作品與服務長大了。先幫內容找到位置，再請 Cursor 協助建立三頁。
這關帶走：一頁介紹，整理成三頁清楚的網站。
步驟 1／6 · 觀念 18 分鐘
先學一招：內容要放在哪一頁
先分配內容，再建立新檔案。
帶上你的裝備
- 第 2 堂正常 portfolio；還沒公開發布也能先做本機練習
沿用自己的正常作品。缺進度才取起始檔；它與第 2 堂完成版一致，不能抵免尚未完成的發布操作。
| 檔案 | 這一頁放什麼 |
|---|---|
| index.html | 林小禾、版面設計、APPA、作品摘要 |
| works.html | 三件作品、三張圖片與說明 |
| services.html | 三項服務與合作入口 |
<header>頁首與品牌</header>
<nav>三頁共用導覽</nav>
<main>這一頁的主要內容</main>
<footer>頁尾說明</footer>跟著觀察
- 在正常頁面指出自介、三項服務與三件作品。
- 親手寫三頁內容分配表，保留姓名、技能與素材。
- 對照 header、nav、main、footer 的用途。
這是你的實際操作確認，小測不會替你勾選。
步驟 2／6 · 實作 42 分鐘
動手挑戰：把一頁整理成三頁
用 AI 協作建立頁面，自己開啟核對。
先準備
- 自己的 index.html、works.html、services.html 與共用 styles.css
這關開始把 assets/ 的三張原創示意圖放進作品頁，不重新生成圖片。先以作品名稱提供基本 alt，下一堂再練習具體描述。
| 檔案 | 這一頁放什麼 |
|---|---|
| index.html | 林小禾、版面設計、APPA、作品摘要 |
| works.html | 三件作品、三張圖片與說明 |
| services.html | 三項服務與合作入口 |
照這個順序開始
- 先保留單頁副本，再在自己的 portfolio 使用下方 Prompt。
- 核對三頁 HTML 與必要 CSS 差異，再儲存。
- 分別開啟 index.html、works.html、services.html，找主標、導覽、作品圖。
建立三頁網站
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的單頁 portfolio/index.html、styles.css
- 實際素材清單：assets/appa.png、work-brand.jpg、work-web.jpg、work-layout.jpg
- 自己寫好的三頁內容分配表：首頁、作品、服務各保留什麼
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 先看 AI 說明與修改差異；若只回覆程式碼，核對檔名與位置再手動存回。不要直接覆蓋其他檔案。
- 3．預期回覆與操作
- 先取得內容分配與新增檔案清單，再看到三頁 HTML 及同一份 CSS 的必要變更。
- 保留 APPA、姓名、技能、三項服務與紫綠配色；現在不加入下一關的兩個新段落。
- 4．自己檢查結果
- 三頁各有一個 h1、header、nav、main、footer。
- 三頁共用 styles.css，作品頁三圖正常，主入口到 works.html。
建立三頁網站 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：沿用自己第 2 堂正常 portfolio；缺進度才把第 3 堂起始包複製到 student-work/portfolio。素材為 assets/appa.png、work-brand.jpg、work-web.jpg、work-layout.jpg。維持 APPA 課堂引導與深紫 #160e2c、亮紫 #6633ff、螢光綠 #caff33；建立 index.html、works.html、services.html，共用 styles.css，無後端。
本次任務：先閱讀我附的 index.html、styles.css、實際素材清單與三頁內容分配表，再把青禾單頁整理成三頁。首頁保留林小禾、版面設計、APPA 及三件作品摘要，原「查看三個練習作品」入口改到 works.html；作品頁放山間咖啡識別、日常選物網站、城市活動版面，分別使用 assets/work-brand.jpg、work-web.jpg、work-layout.jpg，先以作品名稱寫基本 alt；服務頁保留品牌設計、網站設計、活動頁設計及範例信箱 demo@example.com。三頁均有 header、nav、單一 h1、main、footer；導覽明確連到 index.html、works.html、services.html，標示目前頁面。共用 styles.css，保留既有紫綠配色、APPA 比例與減少動態規則，只增加必要圖片樣式與目前頁面提示。先列內容分配及檔案變動，再提供三頁 HTML 和必要 CSS；不要提前加入「練習作品」獨立說明、「合作前請準備」或本人角色文字，不加框架、JS、表單寄送或遠端素材。讓我自己儲存後逐頁檢查。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先看位置與證據
先寫好內容分配表，再貼給 Cursor。
線索 2｜再縮小操作範圍
三張圖用原 assets/ 檔名；不要生成新的品牌或配色。
回到自己的作品，逐項檢查
- 三頁主標與內容分配正確。
- APPA、三圖、共用樣式正常，入口有明確 HTML 檔名。
- 未實際執行的 AI、Git、發布或另一裝置檢查保持待完成。
尚未完成可以先往下看，之後再回來補做。
每一步，都留下自己的成果。
先實際完成上面兩項確認，再記下這一關的修改與結果。也可以先往下閱讀，之後回來補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 3 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 3 堂六步勾選，筆記、另一堂進度與網站檔案保留。