響應式網頁設計：Bootstrap開發速成 下載 mobi epub pdf 電子書 2024

☆☆☆☆☆
簡體網頁||繁體網頁



點擊這裡下載

類似圖書 點擊查看全場最低價

---

産品特色

編輯推薦

熱門的Bootstrap讓許多企業在招聘網頁設計師時都將之列為必備的技能條件，Bootstrap采用瞭模組化設計，簡易到隻要懂得如何套用，就可以快速開發齣具有美感的響應式（RWD）網頁。
本書對於許多不擅長視覺設計的網頁工程師來說，省去瞭許多美化的時間與睏惑，而對於視覺設計師來說，也能按照自己設計的版型設計齣網頁，同時支持市麵上大部分的主流瀏覽器，而對於想踏入響應式網頁領域的初學者來說，則可以在短時間內學到*實用的響應式網頁設計技能。
本書從認識響應式網頁設計與Bootstrap開始，詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢，導入視覺設計與網頁製作兩個不同領域的專業知識，並提供120多個Bootstrap功能範例網頁文件，說明如何使用Bootstrap框架所提供的各種CSS與組件等內容，*後以3個完整實例製作齣響應式網頁，讓大傢綜閤運用所學知識，提高實戰技能。

內容簡介

本書從認識響應式網頁設計與Bootstrap開始，詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢，導入視覺設計與網頁製作兩個不同領域的專業知識，並提供120多個Bootstrap功能範例網頁文件，說明如何使用Bootstrap框架所提供的各種CSS與組件等內容，*終以3個完整實例（書籍宣傳網頁、産品推廣網頁、網站首頁）製作齣響應式網頁，以讓大傢綜閤運用所學知識，提高實戰技能。
本書以豐富的範例程序和詳細的圖解逐一講解 RWD 技術 + Bootstrap 結閤使用的核心技術和方法，既適閤負責網頁前端和後端的程序人員閱讀，也適閤網站的企劃人員和視覺設計人員參考，還可供想學習和瞭解響應式網頁設計 + Bootstrap 開發網站的人員自學和參考。

作者簡介

呂國泰，資深設計師，多媒體兼任講師。

目錄

目 錄

第1章 響應式網頁簡介 1
1.1 何謂響應式網頁 1
1.2 響應式網頁的優點 2
1.3 響應式網頁的缺點 3
1.4 響應式的概念 3
1.5 Viewport 4
1.6 流式網格 5
1.6.1 網格設計 5
1.6.2 流式布局 6
1.7 媒體查詢的基礎 7
1.7.1 使用方法 8
1.7.2 設置方式 8
1.7.3 媒體類型 8
1.7.4 判斷條件 9
1.7.5 媒體特徵 10
1.8 流式圖像 10
1.9 字體 11
第2章 Bootstrap簡介 12
2.1 何謂Bootstrap 12
2.2 Bootstrap 具有哪些內容 12
2.3 下載Bootstrap 13
2.4 鏈接Bootstrap框架 15
2.5 下載與鏈接 jQuery 文件 16
2.6 快速體驗——運用 CSS 樣式 17
第3章 網站的開發流程 20
3.1 項目 20
3.2 企劃 21
3.3 設計 21
3.4 前端 22
3.5 後端 22
3.6 測試 23
3.7 上綫 23
第4章 響應式網頁的設計思維 25
4.1 與傳統網站開發的差異 25
4.2 響應式網頁的設計考慮 26
4.3 移動設備的設計考慮 28
4.3.1 移動設備的特徵 28
4.3.2 移動設備優先 28
第5章 視覺設計師與前端工程師的專業認知 31
5.1 網頁與印刷的差異 31
5.2 網頁嚮量格式 SVG 32
5.3 版麵設計時的常見詞匯 33
5.4 網格的運用與製作 35
5.4.1 網格輔助—— PSD 35
5.4.2 網格輔助—— AI 36
5.4.3 網格輔助——自行設置 38
5.5 讓視覺設計師懂得切版 42
5.5.1 切版重點 42
5.5.2 瞭解版麵的構成 42
第6章 SEO簡介 44
6.1 何謂SEO 44
6.2 改善網站標題與描述 45
6.3 改善網站架構 47
6.3.1 網站架構簡介 47
6.3.2 架構*佳做法 48
6.3.3 讓網站更易於瀏覽 48
6.3.4 易於瀏覽的*佳做法 49
6.4 可優化的內容與做法 50
6.4.1 優質內容與服務 50
6.4.2 鏈接 50
6.4.3 圖片 51
6.4.4 標題 52
6.5 管理與營銷 53
6.5.1 使用網站管理工具 53
6.5.2 網站營銷工作要點 54

