總覽

只印這一段

全程 20 週，每週 6 小時：

• 第 1～16 週：走完網站單元 00～07。過程中完成「我的主力版型」v1、v2、v3，並做兩次階段驗收。
• 第 17～20 週：六次正式模擬，每週 1 小時講評。

章節 key 就是網址 #lesson/單元/章節 的後半段，可以直接貼進網址列。

從比賽日倒推

比賽是第 20 週的下一週。用比賽第一天往前數 20 週，就是開課那一週。

例：115 學年比賽是 115/12/1～12/4，往前 20 週大約是 115/7/14 那一週開課。學期中才開始的話，用下面的「有基礎路線」壓縮第 1～9 週。

比賽時不能帶檔案進場

規則寫明入場「不得攜帶任何物品」，比賽電腦也會還原。所以：

• 主力版型 v3 要在考場默寫出來。時間標準只有一套：第一次 60 分鐘 → 第二次 45 分鐘內（通過標準）→ 比賽前練到 35 分鐘（目標）。240 分鐘的配時表第一段（15～60 分）就是默寫 v3。
• 擴充模組也要憑記憶寫：篩選、小測驗、報名表練到能默寫（限時練習題 E，每個 25 分鐘）。
• 第 13 週起每週默寫一次。從看「默寫卡」開始，到第 16 週要能不看任何資料完成。
• **主力版型只靠考場正式提供的 jQuery 4.0.0，不依賴 Bootstrap。**Bootstrap 有 CSS、JS 兩個檔案要從比賽電腦裡找出來、對好版本，主力版型只依賴 jQuery 一個檔案。單元 02 的 Bootstrap 章節和 v3-bootstrap 參考答案，只當補充知識。每年仍把函式庫的提供情形填進年度規則確認表。

版本線

版本	哪一週完成	章節	內容
v1	第 7 週	〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1	骨架＋排版（Flex 導覽、圖文、Grid 卡片、768 斷點、1200 版心、主題層變數）
v2	第 9 週	〈把特效裝回主力版型 v2〉visual/template-v2	v1＋按鈕狀態、導覽底線、圖片放大、卡片浮起、主題母題、進場動畫、減少動態
v3	第 12 週	〈我的主力版型 v3：檢查、保存，練到能默寫〉javascript/template-v3	v2＋jQuery：手機選單、固定頁首與目前區塊、頁籤、燈箱（原生 dialog）、常見問題、勾選計數與展開，一支 main.js，不用 Bootstrap
擴充模組	第 13 週	〈v3 擴充模組：篩選、燈箱、輪播、小測驗、報名表〉javascript/contest-modules、javascript/contest-extras	篩選等五模組；補強倒數、報名摘要、字級記憶、時間軸、雙條件，各一個 init 函式，只用 jQuery，題目要時再加

兩條路線

只印這一段

零基礎路線：照下表逐週走，「選做」欄全部略過。「選做」欄就是網站上組名以「延伸（選做）」開頭的章節（單元 02 三章、03 五章、04 六章），排在各單元主線之後，按「下一章」不會走進去，也不計入單元完成。比賽日固定，不能延長週數。跟不上的學生：

• 第 17、18 週的模擬 2、4，改成用那 120 分鐘補做版本線，例如重做 v3，或默寫 v1 再升級成 v3。
• v1、v3 和默寫練習不能刪。

有基礎路線（考過就跳）：每個單元開頭先做「跳級測驗」，通過就直接從該單元的版本線章節開始：

• 單元 01：30 分鐘內從空白建立三個檔案，連好 CSS 與 JS，按按鈕會改文字。
• 單元 02：60 分鐘內看線框，用 Flex 和 Grid 排出頁首、圖文、三張卡片，三種寬度不溢出。通過就跳到 〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1。
• 單元 03：20 分鐘內寫出按鈕三態、圖片放大與減少動態。通過就跳到 〈把特效裝回主力版型 v2〉visual/template-v2。
• 單元 04：先修好故障包八題中的 6 題。通過就跳到 〈比賽怎麼做互動：jQuery 為主、Bootstrap 只當補充〉javascript/contest-stack。

每週進度

只印這一段

週	主題	必走章節	選做（零基礎可略過）	課堂產出	限時任務
1	開課前診斷（90 分鐘）、單元 00 環境、01 連檔案	〈下載起手式專案並安裝 VS Code〉ready/setup-download、〈用「開啟資料夾」載入完整專案〉ready/open-project-folder、〈開啟網站並完成環境驗收〉ready/launch-starter、〈打開瀏覽器的開發人員工具（DevTools）〉ready/devtools-basics、〈檔案結構與相對路徑〉foundations/files、〈三個檔案：先連 HTML 與 CSS 看顏色〉foundations/three-files、〈三個檔案：再連 JavaScript 看按鈕〉foundations/three-files-js	—	能開啟的 student-starter；三個檔案連起來	10 分鐘：確認資料夾與畫面五項
2	01 HTML	〈看懂標籤、屬性與 class〉foundations/tags-classes、〈儲存、路徑與第一個錯誤〉foundations/save-path-debug、〈HTML：先看結構地圖〉foundations/html、〈HTML：文件結構與標籤關係〉foundations/guided-reference-7～-12	—	主力版型的 HTML 骨架	30 分鐘：依線框打出六個區塊
3	01 CSS Base 與第一次互動	〈CSS Base：選到元素並改變樣式〉foundations/css、〈JavaScript 先備：const、let、三種基本值與陣列〉foundations/js-values、〈JavaScript 先備：querySelector 的輸入與選取結果〉foundations/js-selectors、〈JavaScript Base：先看第一次點擊的結果〉foundations/javascript-sense、〈JavaScript Base：自己建第一次點擊的三個檔案〉foundations/javascript-sense-build、〈JavaScript Base：input、value 與 input 事件〉foundations/js-input-base、〈不看答案重建小網頁〉foundations/independent-build、〈先知道比賽怎麼評分〉foundations/how-scored	—	有樣式的卡片；點擊與輸入即時顯示	40 分鐘：套 class 並完成一次點擊
4	02 CSS 規則與盒模型	〈CSS 學習導讀：選元素、看規則、算盒子〉layout/css-core-deep、〈CSS：選擇器怎麼選到元素〉layout/guided-reference-2～-7	—	my-layout 練習頁：選擇器、盒模型、文字色彩	30 分鐘：卡片的內距、邊框、陰影
5	02 Flexbox	〈Flexbox 導引：先分清容器與主軸〉layout/flexbox-complete、〈Flexbox：容器、主軸與交叉軸〉layout/guided-reference-9～-15	—	導覽、圖文、卡片、置中四個配方	40 分鐘：導覽＋圖文
6	02 Grid	〈Grid：先排出基本欄〉layout/grid-complete、〈Grid：依寬度改欄數〉layout/grid-responsive	〈Grid：讓一張卡片跨欄〉layout/grid-span、〈Bootstrap 5：只學 12 欄 row／col 格線〉layout/bootstrap2-foundations、〈Bootstrap 5：先看 Collapse／Carousel 結構〉layout/bootstrap2-widgets（網站上排在單元 02 最後的「延伸（選做）」）	三欄卡片區	30 分鐘：卡片 1→3 欄
7	02 RWD 與主力版型 v1	〈RWD 與可讀性〉layout/rwd、〈RWD：viewport 與先做單欄〉layout/guided-reference-22～-24、〈先固定一個主力版型，想清楚要放什麼〉layout/core-template、〈主力版型：只用 Flex 排導覽〉layout/layout-engine、〈主力版型：只用 Grid 排卡片〉layout/layout-grid-cards、〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1	—	v1	三寬度＋1920 檢查
8	v1 熟練與單元 03 開頭	〈同一版型的可變與不可變項目〉layout/controlled-variation、〈主力版型重複演練〉layout/template-drill、〈特效前置：先學會 position〉visual/effect-position、〈特效前置：用 overflow 裁切圖片〉visual/effect-overflow、〈特效前置：用偽元素做裝飾〉visual/effect-pseudo、〈互動狀態：hover、focus-visible 與 active〉visual/states	—	階段驗收 1：90 分鐘只看線框與 class 清單重建 v1	90 分鐘半提示重建
9	03 CSS 特效與 v2	〈transition：讓狀態變化有過程〉visual/css-transition-short、〈transform：旋轉與變形支點〉visual/css-transform-short、〈keyframes：播放一次與減少動態〉visual/css-keyframes-short、〈特效配方：先做圖片放大〉visual/effect-recipes、〈特效配方：導覽底線展開〉visual/effect-navline、〈把特效裝回主力版型 v2〉visual/template-v2	〈特效配方：圖片覆蓋層〉visual/effect-overlay、effect-stagger、gradient-concept、variation-concept、visual-observation	v2	40 分鐘：在 v1 上完成必做特效
10	04 語言工具與事件	〈語言工具：用函式幫一組動作取名字〉javascript/js-functions、〈語言工具：用陣列與物件保存一組資料〉javascript/js-arrays-objects、〈執行時機、型別比較、return 與 forEach〉javascript/js-runtime-deep、〈addEventListener：從註冊、等待到執行〉javascript/event-lifecycle、〈DOM、dataset、預設行為與鍵盤事件〉javascript/dom-events	〈語言工具：先分清變數會不會重新指定〉javascript/language-toolkit	能讀值、判斷、改畫面的小程式	20 分鐘：狀態切換
11	04 元件與 jQuery 入門	〈單一元件：用 class 開啟與關閉〉javascript/components、〈狀態模型：JavaScript 切換 class，CSS 更新畫面〉javascript/state-css-bridge、〈多個元素：querySelectorAll、forEach 與完整頁籤〉javascript/js-tabs-complete、〈jQuery 4：對照改寫已學會的原生互動〉javascript/jquery2-baseline	〈燈箱：完整 HTML、CSS、JavaScript 操作週期〉javascript/lightbox、〈手風琴：完整 HTML、CSS、JavaScript 操作週期〉javascript/accordion、〈輪播：手動切換上一張與下一張〉javascript/carousel-reveal、〈捲動顯示：進場時才出現〉javascript/scroll-reveal、〈事件冒泡、委派與 jQuery 4 對照〉javascript/event-delegation（原生版元件，網站上排在單元 04 最後；燈箱、常見問題在 v3 用 jQuery 做）	原生選單、頁籤；jQuery 改寫的選單	45 分鐘：選單＋頁籤
12	04 比賽主力與 v3	〈比賽怎麼做互動：jQuery 為主、Bootstrap 只當補充〉javascript/contest-stack、contest-navbar、contest-modal-tabs、contest-jquery-tools、template-v3	—	v3	40 分鐘：在 v3 加一個題目指定互動
13	04 除錯、擴充模組、第一次默寫	〈Console 除錯：先處理第一個錯誤〉javascript/debug、〈v3 擴充模組：篩選、燈箱、輪播、小測驗、報名表〉javascript/contest-modules、javascript/contest-extras	—	五個擴充模組；故障包八題	題 D 第 1 次：看默寫卡默寫 v3（60 分鐘內）
14	05 UI/UX：讀題、資訊架構、配色	〈從題目到一句核心訊息〉uiux/concept、〈把題目放進主力版型〉uiux/ia、〈色彩規則：從資訊工作建立配色〉uiux/color-system、〈局部限時練習：換題、加互動、重建、默寫 v3〉simulation/timed-drills（先讀規則）	—	企畫一頁紙、線框、配色表	題 A（20 分鐘換題）；題 E 第 1 次（25 分鐘默寫一個擴充模組）；默寫 v3（只看標題清單）
15	05 主題轉譯與 06 規則	〈最小設計系統 / Style Tile〉uiux/system、〈國際案例分析與轉譯〉uiux/references、〈看懂競賽規則與評分〉competition/rules、〈學科準備：題庫 70％＋相關範圍 30％〉competition/written-prep	—	用主題層＋母題做出的第二種主題（階段驗收 2，課堂內 120 分鐘）	題 B（40 分鐘加互動）；題 E 第 2 次（換一個模組）
16	06 讀題流程、07 成熟度階梯與限時練習	〈讀題與任務拆解〉competition/brief、〈固定製作流程〉competition/production-flow、〈作品檢查與故障演練〉competition/final-check、〈模擬成熟度階梯〉simulation/ladder、〈局部限時練習：換題、加互動、重建、默寫 v3〉simulation/timed-drills	—	題 A～E 紀錄表	題 C（60 分鐘重建 v1）；題 D 第 2 次：不看資料 45 分鐘默寫 v3；題 E 第 3 次（第三個模組）
17	模擬 1、2	〈一次完整模擬的流程〉simulation/full-run、〈賽後講評與版本管理〉simulation/review、〈六次正式模擬與結業標準〉simulation/six-mocks	—	原始版、自評、修正版	120 分鐘 ×2
18	模擬 3、4	—	—	同上	120 分鐘 ×2
19	模擬 5	—	—	同上	240 分鐘全真
20	模擬 6	—	—	同上	240 分鐘全真

六次正式模擬

只印這一段

這一份和網站「六次正式模擬與結業標準」（〈六次正式模擬與結業標準〉simulation/six-mocks）是同一份安排。三份模擬試題在模擬之前不會出現在教學範例裡，教學範例一律用 docs/simulations/mock-briefs.md 的題目。

次	週	重點	用什麼練	時間	必做互動
1	17	默寫＋換主題	不看資料默寫 v3，再換成老師指定的新主題	120 分鐘	沿用 v3
2	17	內容敘事	模擬試題一〈山徑慢行〉	120 分鐘	題目指定的兩項
3	18	響應式與易用性	模擬試題二〈防詐生活館〉	120 分鐘	題目指定的兩項
4	18	題目工具	mock-briefs 的題目 5〈未來學習站〉，或老師自編題（題目 3 留給模擬 1、題目 6 留給模擬 6，不要挪用；網站寫「從教學題庫選一題」），要求三項互動，其中一項來自擴充模組	120 分鐘	三項
5	19	全真	模擬試題三〈河港燈會〉，從默寫 v3 開始	240 分鐘	全部
6	20	陌生題型全真	歷屆術科試題或老師另出新題	240 分鐘	全部

第 5、6 次必須穩定保留最後 30 分鐘做檢查。修正版回家做，下一週上課前交。

限時練習的通過條件：題 A～C 各做一次並寫紀錄；題 E 三個模組（篩選、小測驗、報名表）各做一次，都在 25 分鐘內；題 D（默寫 v3）要做兩次（第 13、16 週），第二次在 45 分鐘內才進入模擬。沒通過的學生，第 17 週的模擬 1 改成「看標題清單默寫＋換主題」。

每週固定作業

只印這一段

1. 保存本週的原始版與修正版。
2. 記錄三個錯誤、原因和修法。
3. 記錄各階段完成時間。
4. 用 375px、768px、1366px、1920px 四種寬度各測一次。
5. 從第 13 週起，每週默寫一次 v3，記下用了幾分鐘。
6. 學科：從第 1 週起，每週至少 20 分鐘用網站的「學科練習」（先從工作項目 02 開始）；第 15 週起每週回家做一次 60 分鐘模擬考（網站「學科練習 → 模擬考」，每次隨機 40 題），不佔上課時間。學科佔總成績 15%，題目約七成來自丙級題庫。

評分

只印這一段

講評時一律用官方四項配分：主題表現 30%、網頁技術應用與互動性 25%、視覺設計 25%、創意表現 20%。檢核點見 評分規準與檢查表，每週上課內容見 上課卡。

每週固定節奏（6 小時）

只印這一段

時段	第 1～14 週	第 15～20 週
開場	10～15 分	10～15 分
核心線＋延伸／補救	約 4 小時	依當週卡片
限時任務	依當週卡片	依當週卡片
學科練習	20 分（網站「學科練習」，先從工作項目 02 開始）	回家做 60 分模擬考（網站「學科練習 → 模擬考」），不佔上課時間
收尾	10 分	10 分

