基本简介
本书从认识回响式网页设计与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