基本介紹
- 書名：回響式網頁設計——-Bootstrap開發速成
- 作者：呂國泰、何升隆、曾偉凱
- ISBN：9787302466314
- 定價：45.00
- 出版時間：2017.04.01
基本簡介,圖書目錄,
基本簡介
本書從認識回響式網頁設計與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 網頁向量格...
5.3版面設計時的常見辭彙33
5.4格線的運用與製作35
5.4.1格線輔助——PSD35
5.4.2格線輔助——AI36
5.4.3格線輔助——自行設定38
5.5讓視覺設計師懂得切版42
5.5.1切版重點42
5.5.2了解版面的構成42
第6章SEO簡介44
6.1何謂SEO44
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與CSS64
8.1.1認識DIV64
8.1.2CSSClass與CSSID65
8.2HTML5與CSS3的新增內容67
8.2.1認識HTML567
8.2.2HTML5的新元素與屬性68
8.2.3認識CSS371
8.2.4CSS3新增的屬性71
第9章回響式網頁的布局方式76
9.1GridSystem簡介76
9.1.1何謂GridSystem76
9.1.2網頁的GridSystem77
9.1.3網頁設計為何需要GridSystem78
9.1.4GridSystem的使用方法78
9.2布局規則79
9.2.1Bootstrap中的GridSystem79
9.2.2不同設備的Grid設定80
9.2.3嵌套排版82
9.2.4移動與調整Column的位置83
9.2.5Column的規則83
9.2.6調整Column的順序84
第10章BootstrapCSS樣式的使用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章BootstrapJS外掛程式的使用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.4CSS美化與運用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運用CSS184
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運用導航欄JavaScript195
15.3.2修改類196
15.3.3運用CSS樣式197
15.4第二層設計——廣告橫幅198
15.4.1使用輪播JavaScript198
15.4.2修改內容199
15.4.3運用CSS樣式200
15.5第三層設計——最新公告與廣告區200
15.5.1加入最新公告圖片200
15.5.2套用摺疊效果JavaScript201
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.1Bootstrap套件下載217
16.2可視化Bootstrap線上編輯器219
16.2.1GRIDSYSTEM219
16.2.2BASICCSS220
16.2.3COMPONENTS221
16.2.4JAVASCRIPT222
16.2.5預覽版式222
16.2.6下載結果223
16.3瀏覽器開發者模式檢測224
16.3.1Firefox瀏覽器224
16.3.2IE瀏覽器226
16.3.3GoogleChrome瀏覽器226
16.3.4線上檢測228
16.3.5外掛程式的輔助檢測231
16.4尺寸對照工具232
16.5檢測最佳化工具233
16.6設備尺寸參考234