收尾 10 分鐘，每週都一樣：

1. 學生在課程地圖填姓名、按「複製進度給老師」，把那一行貼到老師的共用表單或訊息群組。老師貼進 全班進度總表。
2. 學生在課程地圖按「備份進度（下載檔案）」，把進度檔和本週作品資料夾一起存到隨身碟或雲端（見 教師手冊的電腦還原卡）。
3. 在紀錄表寫下本週三個錯誤、原因、修法，以及限時任務用了幾分鐘。

每週開場前 1 分鐘：還原卡電腦重開後，學生先在課程地圖按「還原進度（選備份檔）」，再按「繼續上次的進度」開始上課。

兩條路線怎麼在卡片上看

只印這一段

• 零基礎路線：只走「核心線」。卡在核心線的走「補救線」。計畫表的「選做」一律略過。
• 有基礎路線：每個單元開頭先做跳級測驗（寫在第 1、3、8、10 週卡片的延伸線）。通過的學生直接做該單元的版本線章節，空出來的時間走「延伸線」，不提早進入下一個單元，避免和全班的版本線脫節。
• 延伸線的順序固定：先做特效庫必練，再做題目練習，最後才是選做的特效。

題目分配（避免模擬題曝光）

只印這一段

計畫規定：模擬試題一～三（山徑慢行、防詐生活館、河港燈會）在模擬當週之前不發、不當範例。教學範例一律用 模擬題庫。題庫的題目這樣分配，不要挪用。注意：網站 〈讀題與任務拆解〉competition/brief（第 16 週）的讀題任務已經列出題目 2～5 的必做內容與必做技術，讓學生「只讀題不製作」；所以題目 3、5 到模擬 1、4 時是「讀過需求、沒做過」，文案、圖片與指定互動仍等模擬當天才發。想要完全陌生的題目，模擬 1、4 改用老師自編題或題目 6 模板。

三份模擬試題網頁：試題一 山徑慢行、試題二 防詐生活館、試題三 河港燈會。注意：學生的〈全真模擬〉〈六次模擬〉章節也連得到這三份網頁（自學的學生需要），所以「當週才發」靠的是約定：開學時跟學生說好模擬當週才打開。每份試題最後的評分附錄預設收合，列印時會一起印出；只發題目給學生時，按試題頁上方的「列印試題（發給選手，不含附錄）」：附錄（評分對照、配時、本題陷阱，A4 約 3 頁）整段不會印出。

題庫題目	用在哪裡	誰看得到
題目 1 島嶼慢旅節	第 14 週 UI/UX 講解範例	全班
題目 4 一口安心食品品牌	第 14 週「30 分鐘讀題排區塊」	全班
題目 2 修理日常	第 15 週階段驗收 2 的新主題	全班
題目 3 字裡行間—青年文字展	第 16 週讀題任務（網站列出需求）；第 17 週模擬 1「換主題」	需求第 16 週全班看得到；文案與圖模擬當天才發
題目 5 未來學習站	第 16 週讀題任務（網站列出需求）；第 18 週模擬 4（三項互動，篩選來自擴充模組）	需求第 16 週全班看得到；文案、圖與指定的三項互動模擬當天才發
題目 6 全真未知題模板	第 20 週模擬 6（或改用歷屆術科試題）	模擬當天才發

第 2～13 週的延伸線如果需要「換文案」的練習，用第 14 週題 A 的「社區二手市集」或老師自編的校內活動，不要用上表第 3、5、6 題。

---

第 1 週｜單元 00 環境、01 連檔案

只印這一段

時間配置：開課前診斷 90 分 → 開場 15 分 → 核心線約 3 小時 → 限時 10 分 → 學科 20 分 → 收尾 15 分（第一次教備份進度，多留 5 分）。

開場

• 先做 教師手冊的開課前診斷（90 分鐘），下課前公布每人走哪條路線。
• 簡報第 1 課只講 2、3、7、9 張（課程終點、五種能力、240 分鐘時間軸、今日任務），約 8 分鐘。
• 簡報第 2 課第 1、2 張（網站資料夾圖、HTML／CSS／JS 分工），約 5 分鐘。
• 可以播 〈檔案結構與相對路徑〉foundations/files 的章節導讀影片收尾。

核心線

〈下載起手式專案並安裝 VS Code〉ready/setup-download → 〈用「開啟資料夾」載入完整專案〉ready/open-project-folder → 〈開啟網站並完成環境驗收〉ready/launch-starter → 〈打開瀏覽器的開發人員工具（DevTools）〉ready/devtools-basics → 〈檔案結構與相對路徑〉foundations/files → 〈三個檔案：先連 HTML 與 CSS 看顏色〉foundations/three-files → 〈三個檔案：再連 JavaScript 看按鈕〉foundations/three-files-js

做完的樣子：

• student-starter 用 VS Code「開啟資料夾」後，左側看得到 index.html、css、js、images。
• 瀏覽器裡主標題、hero.jpg、logo.svg 都正常顯示；按「測試 JavaScript」畫面會變。
• 自己建的練習資料夾有 index.html、css/style.css、js/main.js 三個檔案，按鈕按下去會改文字。

延伸線

• 有基礎路線：最後一節做單元 01 跳級測驗：30 分鐘內從空白建立三個檔案，連好 CSS 與 JS，按按鈕會改文字。通過的人網站會直接帶到單元 02（單元 01 跳過的章自動標記完成）；第 2 週的核心線只做 〈HTML：主力版型骨架〉foundations/guided-reference-11（主力版型骨架），其餘時間走第 2 週延伸線。
• 學科練習多做一回（工作項目 02）。

補救線

• 先只求 setup-download、open-project-folder、launch-starter 三章通過。
• 學校電腦不能裝 Live Server 時，照 setup-download 第 3 步直接雙擊 index.html，不要卡在安裝。
• three-files-js 沒做完的，第 2 週第一節先補。

限時任務：10 分鐘確認資料夾與畫面五項

• [ ] VS Code 用「開啟資料夾」打開 student-starter（不是只打開一個檔案）。
• [ ] 左側同時看得到 index.html、css、js、images。
• [ ] 瀏覽器看得到主標題、hero.jpg、logo.svg，沒有破圖。
• [ ] 按「測試 JavaScript」後畫面有改變；DevTools 的 Console 沒有紅字。
• [ ] 把整個資料夾複製到桌面另一個位置再開一次，圖片仍在。

老師要準備

• 診斷題目卡與素材（題目內容見 教師手冊的開課前診斷；圖片在 diagnostic-kit.zip）、診斷紀錄表。
• student-starter.zip 先放進每台電腦或隨身碟（學校網路不穩時）。
• 列印：電腦還原卡（每人一張）、全班進度總表。
• 跳級測驗在網站各單元頁的上方（「有基礎？先做跳級測驗」），例如 單元 01、單元 02；通過的學生網站會自動帶到下一單元。
• 確認每台電腦的瀏覽器能開 DevTools（有些學校會鎖 F12）。

---

第 2 週｜單元 01 HTML

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 30 分 → 學科 20 分 → 收尾 10 分。

開場

• 簡報第 2 課第 3～8 張：相對路徑、HTML 骨架、語義標籤比較、錯誤路徑診斷、搬移測試、限時任務與驗收。
• 播 〈看懂標籤、屬性與 class〉foundations/tags-classes 的章節導讀影片（約 1 分鐘）。
• 發下本週附件的主力版型線框，告訴學生：這張線框會用到第 8 週驗收，請貼在筆記本裡。

核心線

〈看懂標籤、屬性與 class〉foundations/tags-classes → 〈儲存、路徑與第一個錯誤〉foundations/save-path-debug → 〈HTML：先看結構地圖〉foundations/html → 〈HTML：文件結構與標籤關係〉foundations/guided-reference-7～〈HTML：常見錯誤與驗收〉foundations/guided-reference-12

做完的樣子：my-skeleton/index.html（複製 student-starter 改名）有六個區塊（頁首含導覽、主視覺、主題介紹、三張卡片、行動呼籲、頁尾）。還沒有樣式，但由上往下讀得懂；三個導覽連結點下去會跳到對應區塊。

延伸線

• 用同一份骨架做「長文案壓力測試」：把主標題改成 30 個字、卡片文字改成三行以上，確認 HTML 結構不用改。
• 用第 14 週題 A 的「社區二手市集」內容，把骨架的文字全部換掉，但不動任何標籤和 class（預習「換題不換骨架」）。
• 學科多做一回。

補救線

• 路徑出錯的學生先做 save-path-debug，再回到 html。
• guided-reference-7～-10 只做每章第一步（跟做），先求 guided-reference-11 完成骨架。
• 給線框的「填空版」：老師在線框旁先寫好標籤名稱（header、section、article…），學生只補 class 和 id。

限時任務：30 分鐘依線框打出六個區塊

只看線框，不看章節和答案。

• [ ] header.site-header 裡有 a.brand 和 nav.site-nav，導覽有三個連結。
• [ ] main#top 裡依序有 section.hero、section#about.about、section#highlights.highlights、section#join.cta。
• [ ] .hero 裡分成 div.hero-copy（小標籤、h1、說明、按鈕）和 figure.hero-visual（圖片）。
• [ ] div.cards 裡有三個 article.card，每張都是 h3＋p，結構相同。
• [ ] 最後有 footer.site-footer。
• [ ] 三個導覽連結的 href 和三個區塊的 id 一一對應，實際點過都會跳。
• [ ] 圖片路徑是 images/hero.jpg（相對路徑），有 alt，畫面看得到圖。
• [ ] 整頁只有一個 h1；Console 沒有紅字。

老師要準備

• 列印：下方線框（每人一張，第 8 週還會用）。
• 每人一份 student-starter（複製後改名 my-skeleton，hero.jpg 已在 images 裡）。

列印附件：主力版型線框

只印這一段

這是 v1 的版面：六個固定區塊（頁首、主視覺、主題說明、重點卡片、補充內容、行動呼籲與頁尾）裡，v1 先不放補充內容（到 v3 才放進「報名須知」），所以線框上沒有補充內容那一區。每一格寫的是「標籤.class#id」，括號是裡面放什麼。線框上寫的是位置名稱（網站名稱、重點一、參與方式…），學生第 7 週起的 v1～v3 用的是島嶼慢旅節的字；練習時打哪一種都可以，考場換題時換成題目的字。顏色和尺寸不用照原本的數字，自己決定就好。這不是默寫考，做不完是正常的，把卡住的地方記下來。

手機（375px）：由上往下一欄

桌機（768px 以上）：哪裡變成左右排

內容最寬 1200px，置中；兩側至少留 24px。

導覽文字	href	對應區塊
網站名稱（brand）	#top	main#top
關於	#about	section#about.about
重點	#highlights	section#highlights.highlights
參與方式	#join	section#join.cta

---

第 3 週｜單元 01 CSS Base 與第一次互動

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 40 分 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這四點）

1. 一條 CSS 規則：選擇器 { 屬性: 值; }。改了沒反應，先查 <link> 的路徑，再查選擇器拼字。
2. class 是 HTML、CSS、JS 三個檔案共用的名字：HTML 寫 class="card"，CSS 寫 .card，JS 寫 querySelector('.card')。
3. JavaScript 四步：選取 → 監聽 → 改變 → 更新畫面（可以先借簡報第 6 課第 1 張）。
4. Console 只看第一個紅字：它寫哪個檔案、第幾行。

• 播 〈JavaScript 先備：querySelector 的輸入與選取結果〉foundations/js-selectors 的章節導讀影片。

核心線

〈CSS Base：選到元素並改變樣式〉foundations/css → 〈JavaScript 先備：const、let、三種基本值與陣列〉foundations/js-values → 〈JavaScript 先備：querySelector 的輸入與選取結果〉foundations/js-selectors → 〈JavaScript Base：先看第一次點擊的結果〉foundations/javascript-sense → 〈JavaScript Base：自己建第一次點擊的三個檔案〉foundations/javascript-sense-build → 〈JavaScript Base：input、value 與 input 事件〉foundations/js-input-base → 〈不看答案重建小網頁〉foundations/independent-build → 〈先知道比賽怎麼評分〉foundations/how-scored

做完的樣子：card.html 的卡片有背景、內距、圓角；practice/click.html 按一下會改文字；practice/input.html 姓名輸入時旁邊即時顯示；independent-build 在新的 my-rebuild 資料夾不看答案重做出一個有樣式、能點擊的小網頁；how-scored 看懂官方四項配分。

延伸線

• 有基礎路線：最後一節做單元 02 跳級測驗（60 分鐘：看第 2 週線框，用 Flex 和 Grid 排出頁首、圖文、三張卡片，三種寬度不溢出）。通過的人第 4～6 週改走「v1 提早線」：第 4 週直接做 〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1，第 5～6 週做 〈同一版型的可變與不可變項目〉layout/controlled-variation、〈主力版型重複演練〉layout/template-drill，並開始練特效庫的 lift-button、image-zoom、nav-underline。第 7 週再回到全班進度。

補救線

• js-input-base 第 1 步一次出現 event、value、length、if／else 四個新東西。拆開做：先只印出 input.value，再加長度，最後才加 if／else。
• independent-build、how-scored 可以延到第 4 週第一節。
• CSS 只求三件事做對：<link> 連上、.card 選得到、改顏色看得到。

限時任務：40 分鐘套 class 並完成一次點擊

從空白三檔開始，可以看自己本週的檔案，不看章節。

• [ ] style.css 用 <link> 連上（改背景色畫面會變）。
• [ ] .card 有三個看得到的樣式：背景色、內距、圓角。
• [ ] JS 用 class 選到按鈕（document.querySelector('.…')）。
• [ ] 按下按鈕，指定的那段文字會改變。
• [ ] 連續按 5 次都正常，Console 沒有紅字。
• [ ] 整個資料夾搬到別的位置再開，樣式和點擊都正常。

老師要準備

• 投影一次「故意拼錯 class」的示範，讓學生看 Console 第一個紅字怎麼讀。
• 跳級測驗用的線框（第 2 週那張）和計時器。

---

第 4 週｜單元 02 CSS 規則與盒模型

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 30 分 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這四點）

1. 層疊三條規則：後寫的蓋前寫的、越具體越優先、文字類屬性會繼承。播 〈CSS：層疊、優先權與繼承〉layout/guided-reference-3 的導讀影片。
2. 盒模型由內到外：內容 → padding → border → margin。播 〈CSS：盒模型與尺寸〉layout/guided-reference-4 的導讀影片。
3. box-sizing: border-box 讓寫的寬度就是看到的寬度，主力版型第一段就會寫。
4. DevTools 的 Styles 面板：被劃掉的那一條就是被蓋掉的規則。

核心線

〈CSS 學習導讀：選元素、看規則、算盒子〉layout/css-core-deep → 〈CSS：選擇器怎麼選到元素〉layout/guided-reference-2～〈CSS：常見錯誤與練習〉layout/guided-reference-7

做完的樣子：my-layout 練習頁的選擇器、盒模型、文字色彩都套上了；guided-reference-7 的故障版修完。

延伸線

• guided-reference-7 第 2 步的「獨立做視覺」：同一份 HTML 做出第二種配色，只改 :root 變數。
• 特效庫 #effects/lift-button（按鈕上浮與陰影）：先看懂 box-shadow 和 transform，第 9 週會用到。
• v1 提早線的學生：〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1。

補救線

• guided-reference-7 只做「完成版」和「修 7 題」的前 4 題，變化與獨立視覺留到第 5 週補救時間。
• 盒模型卡住時，在 DevTools 點元素看盒模型圖，對照數字一格一格改。

限時任務：30 分鐘卡片的內距、邊框、陰影

