正版 响应式网页设计: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

吕国泰：

专长：

1.多媒体技术整合应用／开发；

2.数字出版／内容设计及系统建设；

3.多媒体影音作品设计／影像非线性剪辑技术设计；

4.网页视觉设计／切版组版与多媒体内容网站设置(RWD)；

5.大型设计案制作流程管理与执行；

6.设计业务相关客户沟通协调；

7.广告设计相关企划管理操作；

8.影视多媒体后制技术行销企划、周边产品与活动规划与专案管理。

著作：著有动画制作、游戏设计、电子书、多媒体、靠前认证等近16本图书。

何升隆：现任锐比数字科技有限公司／技术总监。

专长：

1.移动应用技术整合与开发；

2.移动应用SDK开发与维护；

3.服务器网页程序语言；

4.网络服务器系统管理。

曾伟凯：

专长：

1.3D游戏引擎(Unity3D)；

2.3D移动手机游戏制作(iPhone，iPad，Android，Android Pad)；

3.程序语言(JavaScript，C#)；

4.游戏动画与角色动作捕捉器(motion capture)；

5.游戏企划书制作。

评论

本书从认识响应式网页设计与Bootstrap开始，详解的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，*终以3个完整实例（书籍宣传网页、产品推广网页、页）制作出响应式网页，以让大家综合运用所学知识，提高实战技能。 本书以丰富的范例程序和详细的图解逐一讲解 RWD 技术 Bootstrap 结合使用的核心技术和方法，既适合负责网页前端和后端的程序人员阅读，也适合的企划人员和视觉设计人员参考，还可供想学习和了解响应式网页设计 Bootstrap 开发的人员自学和参考。

热门的Bootstrap让许多企业在招聘网页设计师时都将之列为必备的技能条件，Bootstrap采用了模组化设计，简易到只要懂得如何套用，就可以快速开发出具有美感的响应式（RWD）网页。本书对于许多不擅长视觉设计的网页工程师来说，省去了许多美化的时间与困惑，而对于视觉设计师来说，也能按照自己设计的版型设计出网页，同时支持市面上大部分的主流浏览器，而对于想踏入响应式网页领域的初学者来说，则可以在短时间内学到*实用的响应式网页设计技能。 本书从认识响应式网页设计与Bootstrap开始，详解的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，*后以3个完整实例制作出响应式网页，让大家综合运用所学知识，提高实战技能。