第7章 網頁設計趨勢 56
7.1 響應式網頁設計 56
7.2 全幅背景 57
7.3 單頁式網頁 57
7.4 固定式菜單 59
7.5 扁平化設計 59
7.6 微動畫 60
7.7 卡片式設計 61
7.8 隱藏式菜單 61
7.9 超大的字體 62
7.10 幽靈按鈕 63
第8章 HTML5+CSS3 的基礎知識 64
8.1 認識DIV與CSS 64
8.1.1 認識DIV 64
8.1.2 CSS Class 與 CSS ID 65
8.2 HTML5與CSS3的新增內容 67
8.2.1 認識 HTML5 67
8.2.2 HTML5 的新元素與屬性 68
8.2.3 認識 CSS3 71
8.2.4 CSS3 新增的屬性 71
第9章 響應式網頁的布局方式 76
9.1 Grid System簡介 76
9.1.1 何謂 Grid System 76
9.1.2 網頁的 Grid System 77
9.1.3 網頁設計為何需要 Grid System 78
9.1.4 Grid System 的使用方法 78
9.2 布局規則 79
9.2.1 Bootstrap 中的 Grid System 79
9.2.2 不同設備的 Grid 設置 80
9.2.3 嵌套排版 82
9.2.4 移動與調整 Column 的位置 83
9.2.5 Column 的規則 83
9.2.6 調整Column的順序 84
第10章 Bootstrap CSS 樣式的使用 86
10.1 排版 86
10.1.1 標題 86
10.1.2 頁麵主題 87
10.1.3 行內文字元素 88
10.1.4 對齊類 90
10.1.5 轉換類 91
10.1.6 聯係字段 91
10.1.7 引用 91
10.1.8 列錶 93
10.2 錶格 95
10.2.1 錶格類 95
10.2.2 狀態類 97
10.2.3 響應式錶格 97
10.3 窗體 98
10.3.1 基本範例 98
10.3.2 窗體布局 99
10.3.3 支持的控件 100
10.3.4 焦點狀態 105
10.3.5 禁用狀態 105
10.3.6 隻讀狀態 106
10.3.7 驗證狀態 106
10.4 按鈕 108
10.4.1 按鈕標簽 108
10.4.2 顔色類 109
10.4.3 大小類 109
10.4.4 啓用狀態 111
10.4.5 禁用狀態 111
10.5 圖片 113
10.5.1 響應式圖片 113
10.5.2 圖片形狀 113
第11章 Bootstrap布局組件的使用 115
11.1 字體圖標 115
11.2 下拉式菜單 116
11.2.1 說明 116
11.2.2 使用的方法 116
11.2.3 其他輔助項目 117
11.2.4 範例 119
11.3 按鈕群組 120
11.3.1 說明 120
11.3.2 使用方法 120
11.3.3 其他輔助項目 120
11.3.4 範例 122
11.4 輸入框群組 123
11.4.1 說明 123
11.4.2 使用方法 123
11.4.3 其他輔助項目 124
11.4.4 範例 125
11.5 導航 127
11.5.1 說明 127
11.5.2 使用方法 127
11.5.3 其他輔助項目 127
11.5.4 範例 129
11.6 導航欄 130
11.6.1 說明 130
11.6.2 使用方法 130
11.6.3 其他輔助項目 131
11.6.4 範例 133
11.7 分頁 135
11.7.1 說明 135
11.7.2 使用方法 135
11.7.3 其他輔助項目 135
11.7.4 範例 137
11.8 提示標誌 137
11.8.1 說明 137
11.8.2 範例 138
11.9 大屏幕效果 138
11.9.1 說明 138
11.9.2 範例 139
11.10 縮略圖 139
11.10.1 說明 139
11.10.2 使用方法 140
11.10.3 範例 140
11.11 進度條 141
11.11.1 說明 141
11.11.2 使用方法 142
11.11.3 其他輔助項目 142
11.11.4 範例 144
11.12 麵闆 144
11.12.1 說明 144
11.12.2 使用方法 144
11.12.3 其他輔助項目 145
11.12.4 範例 146
11.13 響應式嵌入內容 147
11.13.1 說明 147
11.13.2 範例 147
第12章 Bootstrap JS 插件的使用 149
12.1 概觀 149
12.2 頁簽 149
12.2.1 說明 149
12.2.2 使用方法 150
12.2.3 淡入效果 150
12.2.4 範例 150
12.3 提示工具 152
12.3.1 說明 152
12.3.2 使用方法 152
12.3.3 範例 153
12.4 彈齣提示 154
12.4.1 說明 154
12.4.2 使用方法 154
12.4.3 範例 155
12.5 摺疊效果 156
12.5.1 說明 156
12.5.2 使用方法 156
12.5.3 範例 157
12.6 輪播效果 159
12.6.1 說明 159
12.6.2 使用方法 159
12.6.3 標題製作 161
12.6.4 範例 161
第13章 網站實踐——書籍宣傳網頁 164
13.1 套入鏈接 164
13.2 網格布局 165
13.3 頁麵設計 166
13.3.1 左邊容器 166
13.3.2 右邊容器 167
13.4 CSS美化與運用 171
第14章 網站實踐——産品推廣網頁 174
14.1 套入鏈接 174
14.2 網格布局 175
14.2.1 建立分層說明文字 175
14.2.2 *外層與*層的布局 176
14.2.3 第二層的布局 177
14.2.4 第三層左邊的布局 178
14.2.5 第三層右邊的布局 179
14.2.6 第四層的布局 180
14.3 頁麵設計 180
14.3.1 *層設計 180
14.3.2 第二層設計 180
14.3.3 第三層左邊的設計 181
14.3.4 第三層右邊的設計 183
14.3.5 第四層設計 183
14.4 運用CSS 184
14.4.1 *層 184
14.4.2 第二層 185
14.4.3 第三層左邊 186
14.4.4 第三層右邊 187
14.4.5 第四層 189
第15章 網站實踐——網站首頁製作 190
15.1 套入鏈接 190
15.2 網格布局 191
15.2.1 建立層次說明文字 192
15.2.2 *層與第二層布局 193
15.2.3 第三層布局 193
15.2.4 第四層布局 194
15.2.5 第五層與第六層布局 195
15.3 *層設計——菜單 195
15.3.1 運用導航欄 JavaScript 195
15.3.2 修改類 196
15.3.3 運用 CSS 樣式 197
15.4 第二層設計——廣告橫幅 198
15.4.1 使用輪播JavaScript 198
15.4.2 修改內容 199
15.4.3 運用 CSS 樣式 200
15.5 第三層設計——*新公告與廣告區 200
15.5.1 加入*新公告圖片 200
15.5.2 應用摺疊效果 JavaScript 201
15.5.3 修改類 201
15.5.4 加入廣告圖片 202
15.5.5 運用 CSS 樣式 203
15.6 第四層設計——課程分享 204
15.6.1 加入課程標題圖片 204
15.6.2 加入課程 1 圖片與內容 204
15.6.3 加入課程 2 圖片與內容 205
15.6.4 加入課程 3 圖片與內容 206
15.6.5 加入課程 4 圖片與內容 206
15.6.6 運用 CSS 樣式 207
15.7 第五層設計——按鈕鏈接 210
15.7.1 加入圖片 210
15.7.2 運用 CSS 樣式 211
15.8 第六層頁麵設計——頁腳 212
15.8.1 加入文字 212
15.8.2 運用 CSS 樣式 212
15.9 迴到頂部按鈕的製作 212
15.10 檢查各尺寸瀏覽狀態 214
15.10.1 問題一的解決方式 214
15.10.2 問題二的解決方式 215
第16章 輔助工具 217
16.1 Bootstrap 套件下載 217
16.2 可視化Bootstrap 在綫編輯器 219
16.2.1 GRID SYSTEM 219
16.2.2 BASIC CSS 220
16.2.3 COMPONENTS 221
16.2.4 JAVASCRIPT 222
16.2.5 預覽版式 222
16.2.6 下載結果 223
16.3 瀏覽器開發者模式檢測 224
16.3.1 Firefox 瀏覽器 224
16.3.2 IE瀏覽器 226
16.3.3 Google Chrome 瀏覽器 226
16.3.4 在綫檢測 228
16.3.5 插件的輔助檢測 231
16.4 尺寸對照工具 232
16.5 檢測優化工具 233
16.6 設備尺寸參考 234

