第 04 堂｜替圖片說清楚，替修改留存檔
補齊圖片說明，親手保存 Git 版本，再只回復指定的錯誤。
圖片說明要符合實際畫面
描述圖片傳達的內容，分清作品與 APPA。
先準備
- 第 3 堂正常三頁網站
- 三張實際圖片
第 3 堂已有基本 alt，這堂練習寫得更具體。APPA 是陪你學習的角色，不是設計師本人；只有重複裝飾才用空 alt。
<img src="assets/work-brand.jpg"
alt="米色底上的深綠圓框與山形標誌，山間咖啡識別示意">跟著觀察
- 在瀏覽器開啟三張原始圖片。
- 比較原 alt 與圖片實際資訊。
- 在素材表記下檔名、用途、來源與想改善的文字。
做完，自己確認
- 我能區分圖片內容與作品名稱。
- 我不把 APPA 說成自己的照片。
親手改善三張圖片的說明
用 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 或自動完成關卡。
儲存檔案，也保存一個版本
知道現在改了什麼，未來才有可回復的基準。
先準備
- 自己的獨立 portfolio
- Git 已安裝；安裝方式見指南
git status
git diff -- works.html
git log -1 --oneline儲存 HTML 讓瀏覽器看到新內容；Git 提交會把這次選定的檔案記成版本。這堂只在自己電腦練習，不需要 GitHub 或推送。
跟著觀察
- 先依指南檢查 Git 與目前資料夾。
- 辨認工作區、暫存區與提交三個位置。
- 用自己的話說出 status、diff、commit 各在做什麼。
做完，自己確認
- 我知道儲存檔案不等於建立提交。
- 我知道只能操作自己的練習資料夾。
保存基準，再加作品角色
親手保存自己的版本，不拿參考檔當操作紀錄。
先準備
- 已改善 alt 的自己網站
- HTML Git 指南、獨立備份
先依指南建立乾淨基準提交，記下自己的識別。再使用 Prompt 加三段作品角色，讀差異後只選 works.html 保存第二筆提交。參考版本沒有 .git，不代表你已完成提交。
跟著做
- 依指南確認範圍，設定本儲存庫身份並明確選網站檔案建立第一筆提交。
- 記下基準識別，確認乾淨後才用 Prompt 修改作品角色。
- 親手讀 diff，確認只有三段；再明確選作品頁提交並記錄新識別。
只加入三筆作品角色
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 works.html、styles.css
- 實際 git status、基準提交識別；先依指南完成乾淨基準
- 自己的圖片 alt 已改善，正常來源已另作備份。
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 在內建 AI 對話貼指令，只請它修改文字；Git 檢查與提交由自己依指南逐條操作。
- 3．預期回覆與操作
- 三筆作品 article 最後各增加「本人角色：內容整理與前端練習」。
- 只改 works.html；不更改 alt、圖片、連結或 CSS，也不執行 Git。
- 4．自己檢查結果
- 親手看 git diff -- works.html，只有三段角色文字。
- 依指南只選作品頁提交，記錄自己實際取得的提交識別。
只加入三筆作品角色 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：沿用第 3 堂青禾三頁 portfolio，APPA 與紫綠配色不變。學生操作說明為本堂 HTML Git 指南；在自己獨立的練習網站確認 Git 安裝與目前路徑，身份設定只作用於本儲存庫，不修改全域設定、不推送。故障包有 baseline/portfolio 與 candidate/portfolio，不附 .git；依指南在另一個 fault-L04/portfolio 建立實際本機基準後才套入待檢查檔案。
本次任務：我已完成三張圖片 alt，並依 HTML Git 指南在自己的 portfolio 建立一筆乾淨基準提交。閱讀附上的 works.html、styles.css 與 status／diff，只在 works.html 三筆作品說明的最後各加入一段「本人角色：內容整理與前端練習」，放在各自 article 裡。先列三個位置，提供最小差異；圖片、alt、連結、原說明、其他頁面與 CSS 都不變。不要自行執行 Git、提交或推送。提醒我儲存後用 git diff -- works.html 核對三段，再依指南明確選檔保存；如果目前狀態與所述不一致，先指出缺少的證據。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
要留下的修改，和要回復的錯誤
先看範圍，再決定回復哪一個檔案。
先準備
- 正常 portfolio 先保留
- 獨立故障包與 Git 指南
works.html 三段作品角色文字：要保留
styles.css 內文字色改錯：要回復回復整份 CSS 會捨棄這份檔案相對基準的修改。這次只有一處故意錯誤，且沒有暫存；若還有其他要保留的 CSS，先停下釐清。
跟著觀察
- 讀正常基準與候選版本的差異。
- 指出哪個檔案要保留、哪個要回復。
- 知道故障儲存庫與正常作品是兩個位置。
做完，自己確認
- 我能先指出回復影響範圍。
- 我知道不能把整個目錄還原。
只救回 CSS，保留作品文字
實際回復指定檔案，留下自己的結果。
先準備
- 獨立 fault-L04/portfolio
- 自己的基準提交、status 與 diff
下載包含 baseline/portfolio 與 candidate/portfolio，不含 .git。先依指南在另一個資料夾建立真正的基準，再只複製候選 works.html 與 styles.css 進來。先讀差異、再請 AI 解釋，最後由自己回復。
跟著做
- 按故障指南完成獨立基準、套入兩份候選檔案並重現看不清文字。
- 把實際 status、diff、基準識別附上，請 AI 只提出方法。
- 核對範圍後親手只回復 CSS，確認作品角色文字仍在；記錄與重新檢查三頁。
保留作品文字，回復 CSS
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 獨立 fault-L04/portfolio 的儲存庫根目錄與基準提交識別
- 實際 git status、git diff -- styles.css works.html；暫存區應為空
- 錯誤現象、希望保留的三筆角色文字，以及本堂 HTML Git 指南
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 把狀態與差異貼在內建 AI 對話；只要求說明方法，不允許 AI 執行提交、回復、清除或推送。
- 3．預期回覆與操作
- AI 先確認實際範圍，只提出指定 CSS 回復方法及影響，不代執行。
- 若另有需保留的 CSS、已暫存或範圍不符，先釐清，不整庫重設。
- 4．自己檢查結果
- 自己核對後只回復 CSS；git diff -- styles.css 為空。
- git diff -- works.html 仍有三筆角色文字；三頁圖片與六條路線正常。
保留作品文字，回復 CSS Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：沿用第 3 堂青禾三頁 portfolio，APPA 與紫綠配色不變。學生操作說明為本堂 HTML Git 指南；在自己獨立的練習網站確認 Git 安裝與目前路徑，身份設定只作用於本儲存庫，不修改全域設定、不推送。故障包有 baseline/portfolio 與 candidate/portfolio，不附 .git；依指南在另一個 fault-L04/portfolio 建立實際本機基準後才套入待檢查檔案。
本次任務：我只在獨立 fault-L04/portfolio 練習儲存庫操作。已從 baseline/portfolio 建立自己的基準提交，再從 candidate/portfolio 套入 works.html 與 styles.css，尚未加入暫存區。CSS 內文字色被改錯，但 works.html 的三筆本人角色文字要保留。請閱讀我附的實際儲存庫根目錄、git status、git diff -- styles.css works.html、基準提交識別及 HTML Git 指南，先確認只有這兩份差異且暫存區為空。只說明將 styles.css 從該基準回復到工作區的方法與影響，由我確認後親自執行；不代執行、不回復 works.html、不做整庫 reset、clean 或推送。若 CSS 還有要保留的修改、已暫存或範圍不符，先停止回復並列出要補充的資料。回復後應核對 CSS 與基準一致、works.html 三筆角色文字仍在、三頁圖片與六條路線正常，所有結果由我實際記錄，不預填成功。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。