AI 商用網站開發跟著步驟，做出自己的作品
返回任務地圖

救回消失的鍵盤提示

第 6 堂 · 第 3／3 關 · 觀念 18 分鐘＋實作 42 分鐘

查看本堂完整六步
先接任務，準備開始

讓每一種操作，都走得下去。

滑鼠看起來正常，鍵盤提示卻被蓋掉。把真正的按鍵路線與CSS來源交給AI，再自己重驗。

這關帶走：Tab找得到，Enter也真的能前往。

步驟 5／6 · 觀念 18 分鐘

先學一招：滑鼠正常，鍵盤不一定正常

先記下真正聚焦的元素與生效規則。

帶上你的裝備

  • 正常網站；鍵盤與開發者工具

滑鼠點到或強制顯示偽類，不能代替實際Tab。焦點消失時先確認元素確實聚焦，再看outline與來源；不要只補hover。

跟著觀察

  1. 按Tab與Shift+Tab，記錄首頁及作品頁路線。
  2. 觀察當前聚焦的主要連結與輪廓。
  3. 辨認同選擇器較後規則可能造成的覆蓋。
哪一種能證明本關鍵盤操作正常？

選一個試試看，答錯也可以再試。

這是你的實際操作確認，小測不會替你勾選。

步驟 6／6 · 實作 42 分鐘

動手挑戰：救回消失的鍵盤提示

修一個規則，再實際走一遍。

先準備

  • 獨立 fault-L06/portfolio；正常來源保留
取得焦點故障包開啟鍵盤故障指南

把故障包另放student-work/fault-L06/portfolio。先重現滑鼠hover正常、Tab主要連結沒有輪廓，再使用下方Prompt。手機可看與點；鍵盤驗收用可用的實體鍵盤或桌面瀏覽器，不假裝手機hover。

照這個順序開始

  1. 記下Tab路線、聚焦元素、outline計算值與完整CSS。
  2. 核對AI說明，只修造成焦點消失的區塊。
  3. 用Tab、Shift+Tab與Enter重驗兩頁入口，再檢查三頁、圖片與窄版。

救回主要連結鍵盤焦點

主要使用 Cursor 內建 AI；先附資料，再送出指令。

1．附上這些檔案與資料
  • 獨立 fault-L06/portfolio 的三頁HTML與完整CSS
  • 實際Tab／Shift+Tab路線、目前聚焦連結、outline計算值與來源；滑鼠hover仍正常的現象。
2．貼到哪裡
  1. 在 Cursor 開啟本關指定的自己的正常或獨立故障資料夾，進入內建 AI 對話。
  2. 用 @ 附上指定檔案，特別核對完整 styles.css、完整路徑；再貼實際證據與下方 Prompt。
  3. 先讀回覆與檔案差異，只保留指定範圍再儲存；Git 保存由自己核對後操作，AI 不代替驗收或提交。
3．預期回覆與操作
  • 先定位後方同等選擇器的outline:none，僅修造成故障的那個區塊。
  • 不改配色、hover、圖片、卡片尺寸或正常來源；不靠 !important。
4．自己檢查結果
  • 重新實際按Tab／Shift+Tab，首頁及三張卡片的主要連結都看見對比清楚的輪廓。
  • Enter實際開啟服務頁；只用滑鼠或強制偽類截圖不算鍵盤通過。
救回主要連結鍵盤焦點 Prompt（可收合）

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第 5 堂完成的青禾三頁 portfolio。保留已有的 hover 與焦點，這堂練精準改善，不移除起始功能。沿用 APPA 與既有 tokens：深底 #160e2c、深紫 #231146、亮紫 #6633ff、螢光綠 #caff33、淺紫 #e7deff、白 #ffffff。使用本機系統字型、既有圖片與三頁共用 styles.css；不增加框架或遠端素材。

本次任務：我在獨立 fault-L06/portfolio：滑鼠 hover 正常，但 Tab 到首頁與作品卡片的主要連結時看不到焦點。請閱讀我附的三頁 HTML、完整 CSS、實際 Tab／Shift+Tab 路線、目前聚焦元素與 outline 的計算值／來源，確認較後出現且同等作用範圍的 outline:none 是否覆蓋正常焦點。只修造成焦點消失的那一個規則區塊，恢復既有深底白色輪廓、淺色卡片深紫輪廓及 4px offset；不加 !important、不改 hover、卡片尺寸、圖片或正常來源。要求我實際核對預設、hover、focus-visible、Enter 四種狀態，不能只用截圖或強制偽類就宣稱鍵盤通過；不捏造手機 hover 或 AI 已操作的結果。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。
Cursor AI 無法使用？改用 ChatGPT 備援

把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。

收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。

兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。

複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。

卡住時，APPA 給你一點線索

線索 1｜先找位置與來源

先確認確實聚焦主要連結，再看outline來源。

線索 2｜再縮小修改範圍

只修後方覆蓋區塊，保留其他連結、hover與卡片設定。

回到自己的作品，逐項檢查

  • 首頁與三張作品入口焦點可見，Enter導向正確。
  • 只修故障區塊，hover、卡片、圖片與APPA保持原樣。
  • 未實際完成的AI、Git、鍵盤或裝置檢查保持待完成。
需要對照？看這一關的參考成果

先檢查自己的作品，再對照差異。開啟參考不會算完成。

對照正常作品入口（另開分頁）

尚未完成可以先往下看，之後再回來補做。

讓每一次修改，都有自己的理由。

先實際完成上面兩項確認，再寫下觀察、修改與結果；也可以先往下閱讀，之後補做。

進入第 7 堂：替六張作品安排位置返回上一關：滑鼠與鍵盤，都知道現在在哪裡

關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。

留下自己的檢查紀錄

這是第 6 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。

重設會清除第 6 堂六步勾選，筆記、另一堂進度與網站檔案保留。