先接任務，準備開始
完整看見作品，再決定怎麼呈現。
用同一個框整理三張作品，保留重要資訊；APPA不套用作品圖的規則。
這關帶走：圖片不變形，內容與入口有順序。
步驟 1／6 · 觀念 18 分鐘
先學一招：圖片框與圖片，不是同一件事
分清完整顯示、裁切與變形。
帶上你的裝備
- 第5堂正常網站與三張原圖
作品原圖是3:2，這次放進4:3框。contain保留完整圖像，可能留白；cover可能裁掉邊緣，都不應拉伸。只調作品圖片，APPA維持原比例。
跟著觀察
- 開啟原圖，看重要資訊在哪裡。
- 比較完整顯示與裁切的用途。
- 指出三張作品卡片與APPA是不同作用範圍。
這是你的實際操作確認，小測不會替你勾選。
步驟 2／6 · 實作 42 分鐘
動手挑戰：整理三張可操作的作品卡片
保留作品資訊，補清楚的前往服務入口。
先準備
- 自己的 index.html、works.html、services.html 與完整共用 styles.css
- 修改前正常副本與自己的 Git 基準；不是教材原件
- 三張既有圖片與alt
由圖片、標題、兩句摘要、原角色文字到服務入口排列；摘要第二句只描述虛構示意圖，不編造真實成果。圖片框不設整張卡片固定高度。
.work-card:first-child img { object-position:center top; }照這個順序開始
- 用生成Prompt整理works.html與作品圖片CSS。
- 確認4:3 contain完整顯示後，親手加入上方規則，只調第一張位置。
- 比較留白位置，確認三個服務入口與原alt、角色文字。
整理作品卡片與圖片框
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 index.html、works.html、services.html 與完整共用 styles.css
- assets/work-brand.jpg、work-web.jpg、work-layout.jpg 原圖或可讀縮圖；檔名與原 alt 都保留。
- 2．貼到哪裡
- 在 Cursor 開啟本關指定的自己的正常或獨立故障資料夾，進入內建 AI 對話。
- 用 @ 附上指定檔案，特別核對完整 styles.css、完整路徑；再貼實際證據與下方 Prompt。
- 先讀回覆與檔案差異，只保留指定範圍再儲存；Git 保存由自己核對後操作，AI 不代替驗收或提交。
- 3．預期回覆與操作
- 只改作品頁卡片與作品圖片CSS：原內容保留，補第二句圖像摘要與服務頁連結。
- 4:3框以contain完整顯示，不拉伸、不把APPA套入；保留既有焦點及hover。
- 4．自己檢查結果
- 先確認三圖完整，親手替第一張加 object-position:center top，比較與預設置中的留白。
- 三個「了解合作服務」都連 services.html，alt、角色文字保留，卡片沒有固定高度切字。
整理作品卡片與圖片框 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第 5 堂完成的青禾三頁 portfolio。保留已有的 hover 與焦點，這堂練精準改善，不移除起始功能。沿用 APPA 與既有 tokens：深底 #160e2c、深紫 #231146、亮紫 #6633ff、螢光綠 #caff33、淺紫 #e7deff、白 #ffffff。使用本機系統字型、既有圖片與三頁共用 styles.css；不增加框架或遠端素材。
本次任務：閱讀我附的三頁 HTML、完整 CSS 與三張實際作品圖，只整理 works.html 三張 .work-card 及對應圖片樣式。每張依圖片、作品標題、兩句摘要、原有本人角色文字、前往 services.html 的連結排列。保留原名稱、原摘要第一句、alt、三段角色文字；第二句依真實示意圖說明圓框山形識別、主圖與卡片的網站層級、圓形與分層文字的活動版面，不捏造真實客戶或成效。每張新增 a.primary-link，文字「了解合作服務」，href="services.html"。作品圖採 4:3 框、寬度 100%、height:auto、object-fit:contain、預設 object-position:center，不拉伸、不設整張卡片固定高度。這些圖片規則不能套到 APPA。保留原網格、品牌色、既有 hover／focus-visible、導覽與其他兩頁；不提前加入下一關的專屬焦點或 hover 改造，也不預先替我調第一張 object-position。先列變更位置再給必要 HTML／CSS，列出圖片、Tab、Enter 與窄版待檢查事項。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找位置與來源
三張圖的原alt與角色文字都要保留。
線索 2｜再縮小修改範圍
先統一contain，再親手只調第一張object-position，不影響APPA。
回到自己的作品，逐項檢查
- 三圖在4:3框中不拉伸，第一張靠上，其他置中。
- 每張有兩句摘要、角色文字與明確services.html入口。
- 未實際完成的AI、Git、鍵盤或裝置檢查保持待完成。
尚未完成可以先往下看，之後再回來補做。
讓每一次修改，都有自己的理由。
先實際完成上面兩項確認，再寫下觀察、修改與結果；也可以先往下閱讀，之後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 6 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 6 堂六步勾選，筆記、另一堂進度與網站檔案保留。