OnePage 工具箱：
RWD × jQuery × 圖示字體
期中企劃完成後，開始動手做 OnePage 之前，先準備好四樣工具：讓版面適應各種螢幕的 RWD、把內容放在一頁的 OnePage 結構、讓網頁會動的 jQuery，以及不用切圖就能放圖示的 圖示字體。每個觀念都有實驗室可以直接操作。
01這單元學什麼？和 OnePage 有什麼關係
期中企劃決定了「做什麼」，這單元準備「怎麼做」。四個工具分別解決 OnePage 的四個問題：
RWD 響應式
同一個網站，在手機、平板、電腦上都排得好看。
問題：手機上會不會跑版？OnePage 結構
內容放在同一頁，導覽列用錨點跳到各區塊。
問題：內容怎麼組織？jQuery 互動
淡入、滑動、展開收合、平滑捲動，讓頁面會「回應」。
問題：怎麼讓網頁動起來？圖示字體
用一行文字放入可縮放、可改色的圖示。
問題：圖示怎麼放最省事？02RWD：一個網站，適應每一種螢幕
隨著行動上網普及，「行動優先」成為網頁設計的主流。響應式網頁設計（Responsive Web Design，RWD）讓網頁依照螢幕寬度自動調整版面：電腦上三欄並排，到了手機變成一欄上下排，導覽列收成 ☰ 選單。
① 適用不同載體
不同尺寸的螢幕都能順利瀏覽，同一個網站解決所有裝置。
② 開發成本降低
不用分別做電腦版與手機版，只維護一個網站。
③ 有利 SEO
只有一個網址，搜尋成效不會分散；Google 也建議使用 RWD。
④ 方便分享
同一個網址在任何裝置都能打開，按讚與流量也能集中分析。
RWD 的三個關鍵
viewport 設定（寫在 head）
告訴手機「用裝置的實際寬度顯示」，少了它手機會把網頁縮成很小一張。<meta name="viewport" content="width=device-width, initial-scale=1">
彈性的寬度與圖片
用 %、max-width、fr 代替固定 px；圖片加上 img { max-width: 100%; } 就不會超出畫面。
媒體查詢 @media（斷點）
在特定寬度切換樣式，例如寬度 768px 以下改成一欄。
/* 先寫手機版（預設一欄） */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* 平板以上：兩欄 */
@media (min-width: 768px) {
.cards { grid-template-columns: 1fr 1fr; }
}
/* 電腦以上：三欄，導覽列展開 */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
互動工具：RWD 模擬器
03OnePage：把內容放在同一頁
一頁式網站（單頁式網站）在一個頁面裡，用圖片、動態效果與簡潔的文字，由上往下說完一個主題。導覽列不是換頁，而是捲動到這一頁的某個區塊，用的是 HTML 的錨點（anchor）連結。
| OnePage 的特色 | 說明 |
|---|---|
| 只有一頁 | 像產品或個人的電子型錄，設計簡單、扁平。 |
| 錨點導覽 | <a href="#about"> 跳到 <section id="about">，網址不換頁。 |
| 必定搭配 RWD | 依照螢幕自動調整大小與要顯示的內容。 |
優點
節省時間：往下滑就看完；UX 好、易分享：操作簡單、只有一個網址；跳出率可能降低：符合滑動習慣；容易維護：只要改一頁。
要注意
內容太多會很長、載入變慢（圖片要壓縮）；所有關鍵字擠在一頁，SEO 較不利；不適合大量文章或需要分類的網站。
互動示範：錨點導覽怎麼運作
Hi, I'm Jin
這是 #a-top 區塊
關於 About
這是 #a-about 區塊
作品 Works
這是 #a-works 區塊
聯絡 Contact
這是 #a-contact 區塊
OnePage 的四種常見用途
特定主題、活動網站，上線後可搭配關鍵字廣告提升能見度。
搭配廣告使用的網頁，依目標受眾規劃內容，讓訪客看完立即採取行動（報名、購買、填表）。
像名片一樣的一頁式網站，呈現個人或品牌形象。
用首頁做「10 秒鐘的簡報」，讓訪客由簡入深認識你或公司，再連到其他頁面。
04jQuery：寫得更少，做得更多
jQuery 的口號是 write less, do more。它是一套用 JavaScript 寫成的函式庫，讓我們用很短的語法和 HTML、CSS 互動：選取元素、隱藏顯示、淡入淡出、動畫、事件處理。只要懂 CSS 選擇器，就能很快上手。
使用 jQuery 的三個步驟
- 引入 jQuery（放在 </body> 前或 <head> 中）使用官方 CDN，不用下載檔案：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> - 等網頁準備好把程式寫在
$(function () { … });裡，確保 HTML 都讀完了才執行。 - 選取元素，下達動作
$('選擇器').動作(參數);，例如$('.box').fadeIn(2000);
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="utf-8">
<title>jQuery 淡入</title>
</head>
<body>
<div class="box">我會慢慢出現</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('.box').hide().fadeIn(2000); // 先隱藏，再用 2 秒淡入
});
</script>
</body>
</html>
互動工具：jQuery 語法解剖
互動工具：選擇器練習（真的用 jQuery 選）
$('')作品
說明文字 重點
| 動作 | jQuery | 原生 JavaScript |
|---|---|---|
| 選取 | $('.box') | document.querySelectorAll('.box') |
| 點擊事件 | $('#btn').on('click', fn) | btn.addEventListener('click', fn) |
| 加／切換 class | $(el).toggleClass('on') | el.classList.toggle('on') |
| 淡入 | $('.box').fadeIn(600) | 需要自己寫 CSS transition 或 animate |
| 網頁準備好 | $(function () { … }) | script 加 defer |
05jQuery 效果實驗室
選一個效果、調整速度與觸發方式，按「執行」看結果。下方會產生可以直接複製的程式碼。實驗室使用真正的 jQuery 3.7.1。
滑過我（hover 模式）
| 常用方法 | 效果 | 常見用途 |
|---|---|---|
hide() show() toggle() | 隱藏／顯示／切換 | 手機選單、彈出訊息 |
fadeIn() fadeOut() fadeToggle() | 淡入／淡出 | 進場效果、圖片切換 |
slideDown() slideUp() slideToggle() | 向下展開／收合 | FAQ、選單 |
animate({…}, 時間) | 自訂數值動畫 | 移動、放大、平滑捲動 |
addClass() removeClass() toggleClass() | 加減 class，樣式交給 CSS | 深色模式、導覽列變色 |
css() text() html() | 直接改樣式或內容 | 改顏色、更新文字 |
06OnePage 最常用的 6 個 jQuery 效果
選一個範例，左邊可以直接修改 HTML／CSS／JS，按「執行」更新右邊預覽。每個範例都有「試試看」任務；改好了可以下載成 .html 檔，直接用在自己的 OnePage。
07CSS3 視覺效果：圓角、陰影、透明、漸層、動畫
很多「看起來像特效」的效果，其實用 CSS3 就能做到，而且比 JavaScript 更流暢。搭配 jQuery 的 toggleClass()，就能用點擊切換這些樣式。
| 屬性 | 寫法 | 說明 |
|---|---|---|
| 圓角 | border-radius: 20px;border-radius: 10px 0 10px 0; | 四個值依序是左上、右上、右下、左下。 |
| 區塊陰影 | box-shadow: x y blur spread color inset; | x 水平位移、y 垂直位移、blur 模糊、spread 擴散；加 inset 變內陰影。 |
| 文字陰影 | text-shadow: 1px 1px 2px #000; | x、y、模糊、顏色。 |
| 透明度 | rgba(102,153,255,.5)／opacity: .5; | rgba 只讓「顏色」透明；opacity 讓整個元素（含文字）透明。 |
| 漸層 | linear-gradient(135deg, #B8E7F3, #43C3E4)radial-gradient(#B8E7F3, #43C3E4) | 線性漸層可設角度；放射漸層由中心向外。可搭配 rgba 做半透明漸層。 |
CSS 動畫：@keyframes
只要定義兩件事：動畫的開始與結束（關鍵影格），以及怎麼轉變（時間、速度曲線）。0% 是起點、100% 是終點。
Welcome to My OnePage
嵌入 YouTube 影片（並且做成 RWD）
- 在影片下方點「分享」
- 選擇「嵌入」
- 複製嵌入語法，貼到 HTML 想放的位置
/* YouTube 給的 iframe 有固定寬高，加上這段就會跟著版面縮放 */
.video iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
08圖示字體：用一行文字放入圖示
圖示字體（icon font）把圖示做成「字型」，所以可以像文字一樣用 CSS 改大小、顏色、陰影，放大也不會模糊。最常用的是 Font Awesome，本課程網站也大量使用。
| 放圖示的方法 | 優點 | 缺點 |
|---|---|---|
| 圖片（PNG／JPG） | 任何圖案都可以 | 放大會模糊；改顏色要重新切圖；每個圖示一個檔案 |
| 圖示字體 | 一行程式碼；CSS 改色改大小；數千個免費圖示 | 只能單色（或少數雙色）；需要載入字型檔 |
| SVG | 向量、可多色、可做動畫 | 程式碼較長，初學較複雜 |
引入 Font Awesome 的兩種方法
在 <head> 加入一行 CSS 連結，就能使用全部免費圖示。不需要帳號。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
Kit 會給你一行專屬的 <script>，可在後台選擇要用的圖示組與設定。
- 註冊或登入 Font Awesome 帳號
- 登入後點「Your Kits」進入工具包
- 點選自己的 Kit 進入設定
- 複製專屬的 JavaScript 程式碼，貼到 <head> 中
<script src="https://kit.fontawesome.com/你的代碼.js" crossorigin="anonymous"></script> - 到 Icons 頁面搜尋圖示，複製語法貼到想出現的位置
圖示的寫法
| 想做什麼 | 寫法 | 結果 |
|---|---|---|
| 放一個圖示 | <i class="fa-solid fa-house"></i> | |
| 換樣式 | fa-solid 實心、fa-regular 線條、fa-brands 品牌 | |
| 放大 | fa-lg、fa-2x…fa-5x | |
| 改顏色 | CSS：.fa-heart { color: crimson; } | |
| 動畫 | fa-spin、fa-beat、fa-bounce、fa-shake | |
| 舊版寫法 | v5：fas fa-home、fab fa-facebook | v6 仍相容，但建議用新寫法 |
aria-hidden="true"；如果按鈕只有圖示沒有文字（例如社群連結），要在連結加上 aria-label="Instagram"，讓讀螢幕軟體知道它是什麼。互動工具：圖示探索器
互動工具：社群按鈕列產生器
其他免費圖示字體：Bootstrap Icons（本頁的目錄圖示就是它）、Google Material Symbols。同一個網站建議只用一套，風格才會一致。
09RWD 範本、圖庫與應用範例
可以下載 RWD／OnePage 範本來研究結構（看它怎麼寫 @media、怎麼用 jQuery），再改成自己的設計。使用前請確認授權，並在頁尾保留作者標示。
10AI 協作：請 AI 解釋與除錯，不是代寫
遇到看不懂的 jQuery 語法、效果沒有反應、手機版跑版時，可以這樣問 AI。複製後把＿＿換成你的內容。
.bind()、Font Awesome 4 的 fa fa-）。拿到程式碼後，先貼到本頁的範例遊樂場執行看看，再對照 jQuery API 或 MDN。