三頁網站與連結故障操作
本頁只練內容分配與連結,不需要後端或重新發布。
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,將結果記入本堂筆記。