以4個整合性實例一探業界極為流行的響應式網頁框架Bootstrap
從遊戲活動網頁、部落格、活動報名網頁,到企業型購物網站,
依Bootstrap 4功能大幅改版,一次搞懂主流的RWD設計!
新一代網頁設計師與網頁工程師必備技
Bootstrap響應式網頁的快速開發力!
熱門的Bootstrap讓全世界許多企業在徵求網頁設計師時都將之列為必備的技能條件,Bootstrap採用了模組化設計,最新Bootstrap 4的功能更加強化,簡易到只要懂得如何套用,就可以快速開發出具有美感的響應式(RWD)網頁。
對於許多不擅長視覺設計的網頁工程師來說,省去了許多美化的時間與困惱,而對於視覺設計師來說,也能依著自己設計的版型建置網頁,同時支援市面上大部份的主流瀏覽器,而對於想踏入響應式網頁領域的初學者來說,則可以在短時間就學習到RWD設計技能。
書中從認識響應式網頁與網站開發流程開始,詳細解說響應式網頁設計思維,並導入視覺設計與網頁製作兩個不同領域的專業知識與技巧,最終以4個案例製作響應式網頁以具備實戰技能。
‧完整的響應式網頁概念解說與Bootstrap 4運用方式,迅速跨入響應式設計領域。
‧以淺顯易懂的網頁範例,融入佈局、HTML5、CSS3、元件與JavaScript的使用技巧。
‧4種不同類型的整合性範例,一次掌握主流RWD版面設計,展現Bootstrap 4的強大效果。
書附DVD:
近150分鐘網格佈局、CSS、JavaScript與元件使用影音教學
活動報名版型與部落格版型PDF/範例檔
目錄
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 部落格內頁-分頁
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 使...