本書(shū)從認(rèn)識(shí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與Bootstrap開(kāi)始，詳解網(wǎng)站的開(kāi)發(fā)流程、響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)思維、SEO設(shè)置以及網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，導(dǎo)入視覺(jué)設(shè)計(jì)與網(wǎng)頁(yè)制作兩個(gè)不同領(lǐng)域的專(zhuān)業(yè)知識(shí)，并提供120多個(gè)Bootstrap功能范例網(wǎng)頁(yè)文件，說(shuō)明如何使用Bootstrap框架所提供的各種CSS與組件等內(nèi)容，*終以3個(gè)完整實(shí)例（書(shū)籍宣傳網(wǎng)頁(yè)、產(chǎn)品推廣網(wǎng)頁(yè)、網(wǎng)站首頁(yè)）制作出響應(yīng)式網(wǎng)頁(yè)，以讓大家綜合運(yùn)用所學(xué)知識(shí)，提高實(shí)戰(zhàn)技能。
 

本書(shū)以豐富的范例程序和詳細(xì)的圖解逐一講解 RWD 技術(shù) + Bootstrap 結(jié)合使用的核心技術(shù)和方法，既適合負(fù)責(zé)網(wǎng)頁(yè)前端和后端的程序人員閱讀，也適合網(wǎng)站的企劃人員和視覺(jué)設(shè)計(jì)人員參考，還可供想學(xué)習(xí)和了解響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) + Bootstrap 開(kāi)發(fā)網(wǎng)站的人員自學(xué)和參考。

目 錄

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

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