01 響應式網頁介紹

1.1 為何需要響應式網頁

1.2 何謂響應式網頁

1.3 網頁設計趨勢



02 響應式網頁的主要概念

2.1 Viewport標籤

2.2 媒體查詢Media Queries

2.3 流動網格Fluid Grid

2.4 彈性圖片Fluid Image



03 網站開發流程

3.1 專案

3.2 企劃

3.3 設計

3.4 前端

3.5 後端

3.6 測試

3.7 上線



04 行動載具優先

4.1 說明

4.2 響應式與傳統網站的流程差異

4.3 行動載具的操作特性

4.4 優先專注「極端」尺寸

4.5 斷點的佈局

4.6 圖片格式

4.7 模組化設計



05 設計上的輔助

5.1 製作網格系統

5.2 使用Font Awesome Icon融入網頁設計

5.3 響應式圖片產生器

5.4 載具尺寸參考

5.5 網頁字級單位



06 設計師與工程師的專業認知

6.1 網頁與印刷的差異

6.2 網頁向量格式SVG

6.3 統一的命名規則

6.4 工程師眼中的設計稿



07 HTML5

7.1 認識HTML5

7.2 HTML5與HTML4的觀念差異

7.3 語意化標籤

7.4 文件結構差異



08 CSS3選擇器

8.1 觀念說明

8.2 選擇器介紹



09 Bootstrap介紹

9.1 何謂Bootstrap

9.2 網格系統介紹

9.3 網格系統的佈局說明

9.4 通用（輔助）類別



10 網格佈局與基礎CSS樣式的使用

10.1 實作概述

10.2 載入檔案

10.3 廣告

10.4 特色

10.5 主標語

10.6 推薦課程－標題

10.7 推薦課程－內容

10.8 頁腳



11 CSS的使用

11.1 實作概述

11.2 載入檔案

11.3 廣告

11.4 遊戲介紹

11.5 場景介紹

11.6 魔王攻擊招式

11.7 改善建議

11.8 聯絡資訊

11.9 頁腳



12 Components元件的使用

12.1 實作概述

12.2 載入文件

12.3 Embed（嵌入）

12.4 Dropdown（下拉式選單）

12.5 Card（卡片）

12.6 Pagination（分頁）

12.7 Card（卡片）



13 Javascript的使用

13.1 實作概述

13.2 Popovers（彈出提示框）

13.3 Collapse（摺疊）

13.4 Modal（互動視窗）



14 遊戲活動版型

14.1 實作概述

14.2 載入文件

14.3 切版前說明

14.4 背景樣式

14.5 遊戲封面與連結

14.6 遊戲關卡

14.7 關卡說明

14.8 排行榜

14.9 活動辦法

14.10 頁腳



15 企業型購物網站-首頁

15.1 實作概述

15.2 載入檔案

15.3 定義共用樣式

15.4 選單

15.5 廣告輪播

15.6 商品類別

15.7 熱門商品

15.8 關於岡南

15.9 地圖

15.10 頁腳－選單連結

15.11 頁腳－E-mail訂閱

15.12 頁腳－版權所有



16 企業型購物網站-關於岡南

16.1 實作概述

16.2 主選單調整

16.3 介紹岡南



17 企業型購物網站-人力資源

17.1 實作概述

17.2 內容建置

17.3 輔助類別

17.4 定義CSS樣式



18 企業型購物網站-連絡我們

18.1 實作概述

18.2 連絡資訊

18.3 連絡表單



19 企業型購物網站-登入與註冊

19.1 實作概述

19.2 登入

19.3 註冊



20 企業型購物網站-商品商城

20.1 實作概述

20.2 左側欄-廣告圖與商品排序

20.3 左側欄-商品

20.4 左側欄-分頁

20.5 右側欄-搜尋

20.6 右側欄-購物清單

20.7 右側欄-商品分類



21 企業型購物網站-商品介紹

21.1 實作概述

21.2 商品介紹

21.3 商品描述



22 企業型購物網站- 購物車

22.1 實作概述

22.2 購物車清單

22.3 感興趣商品

22.4 購物車統計



23 企業型購物網站-結帳

23.1 實作概述

23.2 結帳訊息

23.3 帳單資訊

23.4 結帳訂單



24 活動報名版型（PDF電子書，收錄於書附光碟）

24.1 實作概述

24.2 載入文件

24.3 網格佈局

24.4 背景樣式

24.5 廣告

24.6 創作流程

24.7 課程資訊

24.8 課程報名

24.9 頁腳



25 部落格版型（PDF電子書，收錄於書附光碟）

25.1 實作概述

25.2 首頁－載入檔案

25.3 定義共用樣式

25.4 背景樣式

25.5 首頁－選單

25.6 首頁－廣告

25.7 首頁－麵包屑

25.8 首頁－部落格與側邊欄佈局

25.9 部落格文章-第一則

25.10 部落格文章-第二則至第五則

25.11 首頁－側邊欄：搜尋

25.12 首頁－側邊欄：最新文章

25.13 首頁－側邊欄：分類

25.14 首頁－側邊欄：標籤雲

25.15 首頁－頁腳

25.16 部落格內頁－麵包屑

25.17 部落格內頁－圖文內容

25.18 部落格內頁－標籤

25.19 部落格內頁－社群

25.20 部落格內頁－分頁

?

序



呂國泰



　　隨著科技的演進造就了行動載具的普及，形成人手一機的現象，藉此瀏覽網頁的媒介已不再侷限於電腦，反而較多是使用行動載具來瀏覽網頁。由於行動載具的演變，導致載具在尺寸上的不一致，設計網頁時所要顧慮的因素也越來越多，為了使瀏覽者在行動載具上能獲得最佳的閱讀與瀏覽體驗，因而誕生了「響應式網頁設計」（Responsive Web Design，RWD）概念。



　　就網頁發展史而言，不論在美感或技術等層面上，都一直不斷的在演進與更新，對於從事網頁設計的人而言，也必須不斷進步來強化自身的實力，進而設計出更好的網頁來呈現在眾人的面前。截至目前為止，網路上有很多網頁框架都具有響應式設計規範，其目的為提供一套統一的框架來減去網頁程式人員自訂響應式規範的時間，以在短時間內就能製作出具有響應式效果的網頁。因此，本書以最流行的Bootstrap網頁框架為主，從範例中引導網頁工程師該如何使用其樣式與功能。



　　同時，對於從事網頁平面設計的您而言，也可從書籍中理解到何謂響應式網頁，以及響應式網頁與傳統網頁設計上的差異等知識，使設計出的網頁版型能符合工程師的需求。藉此期許各位讀者可以透過此書作為一個與時俱進，充實技術能力，深得客戶和老闆歡心的設計師。