第 03 堂｜把內容整理成三頁網站
替介紹、作品與服務安排自己的頁面，再練習只改指定內容。
內容要放在哪一頁
先分配內容，再建立新檔案。
先準備
- 第 2 堂正常 portfolio；還沒公開發布也能先做本機練習
沿用自己的正常作品。缺進度才取起始檔；它與第 2 堂完成版一致，不能抵免尚未完成的發布操作。
| 檔案 | 這一頁放什麼 |
|---|---|
| index.html | 林小禾、版面設計、APPA、作品摘要 |
| works.html | 三件作品、三張圖片與說明 |
| services.html | 三項服務與合作入口 |
<header>頁首與品牌</header>
<nav>三頁共用導覽</nav>
<main>這一頁的主要內容</main>
<footer>頁尾說明</footer>跟著觀察
- 在正常頁面指出自介、三項服務與三件作品。
- 親手寫三頁內容分配表，保留姓名、技能與素材。
- 對照 header、nav、main、footer 的用途。
做完，自己確認
- 我能說出三頁各放什麼。
- 我知道三個 HTML 檔案共用一份 CSS。
把一頁整理成三頁
用 AI 協作建立頁面，自己開啟核對。
先準備
- 自己的 index.html、works.html、services.html 與共用 styles.css
這關開始把 assets/ 的三張原創示意圖放進作品頁，不重新生成圖片。先以作品名稱提供基本 alt，下一堂再練習具體描述。
| 檔案 | 這一頁放什麼 |
|---|---|
| index.html | 林小禾、版面設計、APPA、作品摘要 |
| works.html | 三件作品、三張圖片與說明 |
| services.html | 三項服務與合作入口 |
跟著做
- 先保留單頁副本，再在自己的 portfolio 使用下方 Prompt。
- 核對三頁 HTML 與必要 CSS 差異，再儲存。
- 分別開啟 index.html、works.html、services.html，找主標、導覽、作品圖。
建立三頁網站
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的單頁 portfolio/index.html、styles.css
- 實際素材清單：assets/appa.png、work-brand.jpg、work-web.jpg、work-layout.jpg
- 自己寫好的三頁內容分配表：首頁、作品、服務各保留什麼
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 先看 AI 說明與修改差異；若只回覆程式碼，核對檔名與位置再手動存回。不要直接覆蓋其他檔案。
- 3．預期回覆與操作
- 先取得內容分配與新增檔案清單，再看到三頁 HTML 及同一份 CSS 的必要變更。
- 保留 APPA、姓名、技能、三項服務與紫綠配色；現在不加入下一關的兩個新段落。
- 4．自己檢查結果
- 三頁各有一個 h1、header、nav、main、footer。
- 三頁共用 styles.css，作品頁三圖正常，主入口到 works.html。
建立三頁網站 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，無後端。
本次任務：先閱讀我附的 index.html、styles.css、實際素材清單與三頁內容分配表，再把青禾單頁整理成三頁。首頁保留林小禾、版面設計、APPA 及三件作品摘要，原「查看三個練習作品」入口改到 works.html；作品頁放山間咖啡識別、日常選物網站、城市活動版面，分別使用 assets/work-brand.jpg、work-web.jpg、work-layout.jpg，先以作品名稱寫基本 alt；服務頁保留品牌設計、網站設計、活動頁設計及範例信箱 demo@example.com。三頁均有 header、nav、單一 h1、main、footer；導覽明確連到 index.html、works.html、services.html，標示目前頁面。共用 styles.css，保留既有紫綠配色、APPA 比例與減少動態規則，只增加必要圖片樣式與目前頁面提示。先列內容分配及檔案變動，再提供三頁 HTML 和必要 CSS；不要提前加入「練習作品」獨立說明、「合作前請準備」或本人角色文字，不加框架、JS、表單寄送或遠端素材。讓我自己儲存後逐頁檢查。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
標題是內容的層級
先想這段內容屬於哪裡，不用標題大小決定層級。
先準備
- 自己的 index.html、works.html、services.html 與共用 styles.css
<main>
<h1>作品練習</h1>
<section>
<h2>作品列表</h2>
<article><h3>山間咖啡識別</h3></article>
</section>
</main>每頁主要 h1 只有一個；區塊用 h2、區塊裡的作品用 h3。外觀仍由 CSS 控制。
跟著觀察
- 指出各頁 h1 與作品 h2、h3。
- 找出作品列表後方、main 裡的新增位置。
- 找出服務清單後、聯絡區之前的位置。
做完，自己確認
- 我能區分主標、區塊標題與作品標題。
- 我知道兩個新段落各應放在哪一頁。
親手加一段，再請 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>跟著做
- 親手完成作品頁段落並儲存。
- 附上最新版，使用下方延伸修改 Prompt。
- 核對只在服務頁新增「合作前請準備」，其餘檔案不變。
只新增合作準備段落
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的 index.html、works.html、services.html 與共用 styles.css
- assets/ 的實際檔案清單
- 先手動在 works.html 新增「練習作品」說明，再附這份最新版。
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 先看 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 或自動完成關卡。
連結從目前的檔案出發
看到 href，就能指出要開啟哪個檔案。
先準備
- 自己的 index.html、works.html、services.html 與共用 styles.css
- assets/ 的實際檔案清單
<a href="index.html">首頁</a>
<a href="works.html">作品</a>
<a href="services.html">服務</a>三頁放在同一層，連結直接寫檔名。保留完整 index.html，才能直接開檔使用，不依賴伺服器替你找首頁。
跟著觀察
- 從三份 HTML 各指出 nav 裡的目的地。
- 先走一次六條跨頁路線：首頁 → 作品；首頁 → 服務；作品 → 首頁；作品 → 服務；服務 → 首頁；服務 → 作品。
- 只觀察正常來源，故障稍後在另一份副本操作。
做完，自己確認
- 我能指出服務頁首頁連結的目標。
- 我知道 #works 與 works.html 是不同目的地。
修好回不了首頁的連結
用證據找問題，只改必要的一處。
先準備
- 獨立 fault-L03/portfolio；正常來源保留
把故障包中的 portfolio 複製到 student-work/fault-L03/portfolio。從服務頁點首頁，先記錄失效，再使用下方 Prompt。
跟著做
- 重現故障並記下預期、實際現象與檔案樹。
- 核對 AI 建議，只修故障副本的一個 href。
- 實際走六條路線、確認圖片，再把原因與結果寫到本堂筆記。
修好返回首頁的連結
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 獨立 fault-L03/portfolio 的三頁 HTML，避免附到正常 portfolio
- 故障副本實際檔案樹
- 實際路線：從 services.html 點首頁失效；預期到 index.html；作品頁可正常返回。
- 2．貼到哪裡
- 在 Cursor 開啟這一關指定的自己的練習資料夾，進入內建 AI 對話。
- 用 @ 選取下列指定檔案，核對完整路徑，再貼實際清單、補充資料與下方 Prompt。
- 先看 AI 說明與修改差異；若只回覆程式碼，核對檔名與位置再手動存回。不要直接覆蓋其他檔案。
- 3．預期回覆與操作
- 先指出錯誤 href 與檔名的差異，提供一處最小修正。
- 不新增目的地、不改檔名、不覆蓋正常網站。
- 4．自己檢查結果
- 在故障副本修正後逐一操作六條跨頁路線。
- 只有 services.html 的一個 href 改變，圖片、其他文字與 CSS 不變。
修好返回首頁的連結 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，無後端。
本次任務：我在獨立 fault-L03/portfolio 練習，只有 services.html 點「首頁」失效，作品頁可返回。請閱讀我附的三頁 HTML、實際檔案樹及預期／實際點擊路線，先比較兩份 nav 與實際目標檔名，再指出錯誤 href 和最小修正。只修 services.html 的錯誤連結，不改名、不新增假的目的地、不重寫導覽或修改正常 portfolio。列出首頁到作品、首頁到服務、作品到首頁、作品到服務、服務到首頁、服務到作品的六條檢查路線；HTML 連結寫實際 .html 檔名，說明為何不能依賴目錄首頁解析。由我親自操作，沒有證據的結果保持待測。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。