UNIT 03 作業一解析：歌詞排版（HTML＋CSS 基礎）｜網頁設計

01先看目標：做一個有「情緒」的歌詞網頁

基本的網頁由 HTML（結構）與 CSS（樣式）組成。這份作業先不靠任何軟體幫你自動產生，而是親手寫出 HTML 與 CSS，因為看得懂語法，之後才能指揮 AI、修改版型，舉一反三。

你要做的事

選兩首歌詞，各做成一個網頁（index.html、song2.html），依歌詞的情緒設計配色與字體，最後上傳到學校空間。

先看成品

製作前請準備

兩首歌的歌詞，以文字檔形式儲存（.txt）。
針對歌詞所傳達的情緒，用配色決定整體版面的意境。

歌詞有著作權歌詞只能在課堂作業中使用，並須註明「本網頁為作業之用，如有侵權敬請告知」。請不要把完整的歌詞貼給 AI 工具，向 AI 提問時，改用本頁範例的自編文字或你自己寫的短句；未來若要公開上線，請改用原創或已取得授權的內容。

互動：選一個心情，看配色與對比（會套用到後面的步驟）

夜裡的風

夜色慢慢走進城市
路燈替我留一盞光

繼續：一步一步做出來 ↓

目前選擇：。想找更多配色靈感，可以逛 Coolors、Adobe Color，並用 WebAIM Contrast Checker 檢查對比。

02認識網頁的基本架構

網頁有「看得到」的部分（body）與「看不到」的設定（head）。點選左邊的區塊，右邊的程式碼會亮起對應的行，並說明它的用途。

<html>

<head>畫面上看不到

charset、title、CSS 連結…

<body>畫面上看得到

<header> 標題＋

<nav> 導覽列

<main> 主要內容（歌詞）

<footer> 頁尾版權

index.html（結構示意）

原教材圖解（點開查看）

03建立資料夾與檔案

動手寫程式之前，先把「放在哪裡、叫什麼名字」想清楚。檔名取錯是上傳後最常見的問題。

建立作業資料夾在桌面建立名為 hw01-學號 的資料夾（用下方產生器確認名稱）。
新增檔案並存檔用 VS Code 開啟該資料夾 → 新增檔案 → 命名為 index.html，存放在資料夾內。
有圖片的話，另開圖片資料夾在網站資料夾內新增 img（或 images），圖片都放在裡面。

互動工具：作業資料夾與網址產生器

網址依「學號」與「資料夾名稱」組成。學生的資料夾名稱請與上傳到伺服器的名稱完全相同，並以課堂公告的實際網址為準。

互動工具：檔名檢查器（只能用半形英文、數字、- 與 _）

04步驟工作台：一步一步做出歌詞網頁

每一步都有三件事：① 看說明 → ② 對照答案（新增的行會高亮）→ ③ 切到「我來打」自己輸入，右側即時預覽，條件達成就自動打勾。鍵盤 ← → 可切換步驟。

1

index.html

綠色高亮 = 這一步新增或修改的行｜「對照答案」是唯讀的：直接點一下程式碼，就會切到「我來打」並載入本步答案，可以邊改邊看右側預覽。拖拉中間的分隔線可以調整左右寬度。

預覽 index.html

進度會記在你的瀏覽器　·　

這一步卡住了？產生一個好問題問 AI（會自動帶入目前步驟與程式碼）

提醒：範例是自編文字；請不要貼完整的版權歌詞給 AI。

05CSS3 實驗室：圓角、陰影、漸層、字體

想加強視覺質感？不用背數值，拖拉滑桿直接看效果，滿意了就複製右邊產生的 CSS 貼進你的 style.css。

圓角

陰影 X

陰影 Y

陰影模糊

陰影濃度

文字陰影

透明度

漸層角度

漸層顏色

夜裡的風

拖拉左邊的滑桿，看看卡片怎麼變

style.css

新做法｜漸層語法更新了舊教材的 -webkit-gradient(…) 是已被淘汰的舊寫法。現在請使用標準的 linear-gradient() 與 radial-gradient()，上面產生的就是新語法。找漸層可以用 CSS Gradient，原教材的 CSS3 Maker 已不建議使用。

字體：Google Fonts 雲端字體

字體試用需連上網路。點選字體預覽，右側會產生要貼進 <head> 與 CSS 的程式碼。原教材的 cwTeX 系列字體已不再是建議選項，請以 Google Fonts 目前上架的繁體中文字體為準。

夜色慢慢走進城市，路燈替我留一盞光。
The quick brown fox jumps over the lazy dog 0123456789

貼進你的網頁

字體小提醒每多引入一種字體或字重，載入就多一點時間。作業建議最多用 1～2 種字體，並保留備用字體（如 sans-serif）。想了解更多 CSS 屬性，可對照 MDN CSS 參考。

