交出去之前,多確認一次。
來源檔正常,不代表另一份發布候選一定完整。這關用獨立缺圖副本練習比較,再分開核對自己的公開網址,把實際結果與待辦留下來。
這關帶走:修復漏圖,留下另一裝置的實際檢查結果。
先學一招:來源、發布副本與公開畫面
把本機、發布副本與公開畫面分開核對。
帶上你的裝備
- 自己的來源、發布副本與公開網址
改了來源
只表示電腦裡的檔案改了,線上不會自己同步。
再次發布
更新發布副本後重新上傳,再從公開網址確認新畫面。
若同學看到舊內容,先核對網址、發布時間與新分頁,不要只看自己一直開著的舊畫面。
網站能開啟,和搜尋引擎是否收錄是不同事情;這堂檢查的是實際可存取與操作結果。
跟著觀察
- 把三份畫面/檔案並列,指出各自用途。
- 說出要核對的四件事:來源、發布副本、發布時間、公開網址。
- 準備請同學或另一台裝置檢查,不用同一台電腦的 localhost 代替。
這是你的實際操作確認,小測不會替你勾選。
動手挑戰:修復缺圖,完成交叉檢查
比較來源與另一份候選資料夾,再記下公開檢查結果。
先準備
- 獨立的缺圖故障練習
- 自己的正常來源與公開網址
在自己的獨立故障資料夾比較兩份內容。先收集實際檔案清單與失效路徑,再使用下方指令,不要先改正常來源。
本機故障修好後,還要分開檢查自己的公開網站;只有本機結果時,公開檢查先保留「待完成」。
照這個順序開始
- 開啟正常來源與候選副本,記下相同與不同的地方。
- 在 Cursor 內建 AI 對話附上兩份清單、HTML 與失效路徑,貼檢查修正 Prompt;先看判斷再只套用必要修正。
- 重新開啟候選副本,確認圖片、CSS、姓名與作品連結;自己的來源仍要正常。
- 請同學的裝置或自己另一台裝置開公開網址,核對圖片、樣式、更新文字與錨點,記錄代號、裝置、時間與實際結果。
用 Cursor 比較來源與發布候選的缺圖問題
主要使用 Cursor 內建 AI;先附資料,再送出指令。
- 1.附上這些檔案與資料
- 除錯練習的 source/portfolio/index.html(正常對照)與 publish-candidate/index.html(要修復的候選副本)。
- 兩份資料夾的實際檔案清單,標明「正常來源」與「發布候選」,包含 assets/ 內容。
- 實際失效的圖片路徑、預期與實際現象,以及目前是本機候選網址還是公開網址。
- 本堂發布指南文字;沒有公開網址時,明寫「公開檢查待完成」,不用帳密或金鑰。
- 2.貼到哪裡
- 在 Cursor 開啟解壓縮後、同時包含 source/ 與 publish-candidate/ 的獨立故障資料夾。
- 用 @ 分別選取兩份 index.html,核對完整相對路徑,避免把同名檔案附錯;貼上兩份清單、失效路徑、現象與下方 Prompt。
- 請 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 堂六步勾選,筆記、另一堂進度與網站檔案保留。
還有時間?試試根目錄練習
先完成本堂主線,再比較「根層沒有首頁、內層頁面卻正常」的情況。