少一點體積，保留同一張圖，每一步都有依據。
作品已由projects.js產生，改HTML裡不存在的img不會生效。無損轉碼保留像素，仍須核對檔案體積與實際顯示。
這關帶走：只改photo-03圖片路徑並帶齊本機檔。
先學一招：圖片引用要改到實際資料位置
只改photo-03圖片路徑並帶齊本機檔。
帶上你的裝備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
作品已由projects.js產生，改HTML裡不存在的img不會生效。無損轉碼保留像素，仍須核對檔案體積與實際顯示。
一起拆解：圖片由資料決定路徑
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
photo-03目前使用assets/work-layout.jpg，提供同圖無損WebP素材。
// projects.js只改這筆image
{ id:"photo-03", image:"assets/work-layout.webp" }這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先比較提供的原圖與WebP：相同畫面、像素，檔案體積不同。
- 只替換photo-03.image；把WebP放進同一份作品的assets，保留原JPG備份。
- 重整作品頁核對圖片請求與alt，搜尋、分類與其他六張仍正常。
正常應看到
第七件作品改讀WebP，圖片完整；提供素材的體積對照可另記實際檔案大小。
常見錯誤對照
只在HTML改一個不存在的img，JS重新渲染後不會用到那條修改。
先預測，再說明原因
如果忘了複製WebP，Network會先看到什麼？為何不能刪掉卡片掩蓋？
跟著觀察
- 先讀「圖片由資料決定路徑」的輸入，指出本關實際檔案或資料。
- 如果忘了複製WebP，Network會先看到什麼？為何不能刪掉卡片掩蓋？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
這是你的實際操作確認，小測不會替你勾選。
動手挑戰：少一點體積，保留同一張圖
只改photo-03圖片路徑並帶齊本機檔。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
親手比較原JPG與提供WebP的尺寸與位元組數。
照這個順序開始
- 複製提供的WebP進自己的assets，原JPG保留。
- 只請AI改projects.js中photo-03的image。
- 重整找雨後街角，核對圖片、alt、尺寸與其他六筆保留。
只更新一筆作品圖片引用
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 只請AI改projects.js中photo-03的image。
- 原圖、alt、摘要與其他引用完全保留。
- 4．自己檢查結果
- 只改photo-03圖片路徑並帶齊本機檔。
- 原圖、alt、摘要與其他引用完全保留。
只更新一筆作品圖片引用 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第11堂正常作品集。參考版robots.txt／sitemap.xml使用student-site.example明確樣板，學生必須填自己的HTTPS公開網址才可發布；本教材未替學生部署或取得搜尋報告。提供Google官方文件、匿名虛構報告及photo-03圖片的無損WebP副本，所有未知公開結果保留待測。
本次任務：只將projects.js中id=photo-03「雨後街角」的image由assets/work-layout.jpg改assets/work-layout.webp，使用附上的無損轉碼圖片；原JPG保留，alt、width/height、summary與其他資料不改。不在HTML補重複卡片，不重寫render或其他圖片。記錄提供素材50687→17808 bytes與像素960×640，學生自己的公開引用與手機結果待驗，不能宣稱已發布。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找現象與證據
用唯一id找photo-03，不依目前顯示位置。
線索 2｜再縮小修改範圍
瀏覽器重新整理，核對Network與本機檔一致。
回到自己的作品，逐項檢查
- 只改photo-03圖片路徑並帶齊本機檔。
- 原圖、alt、摘要與其他引用完全保留。
- 未實際完成的AI、發布或裝置驗收記待完成。
尚未完成可以先往下看，之後再回來補做。
保留依據與結果，再帶著作品往下走。
保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 12 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 12 堂六步勾選，筆記、另一堂進度與網站檔案保留。