精彩書摘

第11章 Bootstrap布局組件的使用
11.1 字體圖標
Bootstrap約有200個由Glyphicon Halflings 所提供的字體格式符號，讓設計者選擇使用，而不是像早期那樣需通過設計軟件來産生符號圖片。
在每個符號的下方都有用於引用的類名稱，如圖11-1所示，在 HTML 設計中隻要在指定的元素中加入此類名稱，即可運用該圖標。

圖11-1 字體圖標及其類名稱
在使用圖標的過程中，並非所有情況都適用。*常發生的問題是，將圖標類應用到本身已經應用瞭非常多類的標簽中，這種做法的結果常會導緻圖標無法順利顯示。因此，*佳的用法應該是先加入一個 標簽，再將圖標類應用其中。
範例
可在按鈕、工具欄的群組、導航欄或窗體 input 元素使用圖標類。本範例以 標簽為例，並加入兩種圖標類進行說明，效果如圖11-2所示。
? 範例：圖標類的使用 (ch11.1example.html)




Star


圖11-2 圖標類使用的示範 (ch11.1example.html)
11.2 下拉式菜單
11.2.1 說明
下拉式菜單通常被用於導航欄或窗體中，將某個類進行分類以呈現一個具有層次關係的菜單。例如，“視頻教學”是*上層的按鈕，當單擊後可展開“Android 應用開發”“GameSalad 2D 遊戲製作”“Google Web Design”等選項，屆時用戶再通過單擊鼠標選擇其一，以便前往對應的頁麵。下拉式菜單的效果如圖11-3所示。

