第 02 堂｜讓別人開啟你的網站
檢查來源、整理發布資料夾，取得可以分享的網站網址。
分辨本機與公開網站
知道什麼網址能分享，接回上一堂自己的作品。
先準備
- 上一堂正常的 portfolio
- 瀏覽器與 Cursor
自己的電腦
file:///…/index.html 指向自己電腦的檔案，別人無法只靠這段位置開啟。
公開網站
https://… 的實際公開網址，才是要交給同學確認的入口。
本機的 127.0.0.1 或 localhost 也只代表這台電腦，不能直接當作公開分享網址。
沿用上一堂自己的正常作品。若需要重新接續，可取得接續練習檔；前堂未做過的手動修改仍要補練。
跟著觀察
- 找到自己的上一堂作品，開啟 index.html。
- 確認姓名林小禾、技能版面設計、第三項服務活動頁設計。
- 觀察網址列，分辨現在看到的是檔案、本機預覽還是公開網站。
做完，自己確認
- 我知道這堂承接哪一份來源。
- 我能解釋為什麼不能只把電腦檔案位置傳給同學。
檢查自己的網站
用檢查表核對內容，整理只含必要檔案的發布副本。
先準備
- 自己的正常網站與檔案清單
- 本堂發布指南
先檢查再上傳。把自己的 HTML、資料夾清單與本堂發布指南一起提供給 AI，產生適合自己網站的檢查表。
這一步外觀不會刻意改變，成果是你確實檢查過連結與檔案。
跟著做
- 先開發布指南，複製指南文字，準備自己的 HTML 與檔案清單。
- 在 Cursor 內建 AI 對話使用下方 Prompt，只取得檢查表，再自己逐一操作作品入口、導覽與 Email 目的。
- 手動建立 student-work/publish-ready/，把 index.html、styles.css、assets/ 複製進去；保留原本的 portfolio。
- 確認只含六個網站檔案，不放說明、練習答案、私人資料或備份。
用 Cursor 生成發布前檢查表
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的正常 portfolio/index.html 與 styles.css。
- 正常 portfolio/ 的實際檔案清單，包含 assets/ 檔案。
- 本堂「第一次發布自己的網站」HTML 指南：開啟後複製指南文字，一起貼入對話。
- 2．貼到哪裡
- 在 Cursor 開啟自己的正常 portfolio，用 @ 加入 index.html 與 styles.css。
- 在內建 AI 對話貼上檔案清單、發布指南文字與下方 Prompt，要求「只回覆檢查表，不修改檔案」。
- 若介面有僅問答的模式可使用；不依賴特定模式名稱，也不需要讓 Agent 自動發布。
- 3．預期回覆與操作
- 取得針對自己網站的檔案、連結與發布檢查表；這一步不會生成新網站，也不需要改版。
- 自己依清單檢查，再手動整理獨立的 publish-ready/；AI 沒有替你完成真實上傳或驗收。
- 4．自己檢查結果
- 在自己的網站實際點導覽與作品入口；核對 Email 連結目的，不需寄信。
- 確認 publish-ready/ 根層有 index.html、styles.css 與 assets/，合計六個網站檔案。
- 保留正常來源，未實際檢查的項目記為待完成。
生成發布前檢查表 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我承接上一堂自己的正常 portfolio，準備了 HTML 與實際檔案清單，以及本堂 HTML 發布指南的文字。只操作自己的獨立練習專案；本機候選目錄檢查與公開網址檢查分開記錄，沒有實際做過的項目保持待完成。
本次任務：依我附上的 portfolio 檔案樹、index.html 及 本堂發布指南的文字（由 HTML 指南複製），建立適合零基礎學員的首次發布核對表。分成上傳前、本機檢查、取得公開網址、另一台裝置驗收四段，列出實際相對路徑與發布根目錄。只使用指南已提供的平台步驟，不替我登入、不猜按鈕名稱或新增付費服務。說明如何保留原始碼與辨認『已上線』但尚未有索引資料。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
找到正確的發布資料夾
指出 index.html 在哪一層，而不只看深層頁面能否開啟。
先準備
- 自己的 publish-ready 資料夾
publish-ready/ ← 發布這一層的內容
├── index.html
├── styles.css
└── assets/
├── appa.png
├── work-brand.jpg
├── work-web.jpg
└── work-layout.jpg三張作品圖先保留供後續課程使用，這兩堂主要顯示 APPA。根層有首頁、樣式與圖片資料夾，合計六個檔案。
正確層級
發布根目錄 → index.html
容易多包一層
發布根目錄 → portfolio → index.html
跟著觀察
- 把 publish-ready 第一層的內容列出來。
- 指出哪個是首頁，CSS 與圖片應該位於哪裡。
- 說明「開深層 index.html 正常」和「根網址能開首頁」的差別。
做完，自己確認
- 我能指出上傳時該選哪一層。
- 我沒有把整個 student-work 當成網站輸出。
發布並更新網站
取得自己的公開網址，再讓線上顯示更新後的連結文字。
先準備
- 自己的 publish-ready
- 自己可登入的練習帳號
- 本堂發布指南
先在自己的獨立練習專案發布，從平台結果取得實際 HTTPS 網址。帳密只輸入官方登入畫面，不貼到 Prompt。
上線後，再更新一處文字
原本
查看練習作品
更新後
查看三個練習作品
目的仍是 #works。改完來源檔後，也要同步發布副本並再次上傳。
跟著做
- 依指南建立自己的練習專案，上傳正確根層，記錄實際網址與發布時間。
- 在 Cursor 內建 AI 對話附上目前來源 HTML，貼延伸修改 Prompt，只改主要作品入口的文字。
- 先在本機確認錨點仍有效，再更新 publish-ready 並再次發布。
- 開公開網址的新分頁，確認顯示「查看三個練習作品」，也能跳到作品區。
用 Cursor 修改上線後的入口文字
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 正常來源 portfolio/index.html：附上目前的最新版，不是教材的參考頁。
- 本堂發布指南文字，以及自己實際取得的公開網址與發布狀態；尚未發布時註明待完成。
- 2．貼到哪裡
- 在 Cursor 開啟自己的正常 portfolio，用 @ 選取 index.html，再貼上狀態、指南與下方 Prompt。
- 讓可用的 Agent 只修改主要作品入口的顯示文字，先查看檔案差異。
- 保留並儲存指定修改；若只收到片段，核對位置後手動替換。發布副本與平台上傳由自己另行操作。
- 3．預期回覆與操作
- 入口文字從「查看練習作品」改為「查看三個練習作品」，連結目的仍是 #works。
- 只改這段文字，其他內容保留；不能把 AI 的回覆當成已完成公開網站更新。
- 4．自己檢查結果
- 先在本機重新整理，確認新文字出現，點擊仍能跳到作品區。
- 再把更新的 index.html 同步到自己的 publish-ready/，依指南重新發布。
- 開啟實際公開網址的新分頁確認新文字與錨點；尚未發布則保留待完成。
修改作品入口文字 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：我承接上一堂自己的正常 portfolio，準備了 HTML 與實際檔案清單，以及本堂 HTML 發布指南的文字。只操作自己的獨立練習專案；本機候選目錄檢查與公開網址檢查分開記錄，沒有實際做過的項目保持待完成。
本次任務：把作品入口連結文字改成『查看三個練習作品』，目的仍為同頁作品區。只改連結文字，保留 id、圖片及 CSS。給出修改差異與重新發布後的核對項目，提醒核對公開網址和本機畫面是否一致。 核對服務與作品的其餘文字未被改動，公開網址中的目的錨點也應有效。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
確認別人看到的結果
把本機、發布副本與公開畫面分開核對。
先準備
- 自己的來源、發布副本與公開網址
改了來源
只表示電腦裡的檔案改了，線上不會自己同步。
再次發布
更新發布副本後重新上傳，再從公開網址確認新畫面。
若同學看到舊內容，先核對網址、發布時間與新分頁，不要只看自己一直開著的舊畫面。
網站能開啟，和搜尋引擎是否收錄是不同事情；這堂檢查的是實際可存取與操作結果。
跟著觀察
- 把三份畫面／檔案並列，指出各自用途。
- 說出要核對的四件事：來源、發布副本、發布時間、公開網址。
- 準備請同學或另一台裝置檢查，不用同一台電腦的 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 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。
還有時間？試試根目錄練習
先完成本堂主線，再比較「根層沒有首頁、內層頁面卻正常」的情況。