《回響式網頁設計實戰》是2016年10月1日機械工業出版社出版的圖書，作者是柯霖廷。
基本介紹
- 中文名：回響式網頁設計實戰
- 作者：柯霖廷
- 出版社：機械工業出版社
- ISBN：9787111549420
內容簡介,圖書目錄,
內容簡介
本書介紹了回響式網頁設計的技術架構及設計要領，使用HTML與CSS設計網站的基本策略與技術，以及回響式網頁設計的模組套用，包括自適應/回響式網頁設計的概述、網頁新舊切版的方式和字型資源、版型尺寸的固定與彈性、Bootstrap的學習與使用、Foundation的學習與使用、Pure的學習與使用。
圖書目錄
第1章 自適應 / 回響式網頁設計概述 1
1.1 彈性的樣式與版面 1
1.2 以移動設備為優先 1
1.3 業界流行的 RWD Framework 2
1.4 並非一定需要 RWD Framework 2
1.5 RWD實現的機制 5
1.6 瀏覽器的支持度 5
第2章 網頁的新舊切版方式和字型資源 7
2.1 程式代笑茅碼的編輯器 7
2.2 CSS搭配HTML4切版方式 7
2.2.1 開始切版前的HTML基本程式代碼結構 7
2.2.2 規劃要創建的版面 8
2.2.3 建立區塊的程式代碼 9
2.2.4 標示區塊的範圍 9
2.2.5 設定區塊尺寸 10
2.2.6 限定版面總寬度 12
2.2.7 設定區塊為浮動排乎請戰列 12
2.2.8 調整各區塊的間距 14
2.2.9 版面的居中對齊 15
2.2.10 改用百分比作為顯示度量單位 16
2.3 CSS 搭配HTML5 切版方式 18
2.3.1 建立區塊的程式代碼 20
2.3.2 標示區塊範圍 20
2.3.3 設定區塊尺寸 21
2.3.4 限定版面的總寬度 23
2.3.5 設定區塊為浮動排列 24
2.3.6 調整各區塊的間距 25
2.3.7 版面的居中對齊 27
2.3.8 改用以百分比為顯示度量單位 28
2.4 CSS 搭配JavaScript 切寒紙蘭勸版方式 30
2.4.1 精簡原有的獄罪付厚程式代碼 30
2.4.2 注釋掉整段 CSS 規則語句 32
2.4.3 用 JavaScript 程式代碼實現特定版型 32
2.4.4 JavaScript 版型程式代碼的第 1 階段簡化 33
2.4.5 JavaScript 版型程式代碼的第2階段簡化 34
2.5 跨網域運用線上字型 35
2.6 使用本地的字型 38
第3章淚幾拳 版型尺寸的固定與彈性 42
3.1 HTML 傳統方式 42
3.2 CSS套用方式 45
3.2.1 @media語句 45
3.2.2 meta viewport語句 51
3.3 JavaScript搭建方式 52
第4章 Bootstrap 的學習與使用 56
4.1 Twitter的 Bootstrap 簡易套用方式 56
4.2 免費小圖示 58
4.3 下拉式或上拉式選單 59
4.3.1 下拉式選單 59
4.3.2 上拉式選單 61
4.3.3 具有選項分隔線的下拉式選單 61
4.3.4 具有選項分類和選項分隔線的下拉式選單 62
4.4 一般按鈕和按鈕組 64
4.4.1 按鈕組 64
4.4.2 按鈕組的工具列 64
4.5 帶有選單按店戶婚鈕的按鈕組 65
4.5.1 橫向按鈕組 65
4.5.2 縱向按鈕組 66
4.5.3 視窗寬度型 67
4.5.4 分離型按鈕組 68
4.6 不同尺寸的按鈕 69
4.6.1 大尺寸按鈕 69
4.6.2 標準尺寸的上拉式選單按鈕 70
4.6.3 小尺寸按鈕 71
4.6.4 特小尺寸按鈕 72
4.7 窗體中的文本欄 73
4.7.1 標籤文字組合式 74
4.7.2 單選按喇獄煮鈕和多選按鈕組合式 75
4.7.3 一般按鈕組合式 76
4.7.4 下拉式選單按鈕組合式 77
4.8 窗體中的導航欄 79
4.8.1 默認的標籤型導航欄 79
4.8.2 簡易標籤型導航欄 80
4.8.3 具有視窗寬度的堆疊式導航欄 80
4.8.4 均分視窗寬度的標籤型導航欄 80
4.8.5 動態置頂導航欄 82
4.9 瀏覽分層提示和分頁 84
4.9.1 瀏覽分層提示 84
4.9.2 分頁導航欄 85
4.9.3 前一頁和下一頁按鈕 86
4.10 文字標籤、文字徽章與文字框 87
4.10.1 文字標籤 87
4.10.2 文字徽章 87
4.10.3 文字框 88
4.11 縮略圖與圖解說明 89
4.12 警告文字框 91
4.13 進度條 92
4.14 媒體對象 95
4.14.1 一般圖片列表 95
4.14.2 多層次圖片列表 97
4.15 列表分組 100
4.15.1 默認的列表分組 100
4.15.2 加上數值徽章的列表分組 101
4.15.3 按鈕型列表分組 102
4.15.4 套用顏色樣式的列表分組 103
4.15.5 帶有內容的列表分組 104
4.16 面板 105
4.16.1 一般面板 105
4.16.2 帶有表格內容的面板 107
4.16.3 帶有列表分組內容的面板 109
4.17 自適應嵌入 110
第5章 Zurb’s Foundation的學習與使用 112
5.1 Zurb’s Foundation 簡易套用方式 112
5.2 滑入選單 113
5.2.1 默認的滑入選單 113
5.2.2 雙邊滑入選單 114
5.2.3 雙邊多層次滑入選單 118
5.3 置頂導航欄 122
5.4 工具列與內置小圖示 125
5.4.1 跨視窗寬度的工具列 125
5.4.2 縱向工具列 126
5.4.3 內置圖示工具按鈕所構成的工具列 127
5.5 側邊導航欄 128
5.6 動態置頂追蹤型導航欄 129
5.7 子導航欄 131
5.8 瀏覽分層提示 132
5.9 分頁導航欄 133
5.10 縮略圖 134
5.11 縮放式視頻 137
5.12 窗體組件 138
5.13 切換按鈕 148
5.14 滑桿 151
5.15 窗體驗證 156
5.16 按鈕 160
5.17 按鈕組 162
5.18 分割下拉式選單按鈕組 167
5.19 整體下拉式選單按鈕 169
5.20 字型樣式 171
5.21 行內列表 173
5.22 文字標籤 173
5.23 modal 窗格 174
5.24 警告框 180
5.25 面板框 182
5.26 動態提示框 183
5.27 頁面操作展示 185
5.28 簡易型下拉式選單與下拉式內容框 189
5.29 價目表 192
5.30 進度條 193
5.31 表格 194
5.32 摺疊式面板 195
5.33 標籤面板 203
5.34 均分版型 206
第6章 Yahoo’s Pure的學習與使用 210
6.1 Yahoo’s Pure 簡易套用方式 210
6.2 版型格線和最小容器單元 210
6.3 窗體組件 213
6.4 按鈕 222
6.5 表格 224
6.6 選單 229
4.1 Twitter的 Bootstrap 簡易套用方式 56
4.2 免費小圖示 58
4.3 下拉式或上拉式選單 59
4.3.1 下拉式選單 59
4.3.2 上拉式選單 61
4.3.3 具有選項分隔線的下拉式選單 61
4.3.4 具有選項分類和選項分隔線的下拉式選單 62
4.4 一般按鈕和按鈕組 64
4.4.1 按鈕組 64
4.4.2 按鈕組的工具列 64
4.5 帶有選單按鈕的按鈕組 65
4.5.1 橫向按鈕組 65
4.5.2 縱向按鈕組 66
4.5.3 視窗寬度型 67
4.5.4 分離型按鈕組 68
4.6 不同尺寸的按鈕 69
4.6.1 大尺寸按鈕 69
4.6.2 標準尺寸的上拉式選單按鈕 70
4.6.3 小尺寸按鈕 71
4.6.4 特小尺寸按鈕 72
4.7 窗體中的文本欄 73
4.7.1 標籤文字組合式 74
4.7.2 單選按鈕和多選按鈕組合式 75
4.7.3 一般按鈕組合式 76
4.7.4 下拉式選單按鈕組合式 77
4.8 窗體中的導航欄 79
4.8.1 默認的標籤型導航欄 79
4.8.2 簡易標籤型導航欄 80
4.8.3 具有視窗寬度的堆疊式導航欄 80
4.8.4 均分視窗寬度的標籤型導航欄 80
4.8.5 動態置頂導航欄 82
4.9 瀏覽分層提示和分頁 84
4.9.1 瀏覽分層提示 84
4.9.2 分頁導航欄 85
4.9.3 前一頁和下一頁按鈕 86
4.10 文字標籤、文字徽章與文字框 87
4.10.1 文字標籤 87
4.10.2 文字徽章 87
4.10.3 文字框 88
4.11 縮略圖與圖解說明 89
4.12 警告文字框 91
4.13 進度條 92
4.14 媒體對象 95
4.14.1 一般圖片列表 95
4.14.2 多層次圖片列表 97
4.15 列表分組 100
4.15.1 默認的列表分組 100
4.15.2 加上數值徽章的列表分組 101
4.15.3 按鈕型列表分組 102
4.15.4 套用顏色樣式的列表分組 103
4.15.5 帶有內容的列表分組 104
4.16 面板 105
4.16.1 一般面板 105
4.16.2 帶有表格內容的面板 107
4.16.3 帶有列表分組內容的面板 109
4.17 自適應嵌入 110
第5章 Zurb’s Foundation的學習與使用 112
5.1 Zurb’s Foundation 簡易套用方式 112
5.2 滑入選單 113
5.2.1 默認的滑入選單 113
5.2.2 雙邊滑入選單 114
5.2.3 雙邊多層次滑入選單 118
5.3 置頂導航欄 122
5.4 工具列與內置小圖示 125
5.4.1 跨視窗寬度的工具列 125
5.4.2 縱向工具列 126
5.4.3 內置圖示工具按鈕所構成的工具列 127
5.5 側邊導航欄 128
5.6 動態置頂追蹤型導航欄 129
5.7 子導航欄 131
5.8 瀏覽分層提示 132
5.9 分頁導航欄 133
5.10 縮略圖 134
5.11 縮放式視頻 137
5.12 窗體組件 138
5.13 切換按鈕 148
5.14 滑桿 151
5.15 窗體驗證 156
5.16 按鈕 160
5.17 按鈕組 162
5.18 分割下拉式選單按鈕組 167
5.19 整體下拉式選單按鈕 169
5.20 字型樣式 171
5.21 行內列表 173
5.22 文字標籤 173
5.23 modal 窗格 174
5.24 警告框 180
5.25 面板框 182
5.26 動態提示框 183
5.27 頁面操作展示 185
5.28 簡易型下拉式選單與下拉式內容框 189
5.29 價目表 192
5.30 進度條 193
5.31 表格 194
5.32 摺疊式面板 195
5.33 標籤面板 203
5.34 均分版型 206
第6章 Yahoo’s Pure的學習與使用 210
6.1 Yahoo’s Pure 簡易套用方式 210
6.2 版型格線和最小容器單元 210
6.3 窗體組件 213
6.4 按鈕 222
6.5 表格 224
6.6 選單 229