06AI 學習搭檔：學語法，也學會指揮 AI

現在做網頁，幾乎都會用到 AI：它能解釋語法、找出錯誤、產生草稿。但如果你看不懂 HTML、CSS，就無法判斷 AI 給的對不對，也改不動它寫的東西。所以這門課的學法是：基本功自己練，AI 當家教加速理解。

一定要自己懂

網頁的結構（head／body／header／main／footer）、檔名與路徑、標籤成對、看得出畫面哪裡不對、判斷 AI 給的答案好不好。

可以請 AI 幫忙

查語法細節、用比喻解釋觀念、說明錯誤原因、整理格式、出練習題、提供配色或版面的靈感草稿。

每一個新語法，都用這個「4 步學習循環」

語法速查＋AI 問法對照（HTML、CSS，以及 JS 預習）

每個語法旁邊，附上可以直接複製去問 AI 的問題。想快速理解一個新語法，就用這些問法，而不是只說「幫我做」。JavaScript 會在後面的互動單元（jQuery）正式學習，這裡先預習觀念。

語法	白話意思＋範例	問 AI 的句子

使用 AI 的四個守則

① 先試再問

自己卡過、試過一次，再請 AI 解釋，才記得住。

② 問「為什麼」，不只問「怎麼做」

要求比喻、逐行解釋，並請它「先不要改我的程式碼」。

③ 一定驗證

AI 可能給出過時、不存在的語法。用瀏覽器 F12 與 MDN 確認。

④ 保護隱私與著作權

不貼個人資料、密碼、學校空間帳號；不貼完整的版權歌詞。若課程要求標註 AI 使用情形，請依老師公告說明。

讓 AI 當「出題老師」做完一個步驟，試著問：「請根據這份歌詞網頁，出 3 題由簡到難的 HTML／CSS 練習，先不要給答案；我寫完再貼給你批改。」這比直接叫 AI 寫完整網頁，更能真正學會。

07上傳作業與除錯診斷

做好的網頁要上傳到學校的伺服器，才能用網址開啟。上傳完成後，一定要用電腦與手機各開一次確認。

開啟 FileZilla 並連線主機 my.cute.edu.tw、使用者名稱為你的學號、密碼為單一入口密碼，按「快速連線」。（尚未安裝請看 UNIT 01）
找到左右兩邊的資料夾左側是你的電腦，找到 hw01-學號；右側是學校伺服器上你的個人空間。
把資料夾拖曳到右側連同 css、img 資料夾一起傳。
確認傳輸成功看 FileZilla 底部「成功的傳輸」是否有你的檔案，且沒有「失敗的傳輸」。
用網址測試在瀏覽器開啟 https://my.cute.edu.tw/~學號/hw01-學號/，再用手機開一次，並點點看每一個連結。

互動診斷小幫手：遇到問題先選症狀

還是找不到原因？回到第 04 章工作台的「找出錯誤」提問產生器，補上「我看到什麼／我預期什麼」，再請 AI 帶你檢查。請 AI 教你怎麼查，而不是直接幫你改。

08課後作業 HomeWork

【作業一】html + css 練習｜歌詞排版

第 4 週繳交　·　平時作業

參考本講義的步驟製作。
在 title 的部分打上歌詞名稱。
自行選擇兩首歌詞，設定歌詞風格，依照所設定的風格進行配色。
footer 請設定個人專屬的版權聲明，並註明「本網頁為作業之用，如有侵權敬請告知」。
上傳至學校 FTP，網址為 https://my.cute.edu.tw/~學號/hw01-學號（以課堂公告為準）。

作業重點① 認識基礎 HTML 網頁架構、標題設定、連結設定；② 認識 CSS 基礎語法，利用色彩與字體設計出符合歌詞意境的網頁；③ 學習把自己做的網頁上傳到雲端空間，成為專屬的網頁。

繳交前自我檢核

0 / 6 完成

資料夾名為 hw01-學號，首頁檔名為 index.html（全部半形英數）
兩首歌詞各一個網頁，都有 header／nav／main／footer，導覽列連結可互相切換
title 為歌詞名稱，歌詞有分段與換行
依歌詞情緒配色，文字與背景對比達 4.5 : 1 以上
footer 有版權聲明，並註明「本網頁為作業之用，如有侵權敬請告知」
已上傳 FTP，用電腦與手機都開啟過網址測試

學長姐作業參考

自我測驗

Q1下列哪個資訊「不會」直接顯示在網頁畫面的內容區？

Q2在 HTML 原始碼裡把歌詞每句換行，畫面上卻全擠在一起，要怎麼解決？

Q3AI 給了一段 CSS，下列哪個做法最正確？