LESSON 03 · 午餐揪團頁主線

三層的深水區：DOM 是活的

為什麼有時候畫面跟程式碼對不起來？今天下課，你會有答案——而且是一輩子受用的那種。盒子模型與層疊只帶過，細節交給 AI 處理。

核心心智模型 DevTools 初體驗盒子模型只帶過今天要背的只有一句話

✓

完成定義 · Definition of Done

學員能用 DevTools 找到元素、改一下樣式看畫面即時變化，並解釋「這改的是 DOM 還是檔案」。

0:00–0:08	開場：謎題「為什麼畫面跟程式碼常對不起來？」
0:08–0:28	DOM 是活的：現場示範「檢視原始碼」vs「Elements 面板」
0:28–0:40	動手：Elements 手動改文字 / 顏色 + 用 AI 加一個互動效果
0:40–0:50	盒子模型 / 層疊帶過 + 練習對 AI 描述「太擠」「被蓋掉」
0:50–0:58	作業起手：開 issue 描述樣式調整（其餘課後完成）
0:58–1:00	收尾：DOM 是活的——今天唯一要背的一句話

01今天的謎題

上次課我們讓頁面上線了。今天要解決一個每個人早晚會遇到的困惑：為什麼我明明看著程式碼改了，畫面卻好像跟我以為的不一樣？

02DOM 是活的

你寫的 HTML 檔案，是一份食譜。瀏覽器讀了食譜之後，煮出一鍋菜放在螢幕上——這鍋菜，就叫 DOM。關鍵是：JS 可以直接動這鍋菜，不用回頭改食譜。

圖 2.1DOM 是活的：HTML 檔案是食譜，DOM 是煮好端出來的那鍋菜，JS 直接動菜、不動食譜。

🔍全堂最關鍵的一幕（一定要現場做）

同一個網站：右鍵「檢視原始碼」看到的是食譜；DevTools 的 Elements 面板看到的是現場那鍋菜——通常內容更豐富，因為 JS 已經動過手腳。畫面上明明看得到的字，食譜裡搜不到，就是這個原因。

圖 2.2同一個頁面，檢視原始碼（食譜）跟 Elements 面板（現場那鍋菜）常常對不起來——這正是本堂的核心示範。

03動手：直接改那鍋菜

04盒子模型 · 層疊（帶過即可）

兩件事你不用背，能形容給 AI 聽就好：

BOX MODEL

盒子模型

畫面上每個東西都是看不見的盒子。東西擠在一起或空隙很怪？跟 AI 說「這裡太擠」，它會處理。

CASCADE

層疊

改了顏色沒生效？很可能被別條規則蓋掉了。跟 AI 說「我改了但沒生效，是不是被蓋掉了」，它會幫你抓。

·AI Prompt speed dial起手式 · 用自己的話改

A加一個會動的小效果

在我的午餐揪團頁裡，幫我加一個效果：
滑鼠移到揪團卡片上時，卡片要有一點放大或陰影變化的反應。

請告訴我這段程式碼主要是動到 HTML、CSS 還是 JS，一句話說明即可。

B描述「太擠」的問題

我的揪團卡片裡，餐廳名稱跟人數數字黏在一起，看起來太擠了，
幫我調整間距讓它更好閱讀。

C描述「改了沒生效」的問題

我請你把按鈕顏色改成綠色，但畫面上看起來還是原本的顏色，
會不會是被其他 CSS 規則蓋掉了？請幫我檢查並修正。

D請 AI 解釋 DOM vs 原始碼

請用「食譜」跟「煮好的菜」這個比喻，
針對我目前這個網頁，具體舉例說明哪些內容是「食譜裡本來就寫好的」，
哪些是「JS 現場加進去的」。

·作業與檢核

作業：一張 issue ＋一個 PR——一項樣式調整。PR 描述包含一句：「這次改動是 CSS 還是 JS？」

講師 / 助教檢核重點