跟著步驟操作,實際結果自己確認。

返回剛才的步驟

三頁網站與連結故障操作

本頁只練內容分配與連結,不需要後端或重新發布。

1. 沿用自己的正常作品

保留第 2 堂的正常 portfolio。缺進度才取得第 3 堂起始包;解壓縮後把 portfolio 複製到自己的 student-work,不能覆蓋唯一正常來源。未完成的公開發布仍記待完成。

2. 先寫內容分配表

檔案 內容 必須保留
index.html 個人介紹、作品摘要 林小禾、版面設計、APPA
works.html 三件作品與三張示意圖 原作品名稱與說明
services.html 三項服務與合作入口 活動頁設計、範例信箱

三頁共用 styles.css 與 assets,不複製三份樣式。作品圖分別是 work-brand.jpg、work-web.jpg、work-layout.jpg;都是本教材提供的原創示意素材。

3. 親手新增,再請 AI 修改

先在作品列表後、main 裡手動新增 h2「練習作品」與這句說明:

這三件是虛構情境的前端練習,記錄我整理內容與製作頁面的過程。

儲存後再用本關 Prompt,只在服務清單後、聯絡區前新增「合作前請準備」,三點為簡介、作品圖片、服務資訊。

4. 用獨立副本練故障

把連結故障包內的 portfolio 複製到 student-work/fault-L03/portfolio。先開 services.html,點「首頁」重現問題;記下預期、實際路線與檔案樹,再附三頁原始碼使用檢查修正 Prompt。

只在這份故障副本修必要連結,不新增假的目的地、不改正常網站,也不把參考完成版整份覆蓋。

5. 親自點完六個方向

  • 首頁 → 作品、首頁 → 服務。
  • 作品 → 首頁、作品 → 服務。
  • 服務 → 首頁、服務 → 作品。

三頁每個導覽都寫完整 index.html、works.html 或 services.html。直接開檔及本機預覽均需實際測試;沒有測過的方式記待測。最後確認三張圖片、APPA 與 CSS,將結果記入本堂筆記。

返回剛才的步驟