• [ ] 全域寫了 *, *::before, *::after { box-sizing: border-box; }。
• [ ] .card 四邊內距一致（例如 28px）。
• [ ] 邊框是 1px 實線，顏色用 CSS 變數（例如 var(--color-line)）。
• [ ] 有圓角和陰影，陰影是淡的（看得出浮起，不是黑框）。
• [ ] 375px 寬時卡片沒有超出畫面。
• [ ] 在 DevTools 盒模型圖上能指出 padding 和 border 的數字，和自己寫的一樣。

老師要準備

• 列印盒模型圖（內容／padding／border／margin 四層）。
• 一份「三條規則互相打架」的小範例，開場時現場改給學生看。

---

第 5 週｜單元 02 Flexbox

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 40 分 → 學科 20 分 → 收尾 10 分。

開場

• 簡報第 3 課（Flexbox 是一條軸）第 1～8 張，第 9 張留到下課前。
• 播 〈Flexbox 導引：先分清容器與主軸〉layout/flexbox-complete 的導讀影片。

核心線

〈Flexbox 導引：先分清容器與主軸〉layout/flexbox-complete → 〈Flexbox：容器、主軸與交叉軸〉layout/guided-reference-9～〈Flexbox：失效原因與通過條件〉layout/guided-reference-15

做完的樣子：四個配方各有一份能用的檔案：導覽（品牌左、連結右）、圖文（手機上下、桌機左右）、同高卡片、置中。

延伸線

• guided-reference-15 第 2 步：不看答案重建，再把文案加倍做壓力測試。
• 用 Flex 做一個「四步流程」區塊（四個方框加箭頭，手機改成上下排）。
• v1 提早線的學生：〈同一版型的可變與不可變項目〉layout/controlled-variation。

補救線

• 四個配方先做導覽和圖文兩個（第 7 週 v1 會直接用到）；卡片和置中延到第 6 週。
• 忘記 display: flex 寫在誰身上時，回去看導讀影片「先分清容器與主軸」。

限時任務：40 分鐘導覽＋圖文

• [ ] 頁首用 Flex：手機時品牌和導覽上下排，768px 起左右排、兩端對齊。
• [ ] 導覽連結之間用 gap，沒有用 margin 硬推。
• [ ] 圖文區：手機時文字在上、圖在下；768px 起左文右圖，垂直置中。
• [ ] 圖片寫了 max-width: 100%，不會撐破。
• [ ] 375、768、1366px 都沒有橫向捲軸。
• [ ] 斷點只用一個 @media (min-width: 768px)。

老師要準備

• 列印或投影主軸／交叉軸示意圖。
• 第 3 課第 9 張的「主力版型重建」任務卡。

---

第 6 週｜單元 02 Grid

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 30 分 → 學科 20 分 → 收尾 10 分。

開場

• 簡報第 4 課（Grid 是欄與列）第 1～8 張。
• 播 〈Grid：先排出基本欄〉layout/grid-complete 的導讀影片。
• 一句話講清楚分工：卡片排列用 Grid；Bootstrap 是補充知識，看得懂別人用它寫的作品就好。Bootstrap 要另外從比賽電腦找出 CSS、JS 兩個檔案，比賽主力是自己的 CSS＋jQuery（第 12 週）。

核心線

〈Grid：先排出基本欄〉layout/grid-complete → 〈Grid：依寬度改欄數〉layout/grid-responsive

做完的樣子：三欄卡片區手機一欄、768px 起三欄。

〈Grid：讓一張卡片跨欄〉layout/grid-span、〈Bootstrap 5：只學 12 欄 row／col 格線〉layout/bootstrap2-foundations、〈Bootstrap 5：先看 Collapse／Carousel 結構〉layout/bootstrap2-widgets 在網站上已移到單元 02 最後的「延伸（選做）」，學生點「下一章」不會走進去；放到延伸線。

延伸線

• 特效庫 #effects/bs-cards（響應式卡片群，Bootstrap 補充），對照自己用 Grid 寫的版本，說出差在哪。
• 〈Grid：讓一張卡片跨欄〉layout/grid-span：用 grid-column: span 2 做一張跨兩欄的焦點卡片。
• 〈Bootstrap 5：只學 12 欄 row／col 格線〉layout/bootstrap2-foundations、〈Bootstrap 5：先看 Collapse／Carousel 結構〉layout/bootstrap2-widgets（Bootstrap 補充，講到時播 bootstrap2-widgets 的導讀影片）。
• v1 提早線的學生：〈主力版型重複演練〉layout/template-drill，並計時默寫 v1 的 HTML。

補救線

• 先做 grid-complete、grid-responsive 兩章，拿到「1→3 欄」就好。
• Bootstrap 兩章是選做，補救線不用做。

限時任務：30 分鐘卡片 1→3 欄

• [ ] .cards 用 display: grid，手機 grid-template-columns: 1fr。
• [ ] 768px 起改成 repeat(3, 1fr)。
• [ ] 卡片間距用 gap。
• [ ] 同一列的卡片等高（文字多寡不同也一樣高）。
• [ ] 多加第四張卡片，會自動排到下一列，不破版。
• [ ] 375、768、1366px 都沒有橫向捲軸。

老師要準備

• Bootstrap 5 的本機檔案（bootstrap.min.css、bootstrap.bundle.min.js）放進練習資料夾，只給補充的兩章用。比賽是離線的，不要用 CDN。

---

第 7 週｜單元 02 RWD 與主力版型 v1

只印這一段

時間配置：開場 15 分 → 核心線約 4.5 小時 → 四寬度檢查 20 分 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這五點）

1. 先寫手機版，再用一個 @media (min-width: 768px) 改成桌機版。
2. 版心一行搞定：--gutter: max(24px, calc((100% - 1200px) / 2))，左右留白至少 24px，內容最寬 1200px。
3. 主題層：顏色、字體、圓角、陰影全部寫在 :root。換題時主要改這一段。
4. v1 的 CSS 固定七段順序：主題層 → 區塊留白 → 頁首 → 主視覺 → 按鈕 → 卡片 → 行動呼籲與頁尾。
5. 檢查用四種寬度：375、768、1366、1920px。

• 播 〈RWD 與可讀性〉layout/rwd 的導讀影片。

核心線

〈RWD 與可讀性〉layout/rwd → 〈RWD：viewport 與先做單欄〉layout/guided-reference-22～〈RWD：溢出檢查與通過條件〉layout/guided-reference-24 → 〈先固定一個主力版型，想清楚要放什麼〉layout/core-template → 〈主力版型：只用 Flex 排導覽〉layout/layout-engine → 〈主力版型：只用 Grid 排卡片〉layout/layout-grid-cards → 〈組出我的主力版型 v1：一份會 RWD 的完整頁面〉layout/template-v1

做完的樣子：v1。my-template 資料夾（從 practice-template 母版複製改名）有 index.html（第 2 週 my-skeleton 的骨架，字換成島嶼慢旅節）、css/style.css（七段，大部分可從自己的 my-layout 複製再對照章節改到一樣）、images/hero.jpg，四種寬度都正常。my-skeleton、my-layout 原樣留著。

延伸線

• 不看答案，把 v1 CSS 第 3、4、6 段（頁首、主視覺、卡片）重打一次，計時。這是第 8 週階段驗收的預習。
• 改 :root 的四個顏色，做出第二種配色，截圖兩版並排。
• 有基礎路線：v1 提早線的學生，這週做 〈把特效裝回主力版型 v2〉visual/template-v2 的預習：特效庫 #effects/nav-underline、#effects/image-zoom。

補救線

• 時間不夠時，template-v1 優先。core-template、layout-engine、layout-grid-cards 三章延到第 8 週。
• guided-reference-24 只做到能交出「有導覽、五個區塊與手機版的首頁」那一步。
• v1 可以照稿完成（四階段熟練度的第 1 階段），第 8 週再要求半提示重建。

限時任務：四寬度檢查（20 分鐘）

• [ ] 375px：沒有橫向捲軸，頁首、主視覺、卡片都是一欄。
• [ ] 768px：頁首左右排、主視覺左文右圖、卡片三欄。
• [ ] 1366px：內容置中，兩側留白一樣寬。
• [ ] 1920px：內容寬度沒有超過 1200px。
• [ ] 主視覺圖片是 4:3，沒有被拉扁。
• [ ] 只改 :root 的 --color-primary，全站對應的地方一起變。
• [ ] 三個導覽連結都能跳到對應區塊。

老師要準備

• 版本線參考答案 examples/version-line/v1，給做完的學生對照。
• 示範用 DevTools 裝置模式切寬度，並把 1920px 加進自訂尺寸。

---

第 8 週｜v1 熟練與單元 03 開頭

只印這一段

時間配置：開場 15 分 → 階段驗收 1（90 分） → 核心線約 3 小時 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這四點）

1. 今天的驗收規則：只看第 2 週的線框和下方 class 清單，90 分鐘重建 v1。可以卡住跳過，不可以看章節或答案。
2. 驗收後換單元 03：滑鼠移上（:hover）、鍵盤停在上面（:focus-visible）、按下去（:active）是三種狀態。播 〈互動狀態：hover、focus-visible 與 active〉visual/states 的導讀影片。
3. 特效常用的三個工具：position: relative／absolute 疊東西、overflow: hidden 裁掉多的、::before／::after 不改 HTML 也能多一個裝飾。
4. 第 9 週 v2 要用的導覽底線，就是這三個工具加在一起。

核心線

1. 階段驗收 1（90 分鐘）。
2. 〈同一版型的可變與不可變項目〉layout/controlled-variation → 〈主力版型重複演練〉layout/template-drill → 〈特效前置：先學會 position〉visual/effect-position → 〈特效前置：用 overflow 裁切圖片〉visual/effect-overflow → 〈特效前置：用偽元素做裝飾〉visual/effect-pseudo → 〈互動狀態：hover、focus-visible 與 active〉visual/states

做完的樣子：驗收 1 的作品（原始版另存，不覆蓋）；四個特效小練習；能說出 v1 哪些固定、哪些換題時可以改。

延伸線

• 驗收 1 在 60 分鐘內通過的學生：特效庫 #effects/nav-underline（導覽底線展開）、#effects/image-zoom（圖片放大裁切）、#effects/lift-button。三個都是第 9 週 v2 會裝進去的效果，先看懂原理。
• controlled-variation 的「換題不換骨架」：用第 14 週題 A 的「社區二手市集」文案換一次 v1。
• 有基礎路線：驗收 1 之後做單元 03 跳級測驗（20 分鐘內寫出按鈕三態、圖片放大與減少動態）。通過的人第 9 週核心線只做 〈把特效裝回主力版型 v2〉visual/template-v2，其餘時間做第 9 週延伸線。

補救線

• 驗收 1 沒通過：先補第 6、7 週沒做完的必走章節（layout-engine 等；bootstrap2-* 是補充，可以先略過），再照稿重做一次 v1，下週一開始再做一次半提示重建。
• 單元 03 的四章先做 〈互動狀態：hover、focus-visible 與 active〉visual/states 一章（v2 的按鈕三態直接用它）。

階段驗收 1：90 分鐘半提示重建 v1

從空白 practice-template 開始。只看線框和 class 清單。

• [ ] HTML 六個區塊、class、id 都和清單一樣（老師抽查三處）。
• [ ] CSS 有七段，順序對，每段開頭有註解。
• [ ] :root 有顏色、字體、圓角、陰影、--gutter 變數。
• [ ] 375px 沒有橫向捲軸，全部一欄。
• [ ] 768px 頁首左右排、主視覺左文右圖、卡片三欄。
• [ ] 1920px 內容不超過 1200px 且置中。
• [ ] 導覽三個連結都會跳；圖片顯示且是相對路徑。
• [ ] Console 沒有紅字。
• [ ] 記下完成時間：＿＿＿ 分鐘（目標 90 分鐘以內）。

老師要準備

• 列印：第 2 週線框（再發一次）、下方 class 清單、驗收表（上面的清單）。
• 空白 practice-template、hero.jpg、計時器。

列印附件：v1 class 清單

只印這一段

只列名字和用途，不寫屬性值。數字只列「全站固定」的那幾個。

HTML（由上往下）

區塊	標籤與 class／id	裡面放什麼
頁首	header.site-header	a.brand（href #top）、nav.site-nav（三個 a）
主內容	main#top	下面五個 section
主視覺	section.hero	div.hero-copy：p.label、h1、p、a.button；figure.hero-visual：img
主題介紹	section#about.about	h2、p
三個重點	section#highlights.highlights	h2、div.cards > 三個 article.card（h3＋p）
行動呼籲	section#join.cta	h2、a.button
頁尾	footer.site-footer	p
程式	script	js/main.js（v1 還沒有內容也要連）

CSS 七段（只列段名與選擇器）

段	段名	會用到的選擇器
1	主題層	:root、*, *::before, *::after、body、img、h1, h2、h1
2	區塊留白	.hero, .about, .highlights, .cta、.about
3	頁首導覽	.site-header、.brand、.site-nav、.site-nav a
4	主視覺	.hero、.hero-copy, .hero-visual、.hero-visual、.hero-visual img、.label
5	按鈕	.button
6	三張卡片	.cards、.card
7	行動呼籲與頁尾	.cta、.site-footer

全站固定的數字

項目	值
斷點	@media (min-width: 768px)，只有這一個
版心	內容最寬 1200px，左右至少 24px（--gutter）
區塊上下留白	64px
卡片間距	24px
主視覺圖片比例	4 / 3

---

第 9 週｜單元 03 CSS 特效與 v2

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 40 分 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這五點）

1. transition 三件事：哪個屬性、多久、什麼曲線。只動 transform 和 opacity，畫面最順、不會推動旁邊。
2. @keyframes 進場只播一次，加 both 讓它停在結果。
3. prefers-reduced-motion: reduce：使用者不要動畫時，全部直接停在結果。評分會看。
4. v2 只在 style.css 最下面加第 8～14 段，前面 v1 的七段不動。
5. 特效要和主題有關；和題目無關的特效是創意表現的扣分證據。

核心線

〈transition：讓狀態變化有過程〉visual/css-transition-short → 〈transform：旋轉與變形支點〉visual/css-transform-short → 〈keyframes：播放一次與減少動態〉visual/css-keyframes-short → 〈特效配方：先做圖片放大〉visual/effect-recipes → 〈特效配方：導覽底線展開〉visual/effect-navline → 〈把特效裝回主力版型 v2〉visual/template-v2

做完的樣子：v2。my-template-v2 有按鈕三態、導覽底線、圖片放大、卡片浮起、標題母題、主視覺進場、減少動態七個效果，Tab 鍵走得到每個按鈕和連結。

延伸線

• 計畫的選做章：effect-overlay、effect-stagger、gradient-concept、variation-concept、visual-observation。
• 特效庫 #effects/stagger-in（卡片依序進場）、#effects/overlay-caption，裝到 v2 的副本上，比較放與不放哪個比較好。

補救線

• template-v2 先貼第 8、10、14 段（按鈕三態、圖片放大、減少動態），其他段第 10 週補。
• 三章短章只做每章第一個練習。

限時任務：40 分鐘在 v1 上完成必做特效

從另一份 v1 副本開始，不看 template-v2，只能看自己這週的練習檔。

• [ ] 按鈕 hover 會浮起、按下會壓回去。
• [ ] 用 Tab 鍵移到按鈕，看得到清楚的外框（:focus-visible）。
• [ ] 導覽連結 hover 時底線從左往右展開。
• [ ] 主視覺圖片 hover 放大，但不會超出圓角外框。
• [ ] 卡片 hover 浮起，旁邊的卡片沒有被推動。
• [ ] 主視覺文字進場一次，重新整理才再播。
• [ ] 在 DevTools「Rendering → prefers-reduced-motion: reduce」下，上面所有效果都停在結果。
• [ ] Console 沒有紅字。

老師要準備

• 示範 DevTools 的 Rendering 面板怎麼模擬「減少動態」。
• 列印 v2 第 8～14 段的段名清單（見第 13 週默寫卡的 CSS 表）。

---

第 10 週｜單元 04 語言工具與事件

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 20 分 → 學科 20 分 → 收尾 10 分（＋跳級測驗另排）。

