AI 商用網站開發跟著步驟，做出自己的作品
返回任務地圖

增加內容，不改壞其他地方

第 3 堂 · 第 2／3 關 · 觀念 18 分鐘＋實作 42 分鐘

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

先自己動手，再請 AI 幫一小段。

自己的練習說明已經有位置，這次讓 AI 只幫服務頁補上合作前的準備。

這關帶走：先親手加作品說明，再精準新增服務段落。

步驟 3／6 · 觀念 18 分鐘

先學一招：標題是內容的層級

先想這段內容屬於哪裡，不用標題大小決定層級。

帶上你的裝備

  • 自己的 index.html、works.html、services.html 與共用 styles.css
<main>
  <h1>作品練習</h1>
  <section>
    <h2>作品列表</h2>
    <article><h3>山間咖啡識別</h3></article>
  </section>
</main>

每頁主要 h1 只有一個；區塊用 h2、區塊裡的作品用 h3。外觀仍由 CSS 控制。

跟著觀察

  1. 指出各頁 h1 與作品 h2、h3。
  2. 找出作品列表後方、main 裡的新增位置。
  3. 找出服務清單後、聯絡區之前的位置。
只新增合作準備，應該改哪裡？

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

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

步驟 4／6 · 實作 42 分鐘

動手挑戰：親手加一段，再請 AI 加一段

保留自己完成的內容，只擴充指定區塊。

先準備

  • 自己的 index.html、works.html、services.html 與共用 styles.css
  • assets/ 的實際檔案清單
  • 一份修改前副本

先親手在 works.html 作品列表後、main 裡新增下列區塊；儲存並重新整理，再請 AI 只改服務頁。

<section class="section" id="practice-note">
  <h2>練習作品</h2>
  <p>這三件是虛構情境的前端練習，記錄我整理內容與製作頁面的過程。</p>
</section>

照這個順序開始

  1. 親手完成作品頁段落並儲存。
  2. 附上最新版，使用下方延伸修改 Prompt。
  3. 核對只在服務頁新增「合作前請準備」，其餘檔案不變。

只新增合作準備段落

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

1．附上這些檔案與資料
  • 自己的 index.html、works.html、services.html 與共用 styles.css
  • assets/ 的實際檔案清單
  • 先手動在 works.html 新增「練習作品」說明，再附這份最新版。
2．貼到哪裡
  1. 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
  2. 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
  3. 先看 AI 說明與修改差異；若只回覆程式碼，核對檔名與位置再手動存回。不要直接覆蓋其他檔案。
3．預期回覆與操作
  • 只在 services.html 的服務清單後、聯絡區前新增 h2 與三項清單。
  • 清單為簡介、作品圖片、服務資訊；其他檔案與樣式不變。
4．自己檢查結果
  • 自己的手動練習說明仍在作品頁。
  • 合作準備出現在服務頁，首頁、三項服務、圖片與導覽未被改壞。
只新增合作準備段落 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，無後端。

本次任務：我已親手在 works.html 的作品列表後新增 h2「練習作品」與說明「這三件是虛構情境的前端練習，記錄我整理內容與製作頁面的過程。」請閱讀附上的三頁 HTML 與 CSS，只在 services.html 的服務清單後、聯絡區之前新增獨立 section：h2「合作前請準備」，清單三項為「簡介」「作品圖片」「服務資訊」。先指出位置，再提供最小差異。首頁、作品頁（含我手動新增的段落）、三項服務、導覽、圖片、alt、CSS 與 APPA 都保持不變；不重做整頁。讓我確認並儲存後自行檢查。

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

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

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

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

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

卡住時，APPA 給你一點線索

線索 1｜先看位置與證據

手動段落要在 works.html 的 main 裡、作品列表後。

線索 2｜再縮小操作範圍

AI 若改了其他檔案，先看差異，只保留服務頁必要變更。

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

  • 作品頁有親手新增的說明。
  • 服務頁有 h2 與簡介、作品圖片、服務資訊三點。
  • 未實際執行的 AI、Git、發布或另一裝置檢查保持待完成。
需要對照？看這一關的參考成果

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

對照這一步的結果（另開分頁）

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

每一步，都留下自己的成果。

先實際完成上面兩項確認，再記下這一關的修改與結果。也可以先往下閱讀，之後回來補做。

前往下一關：讓三頁都能順利往返返回上一關：替內容找到自己的頁面

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

留下自己的檢查紀錄

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

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