返回任務地圖

完成交付測試

第 2 堂 · 第 3/3 關 · 觀念 18 分鐘+實作 42 分鐘

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

交出去之前,多確認一次。

來源檔正常,不代表另一份發布候選一定完整。這關用獨立缺圖副本練習比較,再分開核對自己的公開網址,把實際結果與待辦留下來。

這關帶走:修復漏圖,留下另一裝置的實際檢查結果。

步驟 5/6 · 觀念 18 分鐘

先學一招:來源、發布副本與公開畫面

把本機、發布副本與公開畫面分開核對。

帶上你的裝備

  • 自己的來源、發布副本與公開網址

改了來源

只表示電腦裡的檔案改了,線上不會自己同步。

再次發布

更新發布副本後重新上傳,再從公開網址確認新畫面。

若同學看到舊內容,先核對網址、發布時間與新分頁,不要只看自己一直開著的舊畫面。

網站能開啟,和搜尋引擎是否收錄是不同事情;這堂檢查的是實際可存取與操作結果。

跟著觀察

  1. 把三份畫面/檔案並列,指出各自用途。
  2. 說出要核對的四件事:來源、發布副本、發布時間、公開網址。
  3. 準備請同學或另一台裝置檢查,不用同一台電腦的 localhost 代替。
候選副本在自己電腦修好了,能直接說公開網站也修好了嗎?

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

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

步驟 6/6 · 實作 42 分鐘

動手挑戰:修復缺圖,完成交叉檢查

比較來源與另一份候選資料夾,再記下公開檢查結果。

先準備

  • 獨立的缺圖故障練習
  • 自己的正常來源與公開網址

在自己的獨立故障資料夾比較兩份內容。先收集實際檔案清單與失效路徑,再使用下方指令,不要先改正常來源。

本機故障修好後,還要分開檢查自己的公開網站;只有本機結果時,公開檢查先保留「待完成」。

照這個順序開始

  1. 開啟正常來源與候選副本,記下相同與不同的地方。
  2. 在 Cursor 內建 AI 對話附上兩份清單、HTML 與失效路徑,貼檢查修正 Prompt;先看判斷再只套用必要修正。
  3. 重新開啟候選副本,確認圖片、CSS、姓名與作品連結;自己的來源仍要正常。
  4. 請同學的裝置或自己另一台裝置開公開網址,核對圖片、樣式、更新文字與錨點,記錄代號、裝置、時間與實際結果。

用 Cursor 比較來源與發布候選的缺圖問題

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

1.附上這些檔案與資料
  • 除錯練習的 source/portfolio/index.html(正常對照)與 publish-candidate/index.html(要修復的候選副本)。
  • 兩份資料夾的實際檔案清單,標明「正常來源」與「發布候選」,包含 assets/ 內容。
  • 實際失效的圖片路徑、預期與實際現象,以及目前是本機候選網址還是公開網址。
  • 本堂發布指南文字;沒有公開網址時,明寫「公開檢查待完成」,不用帳密或金鑰。
2.貼到哪裡
  1. 在 Cursor 開啟解壓縮後、同時包含 source/ 與 publish-candidate/ 的獨立故障資料夾。
  2. 用 @ 分別選取兩份 index.html,核對完整相對路徑,避免把同名檔案附錯;貼上兩份清單、失效路徑、現象與下方 Prompt。
  3. 請 AI 先比較與說明缺檔、根層、大小寫或相對路徑的證據,再只補齊或修改 publish-candidate/,正常來源保持不動。
3.預期回覆與操作
  • 取得已知原因、待補證據與最小修正;可能是補回圖檔,不一定需要改 HTML。
  • 若 Cursor 提出檔案修改,先查看差異;若只給操作步驟,依說明補檔。不能改正常來源的 src 掩蓋候選缺檔。
  • 把「本機重新檢查」與「重新發布、另一裝置檢查」分開列出,不宣稱已替你發布或測試。
4.自己檢查結果
  • 重新開啟候選副本,確認 APPA、CSS、姓名與作品連結;正常來源仍正常。
  • 另外以自己的公開網址讓同學或另一台裝置核對圖片、樣式、更新文字及錨點。
  • 記錄實際網址、裝置、時間與結果;只有本機修好時,公開檢查仍是待完成。
檢查發布候選缺圖 Prompt(可收合)

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

情境與本次輸入:我承接上一堂自己的正常 portfolio,準備了 HTML 與實際檔案清單,以及本堂 HTML 發布指南的文字。只操作自己的獨立練習專案;本機候選目錄檢查與公開網址檢查分開記錄,沒有實際做過的項目保持待完成。

本次任務:現象:來源 portfolio 的 appa.png 正常,但另一份發布候選目錄(或實際公開網站)圖片失效。請先確認我附的是本機 HTTP 候選網址還是公開網址,依來源檔案樹、候選/上傳清單、實際錯誤路徑及 HTML 判斷缺檔、根目錄、大小寫與相對路徑。先區分已知原因與待補證據,再做最小修正;不要更改正常來源的 src 以掩蓋發布缺檔,也不要用電腦絕對路徑、遠端替代圖或 Base64 修補。列出補齊候選目錄後的本機重驗,以及重新發布、另一裝置檢查的分開步驟;沒有實際公開網址時明示線上待測,不宣稱已替我發布或測試。

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

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

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

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

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

卡住時,APPA 給你一點線索

線索 1|先把兩份同名檔案分清楚

在 Cursor 開啟同時包含 source/ 與 publish-candidate/ 的故障資料夾。附上兩份 index.html 與實際檔案清單,標清哪個只供對照、哪個要修復。

線索 2|缺檔不一定要改 HTML

比較 source/portfolio/assets/ 與候選 assets/。若 HTML 路徑正確而候選漏圖,就補齊候選;不要更改正常來源的 src、換網路圖片或宣稱已在線上測過。

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

  • 候選副本的 APPA、CSS、姓名與作品連結正常,正常來源沒有被改壞。
  • 用自己的公開網址,在同學或另一台裝置核對圖片、樣式、更新文字與錨點。
  • 本機修復與公開檢查分開記錄,包含實際網址、裝置、時間與結果;未做的項目保持待完成。
需要對照?看這一關的參考成果

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

查看兩堂完成作品(另開分頁)

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

把作品交出去,也留下自己的證據。

兩堂的學習不只是一個網址。記下實際修改、檢查結果與尚待完成的項目,之後就能接著維護自己的網站。

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

留下自己的檢查紀錄

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

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

還有時間?試試根目錄練習

先完成本堂主線,再比較「根層沒有首頁、內層頁面卻正常」的情況。