開場

• 簡報第 6 課（互動等於狀態回饋）第 1～3 張與第 8、9 張：Select → Listen → Change、選單狀態圖、classList toggle、Console 第一個錯誤、何時停損。
• 播 〈addEventListener：從註冊、等待到執行〉javascript/event-lifecycle 的導讀影片。

核心線

〈語言工具：用函式幫一組動作取名字〉javascript/js-functions → 〈語言工具：用陣列與物件保存一組資料〉javascript/js-arrays-objects → 〈執行時機、型別比較、return 與 forEach〉javascript/js-runtime-deep → 〈addEventListener：從註冊、等待到執行〉javascript/event-lifecycle → 〈DOM、dataset、預設行為與鍵盤事件〉javascript/dom-events

做完的樣子：一個能讀輸入值、做判斷、改畫面的小程式；原生選單能開關；dom-events 的表單驗證能擋下空白。

延伸線

• 計畫的選做章：〈語言工具：先分清變數會不會重新指定〉javascript/language-toolkit（const／let 複習）。js-runtime-deep 改為必走，因為後面的頁籤要用到 forEach、return、!。
• 有基礎路線：最後一節做單元 04 跳級測驗（故障包八題修好 6 題）。通過的人第 11 週核心線只做 〈jQuery 4：對照改寫已學會的原生互動〉javascript/jquery2-baseline，其餘時間做第 11 週延伸線，第 12 週直接從 〈比賽怎麼做互動：jQuery 為主、Bootstrap 只當補充〉javascript/contest-stack 開始。

補救線

• js-arrays-objects 只做到能用陣列存三個字串、用迴圈印出來。
• dom-events 做前 3 步；表單驗證延到第 11 週。
• 常卡的三個點：! 是相反、return 之後的程式不會跑、在函式裡宣告的變數外面看不到。開場可以先把這三點寫在白板上。

限時任務：20 分鐘狀態切換

題目：一顆「顯示說明」按鈕和一段說明文字。按一下顯示，再按一下收起。

• [ ] 說明文字的顯示與否由 CSS 的 class（例如 .is-open）決定，JS 只切換 class。
• [ ] JS 用 classList.toggle，沒有直接寫 style.display。
• [ ] 按鈕的 aria-expanded 會跟著變成 true／false。
• [ ] 連續按 6 次，顯示和收起交替正確。
• [ ] 用 Tab 移到按鈕、按 Enter 也能切換。
• [ ] Console 沒有紅字。

老師要準備

• 狀態切換題卡（上面的題目）。
• 故障包 js-debug-example.zip（跳級測驗用，含 HINTS.md、ANSWERS.md）。

---

第 11 週｜單元 04 元件與 jQuery 入門

只印這一段

時間配置：開場 15 分 → 核心線約 4 小時 → 限時 45 分 → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這五點）

1. 元件＝固定的 HTML 結構＋一個狀態 class＋一個事件。選單、頁籤都一樣；燈箱、常見問題第 12 週在 v3 用 jQuery 做。可以借簡報第 6 課第 4～6 張的結構圖。
2. 播 〈狀態模型：JavaScript 切換 class，CSS 更新畫面〉javascript/state-css-bridge 的導讀影片：JS 只切 class，外觀交給 CSS。
3. jQuery 要先載入再寫自己的程式；寫在 $(function () { … }) 裡面，畫面準備好才執行。
4. 對照：document.querySelectorAll('.tab') ＝ $('.tab')；addEventListener('click') ＝ .on('click')。
5. 比賽場地提供 jQuery 4.0.0。為什麼還要先學原生：看得懂才修得動。

核心線

〈單一元件：用 class 開啟與關閉〉javascript/components → 〈狀態模型：JavaScript 切換 class，CSS 更新畫面〉javascript/state-css-bridge → 〈多個元素：querySelectorAll、forEach 與完整頁籤〉javascript/js-tabs-complete → 〈jQuery 4：對照改寫已學會的原生互動〉javascript/jquery2-baseline

做完的樣子：原生選單、頁籤各一份能用的檔案；選單改寫成 jQuery 版本。

延伸線

• 計畫的選做章（網站上排在單元 04 最後的「延伸（選做）：原生版元件」）：〈燈箱：完整 HTML、CSS、JavaScript 操作週期〉javascript/lightbox、〈手風琴：完整 HTML、CSS、JavaScript 操作週期〉javascript/accordion、〈輪播：手動切換上一張與下一張〉javascript/carousel-reveal、〈捲動顯示：進場時才出現〉javascript/scroll-reveal、〈事件冒泡、委派與 jQuery 4 對照〉javascript/event-delegation（有導讀影片）。
• 特效庫必練 #effects/back-to-top（回到頂端按鈕），再看 #effects/smooth-anchor、#effects/slide-faq。
• 有基礎路線跳過本週大部分章節的學生：用 jQuery 重寫頁籤和手風琴，和原生版本並排比較行數。

補救線

• 頁籤優先（第 12 週 v3 會用 jQuery 再寫一次頁籤）。燈箱、常見問題第 12 週在 v3 裡第一次做，contest-modal-tabs 會就地講 dialog。
• jquery2-baseline 只做到「在 practice-template 加上 jQuery 的 script，並把一個點擊改寫成 jQuery」。

限時任務：45 分鐘兩個元件

題目：在一個空白頁做手機選單和頁籤（三個）。可以用原生或 jQuery，可以看自己本週的檔案，不看章節。

• [ ] 頁籤一次只顯示一個面板，目前的頁籤看得出被選中。
• [ ] 頁籤用 Tab 鍵移得到、Enter 可以切換。
• [ ] 選單按鈕點一下打開、再點收起。
• [ ] 選單按鈕有 aria-expanded，會跟著變。
• [ ] 兩個元件的顯示與隱藏都靠 class 切換。
• [ ] 每個元件重複操作三次都正確，Console 沒有紅字。

老師要準備

• jQuery 4.0.0 的本機檔放進練習資料夾。
• 兩個元件的題卡（上面的題目），附三段頁籤文字與三個導覽連結。

---

第 12 週｜單元 04 比賽主力與 v3

只印這一段

時間配置：開場 15 分 → 核心線約 4.5 小時 → 限時 40 分 → 學科 20 分 → 收尾 10 分。

開場

• 簡報第 6 課第 10 張（元件展示任務），加上 contest-stack 的「比賽選用表」：比賽電腦上的函式庫檔案（jQuery、Bootstrap）都要自己找出來，複製到 css/、js/；主力版型只依賴 jQuery 4.0.0 一個檔案，要找、要記的東西最少，所以主力版型的互動（手機選單、目前區塊、頁籤、燈箱、常見問題、題目工具）全部用 jQuery＋自己的 CSS，彈出視窗用原生 dialog。Bootstrap 只當看懂別人作品的補充。
• 播 〈比賽怎麼做互動：jQuery 為主、Bootstrap 只當補充〉javascript/contest-stack 的導讀影片。
• 講 v3 的 main.js 規則：每個功能一個 init 函式，開頭先檢查元素在不在，最後在 $(function () { … }) 裡一起呼叫。

核心線

〈比賽怎麼做互動：jQuery 為主、Bootstrap 只當補充〉javascript/contest-stack → 〈手機選單、固定頁首與目前區塊（jQuery）〉javascript/contest-navbar → 〈頁籤、燈箱（dialog）與常見問題（jQuery）〉javascript/contest-modal-tabs → 〈jQuery 題目工具：勾選計數、淡入與展開〉javascript/contest-jquery-tools → 〈我的主力版型 v3：檢查、保存，練到能默寫〉javascript/template-v3

（章節 key 沿用舊名，內容已改成 jQuery：contest-navbar 是「手機選單、固定頁首與目前區塊」，contest-modal-tabs 是「頁籤、燈箱（dialog）與常見問題」。）

做完的樣子：v3。template-v3 的七項驗收全部通過：三寬度沒有橫向捲軸；手機選單點連結會收起、標題不被蓋住；三張卡片的「看詳細」各顯示自己的內容、Esc 可關；頁籤、常見問題、勾選計數、報名須知都能用；全部能用鍵盤操作；減少動態時效果停住；Console 沒有紅字且斷網一樣。

延伸線

• 特效庫必練 #effects/checklist-progress（勾選清單與進度條）：把 v3 的勾選計數加上進度條。
• 特效庫必練 #effects/tabs-fade（頁籤淡入切換）、#effects/slide-faq（slideToggle 常見問題）：和 v3 的 initTabs、initFaq 對照寫法。
• 對照 examples/version-line/v3，把自己的 main.js 和參考答案差在哪裡寫下來。

補救線

• 依序做：手機選單與固定頁首（contest-navbar）→ 頁籤 → 共用燈箱（dialog）→ 常見問題 → jQuery 工具。目前區塊（initCurrentSection）和 jQuery 工具沒做完，可以延到第 13 週第一節。
• contest-modal-tabs 分六步：頁籤、燈箱、常見問題各兩步（先 HTML＋CSS，再 jQuery），一步做完、確認能用，再做下一步；不要一次把三段 HTML 都貼上。

限時任務：40 分鐘在 v3 加一個題目指定互動

老師抽一張題卡（三選一）：

• (甲) 頁面捲動超過一個畫面後，右下角出現「回到頂端」按鈕，按了回到最上面。

• (乙) 「主題介紹」下面加一個「看更多」按鈕，按了展開一段補充文字（jQuery slideToggle，照 initNotice 的寫法）。

• (丙) 頁首加「字級：一般／放大」兩顆按鈕，按了全站文字變大或變回。

• [ ] 新功能寫成一個新的 init 函式，函式開頭先檢查元素在不在。

• [ ] 在 $(function () { … }) 裡多呼叫一行，其他函式沒有改。

• [ ] 新功能重複操作三次都正確。

• [ ] 用鍵盤也能操作新功能。

• [ ] 原本 v3 的七項驗收仍然全部通過（沒有修 A 壞 B）。

• [ ] Console 沒有紅字。

老師要準備

• 三張題卡（甲、乙、丙）。
• 版本線參考答案 examples/version-line/v3。
• 確認每人的 v3 資料夾有本機的 js/jquery-4.0.0.min.js（v3 不用 Bootstrap 檔案）。
• 補充（不用發給學生）：Bootstrap 版的對照答案在 examples/version-line/v3-bootstrap。

---

第 13 週｜單元 04 除錯、擴充模組、第一次默寫

只印這一段

時間配置：開場 15 分 → 核心線約 3.5 小時 → 默寫 v3（60 分） → 學科 20 分 → 收尾 10 分。

開場（沒有對應簡報，講這五點）

1. 擴充模組（篩選、小測驗、表單驗證、作品燈箱、輪播）各是一個 init 函式。題目要的時候才加，不要五個全部塞進主力版型。
2. 除錯四步：現象（哪裡不對）→ 證據（Console 第一個紅字、Elements 的 class 有沒有變）→ 修法 → 回歸（整個重做一次，確定沒有修 A 壞 B）。
3. 故障包每題卡超過 10 分鐘，先看 HINTS.md 的第一層提示。
4. 默寫的順序：先求「能動」——HTML 骨架 → CSS 第 1～7 段 → 第 15～17 段 → main.js；第 8～14 段（按鈕三態到減少動態）是加分特效，最後才補。卡住 5 分鐘就跳過那一段，最後再回來。
5. 默寫從一個空資料夾開始，從「考場資源資料夾」把 jQuery 和 hero.jpg 複製進去，不能從舊作品或 practice-template 拿。v3 不用 Bootstrap，考場沒提供也照樣做得完。

核心線

〈Console 除錯：先處理第一個錯誤〉javascript/debug → 〈v3 擴充模組：篩選、燈箱、輪播、小測驗、報名表〉javascript/contest-modules → javascript/contest-extras（#lesson/javascript/contest-extras）

做完的樣子：五個擴充模組；另做 contest-extras（倒數、報名摘要、字級記憶、時間軸、雙條件、情境卡）各有一份能用的檔案；故障包八題修完，每題寫下現象、證據與修法。

延伸線

• 特效庫必練 #effects/filter-cards、#effects/live-validate，和 contest-modules 的寫法對照；再看 #effects/tool-quiz。
• 特效庫題目工具：必練 #effects/tool-font-size（字級切換）、#effects/tool-dream-list（夢想清單）；再看 #effects/search-sort、#effects/tool-signup。#effects/bs-gallery 是 Bootstrap 補充，作品燈箱以 contest-modules 的 dialog 版為準。
• 故障包每題 10 分鐘內修完，挑戰不看提示。

補救線

• 五個模組先做篩選和表單驗證（模擬試題最常要），其餘三個延到第 15、16 週的空檔。
• 故障包先做第 1～5 題；第 6～8 題要自己用 console.log 追，下週再做。
• 默寫 v3 時間到還沒完成：記下做到哪一段，不延長。

限時任務：60 分鐘看默寫卡默寫 v3

建一個空資料夾，從考場資源資料夾複製 jQuery 和 hero.jpg，可以看默寫卡，不看章節和答案。

• [ ] HTML 區塊順序與 class／id 和默寫卡一致（老師抽查五處）。
• [ ] CSS 第 1～7 段、第 15～17 段都有，順序對，每段開頭有段名註解（第 8～14 段是加分特效，時間內有寫另外加記，沒寫不算不通過；學生頁〈局部限時練習〉也是這樣寫）。
• [ ] main.js 有七個 init 函式，都在 $(function () { … }) 裡呼叫。
• [ ] 375、768、1366px 沒有橫向捲軸。
• [ ] 手機選單會開關、點連結會收起；捲動時導覽標出目前區塊；三張卡片的「看詳細」共用一個燈箱（dialog），各顯示自己的內容、Esc 可關。
• [ ] 頁籤、常見問題、勾選計數、報名須知都能用。
• [ ] Console 沒有紅字。
• [ ] 記下用時：＿＿＿ 分鐘（填進全班進度總表的「默寫 v3」欄）。

老師要準備

• 列印：下方 v3 默寫卡（每人一份，第一頁完整提示約 4 頁 A4；第 13 週可以看，第 14 週只能看第二頁的標題清單）。
• 故障包 js-debug-example.zip；默寫用的空資料夾（不用 practice-template）。
• 一個「考場資源」資料夾，只放 jquery-4.0.0.min.js、hero.jpg，模擬考場提供的程式庫（v3 只靠 jQuery，刻意不放 Bootstrap）。

列印附件：v3 默寫卡（第一頁：完整提示）

只印這一段

幫你回想，不是讓你照抄。只列結構、名稱和重點屬性，值要自己想起來。

一、HTML 區塊順序與 class／id

順序	區塊	標籤與 class／id	裡面要記得的東西
0	head	meta charset、meta viewport、title	只連一個 css/style.css（不用 Bootstrap）
1	頁首	header.site-header	a.brand（#top）；button.menu-button（type="button"、aria-expanded="false"、aria-controls="site-nav"，文字「選單」）；nav.site-nav#site-nav（aria-label）> 四個 a（#about、#highlights、#faq、#join）
2	主內容	main#top	下面五個 section
3	主視覺	section.hero	div.hero-copy（p.label、h1、p、a.button 連到 #highlights）；figure.hero-visual > img（有 alt）
4	主題介紹＋頁籤	section#about.about	h2、p；div.tabs（role="tablist"）> 三個 button.tab-button（role="tab"、data-tab="time／place／who"，第一個 aria-selected="true"）；三個 div.tab-panel#tab-…（role="tabpanel"，第一個加 is-active）
5	三個重點	section#highlights.highlights	h2；div.cards > 三個 article.card（h3、p、button.button.button-small：data-title、data-detail）
6	常見問題	section#faq.faq	h2；兩個 div.faq-item > button.faq-question（aria-expanded="false"）＋緊接著的 div.faq-answer > p
7	行動呼籲	section#join.cta	h2、p；div.join-list > 三個 label > input.join-item（checkbox）；strong#join-count；p.join-message#join-message；button.button#notice-button（aria-expanded、aria-controls="notice"）；div.notice#notice
8	頁尾	footer.site-footer	p
9	共用燈箱	dialog.detail-dialog#detail-dialog（放在 footer 後面，aria-labelledby="detail-title"）	h2#detail-title、p#detail-text、button.button#detail-close
10	script	兩行，順序不能換	js/jquery-4.0.0.min.js → js/main.js

