先接任務，準備開始
讓看不到圖片的人，也讀懂內容。
圖片不只是檔名。讓 AI 整理建議，再親手替每張圖補上它真正傳達的內容。
這關帶走：替三張作品圖寫符合畫面的說明。
步驟 1／6 · 觀念 18 分鐘
先學一招：圖片說明要符合實際畫面
描述圖片傳達的內容，分清作品與 APPA。
帶上你的裝備
- 第 3 堂正常三頁網站
- 三張實際圖片
第 3 堂已有基本 alt，這堂練習寫得更具體。APPA 是陪你學習的角色，不是設計師本人；只有重複裝飾才用空 alt。
<img src="assets/work-brand.jpg"
alt="米色底上的深綠圓框與山形標誌，山間咖啡識別示意">跟著觀察
- 在瀏覽器開啟三張原始圖片。
- 比較原 alt 與圖片實際資訊。
- 在素材表記下檔名、用途、來源與想改善的文字。
這是你的實際操作確認，小測不會替你勾選。
步驟 2／6 · 實作 42 分鐘
動手挑戰：親手改善三張圖片的說明
用 AI 整理建議，自己逐張核對與修改。
先準備
- 自己的 index.html、works.html、services.html 與共用 styles.css
- assets/ 的實際檔案清單
- 三張實際圖片／縮圖與素材來源
- 本堂 HTML Git 指南
這份生成 Prompt 只產出檢查表，不修改網站，也不建立版本紀錄。三張 alt 由自己親手修改，符合圖像即可，不要求逐字一樣。
照這個順序開始
- 附檔並取得圖片、路徑與建議清單。
- 親手改三張作品圖 alt，確認主頁 APPA 描述仍正確。
- 逐頁檢查圖片及六條導覽，將結果記入筆記。
整理圖片與路徑檢查表
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 index.html、works.html、services.html 與共用 styles.css
- assets/ 的實際檔案清單
- 三張實際作品圖片或可讀縮圖，以及素材來源／用途；素材說明見本關指南。
- 本堂 HTML Git 指南文字，說明用途即可，不執行命令。
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 要求只回覆清單，不讓 AI 自動套用修改或執行命令；完成後自己動手修改 alt。
- 3．預期回覆與操作
- 取得各頁圖片、路徑、現有 alt、改善建議與待驗欄位。
- 只回覆建議與清單，不改檔、不建立 Git、不填測試成功。
- 4．自己檢查結果
- 自己親手改善三張作品圖的 alt，逐張對照真實圖像。
- APPA 仍描述課堂引導；三頁路徑與導覽正常。
整理圖片與路徑檢查表 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：沿用第 3 堂青禾三頁 portfolio，APPA 與紫綠配色不變。學生操作說明為本堂 HTML Git 指南；在自己獨立的練習網站確認 Git 安裝與目前路徑，身份設定只作用於本儲存庫，不修改全域設定、不推送。故障包有 baseline/portfolio 與 candidate/portfolio，不附 .git；依指南在另一個 fault-L04/portfolio 建立實際本機基準後才套入待檢查檔案。
本次任務：閱讀三頁 HTML、styles.css、我附的三張作品圖片／素材來源清單及 HTML Git 指南，整理「頁面、圖片路徑、用途、現有 alt、建議說明、檢查結果」的表格，列出各頁導覽與相對路徑。內容圖分別是米色底深綠圓框山形標誌、紫色頁首與綠色主圖的網站版型、深綠底亮綠圓形的活動版面；alt 要描述實際圖像，不捏造照片人物。APPA 是課堂引導，不是設計師本人；裝飾與內容用途分開說明。只回覆清單及建議，不直接修改、提交或回復任何檔案。由我手動改善三張作品圖 alt，核對實際圖片與六條跨頁路線。另依指南說明 Git 目前目錄、status、diff、選擇檔案與提交的用途，不執行命令、不新增遠端、不宣稱已保存版本。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先看位置與證據
直接開 assets/ 三張圖片，先看再寫，不只照作品名稱猜。
線索 2｜再縮小操作範圍
AI 只提供建議；來源不明就記待確認，不捏造授權。
回到自己的作品，逐項檢查
- 三張作品 alt 有差異，符合真實圖像。
- 路徑沒有個人電腦絕對位置，三頁正常。
- 未實際執行的 AI、Git、發布或另一裝置檢查保持待完成。
尚未完成可以先往下看，之後再回來補做。
每一步，都留下自己的成果。
先實際完成上面兩項確認，再記下這一關的修改與結果。也可以先往下閱讀，之後回來補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 4 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 4 堂六步勾選，筆記、另一堂進度與網站檔案保留。