連得到,也回得來。
作品頁能回首頁,服務頁卻不行。拿出檔案樹,在獨立副本查出這一個差異。
這關帶走:修一條連結,走完六條跨頁路線。
先學一招:連結從目前的檔案出發
看到 href,就能指出要開啟哪個檔案。
帶上你的裝備
- 自己的 index.html、works.html、services.html 與共用 styles.css
- assets/ 的實際檔案清單
<a href="index.html">首頁</a>
<a href="works.html">作品</a>
<a href="services.html">服務</a>三頁放在同一層,連結直接寫檔名。保留完整 index.html,才能直接開檔使用,不依賴伺服器替你找首頁。
跟著觀察
- 從三份 HTML 各指出 nav 裡的目的地。
- 先走一次六條跨頁路線:首頁 → 作品;首頁 → 服務;作品 → 首頁;作品 → 服務;服務 → 首頁;服務 → 作品。
- 只觀察正常來源,故障稍後在另一份副本操作。
這是你的實際操作確認,小測不會替你勾選。
動手挑戰:修好回不了首頁的連結
用證據找問題,只改必要的一處。
先準備
- 獨立 fault-L03/portfolio;正常來源保留
把故障包中的 portfolio 複製到 student-work/fault-L03/portfolio。從服務頁點首頁,先記錄失效,再使用下方 Prompt。
照這個順序開始
- 重現故障並記下預期、實際現象與檔案樹。
- 核對 AI 建議,只修故障副本的一個 href。
- 實際走六條路線、確認圖片,再把原因與結果寫到本堂筆記。
修好返回首頁的連結
主要使用 Cursor 內建 AI;先附資料,再送出指令。
- 1.附上這些檔案與資料
- 獨立 fault-L03/portfolio 的三頁 HTML,避免附到正常 portfolio
- 故障副本實際檔案樹
- 實際路線:從 services.html 點首頁失效;預期到 index.html;作品頁可正常返回。
- 2.貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾,進入內建 AI 對話。
- 用 @ 選取下列指定檔案,核對完整路徑,再貼實際清單、補充資料與下方 Prompt。
- 先看 AI 說明與修改差異;若只回覆程式碼,核對檔名與位置再手動存回。不要直接覆蓋其他檔案。
- 3.預期回覆與操作
- 先指出錯誤 href 與檔名的差異,提供一處最小修正。
- 不新增目的地、不改檔名、不覆蓋正常網站。
- 4.自己檢查結果
- 在故障副本修正後逐一操作六條跨頁路線。
- 只有 services.html 的一個 href 改變,圖片、其他文字與 CSS 不變。
修好返回首頁的連結 Prompt(可收合)
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript;必要時把你提供的內容手動貼入檔案。
情境與本次輸入:沿用自己第 2 堂正常 portfolio;缺進度才把第 3 堂起始包複製到 student-work/portfolio。素材為 assets/appa.png、work-brand.jpg、work-web.jpg、work-layout.jpg。維持 APPA 課堂引導與深紫 #160e2c、亮紫 #6633ff、螢光綠 #caff33;建立 index.html、works.html、services.html,共用 styles.css,無後端。
本次任務:我在獨立 fault-L03/portfolio 練習,只有 services.html 點「首頁」失效,作品頁可返回。請閱讀我附的三頁 HTML、實際檔案樹及預期/實際點擊路線,先比較兩份 nav 與實際目標檔名,再指出錯誤 href 和最小修正。只修 services.html 的錯誤連結,不改名、不新增假的目的地、不重寫導覽或修改正常 portfolio。列出首頁到作品、首頁到服務、作品到首頁、作品到服務、服務到首頁、服務到作品的六條檢查路線;HTML 連結寫實際 .html 檔名,說明為何不能依賴目錄首頁解析。由我親自操作,沒有證據的結果保持待測。
請先閱讀我附上的相關檔案或資料,資訊缺漏時精確列出需要補充的項目,不猜檔名、API 或測試結果。說明以繁體中文撰寫,指出檔案與修改位置;檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本,不改現有展示網站,不要求付費訂閱。Cursor AI 無法使用?改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料,連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑,無法讓它讀取你的檔案。
收到程式碼時,先核對檔名與修改位置,再手動存回自己的練習副本;若收到檢查表或補檔步驟,就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML/CSS。
兩邊都受限時,可先看既有參考成果、檢查差異與手動修改;未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字,檔案需自行在 Cursor 附上;本頁不會呼叫 AI 或自動完成關卡。
卡住時,APPA 給你一點線索
線索 1|先看位置與證據
先重現 services.html 的失效入口,正常作品保持原樣。
線索 2|再縮小操作範圍
修後六個方向都要親手點,不能只看首頁開得起來。
回到自己的作品,逐項檢查
- 六條跨頁路線正常。
- 故障只改一處 href,正常來源與共用 CSS 未變。
- 未實際執行的 AI、Git、發布或另一裝置檢查保持待完成。
尚未完成可以先往下看,之後再回來補做。
每一步,都留下自己的成果。
先實際完成上面兩項確認,再記下這一關的修改與結果。也可以先往下閱讀,之後回來補做。
關卡紀錄由你自行確認;本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 3 堂共用筆記,換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 3 堂六步勾選,筆記、另一堂進度與網站檔案保留。