二、CSS 17 段

段	段名	重點屬性（值自己想）
1	主題層	:root 八個顏色變數、兩個字體、--radius、--shadow、--gutter: max(…, calc(…))；全域 box-sizing；body 的 margin、背景、文字色、字體、line-height；img 的 display、max-width、height；h1, h2 行高；h1 字級
2	區塊留白	.hero, .about, .highlights, .cta 的 padding: 64px var(--gutter)；.about 換區塊底色
3	頁首導覽	.site-header 內距用 --gutter、flex、手機 column、gap、白底；.brand 字色粗體去底線；.site-nav 用 flex、wrap、gap；768px 起頁首改 row、置中對齊、space-between
4	主視覺	.hero 用 flex、手機 column、gap；子元素 min-width: 0；圖片 aspect-ratio＋object-fit: cover＋圓角；.label 主色粗體；768px 起改 row、align-items、兩邊 flex 比例
5	按鈕	.button：inline-block、內距、border: 0、全圓角、強調色背景、font: inherit、粗體、去底線、cursor
6	三張卡片	.cards 用 grid、手機 1fr、gap；768px 起 repeat(3, 1fr)；.card 內距、白底、邊框、圓角、陰影
7	行動呼籲與頁尾	.cta 主色底、白字、置中；.site-footer 內距用 --gutter、淡字、置中
8	按鈕三態	transition（transform、box-shadow）；:hover＋:focus-visible 上移加陰影；:focus-visible 的 outline＋outline-offset；:active 壓回
9	導覽底線	.site-nav a 設 relative；::after 用 content、absolute、高 2px、currentColor、scaleX(0)、transform-origin: right；hover／focus 時 scaleX(1)、原點改 left
10	圖片放大	.hero-visual 的 overflow: hidden＋圓角；圖片 transition；hover 時 scale
11	卡片浮起	.card 的 transition；hover 時 translateY 往上＋較深陰影
12	主題母題	h2::after：content、display: block、寬高、margin-top、圓角、強調色；.cta h2::after 置中（margin-inline: auto）
13	進場動畫	@keyframes rise（透明度＋往上移）；.hero-copy 的 animation（加 both）
14	減少動態	@media (prefers-reduced-motion: reduce)：第 8～11 段的 transition: none、hover 的 transform: none、.hero-copy 的 animation: none
15	固定頁首與手機選單	.site-header 改 position: sticky、top: 0、z-index、row＋wrap、space-between、陰影；.menu-button 內距、邊框、全圓角、font: inherit；.site-nav 手機先 display: none、width: 100%、column，.is-open 時 flex；.site-nav a.is-current 主色粗體；.about, .highlights, .faq, .cta 的 scroll-margin-top；768px 起 .menu-button 隱藏、.site-nav 改 flex＋row＋width: auto
16	頁籤、燈箱、常見問題（三小段）	16-1：.tabs 用 flex＋gap＋底線；.tab-button 去邊框與背景、透明下框線，[aria-selected="true"] 時主色下框線＋粗體；.tab-panel 先 display: none，.is-active 時 block。16-2：.button-small 內距與字級；.detail-dialog 寬度 min(…, calc(100% - 32px))、內距、border: 0、圓角、陰影；::backdrop 半透明黑。16-3：.faq 補上區塊留白與底色（第 2 段沒有它）；.faq-item 白底圓角陰影；.faq-question 滿寬、靠左、font: inherit，[aria-expanded="true"] 時主色；.faq-answer 先 display: none
17	jQuery 題目工具	.join-list 用 flex、wrap、置中、gap；.join-message, .notice 一開始 display: none（不要用 hidden 屬性）；.notice 最大寬度、置中、內距、圓角、白底

三、main.js：一個入口＋七個函式

名稱	用途	要記得的關鍵
$(function () { … })	畫面準備好後的入口	第一行 $.fx.off 接 matchMedia('(prefers-reduced-motion: reduce)')；然後依序呼叫下面七個函式
initMenu()	手機選單開關；點連結後收起	.menu-button 的 click：讀 aria-expanded 算出 willOpen，#site-nav 用 toggleClass('is-open', willOpen)，aria-expanded 寫回；#site-nav a 的 click：removeClass('is-open')、aria-expanded 改 'false'
initCurrentSection()	捲動時在導覽標出目前區塊	$(window) 的 scroll；main section[id] 用 .each 找 getBoundingClientRect().top <= 120 的最後一個；捲到最底（scrollTop() + height() >= $(document).height() - 2）就標最後一區；導覽連結先 removeClass('is-current')，再 .filter('[href="#…"]') 加回
initTabs()	按哪個頁籤就只顯示那一塊	.tab-button 的 click；$(this).data('tab')；全部 aria-selected 改 'false'、被按的改 'true'；.tab-panel 去掉 is-active，#tab- 加名稱的那塊加回
initDetailDialog()	三張卡片共用一個燈箱，打開前換內容	document.getElementById('detail-dialog')，沒有就 return；[data-detail] 的 click：.data('title')、.data('detail') 填進 #detail-title、#detail-text，再 showModal()；#detail-close 按了 close()（Esc 是內建的）
initFaq()	按問題展開答案，同時收起其他題	.faq-question 的 click；$(this).next('.faq-answer')；全部 aria-expanded 先改 'false'，其他答案 slideUp；willOpen 時 slideDown，否則 slideUp；被按的 aria-expanded 寫回
initJoinList()	勾選後即時計數，全選時淡入提示	.join-item 的 change；$('.join-item:checked').length 寫進 #join-count；等於總數時 #join-message fadeIn，否則 fadeOut
initNotice()	報名須知按一下展開、再按收合	#notice-button 的 click；#notice slideToggle；aria-expanded 在 'true'／'false' 之間切換

每個函式的第一段都一樣：先選元素，length === 0 就 return（燈箱是 !dialog 就 return）。

列印附件：v3 默寫卡（第二頁：標題清單，第 14 週起只看這頁）

只印這一段

HTML：頁首（選單按鈕＋nav#site-nav）→ main#top → hero → about（頁籤）
      → highlights（卡片＋看詳細按鈕）→ faq（常見問題）→ join（勾選＋須知）
      → footer → 共用燈箱 dialog → 兩行 script

CSS： 1 主題層　2 區塊留白　3 頁首導覽　4 主視覺　5 按鈕　6 三張卡片　7 行動呼籲與頁尾
      8 按鈕三態　9 導覽底線　10 圖片放大　11 卡片浮起　12 主題母題　13 進場動畫　14 減少動態
      15 固定頁首與手機選單　16 頁籤、燈箱、常見問題　17 jQuery 題目工具

JS：  入口（$.fx.off）→ initMenu → initCurrentSection → initTabs → initDetailDialog
      → initFaq → initJoinList → initNotice

---

第 14 週｜單元 05 UI/UX：讀題、資訊架構、配色

只印這一段

時間配置：開場 15 分 → 核心線約 3 小時 → 讀題 30 分 → 默寫 v3（只看標題清單，約 50 分） → 題 A 20 分 → 題 E 25 分 → 學科 20 分 → 收尾 10 分。

開場

• 簡報第 5 課（配色不是選喜歡的顏色）第 1～5 張。
• 簡報第 7 課（從題目到設計意圖）第 1～3 張：受眾、訊息、行動；三個風格詞；文案層級。
• 講解範例一律用題庫題目 1 島嶼慢旅節。網站章節裡如果出現模擬試題一～三的內容，請學生跳過，或老師換成題目 1 講。

核心線

〈從題目到一句核心訊息〉uiux/concept → 〈把題目放進主力版型〉uiux/ia → 〈色彩規則：從資訊工作建立配色〉uiux/color-system → 〈局部限時練習：換題、加互動、重建、默寫 v3〉simulation/timed-drills（先讀規則，只看題 A、題 E；這週先不要按「標記完成」，第 16 週做完題 C～E 再標，不然進度會出現「前面漏標」）

做完的樣子：一張企畫一頁紙（受眾、核心訊息、主要行動、三個風格詞）；一張黑白線框（每個必做內容落在 v3 的哪個區塊）；一張配色表（八個 :root 顏色變數的值，主要文字對比至少 4.5:1）。

延伸線

• 用題庫題目 4（本週讀題用的題目）把今天的配色表套進 v3 副本，只改 :root。
• 特效庫 #effects/tool-font-size、#effects/dark-mode：看懂「用一個 class 換整套變數」。

補救線

• 企畫一頁紙只寫三格：受眾、核心訊息、主要行動。
• 配色只換 v3 的 --color-primary 和 --color-accent，其餘沿用。
• 默寫 v3 用標題清單做不出來的段落，可以翻默寫卡第一頁，但要在紀錄表註明「看了第幾段」。

限時任務一：30 分鐘讀題排區塊（題庫題目 4 一口安心食品品牌）

• [ ] 題目的五項必做內容都列出來，每項標 P0／P1／P2。
• [ ] 每項必做內容都寫出要放進 v3 的哪個區塊（或要新增哪個區塊）。
• [ ] 導覽文字四個以內、每個不超過四個字，看名稱就知道內容。
• [ ] 題目的必做技術（產品卡片、圖文交錯、頁籤或輪播）各寫出用哪個元件或哪個 init 函式。
• [ ] 寫出三個風格詞，和題目的「設計挑戰」有關。

限時任務二：題 A（20 分鐘）換題不換骨架

從 v3 副本（複製一份 my-template-v3）開始，換成「社區二手市集」，主色改橘紅色系。

• [ ] 網站名稱、主標題、短文案、三張卡片（攤位、時間、交通）、兩題常見問題、三個勾選項目全部換掉。
• [ ] 只改 :root 換色，沒有改 HTML 結構、class、main.js。
• 做完才看參考答案：網站的 題 A 完成畫面，或下載 timed-drills-answers.zip 解壓後的 timed-drills-answers/a-market 資料夾：看的是哪些地方換了、哪些沒動，文字不用一樣。

限時任務三：題 E（25 分鐘）默寫一個擴充模組

從空資料夾＋考場資源資料夾開始，先默寫出 v3（或接在本週自己默寫好的 v3 上），再加上抽到的模組（篩選、小測驗、報名表輪流抽，第 14～16 週各一個）。

• [ ] HTML 一段、CSS 一段、main.js 一個 init 函式加一行呼叫。
• [ ] 導覽加連結、scroll-margin-top 清單加上新區塊。
• [ ] 用時：＿＿＿ 分鐘（目標 25 分鐘內），寫進全班進度總表表二。

限時任務四：默寫 v3（只看標題清單）

• [ ] 第 13 週的八項驗收全部通過。
• [ ] 記下用時：＿＿＿ 分鐘，以及看了默寫卡第一頁的段落：＿＿＿。

老師要準備

• 列印：題庫題目 4 的必做內容（每人一張）、v3 默寫卡第二頁、空白配色表。
• 提早準備：第 15、17、18 週要用教學題庫題目 2、3、5，網站只有題目的必做內容，文案和 4～6 張合法授權圖片要老師自備，這週就先找好。
• 一個對比檢查工具（DevTools 的顏色選擇器就看得到對比值）。

---

第 15 週｜單元 05 主題轉譯與單元 06 規則

只印這一段

時間配置：開場 15 分 → 階段驗收 2（120 分） → 核心線約 1.5 小時 → 題 B 40 分 → 題 E 25 分 → 收尾 10 分（學科模擬考回家做）。這週最滿，章節做不完的部分移到第 16 週。

開場

• 簡報第 1 課（第二次講）第 4～8 張：正式規則與訓練原則的差異、評分表轉成工作清單、P0／P1／P2、240 分鐘時間軸、致命錯誤案例。
• 簡報第 7 課第 6～9 張：最小設計系統、五秒測試、案例觀察表、模仿與轉譯的差異。

核心線

1. 階段驗收 2（120 分鐘）。
2. 〈最小設計系統 / Style Tile〉uiux/system → 〈國際案例分析與轉譯〉uiux/references → 〈看懂競賽規則與評分〉competition/rules → 〈學科準備：題庫 70％＋相關範圍 30％〉competition/written-prep

做完的樣子：驗收 2 的作品（原始版另存）；〈最小設計系統 / Style Tile〉uiux/system 的 my-template-theme 換成「島嶼慢旅節・秋季版」（只改第 1 段 :root，my-template-v3 沒被改到）；年度規則確認表填好官方頁碼；學科模擬考成績。

延伸線

• 〈國際案例分析與轉譯〉uiux/references：多做一份案例觀察表，寫出「學方法、不抄外觀」的一個例子。
• 驗收 2 提早完成：再加一個題目 2 的必做技術（常見問題收合已有，改做「報名燈箱」：再一個 dialog），寫成新的 init 函式。
• 學科模擬考的錯題，到「學科練習」該工作項目再做一回。

補救線

• 驗收 2 先保證主題層、文案、圖片三樣換完；母題可以最後才做。
• 〈看懂競賽規則與評分〉competition/rules 只填年度規則確認表的前七列（日期、配分、評分項目、硬體、軟體、本機函式庫、網路限制）。
• 〈國際案例分析與轉譯〉uiux/references 延到第 16 週。

階段驗收 2：120 分鐘把 v3 換成新主題（題庫題目 2 修理日常）

• [ ] 複製一份 v3 開始；HTML 結構、class 名稱、main.js 都沒有大改。
• [ ] :root 的顏色全部換成新主題的值，主要文字對比至少 4.5:1。
• [ ] 母題（第 12 段 h2::after）換成和主題有關的形狀或顏色（例如修補線、工具形狀）。
• [ ] 網頁上找不到 v3 原本的島嶼慢旅節文字（例如「島嶼慢旅節」「沿著海風」），也沒有「網站名稱」「重點一」這類位置名稱。
• [ ] 題目的必做內容（理念、三個修繕站、報名流程、常見問題、志工招募）都在畫面上。
• [ ] 主視覺圖換成新圖，比例 4:3、沒有變形。
• [ ] 375、768、1366px 沒有橫向捲軸；Console 沒有紅字。
• [ ] 用時：＿＿＿ 分鐘。

老師要準備

• 當年度官方規則 PDF（〈看懂競賽規則與評分〉competition/rules 第 5 步要找頁碼），以及 評分規準 的年度規則確認表。
• 題庫題目 2 的文案檔與 4～6 張合法授權圖片。
• 學科模擬考不用自己出題：網站 學科練習 → 模擬考 每次隨機 40 題，請學生第 15～20 週每週回家做一次，成績抄進全班總表。

限時任務：題 B（40 分鐘）互動

接著第 14 週題 A 的市集網站。

• [ ] 卡片改成四張，每張的「看詳細」顯示自己的內容。
• [ ] 勾選清單改成五項，勾滿 3 項（含以上）淡入「歡迎擺攤！」。
• [ ] 新增「活動規則」展開收合按鈕，aria-expanded 會變。
• [ ] Console 沒有紅字。
• 做完才看參考答案 examples/timed-drills/b-market（main.js 改過的地方都有註解「題 B」）。

另做題 E 一次（換一個沒抽過的模組，25 分鐘，做法同第 14 週）。

---

第 16 週｜單元 06 讀題流程、單元 07 限時練習

只印這一段

時間配置：開場 15 分 → 核心線約 1.5 小時 → 限時練習題 C、題 D、題 E（共約 2.5 小時，含切換） → 收尾 10 分。學科模擬考回家做。

開場（沒有對應簡報，講這四點）

