讓響應式(RWD)網頁設計變簡單：Bootstrap開發速成（二版）! I+ m% F O5 g% c2 W
作者：呂國泰
8 E+ I' ]9 _4 `/ q2 a8 L- r 出版社：碁峰
0 H5 ]& M* Y9 w" {( w! g 出版日期：2018/08/23
# z7 p4 }, o& S) q. | 定價：520元& O! d$ }, b7 x3 P" \
以4個整合性實例一探業界極為流行的響應式網頁框架Bootstrap
d+ l9 g1 [7 T7 `% L 從遊戲活動網頁、部落格、活動報名網頁，到企業型購物網站，% W' @, P9 q3 K y2 }: N( B. G) ~
依Bootstrap 4功能大幅改版，一次搞懂主流的RWD設計！
7 l1 ]6 k+ p6 O6 O2 u# D$ i. x3 g- r 新一代網頁設計師與網頁工程師必備技9 D, ]! n1 N. R
Bootstrap響應式網頁的快速開發力！
; J1 K7 q- `6 u8 O( z+ | 熱門的Bootstrap讓全世界許多企業在徵求網頁設計師時都將之列為必備的技能條件，Bootstrap採用了模組化設計，最新Bootstrap 4的功能更加強化，簡易到只要懂得如何套用，就可以快速開發出具有美感的響應式(RWD)網頁。% I: `- `$ F5 f
對於許多不擅長視覺設計的網頁工程師來說，省去了許多美化的時間與困惱，而對於視覺設計師來說，也能依著自己設計的版型建置網頁，同時支援市面上大部份的主流瀏覽器，而對於想踏入響應式網頁領域的初學者來說，則可以在短時間就學習到RWD設計技能。% e" M- X1 {$ b/ U( x. {
書中從認識響應式網頁與網站開發流程開始，詳細解說響應式網頁設計思維，並導入視覺設計與網頁製作兩個不同領域的專業知識與技巧，最終以4個案例製作響應式網頁以具備實戰技能。1 [5 M$ @; e0 c, M) B! V
完整的響應式網頁概念解說與Bootstrap 4運用方式，迅速跨入響應式設計領域。
% D+ d5 s6 Y+ a, @ W: `8 ^- O 以淺顯易懂的網頁範例，融入佈局、HTML5、CSS3、元件與JavaScript的使用技巧。9 k3 Z9 m, I6 n& E p
4種不同類型的整合性範例，一次掌握主流RWD版面設計，展現Bootstrap 4的強大效果。' M6 K' e% o7 |
& R% T# I: U0 W8 I" V, s 作者介紹
3 G% `. r7 D9 J6 {4 p: N) L 作者簡介
$ s) H6 _/ T9 ]# ` 呂國泰
) ?9 J* f6 G7 B+ |# @& s 經歷
& ~: e D" Z! | 文藻外語大學數位內容應用與管理學系/兼任講師( \7 b- O$ q5 j3 I! N+ A4 ^7 F
學歷' T0 @: e4 ]8 |; K. k$ ^ }
亞洲大學數位媒體設計研究所/碩士
; O" t( ?1 v9 J2 Z$ V 專長
+ K7 o0 O/ c; B- H/ ?( D 1.多媒體技術整合應用/開發; j7 E0 N& B# ~. s C( d8 v3 k
2.數位出版/內容設計暨系統建置
* e/ q- Y: l( ?4 R! y 3.多媒體影音作品設計/影像非線性剪輯技術設計, l& u/ O" a7 n
4.網頁視覺設計/切版組版與多媒體內容網站設置(RWD)
) Y7 ]. u6 E; U# Y- z. f 5.大型設計案製作流程管理與執行 d4 l4 p9 q. Z/ P6 ?
6.設計業務相關客戶溝通協調
1 [0 w% ]& Y9 X 7.廣告設計相關企劃管理作業
5 ?4 s% ?* t% G' ?) h 8.影視多媒體後製技術行銷企劃、週邊產品與活動規劃與專案管理作業& f6 z' ?! F0 e) W
著作
+ u8 B3 X# a5 q. m$ K3 M( N 著有動畫製作、遊戲設計、電子書、多媒體、國際認證?等近20本圖書
6 Z7 i& Z1 ^+ Q# \( O ?6 ^$ ^- ]5 {" `- c% v+ z& P
目錄
0 x: r' ^# y7 K: Y- K5 F6 r U( J 01 響應式網頁介紹0 l0 ^6 p K, [ B. V6 f( k
1.1 為何需要響應式網頁
& U7 Q$ h3 k# `$ _* ^( X 1.2 何謂響應式網頁
1 d- {- X9 J. ?0 M1 Y8 J" _/ [ 1.3 網頁設計趨勢
8 F# n- C$ N' v% h# `$ Z- g6 o I q 02 響應式網頁的主要概念) e! i4 X# [$ p/ [: [
2.1 Viewport標籤& x& s t* {& @* n* q
2.2 媒體查詢Media Queries
' n: C1 b3 z# }. C 2.3 流動網格Fluid Grid
( k" W- Q# h' y7 v5 H 2.4 彈性圖片Fluid Image
. _; F) @1 S: }5 c. a 03 網站開發流程
0 ^; V$ d6 a+ O: X 3.1 專案
# E W( L. w" u. R! |1 b' _" s- k" C 3.2 企劃
8 J( O- F) o7 O$ { 3.3 設計
6 f3 ^' E( u6 D 3.4 前端
) f* E& u' y$ a8 h0 F f 3.5 後端- F7 y9 q3 c0 P) e
3.6 測試
6 i+ o, X" _# K1 g9 S 3.7 上線
: q$ r1 t# R- X* z5 M 04 行動載具優先
H. }. s1 G0 T& S$ P+ Q2 l 4.1 說明
, U& j+ s5 O- c 4.2 響應式與傳統網站的流程差異
+ ~. @$ e9 P/ j6 t# H 4.3 行動載具的操作特性
' x P0 @3 y, q& B% Z. A 4.4 優先專注「極端」尺寸9 b0 ^: H9 Q6 \
4.5 斷點的佈局6 J: g1 q# V9 P5 y
4.6 圖片格式! ^: W& P% ~3 Q6 Z
4.7 模組化設計- {& e- ?4 T, }3 m [
05 設計上的輔助
- G7 p$ K5 G* Z6 a 5.1 製作網格系統* r g8 u+ Y1 M$ ?! P
5.2 使用Font Awesome Icon融入網頁設計
( O+ @: n0 |! o, n0 x 5.3 響應式圖片產生器
1 ]* q/ n& [& p; c, q& x! [; }/ q1 S 5.4 載具尺寸參考
* g6 }/ }3 \* x/ H; T 5.5 網頁字級單位
) h2 l/ `; G! `/ B+ i( f 06 設計師與工程師的專業認知
$ v) e5 Q' G6 U( m. p( y! o9 v 6.1 網頁與印刷的差異2 X# Q3 l6 {$ b( n5 h( `* x9 n6 o
6.2 網頁向量格式SVG j% D* v( k6 D& L$ \
6.3 統一的命名規則& y7 z5 Y4 x- j
6.4 工程師眼中的設計稿* |: F- |. `& K9 f* ]
07 HTML59 j1 ?0 m: a! [- L$ I/ ]6 Z
7.1 認識HTML5+ W$ _* | y. L* H( Y
7.2 HTML5與HTML4的觀念差異
0 ?; g+ n/ a X2 T; t6 G z 7.3 語意化標籤
1 U; |7 Y r! E/ D2 u! i$ O! H 7.4 文件結構差異
9 u& Z2 |( K6 U! X4 v 08 CSS3選擇器9 T: a" }& Y; Q/ v1 ~
8.1 觀念說明
4 a$ f5 l. }' O* H 8.2 選擇器介紹( p) [/ P1 g% i0 i! ~+ G
09 Bootstrap介紹. G* ^& x! ?& w. U, Z5 v
9.1 何謂Bootstrap6 H* h* e; e$ C; \
9.2 網格系統介紹$ n7 V6 p' K0 P
9.3 網格系統的佈局說明
7 j* H2 o: G3 m 9.4 通用（輔助）類別: W0 F4 e. y! e* L. d' m; |
10 網格佈局與基礎CSS樣式的使用
; r6 k, }( J5 b0 O5 Q3 j 10.1 實作概述
h9 j/ U- h' E4 k! E! ^1 B 10.2 載入檔案
1 p" T" W7 `" ` d" _9 v 10.3 廣告- t1 P' m, z! q! y
10.4 特色
) T _7 ]( [9 U 10.5 主標語
# B/ t/ R8 ~7 G& H% V0 N7 o 10.6 推薦課程－標題5 A5 x+ T- D8 Y* M" [
10.7 推薦課程－內容( O0 H0 p0 }" L+ q' e
10.8 頁腳
: F- F( v% n9 S% D 11 CSS的使用
$ i+ p' ~& v/ {, ? N 11.1 實作概述% t, ]" D* A& Q/ s) Q
11.2 載入檔案( r8 |$ `# S3 t; b8 y# S
11.3 廣告
0 X- W: M8 r* @0 z% n' t 11.4 遊戲介紹
" V+ Q, X1 b+ C6 V 11.5 場景介紹
2 s; _/ d8 |* b$ R 11.6 魔王攻擊招式
6 P0 n, Z. V$ a0 x- b 11.7 改善建議
, ~: P. x" Z0 j# c4 Z& p 11.8 聯絡資訊
1 k+ ^1 ~) z% u/ S 11.9 頁腳7 I5 R1 @! ?2 u/ j Q. @' S
12 Components元件的使用5 g q$ O$ h0 w. P+ X1 i3 D
12.1 實作概述4 {7 M+ L, g% `
12.2 載入文件5 j8 C5 W2 R4 _
12.3 Embed（嵌入）8 y1 I2 n& C, T3 n
12.4 Dropdown（下拉式選單）6 |6 P% |1 ?, G) v8 R/ k# t. A/ Z' s6 G
12.5 Card（卡片）
9 q+ R- A2 B- L# f3 r$ S 12.6 Pagination（分頁）
/ `; H( Z6 n$ L1 s; B4 e 12.7 Card（卡片）8 y6 j) A$ n: f2 `4 y+ J; y# v: l
13 Javascript的使用$ W) Z0 z! u# l) W! \% w
13.1 實作概述
' \; E: p/ I! I- u9 v/ g 13.2 Popovers（彈出提示框）
I" A1 p5 T/ I+ i2 ~ 13.3 Collapse（摺疊）
+ m/ \ r$ Q# w' M 13.4 Modal（互動視窗）
8 J: L; v' g) ~ 14 遊戲活動版型
: c$ f y6 v" j2 g 14.1 實作概述
@1 d, |* M( v0 D& t 14.2 載入文件/ N- L6 l8 r) \9 }4 C" [
14.3 切版前說明9 W5 n( \7 V7 [( Q6 X
14.4 背景樣式
) g5 \7 {. E+ q( \0 M: C" [ 14.5 遊戲封面與連結
8 @$ J7 J2 R* g# F 14.6 遊戲關卡
2 A4 q6 R# M) b, v& w- y 14.7 關卡說明 {4 _; r8 e9 `, ] E1 p! ]+ j
14.8 排行榜9 L. R. r% R/ D# o) g- A
14.9 活動辦法0 E9 b" k% W6 j1 ~
14.10 頁腳
; n3 x b( ~, K3 F 15 企業型購物網站-首頁3 |% Z5 \, r) T. \. V
15.1 實作概述
F& P$ a5 o9 X+ k; |9 w 15.2 載入檔案
" T- c7 Q# N" {, I. L0 \ 15.3 定義共用樣式
6 i) j' `+ \; H% F' r6 @ 15.4 選單
5 [ a+ L7 k- I7 G 15.5 廣告輪播4 F, S% r/ @% X' a; H1 m6 ?
15.6 商品類別
& t0 a& E! {3 K8 @2 } 15.7 熱門商品
3 U3 ~: P9 Q: i7 u; C U 15.8 關於岡南7 M& @# D& ~, O" c9 s
15.9 地圖
j. |3 t0 n0 v2 f* y+ e+ [) _: } 15.10 頁腳－選單連結
; t. E# C0 W. A( i 15.11 頁腳－E-mail訂閱 W' E2 V9 o2 E+ ^$ D: O$ k% f; B1 o
15.12 頁腳－版權所有
2 S8 F, M. a/ w! ^5 [1 p; t& z; A1 L 16 企業型購物網站-關於岡南( ^7 ^- X1 S2 v! A0 [! u
16.1 實作概述4 ~& H/ \6 \1 h' ?3 V. O; a) V) F' _
16.2 主選單調整
2 m9 Y* g% [0 Q4 W8 @9 J 16.3 介紹岡南$ `8 x& s- f7 r
17 企業型購物網站-人力資源
* c! _5 c2 r7 g5 `. e' T 17.1 實作概述
8 p$ K) D1 _/ ^ 17.2 內容建置' T& u: y! R# g3 S; ]
17.3 輔助類別
: s+ I% r; l# d' s9 l8 \' ]+ ^ 17.4 定義CSS樣式
) A8 s( V* l, j; T* y 18 企業型購物網站-連絡我們
& E5 h% ]) U; }2 h1 ?7 U 18.1 實作概述
( G- J7 B2 Y I7 G$ l! D% ]! h 18.2 連絡資訊 i# R4 h2 w5 V$ Q! u9 G9 c
18.3 連絡表單9 i' u9 g0 y+ E. O# M3 r! N
19 企業型購物網站-登入與註冊
?( {! p' M7 |- ?' n 19.1 實作概述
3 I- {; |$ G0 Y! \) Y5 h 19.2 登入( _" V% ?! t0 \+ Q
19.3 註冊
, R7 J! x5 K' A( E; w 20 企業型購物網站-商品商城
, T/ Z, ], ^9 P: W 20.1 實作概述! [5 C4 d: j! ?7 f
20.2 左側欄-廣告圖與商品排序
; k! y. e# [: m' J- Z% }. g 20.3 左側欄-商品
* i2 s3 U2 d- Y2 {2 J 20.4 左側欄-分頁3 ~/ A* v/ `: n7 Z6 P
20.5 右側欄-搜尋
; M7 A* x/ e# A% r# S 20.6 右側欄-購物清單
3 g. e! {8 v/ y7 {8 V7 T* g 20.7 右側欄-商品分類
+ H7 G n( u6 n" b' E 21 企業型購物網站-商品介紹
" S7 T" j% l. c8 i 21.1 實作概述. J8 J* B, Q6 t) [; d, q
21.2 商品介紹4 e: m; V& Y( x ?: n6 J
21.3 商品描述
9 m8 _" V: F7 m& O' M7 f8 _ 22 企業型購物網站- 購物車
0 V- U( A6 e+ p w. ~4 O 22.1 實作概述
Y% D2 q9 {! H& j0 A 22.2 購物車清單% P, K+ D$ \, Z: L
22.3 感興趣商品
; Y, m* I7 |' m! |1 ` 22.4 購物車統計
% |- t2 q7 R1 J1 E$ Z( | 23 企業型購物網站-結帳2 h+ y/ M1 G' I- J: [) ^4 p& B5 l& d
23.1 實作概述& U0 i& f* o, g0 f. @1 A
23.2 結帳訊息$ P2 ^+ I) S% B
23.3 帳單資訊
) e& v8 ?) ~; C 23.4 結帳訂單
# G' b+ c2 s9 C5 H9 R 24 活動報名版型（PDF電子書，收錄於書附光碟）' }8 i2 R ~! l; k
24.1 實作概述$ u8 F! ~3 R5 G4 G2 G
24.2 載入文件
) B- g& ?' i7 q3 t- B4 h" ], W! M 24.3 網格佈局
" w. W& ^ h8 J: F 24.4 背景樣式
: \" S" i- ` R+ e1 o# i 24.5 廣告
0 C0 D5 L: W; i$ }. i% `* E& C/ _ 24.6 創作流程
: b5 \4 Q1 h" U% n8 { 24.7 課程資訊
/ W0 ]% k Q, R) N1 G 24.8 課程報名
7 H) r' l$ H/ B& q8 d% J) i% t: I8 T 24.9 頁腳
8 U0 o4 l, M2 i) _3 v 25 部落格版型（PDF電子書，收錄於書附光碟）
! j* l# ~" E) p' B1 `" r 25.1 實作概述
^. S2 w S L* }, c+ W: { 25.2 首頁－載入檔案
0 j4 x0 E/ e! O' W& e0 d* i9 Q 25.3 定義共用樣式2 M7 f8 E% F( B' `$ k6 {) f3 n
25.4 背景樣式6 d) r6 w7 v: y4 i A D* z% P& c
25.5 首頁－選單. O6 U8 {4 Y" i% X* G1 f
25.6 首頁－廣告* u3 x9 u5 \% ] A) Q3 N5 p7 t3 {
25.7 首頁－麵包屑
/ a; G( Z3 g$ W# l 25.8 首頁－部落格與側邊欄佈局
" M- c# S2 S9 B- A7 D' Z9 N 25.9 部落格文章-第一則8 r+ {' S1 O& o; u4 \
25.10 部落格文章-第二則至第五則
! [5 U6 i+ j) r 25.11 首頁－側邊欄：搜尋1 P% t" Z' g% ~' k
25.12 首頁－側邊欄：最新文章
! N. o$ c0 E! ? 25.13 首頁－側邊欄：分類7 @3 j3 O) A, B9 {- h
25.14 首頁－側邊欄：標籤雲
1 O. l0 a% a0 V1 a8 m( ]# s 25.15 首頁－頁腳* @% {( i3 ^8 V& r3 j
25.16 部落格內頁－麵包屑+ H( T4 [+ ?/ B; Z( B) I2 t Q
25.17 部落格內頁－圖文內容
7 Q: x, g& |7 C* d! g# I% V" M 25.18 部落格內頁－標籤
3 t$ u8 e( P' {1 Q 25.19 部落格內頁－社群- R5 L8 c0 ^; O+ P
25.20 部落格內頁－分頁
1 g- B) W. Z# R1 [" |: s) k3 z1 Q 序
, X: T( q w# m' k 呂國泰/ e; t2 Q( L3 `' d" Q9 K( B
隨著科技的演進造就了行動載具的普及，形成人手一機的現象，藉此瀏覽網頁的媒介已不再侷限於電腦，反而較多是使用行動載具來瀏覽網頁。由於行動載具的演變，導致載具在尺寸上的不一致，設計網頁時所要顧慮的因素也越來越多，為了使瀏覽者在行動載具上能獲得最佳的閱讀與瀏覽體驗，因而誕生了「響應式網頁設計」（Responsive Web Design，RWD）概念。
7 H2 P" V7 ?4 Y& ]" r' I1 d; p 就網頁發展史而言，不論在美感或技術等層面上，都一直不斷的在演進與更新，對於從事網頁設計的人而言，也必須不斷進步來強化自身的實力，進而設計出更好的網頁來呈現在眾人的面前。截至目前為止，網路上有很多網頁框架都具有響應式設計規範，其目的為提供一套統一的框架來減去網頁程式人員自訂響應式規範的時間，以在短時間內就能製作出具有響應式效果的網頁。因此，本書以最流行的Bootstrap網頁框架為主，從範例中引導網頁工程師該如何使用其樣式與功能。
, Q: e3 l& F2 N; C( }. p4 e2 N 同時，對於從事網頁平面設計的您而言，也可從書籍中理解到何謂響應式網頁，以及響應式網頁與傳統網頁設計上的差異等知識，使設計出的網頁版型能符合工程師的需求。藉此期許各位讀者可以透過此書作為一個與時俱進，充實技術能力，深得客戶和老闆歡心的設計師。
- \2 @& `, V. P) X游客,本下载内容需要支付 10共享币，购买后显示下载链接立即支付
$ P _* g0 [* b; i2 {/ x8 E+ Y4 r! x6 J- n% j
|
