把網頁做漂亮：十篇學習地圖

先挑一個問題

你現在最想解決什麼？

完全沒概念，可以從第一篇開始；已經有正在做的網站，也可以直接跳到遇到的問題。

不知道怎麼排版從版型比較開始 →畫面太擠、不好讀看字體與留白 →手機版看起來很亂練習手機重排 →不知道怎麼跟 AI 說整理製作需求 →

完整閱讀順序

十篇，一步一步把想法說清楚

每篇都可以獨立閱讀；依順序走，會先看懂畫面，再處理操作與手機，最後整理成自己的需求。

01
「我不知道網頁上各區塊叫什麼。」
把網頁做漂亮，先看懂它的零件 →
認識頁首、導覽、首屏、卡片與頁尾，學會描述它們的用途。
動手做：點圖找位置，試三種首屏排列。
02
「內容準備好了，不知道怎麼排。」
同一份內容，該用哪種網頁版型？ →
比較單欄、分欄、網格、大小格與側欄的用途。
動手做：固定一種版型，和另一種對照。
03
「畫面好看，訪客卻不知道我在做什麼。」
第一眼看懂你：Hero 要放什麼？ →
整理首屏主標、說明、圖片與下一步。
動手做：逐項切換文字、圖片和行動入口。
04
「文字和圖片擠在一起，讀起來很累。」
為什麼看起來很擠？字體、字級與留白 →
認識字體、字級、行高、閱讀寬度及空間的分工。
動手做：調整參數，用色帶看卡片內外的距離。
05
「套了版型，但看不出自己的風格。」
同一個版型，怎麼長出自己的品牌感？ →
安排背景、文字、重點色、圖片與卡片細節。
動手做：比較三套視覺方案，調整裁切與表面效果。
06
「按鈕和卡片單看好看，放一起卻不一致。」
按鈕、卡片與標籤：讓小零件看起來是一家人 →
理解主要與次要操作、元件共用規則及按鈕狀態。
動手做：同步改變圓角與間距，查看焦點、停用及載入示意。
07
「讀者找不到作品，也不知道表單有沒有送出。」
好看之外，還要找得到：導覽、展開內容與表單 →
安排導覽、展開內容與清楚的表單回饋。
動手做：走一次作品→服務→聯絡；表單不會真的送出。
08
「桌機好看，手機卻太擠。」
手機版不是縮小：重新安排閱讀順序 →
重新決定手機上的內容順序、圖片與操作。
動手做：比較直接縮小與重新排列，測試長標題。
09
「想加動畫，又怕影響閱讀。」
動一點就好：讓動畫帶路，不搶戲 →
認識淡入、滑入等動畫的作用，以及停止和減少動態。
動手做：選一種動畫播放一次，隨時停止。
10
「腦中有想法，但不知道怎麼交代給 AI。」
把喜歡的樣子，寫成 AI 做得到的需求 →
整理對象、目標、參考、內容及驗收方式。
動手做：填寫需求稿，編輯、複製或下載文字檔。

資源番外

已經收藏很多喜歡的網站？

這篇帶你拆解參考、挑選模板，把自己的內容放進去，並整理成可以帶走的改造單。

閱讀番外：喜歡這個網站，怎麼做出自己的版本？ →

系列中的互動畫面多為虛構教學示例。真正上線前，仍要用自己的文字、圖片，以及桌機與手機實際測試。