1. 讀題六欄表：「有寫文字，不等於有做工具」。
2. 240 分鐘配時表與到點取捨：落後 20 分鐘內縮短下一段；超過 20 分鐘先刪 P2；第 210 分鐘一到停止新增。
3. 限時練習的規則：先讀完題目再按計時器；時間到就停手；沒做完的寫下來。
4. 今天三題的順序與通過標準（見下方）；題 A 在第 14 週、題 B 在第 15 週已做過。

核心線

〈讀題與任務拆解〉competition/brief → 〈固定製作流程〉competition/production-flow → 〈作品檢查與故障演練〉competition/final-check → 〈模擬成熟度階梯〉simulation/ladder → 〈局部限時練習：換題、加互動、重建、默寫 v3〉simulation/timed-drills

做完的樣子：讀題表、流程卡、最後 30 分鐘檢查表；題 A～E 的紀錄表（每題用時、沒做完的部分、卡在哪、下次怎麼更快）。

限時任務：題 C、題 D、題 E

題 C（60 分鐘）重建 v1：建一個空資料夾，從考場資源資料夾複製 hero.jpg。第一次可以看〈主力版型重複演練〉第 3 步的線框和 class 清單，第二次起不看。

• [ ] 六個區塊和七段 CSS 都有；375、768、1920px 都正常。
• [ ] 卡住超過 5 分鐘的段落有跳過，最後再回來。

題 D（45 分鐘）默寫 v3：建一個空資料夾＋考場資源資料夾（只有 jquery-4.0.0.min.js、hero.jpg），不看任何資料（包括默寫卡）。

• [ ] 第 13 週的八項驗收全部通過。
• [ ] 用時填進全班進度總表。
• [ ] 做完對照參考答案：版本線 v3（或 version-line.zip 裡的 v3 資料夾）。題 E 對照 v3-modules。

題 E（25 分鐘）默寫一個擴充模組：第三個還沒抽過的模組，做法同第 14 週。

• [ ] 三個模組（篩選、小測驗、報名表）到本週都各做過一次，都在 25 分鐘內。

延伸線

• 題 A～E 都在時間內通過：題 A、B 換一個主題再做第二輪（用老師自編的校內活動）。
• 特效庫必練還沒練的補完：12 個必練裡，lift-button、image-zoom、nav-underline 在 v2 已有，fade-message、slide-faq、tabs-fade 和 v3 的勾選提示、常見問題、頁籤同一招；其餘是 filter-cards、checklist-progress、live-validate、back-to-top、tool-dream-list、tool-font-size。

補救線

• 時間不夠時的順序：題 D → 題 C → 題 E。題 C 不能略過（題 A～C 各要做一次並寫紀錄）；沒做完的，照紀錄表的「下次怎麼更快」調整後下週再做一次。
• 題 D 沒通過的人，第 17 週模擬 1 前一天（或當週第一節）再做一次。

老師要準備

• 列印：題 C～E 題卡、紀錄表、讀題六欄表。
• 計時器：〈局部限時練習：換題、加互動、重建、默寫 v3〉simulation/timed-drills 章節上方有內建倒數計時器（20／25／40／45／60 分），可直接投影；考場資源資料夾（可用 downloads/exam-resources.zip）。

---

第 17 週｜模擬 1、2

只印這一段

時間配置：開場 15 分 → 模擬 1（120 分）→ 模擬 2（120 分）→ 講評 60 分 → 收尾 10 分。學科模擬考回家做。

開場

• 簡報第 8 課（全真模擬與講評）第 1～4 張：今日規則與里程碑、210 分鐘停手提醒、最後 30 分鐘五階段、原始版與修正版。
• 第 5～8 張留到講評時用。
• 學生先讀完 〈一次完整模擬的流程〉simulation/full-run、〈賽後講評與版本管理〉simulation/review、〈六次正式模擬與結業標準〉simulation/six-mocks（可以在前一週回家讀）。

核心線

1. 模擬 1：默寫＋換主題（120 分鐘）。不看資料默寫 v3，再換成題庫題目 3 字裡行間—青年文字展。
2. 模擬 2：內容敘事（120 分鐘）。模擬試題一〈山徑慢行〉，從自己的 v3 出發。題目指定的兩項互動：步道篩選、裝備清單計數（小測驗當 P2，有時間才做）。
3. 講評 60 分鐘：每人先自評，再看老師評分，只選三項下次要改。

做完的樣子：每次模擬都有原始版、自評、老師評分、修正版四樣（修正版回家做，下週上課前交）。

延伸線

• 模擬 2 提早完成：加做〈山徑慢行〉的無痕山林小測驗（至少 5 題、有結果）。
• 講評後，替同學做「快速同儕檢查」。

補救線

• 模擬 1 默寫超過 60 分鐘還沒完成：停下來，從自己的 v3 副本接著做換主題，在評分表註明。
• 模擬 2 落後超過 20 分鐘：先刪 P2，互動改成最簡單能用的版本。

驗收

用 評分規準 的「模擬 1 評分表」和「模擬 2 評分表」。

老師要準備

• 題庫題目 3 的主題說明、文案與 4～6 張圖（模擬當天才發）。
• 模擬試題一〈山徑慢行〉用「列印試題（不含附錄）」印；圖檔包或合法授權照片。
• 每人兩張評分表（模擬 1、2）、自評表。

---

第 18 週｜模擬 3、4

只印這一段

時間配置：開場 10 分 → 模擬 3（120 分）→ 模擬 4（120 分）→ 講評 60 分 → 收尾 10 分。學科模擬考回家做。

開場（沒有對應簡報，講這三點）

1. 上週每人自選的「三項要改」，今天第一個要看到改善。
2. 模擬 3 的重點是響應式與易用性：四種寬度、鍵盤、對比、字級。
3. 模擬 4 的重點是題目工具：三項互動、一項來自擴充模組，每項重複操作三次都要正確。

核心線

1. 模擬 3：響應式與易用性（120 分鐘）。模擬試題二〈防詐生活館〉。題目指定的兩項互動：字級切換、常見問題手風琴可用鍵盤操作（情境判斷當 P2）。
2. 模擬 4：題目工具（120 分鐘）。題庫題目 5 未來學習站。三項互動：成果分類篩選（來自擴充模組）、FAQ 手風琴、四步投稿流程（展開或分步顯示）。
3. 講評 60 分鐘。

延伸線

• 模擬 3 提早完成：加做情境判斷（至少 6 則、立即回饋）。
• 模擬 4 提早完成：篩選加上「目前顯示幾項」的計數。

補救線

• 模擬 4 三項做不完：先做篩選（擴充模組那一項），再做 FAQ 收合（v3 的常見問題已有，只改內容），流程最後。

驗收

用「模擬 3 評分表」「模擬 4 評分表」。

老師要準備

• 模擬試題二〈防詐生活館〉用「列印試題（不含附錄）」印，加圖檔包。
• 題庫題目 5 的文案與圖（模擬當天才發）；在題目上寫明三項互動。
• 每人兩張評分表。

---

第 19 週｜模擬 5（全真）

只印這一段

時間配置：開場 10 分 → 模擬 5（240 分）→ 講評 60 分 → 收尾 10 分。學科模擬考回家做。

開場（沒有對應簡報，講這三點）

1. 第一段就是默寫 v3（目標 35 分鐘），然後照 240 分鐘配時表走。
2. 老師會在每個到點時間喊時間，學生在評分表的到點紀錄寫下自己做到哪裡。
3. 第 210 分鐘一到，停止新增，只修錯誤；最後 30 分鐘照檢查表走。

核心線

模擬 5：全真（240 分鐘）。模擬試題三〈河港燈會〉，從默寫 v3 開始，全部互動都要做。講評 60 分鐘。

做完的樣子：原始版、自評、老師評分、到點紀錄；修正版回家做。

延伸線

• 全部互動完成且保留了 30 分鐘檢查：講評後挑一項 P2（例如倒數）重做得更穩。

補救線

• 互動做不完時照題目附錄的取捨：表單驗證、頁籤是 P1；燈箱、倒數可以降為 P2。

驗收

用「模擬 5 評分表」。

老師要準備

• 模擬試題三〈河港燈會〉用「列印試題（不含附錄）」印，加圖檔包；考場資源資料夾。
• 投影 240 分鐘配時表與倒數計時。
• 每人一張評分表。

---

第 20 週｜模擬 6（陌生題型全真）

只印這一段

時間配置：開場 10 分 → 模擬 6（240 分）→ 講評 60 分 → 收尾 10 分。學科模擬考回家做。

開場（沒有對應簡報，講這三點）

1. 這是陌生題目：骨架照舊，文案和視覺意象一律跟著新題目，不沿用舊作品。
2. 先用讀題六欄表，把每項必做內容和互動標好 P0／P1／P2。
3. 下週就是比賽：今天的流程就是比賽當天的流程。

核心線

模擬 6：陌生題型全真（240 分鐘）。歷屆術科試題，或老師用題庫題目 6 全真未知題模板出新題。講評 60 分鐘。

延伸線／補救線

• 這週不分線。講評只講致命與結構兩層，精修不談。

比賽前一週的收尾

• [ ] 每人寫一張「比賽當天卡」：默寫 v3 的順序、配時表、最後 30 分鐘檢查順序。
• [ ] 每人列出自己最常犯的三個錯誤，與檢查方法。
• [ ] 確認比賽當天的規定（根目錄名稱、首頁檔名、繳交方式），和年度規則確認表一致。

驗收

用「模擬 6 評分表」。

老師要準備

• 歷屆術科試題（技藝競賽資訊平臺的歷屆術科試題）或新題（含合法授權圖片、評分重點），題目 6 模板的每一欄都要填完。
• 每人一張評分表。

一、評分規準（依官方四項配分）

只印這一段

老師講評、學生自評、模擬試題的評分頁，一律用這一張。配分和網站「競賽規則」那章的官方術科配分相同；正式比賽以當年度官方評分表為準。每一項底下的檢核點，是講評時要找的「可觀察證據」。

官方項目	配分	檢核點（看得到才給分）	常見失分證據
主題表現	30	三秒內看得懂主題；必做文字、圖片都在；文案精準無錯字；網站地圖的分項合理，導覽名稱能預測內容	標題空泛、必做資訊缺漏、錯字、沿用不合題意的舊文案
網頁技術應用與互動性	25	375／768／1366／1920 四種寬度不溢出；題目指定的互動都能重複操作；鍵盤可用；Console 無紅字；相對路徑、離線、搬移都正常	互動失效或只寫了文字沒做出工具、橫向捲動、檔案遺失（路徑、檔名違規另外扣，見表下說明）
視覺設計	25	焦點清楚；色彩、字體、間距、圓角一致；文字對比足夠（內文、按鈕、頁籤文字至少 4.5:1；24px 以上大標至少 3:1）；圖片裁切有秩序	所有元素都搶眼、對比不足、三種按鈕長得不一樣
創意表現	20	在穩定的骨架上，用文案、色彩、圖片與細節回應題目；效果和主題有關	和主題無關的特效、未完成的區塊、為了炫技犧牲完成度

• 路徑與檔名違規另外扣：作品不在 WWW 資料夾、首頁不是 index.html、用了絕對路徑或中文檔名，依試題注意事項每項扣術科總成績 1 分；技術項不再因為同一個問題重扣。
• 元件有、內容不對，視同沒做：例如題目要「路線頁籤」，作品的頁籤切的是別的內容；題目要「圖片燈箱」，燈箱只顯示文字。這一項在主題表現與技術互動都最高 2 級（和六次模擬評分表「必做項目沒做到最高 2 級」同一個原則）。

四級判準

• 4：完整、穩定且能說明設計理由。
• 3：主要要求達成，只有局部問題。
• 2：部分達成，但問題明顯影響閱讀或操作。
• 1：缺漏或失效，尚不能形成可評分成果。

四級換算成分數

每一項先判級，再在該級的範圍內給分。級內怎麼取高低：證據都到位、只差一個小地方，取上限；問題接近下一級，取下限；拿不準就取中間。完全沒有可評分的成果（例如該項的區塊或互動整個沒做），給 0 分。

級	佔配分	主題表現（30）	網頁技術應用與互動性（25）	視覺設計（25）	創意表現（20）
4	90～100%	27～30	23～25	23～25	18～20
3	70～89%	21～26	18～22	18～22	14～17
2	50～69%	15～20	13～17	13～17	10～13
1	20～49%	6～14	5～12	5～12	4～9
0	沒有成果	0	0	0	0

例：主題表現 3 級、只有一處錯字，給 25；技術 2 級、一項互動失效且 375px 有橫向捲動，給 13；視覺 3 級，給 20；創意 2 級，給 11。術科合計 69 分。

術科與學科合併時，依計畫的比例（學科佔總成績 15%）：總分 ＝ 術科 × 0.85 ＋ 學科 × 0.15。正式比例以當年度官方規定為準。

講評時同一位老師前後要一致：同一個問題（例如 375px 橫向捲動）每次都扣在同一項、落在同一級。

二、年度規則確認表

只印這一段

教師必須填入官方文件頁碼或網址；無證據不得沿用前一年資訊。

項目	當年度規定	官方來源／頁碼	已在模擬環境驗證
競賽日期與實作時間			[ ]
術科與學科配分			[ ]
評分項目與比例			[ ]
指定硬體與作業系統			[ ]
可用軟體及版本			[ ]
本機函式庫：jQuery、Bootstrap、Font Awesome 是否提供、版本、放在哪裡（主力版型 v3 只靠 jQuery，Bootstrap 沒提供也不影響；萬一連 jQuery 都沒提供，改默寫 v2＋原生互動）			[ ]
網路、AI、外掛及自備資源限制			[ ]
網站根目錄名稱			[ ]
首頁檔名			[ ]
路徑規定			[ ]
儲存與繳交媒介			[ ]
考場紀律及扣分			[ ]
其他特殊要求			[ ]

三、210 分鐘完成檢查

只印這一段

• [ ] 必做文字與圖片都已放入。
• [ ] 首頁主題及主要行動明確。
• [ ] 導覽能到達對應內容。
• [ ] 桌機與手機版均可閱讀。
• [ ] 核心互動可用；非必要高風險效果已停止。
• [ ] 頁尾與結尾內容完整。
• [ ] 已停止新增功能，準備全面檢查。

四、最後 30 分鐘檢查

只印這一段

0–5 分鐘：檔案

• [ ] 根目錄、首頁及檔名符合當年度規定。
• [ ] 沒有引用電腦上的絕對路徑。
• [ ] CSS、JS、圖片及其他頁面都在繳交資料夾內。

5–12 分鐘：內容

• [ ] 網站名稱、標題、日期及聯絡資訊正確。
• [ ] 沒有錯別字、測試文字、空連結或 # 假按鈕。
• [ ] 圖片替代文字合理。

12–20 分鐘：畫面與操作

• [ ] 375px、768px、1366px 無重疊或橫向捲動。
• [ ] 導覽、按鈕、頁籤、燈箱均實際點過。
• [ ] Console 無錯誤。
• [ ] 焦點、文字對比與圖片裁切正常。

20–25 分鐘：搬移與離線

• [ ] 將繳交資料複製到另一位置後再次開啟。
• [ ] 斷網狀態下樣式、圖片、字型及互動仍正常。

25–30 分鐘：正式繳交

• [ ] 完全依當年度程序輸出或複製。
• [ ] 從繳交媒介再次開啟首頁。
• [ ] 確認檔案時間與版本是最後完成版。

五、快速同儕檢查

只印這一段

同儕只能寫觀察證據：

• 我第一眼看到的是：
• 我認為網站主題是：
• 我知道可以點擊的地方有：
• 手機版最明顯的問題是：
• 一個一致性做得好的地方是：
• 若只能先改一件事，我會改：

六、六次模擬專用評分表

只印這一段

每次模擬的重點不同，評分表分三部分：

