返回任務地圖

讓網站被看見

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

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

讓你的第一頁,擁有自己的網址。

發布副本已整理好,現在找出該上傳的根層,用自己的練習帳號完成發布。再請 Cursor 改一處入口文字,練習來源、發布副本與公開畫面如何同步。

這關帶走:發布自己的網站,再更新一處內容。

步驟 3/6 · 觀念 18 分鐘

先學一招:找到正確的發布根層

指出 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

跟著觀察

  1. 把 publish-ready 第一層的內容列出來。
  2. 指出哪個是首頁,CSS 與圖片應該位於哪裡。
  3. 說明「開深層 index.html 正常」和「根網址能開首頁」的差別。
準備發布時,應選哪一層的內容?

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

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

步驟 4/6 · 實作 42 分鐘

動手挑戰:發布一次,再更新一次

取得自己的公開網址,再讓線上顯示更新後的連結文字。

先準備

  • 自己的 publish-ready
  • 自己可登入的練習帳號
  • 本堂發布指南

先在自己的獨立練習專案發布,從平台結果取得實際 HTTPS 網址。帳密只輸入官方登入畫面,不貼到 Prompt。

上線後,再更新一處文字

原本

查看練習作品

更新後

查看三個練習作品

目的仍是 #works。改完來源檔後,也要同步發布副本並再次上傳。

照這個順序開始

  1. 依指南建立自己的練習專案,上傳正確根層,記錄實際網址與發布時間。
  2. 在 Cursor 內建 AI 對話附上目前來源 HTML,貼延伸修改 Prompt,只改主要作品入口的文字。
  3. 先在本機確認錨點仍有效,再更新 publish-ready 並再次發布。
  4. 開公開網址的新分頁,確認顯示「查看三個練習作品」,也能跳到作品區。

用 Cursor 修改上線後的入口文字

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

1.附上這些檔案與資料
  • 正常來源 portfolio/index.html:附上目前的最新版,不是教材的參考頁。
  • 本堂發布指南文字,以及自己實際取得的公開網址與發布狀態;尚未發布時註明待完成。
2.貼到哪裡
  1. 在 Cursor 開啟自己的正常 portfolio,用 @ 選取 index.html,再貼上狀態、指南與下方 Prompt。
  2. 讓可用的 Agent 只修改主要作品入口的顯示文字,先查看檔案差異。
  3. 保留並儲存指定修改;若只收到片段,核對位置後手動替換。發布副本與平台上傳由自己另行操作。
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 或自動完成關卡。

卡住時,APPA 給你一點線索

線索 1|深層網頁正常,不代表根網址正常

打開 publish-ready 先看第一層。如果還要再進 portfolio 才找到 index.html,層級就多了一層。依本堂指南發布正確內容,不移走唯一正常來源。

線索 2|本機改了,公開網站不會自己更新

先查看 Cursor 的 HTML 差異,只改入口文字並保留 #works。儲存後在本機點一次,再同步 publish-ready 並依指南重新發布;用新分頁與實際網址確認。

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

  • 自己的公開 HTTPS 網址可以開啟首頁,APPA 與樣式正常。
  • 公開頁面的入口顯示「查看三個練習作品」,點擊仍移動到作品區。
  • 正常來源與發布副本都有保留,實際網址、首次及更新時間已記錄;沒完成的項目仍待完成。
需要對照?看這一關的參考成果

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

對照更新後的結果(另開分頁)

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

網址之外,也學會更新的方法。

實際帳號或發布還沒完成時,先記下待辦;可以自由前往下一關學習交付檢查。

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

留下自己的檢查紀錄

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

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