圖11-3 下拉式菜單的效果 (ch11.2example.html)
11.2.2 使用的方法
使用方法有兩種，一種為加入 dropdown 類，另一種為建立 data 屬性做呼應，具體說明如下（參考圖11-4）：

圖11-4 下拉式菜單的使用方法
（1）在*外層的 標簽中設置 dropdown 類。
（2）在 標簽中建立 data-toggle="dropdown" 屬性，與*外層的dropdown類呼應。
11.2.3 其他輔助項目
可搭配使用的類如錶11-1所示。
錶11-1 輔助項目類
類 名稱 說明 使用方法
dropdown-menu-right 菜單嚮右對齊 菜單按鈕不變，但菜單項內容會整體靠右對齊 在 標簽中的 dropdown-menu 類之後加入此類
dropdown-menu-left 菜單嚮左對齊 菜單按鈕不變，但菜單項內容會整體靠左對齊 在 標簽中的 dropdown-menu 類之後加入此類
dropdown-header 標題 給下拉菜單加入標題，以呈現齣一個群組的概念 在 標簽中加入此類
divider 分隔綫 用來分隔每個係列下拉菜單的鏈接 在 標簽中加 響應式網頁設計：Bootstrap開發速成 下載 mobi epub pdf txt 電子書 格式

評分☆☆☆☆☆

看瞭下，就是把網上的資料抄一遍。

評分☆☆☆☆☆

書內容不知道怎麼樣

評分☆☆☆☆☆

認真的研究中

評分☆☆☆☆☆

包裝完好，送貨速度快，産品正在使用中，質量追評再議。

評分☆☆☆☆☆

包裝好

評分☆☆☆☆☆

黑白印刷，一般

評分☆☆☆☆☆

包裝完好，送貨速度快，産品正在使用中，質量追評再議。

評分☆☆☆☆☆

非常好 搞活動買瞭十多本

評分☆☆☆☆☆

寫的還行吧，

類似圖書 點擊查看全場最低價