OnePage 實作（一）：
從範例做出自己的網站
把期中企劃變成真正可以操作的網站。這一單元準備了兩個範例：範例一照 8 個任務填表就能做出網站、即時預覽；範例二是完整範本「拾光設計工作室」，下載後照圖解一步步修改。兩個都會帶你完成導覽列、輪播、格線、配色與 favicon。
01這單元要做出什麼？
沿用 期中企劃的題目、目標與視覺風格，把線框變成可以操作的 OnePage。本單元完成核心版面（導覽、輪播、關於、作品格線、聯絡、頁尾），UNIT 09、UNIT 10 再補齊相簿分類、表格與地圖。
兩個範例，選一個開始
光影社 Shutter Club
照 8 個任務填表、換圖片、選顏色，右邊網站即時改變，下方標出你填的內容在程式碼哪裡；完成後下載含圖片的完整網站。
- Bootstrap 5.3，6 個區塊的精簡 OnePage
- 不用安裝軟體；會了再切換「程式碼模式」
- 適合：第一次做網站、想看懂結構
拾光設計工作室 範本
下載完整的範本資料夾，用 VS Code 照 7 個部分的圖解修改。作業要求的輪播、格線、作品分類、表格、地圖都已經做好。
- Bootstrap 5＋FlexSlider＋GLightbox
- 12 個區塊、完整檔案與圖片，可直接上傳
- 適合：要以範本為基礎做期末作品
期末 OnePage 必須完成的項目
| 評分標準 | 老師會看什麼 |
|---|---|
| 美感與精緻性 | 配色、圖片、排版、字體調整，擺脫範本原本的感覺，表現獨特風格。 |
| 完整性 | 符合規定項目，每個連結點了都有作用。 |
| 正確性 | 語法正確、不出錯；不必要的範例內容已刪除。 |
| 加分項 | 內容豐富完整，超過規定的要求。 |
028 步製作路線：照順序做就會完成
每一步都有要做什麼、範例程式、完成檢查。做完一步就勾選「完成」，進度會記在這台電腦。每一步都標出可以到哪個範例練習。
03範例一：光影社網站工作台
不用先會寫程式：照下面 8 個任務填表，右邊的網站預覽會立刻改變，下方會顯示「你填的內容出現在程式碼的哪裡」（黃色標記）。8 個任務都做完，就能下載一個完整的 OnePage。想直接寫程式，可以切換到「程式碼模式」。
改完按「更新預覽」或 Ctrl／Cmd+Enter。程式碼模式的修改不會回到表單。
完成後：檢查與下載
index.html 和 images 資料夾，雙擊 index.html 就能開啟；上傳到學校空間時兩個一起上傳。網站透過網路載入 Bootstrap 5.3、Google Fonts 與 Font Awesome，第一次開啟需要網路。進度自動存在這台瀏覽器，換電腦前請「下載進度」。04範例二：OnePage 範本，一步步圖解
OnePage 範本 2026 優化版「拾光設計工作室」：Bootstrap 5＋FlexSlider 輪播＋GLightbox 燈箱，作業要求的輪播、格線、作品分類、表格、地圖、圖示字體都已經做好。先下載範本並打開線上示範對照，再依下面 7 個部分修改。程式碼裡搜尋「【修改】」就能找到每個要改的地方。
舊版範本（2014，Bootstrap 3）下載與示範
- 舊版範本下載（Google Drive）
- 舊版範本示範網站
- 舊版與新版的寫法差異，請看「05 版本對照」。
先動手玩：在真的範本上即時修改
右邊就是 onepage 範本本身（真的檔案）。用左邊的工具改改看，右邊會立刻變化；下方會告訴你要改哪個檔案、哪一段，才能把同樣的效果寫進自己下載的範本。改壞了按「還原」即可。
範本載入中…
① 下載範本，先看懂整個網站
- 導覽列
headerLOGO＋選單 - 首頁輪播
#homeFlexSlider 三張 - 關於
#about圖文＋數字＋能力條 - 獲獎與證照
#awards表格 - 引言
#quote固定背景 - 服務
#services卡片＋手風琴 - 影片
#video燈箱播放 YouTube - 作品集
#works分類篩選＋燈箱 - 展覽倒數
#countdown - 團隊
#team圖示字體社群 - 聯絡
#contactGoogle 地圖 - 頁尾
footer
- 下載並解壓縮放在自己的作業資料夾。CSS、JS、images 要和 index.html 放在一起，不要拆開。
- 用 VS Code 開啟整個資料夾「檔案 → 開啟資料夾」。左側就能看到所有檔案。
- 邊改邊看用瀏覽器打開 index.html；改完存檔，按 Ctrl／Cmd+R 重新整理。
- 先決定要留哪些區塊不需要的區塊（例如影片、倒數）整段刪除，導覽列的項目也要一起刪。
原則：只改 index.html、css/style.css、js/main.js 和 images；框架與外掛檔不要動。程式碼裡每一段都有編號註解（例如 <!-- 3. 關於 #about -->），和 style.css、main.js 的編號一致。
② 前置設定：html lang 與 meta tag
在 HTML5 的 <html> 加上 lang 標註網頁語系，讓瀏覽器與搜尋引擎正確解析。台灣繁體中文寫成 <html lang="zh-Hant-TW">。
| lang 值 | 語言 |
|---|---|
| en | 英文 |
| zh-Hans | 簡體中文 |
| zh-Hant | 繁體中文 |
| zh-Hant-TW | 臺灣使用的繁體中文 |
meta tag 放在 <head>，告訴瀏覽器這個網頁的資訊：
| meta | 作用 |
|---|---|
charset="utf-8" | 文字編碼。舊網頁用 big5，現在統一用 UTF-8，中文才不會亂碼。 |
name="viewport" | 螢幕寬度設定，RWD 必備。 |
name="description" | 網站描述，會出現在搜尋結果。 |
name="author" | 作者。 |
name="keywords" | 關鍵字（現在搜尋引擎參考度低，可寫可不寫）。 |
③ 導覽列：選單對應到區塊
- 先規劃選單項目依期中企劃的區塊，決定導覽列要有哪些項目（建議 4–6 個）。
- 改選單文字，並對應到 section 的 id每個
href="#xxx"都要有一個id="xxx"的區塊，名稱完全一樣（大小寫也要一樣）。 - 刪掉用不到的選單與區塊例如刪了「團隊」區塊，選單的「團隊」也要刪，不能留下點了沒反應的連結。
- 換 LOGO把
images/logo.png換成自己的（建議正方形、透明背景）；文字拾光設計與小字Shiguang Studio也要改。
<a class="navbar-brand" href="#home">
<img src="images/logo.png" alt="拾光設計工作室 LOGO" width="40" height="40">
<span>拾光設計<small>Shiguang Studio</small></span>
</a>
<!-- 手機版 ☰：data-bs-target 對應選單的 id="mainNav" -->
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#mainNav">…</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">首頁</a></li>
<li class="nav-item"><a class="nav-link" href="#about">關於</a></li>
…
</ul>
</div>
<section id="about" class="section"> … </section> <!-- href="#about" 跳到這裡 -->
body 上的 data-bs-spy="scroll"）、往下捲導覽列變白底（main.js 第 1 段）、手機上點選單後自動收起（main.js 第 2 段）、跳到區塊時標題不會被導覽列擋住（style.css 的 scroll-padding-top）。④ 首頁輪播：FlexSlider
大圖輪播是 OnePage 常見的開場：一進網站就抓住目光。範本使用 FlexSlider 套件（jQuery 外掛），需要三個檔案：
<div class="flexslider" id="heroSlider">
<ul class="slides">
<li>
<!-- 【修改】背景圖片 -->
<div class="hero-slide" style="background-image: url(images/slide-01.jpg);">
<div class="container hero-text">
<p class="eyebrow">DESIGN STUDIO · SINCE 2026</p>
<h1>把日常的光，<br>拾成設計</h1>
<p class="hero-lead">說明文字</p>
<a href="#works" class="btn btn-main">看看作品</a>
</div>
</div>
</li>
<li> … 第二張 … </li>
</ul>
</div>
$('#heroSlider').flexslider({
animation: 'fade', // 'fade' 淡入淡出；'slide' 左右滑動
slideshowSpeed: 5000, // 每張停留 5 秒
animationSpeed: 800, // 換張的動畫 0.8 秒
directionNav: false // 不顯示左右箭頭，只用下方圓點
});
- 增加一張：複製一組
<li>…</li>，換背景圖片與文字。第一張用<h1>，其他用<h2>（一頁只放一個 h1）。 - 淺色或深色文字：
class="hero-slide"是淺色遮罩＋深色字；加上dark（class="hero-slide dark"）變成深色遮罩＋白字，依照片亮暗選擇。 - 圖片規格：1920 × 1080 左右，主體放在右半邊（左邊放文字），檔案小於 500 KB。
舊版範本的輪播圖解（FlexSlider＋Jumbotron）
jumbotron 裡；Bootstrap 5 已移除 jumbotron，新版改用自訂的 hero-text。⑤ 網格系統 Grid：一列分成 12 格
Bootstrap 提供響應式、行動優先的網格系統：每一列（row）最多分成 12 格，欄（column）的數字加起來等於 12 就排成一列。結構固定是 .container → .row → .col-*。
網格的規則
.container（固定寬度）或.container-fluid（滿版）讓版面對齊並留出邊距。- 用水平方向的
.row把欄位群組起來；欄位一定緊接在.row之下，內容放在欄位裡。 - 欄與欄之間有間隙（gutter），
.row用負的 margin 校正左右多出來的 padding。 - 一列超過 12 格，多出來的欄位會自動換到下一行。
- 設定某個斷點的欄寬，會影響「大於等於」該寬度的裝置；例如只寫
col-md-6，大螢幕也會是 6 格。
| 範本裡的格線 | 寫法 | 效果 |
|---|---|---|
| 關於 | col-lg-5＋col-lg-7 | 電腦 5:7 兩欄；平板、手機上下排 |
| 服務卡片 | col-md-4 × 3 | 平板以上三欄；手機一欄 |
| 作品集 | col-6 col-md-4 | 手機兩欄、平板以上三欄 |
| 倒數 | col-6 col-md-3 | 手機 2×2、平板以上一排四個 |
延伸閱讀：960 網頁格線系統、Bootstrap 入門教學、Grid System 學習筆記。斷點的新舊版本差異請看「05 版本對照」。
⑥ 換成自己的配色與字體：改一個地方就好
新版範本把所有顏色寫成 CSS 變數，集中在 css/style.css 最上面的「0. 設定變數」。導覽列、按鈕、標題底線、輪播圓點、能力條……都是用 var(--main) 讀取，所以只要改一個色碼，全站一起換。
:root {
--main: #E4572E; /* 主色：按鈕、強調、底線 */
--main-dark: #C2401C; /* 主色的深色：滑鼠移上去時 */
--second: #2E5E4E; /* 輔助色：深色區塊 */
--accent: #F2B134; /* 點綴色：小標、裝飾 */
--ink: #1E1B18; /* 文字色 */
--paper: #F6F1EA; /* 淺色區塊背景 */
--font-head: "Outfit", "Noto Sans TC", sans-serif; /* 標題字體 */
--font-body: "Noto Sans TC", sans-serif; /* 內文字體 */
}
- 決定配色使用期中企劃的色彩計畫，或到 Muzli Colors、Coolors 找配色。
- 改 :root 裡的色碼，存檔重新整理整個網站會一起換色。
- 用「檢查」確認在顏色不對的地方按右鍵 →「檢查」，看是哪一條 CSS 規則、是否還有寫死的色碼。
- 換字體到 Google Fonts 選字體，替換 head 裡的字體連結，再改
--font-head、--font-body。
舊版範本（Bootstrap 3）的換色方法：用「檢查」找色碼 → 搜尋取代
舊版範本沒有 CSS 變數，主色 #48C6CD 散落在 style.css 與 flexslider.css。網路上下載的其他範本也常是這樣，學會這個方法很有用：
- 在主色文字上按右鍵 →「檢查」右側 Styles 顯示檔案、行數與色碼。
- 輪播圓點也用了主色在 flexslider.css 第 61 行。
- 搜尋色碼出現幾次Ctrl／Cmd+F。
- 用取代換成新主色VS Code：Ctrl／Cmd+H。
⑦ favicon、表格、作品分類、燈箱與地圖
FAVICON｜網頁圖示
- favicon 是瀏覽器分頁上的小圖示，通常由 LOGO 簡化而成。
- 做一張正方形圖片存成
images/favicon.png（64×64 以上），手機桌面用的apple-touch-icon.png建議 180×180。 - 範本 head 已經寫好，只要換掉圖片檔（檔名一樣）就會生效：
<link rel="icon" href="images/favicon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
表格 #awards
每一個 <tr> 是一列；<th scope="col"> 是欄位標題，<td> 是一般儲存格。外面包一層 <div class="table-responsive">，手機上表格太寬時可以左右滑動。詳細的表格語法在 UNIT 10。
作品分類篩選 #works
按鈕的 data-filter="poster" 對應作品外層的 class work-item poster。要新增分類：① 加一個按鈕；② 作品加上同名 class。篩選程式在 main.js 第 4 段（和 UNIT 07 的「作品分類篩選」範例相同寫法）。
<div class="col-6 col-md-4 work-item poster"> <!-- poster = 分類 -->
<a href="images/works/poster-1.jpg" class="glightbox work-card" data-gallery="works"> <!-- 大圖 -->
<img src="images/works/poster-1-s.jpg" alt="作品說明" loading="lazy"> <!-- 小圖 -->
<span class="work-info"><b>作品名稱</b><small>海報設計</small></span>
</a>
</div>
燈箱 GLightbox
連結加上 class="glightbox"，點了就會在燈箱中開啟：href 是圖片就放大圖片，是 YouTube 網址就播放影片（#video 區塊）。同一組圖片加上相同的 data-gallery，就能在燈箱裡左右切換。
Google 地圖 #contact
- 在 Google 地圖搜尋地點 →「分享」→「嵌入地圖」→「複製 HTML」。
- 只要複製
src="…"的網址，取代範本 iframe 的 src；其他屬性保留（寬高由 CSS 控制，手機也會自動縮放）。
展覽倒數 #countdown
日期寫在 js/main.js 第 7 段：var EVENT_DATE = new Date('2026-12-20T10:00:00');，改成自己的活動時間即可；時間到了文字會自動換成「已經開幕」。
舊版範本的對照（collapse 與圖片自適應）
- 舊版折疊選單寫
data-toggle="collapse"，新版是data-bs-toggle="collapse"。 - 舊版圖片自適應
img-responsive，新版是img-fluid。
05版本對照：舊版範本 vs 新版寫法
學長姐的作品、網路上的範本與舊講義，很多是 Bootstrap 3／4 的寫法，和本單元的新版範本不一樣。看到寫法對不上，先確認版本，不要把不同版本的寫法混在一起。
| 項目 | 舊版範本（2014，Bootstrap 3） | 新版：範例一、範例二（Bootstrap 5） |
|---|---|---|
| 折疊選單 | data-toggle="collapse" | data-bs-toggle="collapse" |
| 圖片自適應 | img-responsive | img-fluid |
| 輪播 | FlexSlider＋jQuery 1.10 | 範例二：FlexSlider＋jQuery 3；範例一：Bootstrap 內建 Carousel |
| 燈箱／分類 | prettyPhoto、MixItUp 外掛 | GLightbox＋10 行 jQuery 篩選程式 |
| 主色 | 色碼寫死在各檔案，要搜尋取代 | CSS 變數 --main，改一處全站換 |
| 大標題區塊 | jumbotron | 已移除，用 p-5 bg-light rounded 等工具類別組合 |
| 最小斷點 | col-xs-*（< 768px） | col-*（所有寬度，不再有 xs） |
| 斷點寬度 | sm 768、md 992、lg 1200 | sm 576、md 768、lg 992、xl 1200、xxl 1400 |
| 是否需要 jQuery | 需要（Bootstrap 3／4 本身就依賴 jQuery） | Bootstrap 5 不需要；範例二只因 FlexSlider 與篩選程式才載入 jQuery |
輪播不是圖片堆疊
只有第一張加 active；控制按鈕的 data-bs-target 要對應輪播的 id。重要文字不要藏在最後一張。
圖片尺寸與裁切
object-fit: cover 保持比例並裁切；同一組照片用一致比例，確認主體沒被切掉。非首屏圖片加 loading="lazy"，alt 描述圖片內容。
載入順序很重要
先載入框架 CSS，再載入自己的 CSS（才蓋得過）；JS 先載入 jQuery，再載入依賴它的外掛。不要直接改框架檔。
官方文件：Bootstrap 官網 · Grid 格線 · Carousel 輪播 · Examples · UNIT 07 jQuery 與圖示字體
06學長姐作品與專案參考
對照「企劃書」與「完成網站」：看他們如何從範本出發，把配色、字體、圖片改成自己的風格。較舊的網站可能用不同版本的語法。
專案應用
07完成檢核與排錯
常見問題排除
| 現象 | 優先檢查 |
|---|---|
| 輪播不動 | FlexSlider：jQuery 是否先載入、檔案路徑是否正確。Bootstrap：bundle 是否載入、data-bs-target 與 id 是否一致、是否混用 Bootstrap 4 屬性。 |
| 手機上一直是三欄 | 是否少了 viewport、是否寫成 col-4 而不是 col-12 col-lg-4。 |
| 點選單沒有跳到區塊 | href="#about" 與 id="about" 拼字、大小寫是否完全相同；id 是否重複。 |
| 上傳後圖片不見 | images 資料夾是否一起上傳；檔名大小寫與路徑是否一致（伺服器會分大小寫）。 |
| 新配色沒有生效 | 自訂 CSS 是否在框架 CSS 之後載入；是否有其他地方寫死舊色碼；按 Ctrl／Cmd+Shift+R 清除快取重新整理。 |