1. 必做項目：這次一定要有的東西。沒做到的，對應的那一項最高只能給 2 級。
2. 官方四項：配分不變，但「這次看什麼」依重點改寫。重點項目用粗體標出，講評先講它。
3. 本次加記：時間、到點紀錄等，不算分，填進全班進度總表。

模擬 2～4 是 120 分鐘的縮減版：互動只做這裡指定的項目，要求以這張表為準。試題最後的附錄（評分對照、時間配置、本題陷阱）是給 240 分鐘完整版用的，例如試題二附錄說「字級要跨頁維持」、題目本文說「情境判斷至少 6 則」，120 分鐘版都不要求。學生自評和老師評分都用這裡的表，兩份結果才比得起來。

每張表最下面都一樣：

講評（只寫觀察到的證據）
致命
結構
系統
精修
下次只改這三項	1.　　　　2.　　　　3.

模擬 1（第 17 週）：默寫＋換主題，120 分鐘

題目：不看資料默寫 v3，再換成老師指定的新主題（建議題庫題目 3 字裡行間）。重點：骨架默寫的完整度，以及換主題時「只改該改的」。

姓名＿＿＿＿　日期＿＿＿＿　新主題＿＿＿＿

必做項目

• [ ] 默寫出的 v3 通過八項驗收：區塊與 class／id、CSS 17 段、main.js 七個 init、三寬度無橫向捲動、手機選單開關與點連結收起（含目前區塊標示）、三張卡片共用燈箱（dialog）、頁籤／常見問題／勾選計數／須知、Console 無紅字。
• [ ] :root 顏色全部換成新主題，主要文字對比至少 4.5:1。
• [ ] 母題（h2::after）換成和新主題有關的樣子。
• [ ] 畫面上找不到默寫時用的位置名稱（網站名稱、重點一、內容。）或島嶼慢旅節的舊文字。
• [ ] 主視覺圖換成新圖，比例正確、沒有變形。

官方項目	這次看什麼	級	分數
主題表現 30	文案全部換成新主題；標題能在三秒內看出主題；卡片與常見問題內容和主題相關
網頁技術應用與互動性 25	默寫的 v3 八項驗收；換主題後互動仍全部正常（沒有因改 HTML 而壞掉）
視覺設計 25	新配色的角色清楚（主色、強調色、底色）；對比；全站按鈕只有一種外觀
創意表現 20	母題、配色、圖片三者是否講同一個故事
合計			／100

本次加記：默寫 v3 用時＿＿分（目標 35）；換主題用時＿＿分；默寫時漏掉的段落＿＿＿＿。

模擬 2（第 17 週）：內容敘事，120 分鐘

題目：模擬試題一〈山徑慢行〉，從 v3 出發。互動只做兩項：步道篩選、裝備清單計數（小測驗為 P2）。重點：把題目內容排成有順序的故事。

姓名＿＿＿＿　日期＿＿＿＿

必做項目

• [ ] 題目的六個基礎內容都在畫面上，都能從導覽到達。
• [ ] 首頁由上往下有清楚的敘事順序（例如：主題 → 為什麼 → 怎麼選步道 → 怎麼準備 → 行動），學生講評時說得出這樣排的理由。
• [ ] 步道篩選：按分類後顯示正確，按「全部」會還原。
• [ ] 裝備清單：勾選時數字即時更新，取消勾選會減少。
• [ ] 圖片已改英文檔名並縮小。

官方項目	這次看什麼	級	分數
主題表現 30	區塊順序有敘事；標題與文案層級清楚（大標一句話、小標能預測內容）；導覽名稱和區塊一致；沒有錯字與舊文案
網頁技術應用與互動性 25	兩項互動重複操作三次都正確；手機導覽可用；Console 無紅字
視覺設計 25	圖片比例統一；長文段落好讀（行高、行寬）；焦點清楚
創意表現 20	文案或母題有回應「慢行」，不是只換成綠色
合計			／100

本次加記：完成時間＿＿分；有沒有做小測驗＿＿。

模擬 3（第 18 週）：響應式與易用性，120 分鐘

題目：模擬試題二〈防詐生活館〉，從 v3 出發。互動只做兩項：字級切換、常見問題手風琴（要能用鍵盤）；情境判斷為 P2。重點：每種寬度、每種使用者都能用。

姓名＿＿＿＿　日期＿＿＿＿

必做項目

• [ ] 375、768、1366、1920px 都沒有橫向捲動、沒有文字被切掉。
• [ ] 只用鍵盤（Tab、Enter、空白鍵）能走完導覽、手風琴、字級切換；每個可以按的東西都看得到焦點框。
• [ ] 字級切換後，全站文字一起變大，版面不破。
• [ ] 主要文字與背景對比至少 4.5:1；每張圖都有合理的 alt。
• [ ] 開啟減少動態後，效果都停住。

官方項目	這次看什麼	級	分數
主題表現 30	長輩與青少年兩種對象的內容都找得到；用語讓長輩看得懂
網頁技術應用與互動性 25	四種寬度；鍵盤操作；字級切換；手風琴；Console 無紅字
視覺設計 25	對比；放大字級後的行距與排版；按鈕夠大好按（手機上）
創意表現 20	用親切的方式呈現嚴肅主題，不靠恐嚇的紅色
合計			／100

本次加記：四種寬度各花幾分鐘檢查＿＿；有沒有做情境判斷＿＿。

模擬 4（第 18 週）：題目工具，120 分鐘

題目：題庫題目中老師選一題（建議題目 5 未來學習站），三項互動，其中一項來自擴充模組（建議：成果分類篩選、FAQ 手風琴、四步投稿流程）。重點：互動穩定，main.js 結構不亂。

姓名＿＿＿＿　日期＿＿＿＿　指定的三項互動＿＿＿＿＿＿＿＿

必做項目

• [ ] 三項互動都做出來，每項重複操作三次都正確。
• [ ] 來自擴充模組的那一項，寫成一個新的 init 函式，開頭有檢查元素在不在。
• [ ] main.js 仍是一支檔案，所有 init 都在 $(function () { … }) 裡呼叫。
• [ ] v3 原本的互動沒有被改壞。
• [ ] 每項互動都能用鍵盤操作；Console 無紅字。

官方項目	這次看什麼	級	分數
主題表現 30	必做內容齊全；互動的內容是題目的內容，不是範例的假資料
網頁技術應用與互動性 25	三項互動各自正確、可重複；篩選有「全部」可還原；空狀態有提示；鍵盤可用
視覺設計 25	互動元件的外觀（按鈕、頁籤、目前選中狀態）和全站一致
創意表現 20	互動的回饋（文字、動畫）和主題有關，且不妨礙操作
合計			／100

本次加記：三項互動各花幾分鐘＿＿／＿＿／＿＿。

模擬 5（第 19 週）：全真，240 分鐘

題目：模擬試題三〈河港燈會〉，從默寫 v3 開始，全部互動。重點：照配時表走完，保留最後 30 分鐘檢查。

姓名＿＿＿＿　日期＿＿＿＿

必做項目

• [ ] 題目要求的每個內容都能從導覽到達。
• [ ] P1 互動：節目表頁籤一次只顯示一天；表單四項驗證都有效、錯誤訊息清楚。
• [ ] 第 210 分鐘後沒有新增功能，只修錯誤。
• [ ] 最後 30 分鐘檢查表（本文件第四節）每一項都打勾。
• [ ] 繳交資料夾搬到另一個位置、斷網後重開，一切正常。

到點紀錄（老師喊時間，學生寫做到哪裡）

到點	應完成	實際做到	落後幾分
15 分	網站地圖、P0／P1／P2、WWW 資料夾
60 分	默寫 v3，五項互動都能用
75 分	圖檔處理完（英文檔名、統一比例、縮小）
120 分	所有內容（節目 9 筆、攤位 9 筆）與導覽
160 分	響應式與夜間主題
210 分	題目互動
225 分	全面檢查
240 分	複製到隨身碟並繳交

官方項目	這次看什麼	級	分數
主題表現 30	必做內容齊全；節目、攤位、交通等資訊找得到
網頁技術應用與互動性 25	頁籤、篩選、表單驗證、燈箱（滑鼠與 Esc 都能關）、倒數；三寬度；Console
視覺設計 25	節目表在手機上的呈現；圖片一致；夜間主題的對比
創意表現 20	燈會意象的運用（例如點亮效果），不影響閱讀
穩定度（不計分，講評先講）	到點落後有沒有照取捨規則處理；有沒有守住最後 30 分鐘
合計			／100

本次加記：默寫 v3 用時＿＿分；保留檢查時間＿＿分。

模擬 6（第 20 週）：陌生題型全真，240 分鐘

題目：歷屆術科試題，或老師用題庫題目 6 模板出的新題。重點：讀新題、不沿用舊作品。

姓名＿＿＿＿　日期＿＿＿＿　題目＿＿＿＿

必做項目

• [ ] 開始 20 分鐘內交出讀題六欄表，每項必做內容與互動都標了 P0／P1／P2。
• [ ] 必做文字、必做圖片、必做區塊、必做互動全部做到（依題目逐項打勾）。
• [ ] 沒有沿用不合題意的舊文案、舊配色或舊視覺意象。
• [ ] 最後 30 分鐘檢查表每一項都打勾。
• [ ] 根目錄、首頁檔名、繳交方式符合年度規則確認表。

官方項目	這次看什麼	級	分數
主題表現 30	題目的受眾、目的、必做內容都有回應；讀題表上的每一項都找得到
網頁技術應用與互動性 25	題目指定的每項互動；三寬度；離線與搬移；Console
視覺設計 25	新配色與字體系統一致；圖片處理
創意表現 20	視覺意象來自這一題，不是上一次模擬的換色
合計			／100

本次加記：默寫 v3 用時＿＿分；保留檢查時間＿＿分；和模擬 5 比，進步或退步的一項＿＿＿＿。

七、全班進度總表範本

只印這一段

每週收尾時，學生在課程地圖按「複製進度給老師」，得到一行文字，內容依序是（Tab 分隔）：姓名、日期、單元 00～07 各自的「完成章數／總章數」（只算主線）、接著做的那一章（做到最遠的那一章之後的下一章；前面有漏標時會列出漏標的是哪幾章）。按之前要先在姓名欄填姓名。老師把每人那一行貼進表一，一人一列；用試算表時，直接貼在第一格，Tab 分隔會自動分成各欄，欄位順序就和表一相同。

表二是網站沒有的紀錄（限時練習、模擬、默寫 v3），由老師在課堂上填。

表一：網站進度（每週貼一次）

完成數用全形斜線「／」，貼進試算表不會被當成日期；Tab 分隔的一行直接貼進第一格，試算表會自動分成各欄。「下一章」欄會附章名；前面有漏標的章，會列出是哪幾章。要判斷是不是落後，對照培訓計畫的每週進度：看「下一章」有沒有落在本週該做的章節範圍。

括號是目前各單元主線的章數（選做延伸不計入；學生做了選做，會在後面附「＋選做 N」），網站增減章節時以「複製進度」那一行的分母為準。日期是網站輸出的西元日期。

姓名	日期	00（4）	01（20）	02（27）	03（10）	04（16）	05（5）	06（5）	07（5）	下一章	路線	本週唯一優先目標
範例：王小明	2026/8/25	4／4	20／20	12／27＋選做1	0／10	0／16	0／5	0／5	0／5	layout/guided-reference-13 〈章名〉（前面漏標 1 章：〈章名〉）	零基礎	導覽用 gap，不用 margin

網站的完成標記是學生自己按的閱讀紀錄，看得出「讀到哪」，看不出「會不會」。會不會看表二。

表二：限時練習、模擬與默寫（老師填）

時間填分鐘；沒在時間內完成的，寫「未完成＋做到哪」。

姓名	題 A（20）	題 B（40）	題 C（60）	題 D（45）	題 E（25，篩選／小測驗／報名表）	模擬 1	模擬 2	模擬 3	模擬 4	模擬 5	模擬 6	學科最近一次
範例：王小明	18	未完成（第 3 項）		52	24／27／	68						72

表三：默寫 v3 用時（第 13 週起每週一次）

姓名	第 13 週（看默寫卡）	第 14 週（看標題清單）	第 15 週	第 16 週（題 D，不看資料）	模擬 1	模擬 5	模擬 6	目標
範例：王小明	58	50		44	41			35
								35

第 15 週如果階段驗收 2 和學科模擬考佔滿，默寫可以改成回家做，隔週上課當場核對。

一、開課前診斷

只印這一段

排在第 1 週的第一節（佔第 1 週 6 小時中的 1.5 小時），之後才開始單元 00。診斷不計正式成績，只用來分路線與安排補救。每週怎麼帶見 上課卡。

診斷題目（90 分鐘）

發給學生的題目卡：

做一個「社團招生」頁面，資料夾裡要有 index.html，另外用一個 CSS 檔控制外觀。頁面要有：

1. 社團名稱（大標題）和一句介紹。
2. 一張圖片（老師給的 club.jpg；這是診斷專用的圖，和 student-starter 裡的 hero.jpg 無關）。
3. 三張卡片：社團時間、社團地點、社團活動，每張有小標題和一段文字。手機寬度一欄，電腦寬度三欄並排。
4. 一顆「我要報名」按鈕，按下去會出現「已收到」的文字（不會也沒關係，寫下你會怎麼想）。

不會的地方可以空著，但請寫一句「這裡我不知道怎麼做」。做完把整個資料夾存好，老師會搬到另一台電腦打開。

老師只準備一張 club.jpg 和題目卡。club.jpg 在 診斷素材包 diagnostic-kit.zip，解壓後發給學生。過程中不回答語法問題，只回答「題目是什麼意思」。

診斷紀錄表（每項 0～2 分）

項目	0 分	1 分	2 分
檔案	檔案散在桌面、換電腦就破圖	有資料夾，但圖片或 CSS 路徑寫成絕對路徑或錯誤	資料夾、檔名、相對路徑都對，搬移後正常
HTML	只有文字，沒有標籤結構	有標籤，但階層亂（例如卡片沒有外層）	標題、圖片、三張卡片結構清楚、相同
CSS	沒有連上或寫在 style 屬性裡	連上了，但選擇器常選不到	用 class 選取，改得動外觀
排版	用空白、<br> 或大量絕對定位排	用 float 或 inline-block，手機版會破	用 Flex 或 Grid，手機一欄、電腦三欄
視覺	沒有層次	有層次但不一致	焦點清楚，字級、間距一致
互動	沒有嘗試	寫了但不會動，或只寫出想法	按鈕按下去有反應

觀察欄另記：遇錯時是檢查、猜測、重做，還是停住不動。

依診斷結果分路線

結果	路線	怎麼走
「檔案」「HTML」「CSS」三項都是 2 分，而且總分 9 分以上	有基礎路線	照 20 週計畫 的「有基礎路線」：每個單元開頭先做跳級測驗，通過才跳。上課卡的延伸線寫了每次跳級測驗排在哪一週、通過後做什麼
其他	零基礎路線	照計畫逐週走，「選做」欄全部略過；卡住時走上課卡的補救線

• 有基礎路線只是「有資格考跳級測驗」，不是直接跳。跳級測驗沒過，那個單元就照零基礎路線走。
• 路線不是固定的：第 8 週階段驗收 1、第 15 週階段驗收 2 之後各重新檢視一次。有基礎路線的學生驗收沒過，回到零基礎路線的補救線；零基礎的學生連續兩週在限時任務提早完成，就開始走延伸線。
• 一班 6～8 人時，兩條路線坐在不同排，方便老師分開講解。

二、教學方法

只印這一段

一個主力版型，最多一個備用版型

教師應和學生共同確立一套主力版型，反覆使用不同題目訓練。固定項目包含 HTML 大骨架、容器寬度、斷點、間距階梯、導覽、卡片、按鈕與手機版順序；變化項目包含題目文案、色彩、圖片、視覺母題、卡片內容與必要的區塊順序。

