第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