主力版型的互動只用考場正式提供的 jQuery 4.0.0 與自己寫的 CSS（版本線 v3：手機選單、固定頁首與目前區塊、頁籤、原生 dialog 燈箱、常見問題、勾選計數與展開），不依賴 Bootstrap。Bootstrap 有 CSS、JS 兩個檔案要從比賽電腦裡找出來、對好版本，主力版型只依賴 jQuery 一個檔案；單元 02 的 Bootstrap 章節和 examples/version-line/v3-bootstrap 只當看懂別人作品的補充。

只有當學生能連續三次在目標時間內默寫主力版型，且沒有基本路徑與 RWD 錯誤，才加入第二個備用版型。備用版型必須解決主力版型不擅長的內容型態，而不是只為了換外觀。

示範時說出決策

教師不只輸入程式碼，也同步說明：「我先放所有必做內容，因為完成度是 P0」「這裡是一維排列，所以選 Flex」「強調色只留給主要按鈕」。

使用逐步撤除支架

1. 完整示範與逐行解說。
2. 提供 HTML，學生完成 CSS。
3. 提供畫面，學生自行規劃結構。
4. 只提供題目與素材，學生獨立完成。

每堂課保留除錯時間

刻意準備路徑、選擇器、缺括號、固定寬度及事件綁定錯誤。競賽選手若只做過正確範例，遇到真實錯誤時會失去大量時間。

三、差異化教學

只印這一段

每週的核心線、延伸線、補救線寫在 上課卡。下面是共通原則。

尚未跟上的學生

• 限制每次只完成一個成功元件。
• 提供結構檢查表，不直接給完整答案。
• 優先補路徑、HTML 階層、盒模型與選擇器。
• 暫緩動畫，確保能完成可閱讀的靜態版。

進度超前的學生

• 不以增加特效為唯一延伸。
• 要求減少程式重複、改善鍵盤操作、測試長文案。
• 用同一 HTML 製作第二種視覺風格。
• 限時重做，提升穩定性與速度。

四、講評流程

只印這一段

每次只處理四層：

1. 致命：無法開啟、素材遺失、必做內容缺漏。
2. 結構：主題不清、資訊順序混亂、手機破版。
3. 系統：色彩、字體、間距、按鈕不一致。
4. 精修：動畫曲線、圖片裁切、細節質感。

先修上層，再談下層。每個意見包含「觀察到的現象、造成的影響、可執行修改」。

五、模擬題設計原則

只印這一段

• 題目有明確受眾、目的及必做內容。
• 素材品質有差異，讓學生練習取捨，但不可故意不可用。
• 文字量足以測試排版，不以大量抄打消耗時間。
• 功能要求可在離線環境完成。
• 每份題目聚焦一個新挑戰，其餘難度保持可控。
• 評分表在出題前完成，避免賽後才憑印象評分。

六、教師每週紀錄

只印這一段

每週收尾時，學生在課程地圖填姓名、按「複製進度給老師」交一行進度文字（教師資源頁 teacher/index.html 有全班總表範本與所有列印附件）。老師把它貼進 全班進度總表，再補上限時練習、模擬分數與默寫 v3 用時。下面這張是講評用的個人紀錄：

學生	本週可獨立完成	重複錯誤	完成時間	下週唯一優先目標

避免同時列十項缺點。競賽訓練的進步來自反覆修正高頻錯誤。

七、作品與版本管理

只印這一段

每次模擬保留：題目、素材、原始繳交版、教師評分、自評、修正版及時間紀錄。資料夾建議使用 日期_題目_學生_版本。正式競賽的資料夾命名仍須依當年度規定。

八、安全與倫理

只印這一段

• 案例分析應標示來源，只學方法，不複製完整作品。
• 圖片、字型、圖示與程式庫要確認授權及比賽允許程度。
• 平日可討論生成式 AI 的倫理與限制；正式模擬及競賽是否可用，只依官方規則。
• 不把高壓訓練變成羞辱。壓力來自時間與規格，不來自人身批評。

九、電腦還原卡

只印這一段

學校電腦多半裝了還原卡，重開機後瀏覽器紀錄會清掉，網站上的學習進度（存在瀏覽器裡）也會一起不見；放在桌面或 C 槽的作品資料夾通常也會被清掉。所以每週都要把進度檔和作品資料夾一起帶走。

網站的課程地圖有「備份進度（下載檔案）」與「還原進度（選備份檔）」兩個按鈕：

• 備份進度（下載檔案）：把目前瀏覽器裡的進度下載成一個檔案。
• 還原進度（選備份檔）：選擇之前下載的進度檔，把進度載回來。

下面這張印給每位學生，貼在筆記本封面：

電腦還原卡

每次下課前（收尾 10 分鐘）

1. 打開網站的「課程地圖」，在姓名欄填姓名，按「複製進度給老師」，把那一行貼給老師。
2. 按「備份進度（下載檔案）」，下載進度檔。
3. 把進度檔和本週的作品資料夾（例如 my-template-v3），一起存到自己的隨身碟或雲端硬碟。
4. 打開隨身碟確認兩樣都在，才關機。

每次上課一開始

1. 從隨身碟把作品資料夾複製到電腦上，用 VS Code「開啟資料夾」。
2. 打開網站的「課程地圖」，按「還原進度（選備份檔）」，選最新的進度檔。
3. 確認課程地圖上的完成章數和上週一樣，再按「繼續上次的進度」。

進度檔的檔名不要改；每週都留著，不要覆蓋上週的，弄壞了還能用前一週的。

老師這邊：

• 第 1 週收尾多留 5 分鐘，全班一起做一次備份，下週一開始一起做一次還原。
• 準備一支「班級備用隨身碟」，學生忘了帶時，進度檔和作品先存這裡，下次上課再拿回去。
• 換座位或換電腦都照同樣流程，不用重做章節。
• 如果還原後章數不對，以老師的全班進度總表為準，請學生在課程地圖上重新標記。

十、學科題庫：解析與官方答案疑義

只印這一段

網站上每一題學科都有解析：

• 題庫 611 題和歷屆試題的解析由 AI 協助撰寫，畫面上有註明「和課本或老師說的不同時，以老師為準」。
• 已用 15 題隨機抽查。
• 建議老師每週上課前抽看當週學生錯最多的幾題。

下列幾題和勞動部〈網頁設計丙級學科測試參考資料〉173003A17 原檔逐字核對過。網站上的答案和原檔一致，但原檔的答案和一般觀念不同。解析裡同時寫出官方答案和一般觀念。只要觀念正確，網站選官方答案或一般觀念都算對（畫面寫「算對，官方答案是 N」），學生不會因為觀念正確被記成錯題：

題號	題目	官方答案	一般觀念
B01-014	「階層式樣式表」的英文	XSL	CSS
B01-118	把線上消費者轉到線下的電子商務模式	B2C2B	O2O
B01-141	IPv6 每組數字的分隔符號	逗號	冒號
B02-097	何者不是社群軟體或網站	Facebook	Visio
B03-001	作業系統的第四項主要功能	I/O 管理	「資料管理」最接近常見教材的「檔案管理」，教學上放寬
B03-006	Multi-processing 的工作原理	同一時段只處理一件	多顆處理器同時處理
B02-192	可加入粗體及斜體效果的語法	<b><i>	<em><strong> 預設也是粗斜體
B01-078	關於編碼的敘述何者錯誤	BIG-5 是外碼	非壓縮 BCD 用 4 位元也是錯的（應為 8 位元）

題目和選項裡 PDF 轉檔多出的空白（例如 @font- face、＜ code＞、CD- ROM、（ TLD））已經清掉，避免學生照抄學錯語法，所以這些地方和原檔字面略有不同，內容和答案沒有改。

另外 4 題（B01-241、B02-199、B02-200、B03-071）的程式碼或步驟在原檔是圖片，文字版看不到，已標成含圖題，不列入計分與模擬考。

第 1 課：競賽不是一般作業

只印這一段

1. 封面：限制條件下的完整設計。
2. 課程終點：210 分鐘可評分作品＋30 分鐘檢查。
3. 五種能力：正確、完整、一致、有意圖、穩定。
4. 正式規則與訓練原則的差異。
5. 評分表如何轉成工作清單。
6. P0／P1／P2 範例。
7. 240 分鐘時間軸。
8. 致命錯誤案例。
9. 今日任務：規則標記與建站。
10. Exit ticket：若只剩 30 分鐘，你先做什麼？

第 2 課：網站能搬走才是真的能用

只印這一段

1. 網站資料夾圖。
2. HTML、CSS、JS 分工。
3. 相對路徑視覺化。
4. HTML 骨架。
5. 語義標籤比較。
6. 錯誤路徑診斷。
7. 搬移測試示範。
8. 限時任務與驗收。

第 3 課：Flexbox 是一條軸

只印這一段

1. 主軸／交叉軸動畫或圖示。
2. row 與 column 比較。
3. justify 與 align。
4. gap 與手動 margin 比較。
5. 導覽列拆解。
6. 圖文版面拆解。
7. 同高卡片與按鈕對齊。
8. 手機重排。
9. 主力版型重建與換題演練。

第 4 課：Grid 是欄與列

只印這一段

1. 一維與二維比較。
2. 格線標記。
3. repeat 與 fr。
4. minmax 與 auto-fit（看得懂就好；主力版型的卡片只用一個 768px 斷點，1 欄→3 欄）。
5. 跨欄焦點（選做：〈Grid：讓一張卡片跨欄〉layout/grid-span 在單元 02 最後的延伸）。
6. 不對稱仍需秩序。
7. Grid 外層＋Flex 內層。
8. RWD 改欄數。
9. 相片牆任務。

第 5 課：配色不是選喜歡的顏色

只印這一段

1. 題目風格詞。
2. 色彩角色。
3. 60／30／10。
4. 對比好壞案例。
5. CSS 變數。
6. 字級階梯。
7. 留白與親密性。
8. 圖片一致化。
9. 固定版型的題目換膚任務。

第 6 課：互動等於狀態回饋

只印這一段

1. 選取（Select）→ 監聽（Listen）→ 改變（Change）→ 更新畫面，四步。
2. 選單狀態圖。
3. classList toggle。
4. 頁籤結構。
5. 手風琴結構（原生版是單元 04 最後的選做延伸；v3 的常見問題用 jQuery 做）。
6. 燈箱開關與 Escape（同上，v3 用 jQuery＋原生 dialog）。
7. CSS 微互動。
8. Console 第一個錯誤。
9. 何時停損。
10. 元件展示任務：同一個頁籤、燈箱、常見問題，改用 jQuery 寫進一支 main.js（第 12 週，接版本線 v3）。

第 7 課：從題目到設計意圖

只印這一段

1. 受眾、訊息、行動。
2. 三個風格詞。
3. 文案層級。
4. 首頁敘事順序。
5. 黑白線框稿。
6. 最小設計系統。
7. 五秒測試。
8. 案例觀察表。
9. 模仿與轉譯的差異。
10. 30 分鐘企畫任務。

第 8 課：全真模擬與講評

只印這一段

1. 今日規則與里程碑。
2. 210 分鐘停手提醒。
3. 最後 30 分鐘五階段。
4. 原始版與修正版。
5. 官方四項配分：主題表現 30、網頁技術應用與互動性 25、視覺設計 25、創意表現 20；四級判準怎麼換算成分數（見評分規準）。
6. 證據式評語。
7. 自評差異。
8. 下次三項改善。

和網站三份模擬試題的分工

只印這一段

• 本題庫（教學用題目骨架）：網站上課時的示範與練習都從這裡取材，例如單元 05「把題目放進主力版型」的網站地圖與素材整理、「最小設計系統」的第四種主題，以及單元 06「讀題與任務拆解」的六欄表示範與讀題任務，用的是題目 1〈島嶼慢旅節〉與題目 2～5（第 16 週讀題任務只讀需求、不製作）。題目 3、5 之後還會用在第 17、18 週的模擬 1、4，模擬當天才發文案、圖片與指定互動；題目 6 是模擬 6 的模板。題目 1 另有練習圖檔包 downloads/island-travel-images.zip（scripts/make-mock-images.py 產生）。
• 網站的三份模擬試題（mock-exams/：〈山徑慢行〉〈防詐生活館〉〈河港燈會〉）：只用在正式模擬（第 2、3、5 次），照正式試卷格式出題，附評分對照、240 分鐘配時與圖檔包。不要拿來當上課的示範或讀題練習，學生第一次讀到它們應該是在模擬當天。
• 「一套模板三種主題」範例（examples/theme-variants/）的樂齡、山徑、燈會只是換膚示範的主題名稱，不是模擬試題的內容。

題目 1：島嶼慢旅節

只印這一段

任務

為推廣地方低碳旅遊的「島嶼慢旅節」設計一頁式活動網站。受眾為 18–35 歲、喜歡自然與在地文化的旅客。

必做內容

• 活動名稱、日期與核心標語。
• 三條主題路線：海岸、聚落、夜間生態。
• 四個特色活動。
• 交通與低碳行動說明。
• 報名或探索路線的主要行動按鈕。

必做技術

• 響應式導覽。
• Grid 活動卡片。
• 路線頁籤或篩選。
• 圖片燈箱。

設計挑戰

用「緩慢、自然、在地」建立視覺節奏，不以大量綠色直接代替主題思考。

題目 2：修理日常 Repair Together

只印這一段

任務

為社區修繕與物品延壽活動建立公益網站，讓居民了解維修不是節省而已，也是減少浪費與交換技能。

必做內容

• 活動理念。
• 家電、衣物、單車三個修繕站。
• 報名流程。
• 常見問題。
• 志工招募行動。

必做技術

• Flexbox 流程區。
• FAQ 手風琴。
• 報名燈箱 或清楚的靜態表單區。

設計挑戰

避免把公益網站做成嚴肅公文，以工具形狀、修補線或材料紋理建立親切感。

題目 3：字裡行間—青年文字展

只印這一段

任務

設計青年創作者文字與海報展覽網站。受眾為高中生、大學生及設計愛好者。

必做內容

• 展覽主題與策展文字。
• 三個展區。
• 六位創作者。
• 時間、地點與參觀資訊。
• 精選作品。

必做技術

• 不對稱 Grid。
• 作者篩選。
• 作品燈箱。

設計挑戰

以 Typography 為主角，同時維持中文長文可讀性。

題目 4：一口安心食品品牌

只印這一段

任務

為使用在地原料的常溫食品品牌建立品牌首頁，傳達來源透明、方便與日常溫度。

必做內容

• 品牌故事。
• 三項產品。
• 原料來源與製程。
• 食用情境。
• 常見問題與購買行動。

必做技術

• 產品卡片。
• 圖文交錯版面。
• 產品頁籤或簡易輪播。

設計挑戰

不能只靠食品照片；須用色彩、字體及小圖形建立可辨識的品牌性格。

題目 5：未來學習站

只印這一段

任務

設計校園自主學習成果平台首頁，協助學生探索主題、查看成果及了解投稿流程。

必做內容

• 平台價值。
• 科學、社會、藝術、科技四類成果。
• 精選專題。
• 四步投稿流程。
• 常見問題。

必做技術

• 成果分類篩選。
• 流程元件。
• FAQ 手風琴。

設計挑戰

呈現未來感但避免低對比霓虹、過度動畫與難以閱讀的科技字型。

題目 6：全真未知題模板

只印這一段

教師在不告知題型的情況下填入：

• 題目名稱：
• 受眾與情境：
• 核心目的：
• 必做文字：
• 必做圖片：
• 必做區塊：
• 必做互動：
• 技術限制：
• 繳交方式：
• 評分重點：依官方四項配分（主題表現 30、網頁技術應用與互動性 25、視覺設計 25、創意表現 20），寫出這題每一項要看什麼。

全真題不得要求學生使用未教過且無法在競賽時間內合理完成的專有技術；陌生應來自主題與素材轉譯，而不是隱藏規則。