微信扫一扫,移动浏览光盘
简介
本书从认识响应式网页设计与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.5Viewport 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 何谓Bootstrap12
2.2Bootstrap 具有哪些内容 12
2.3 下载Bootstrap13
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.2CSS Class 与 CSS ID 65
8.2HTML5与CSS3的新增内容 67
8.2.1认识 HTML5 67
8.2.2HTML5 的新元素与属性 68
8.2.3认识 CSS3 71
8.2.4CSS3 新增的属性 71
第9章 响应式网页的布局方式 76
9.1Grid System简介 76
9.1.1何谓 Grid System 76
9.1.2网页的 Grid System 77
9.1.3网页设计为何需要 Grid System 78
9.1.4Grid System 的使用方法 78
9.2 布局规则 79
9.2.1Bootstrap 中的 Grid System 79
9.2.2不同设备的 Grid 设置 80
9.2.3嵌套排版 82
9.2.4移动与调整 Column 的位置 83
9.2.5Column 的规则 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.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运用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.1Bootstrap 套件下载 217
16.2可视化Bootstrap 在线编辑器 219
16.2.1GRID SYSTEM 219
16.2.2BASIC CSS 220
16.2.3COMPONENTS 221
16.2.4JAVASCRIPT 222
16.2.5预览版式 222
16.2.6下载结果 223
16.3浏览器开发者模式检测 224
16.3.1Firefox 浏览器 224
16.3.2IE浏览器 226
16.3.3Google Chrome 浏览器 226
16.3.4在线检测 228
16.3.5插件的辅助检测 231
16.4尺寸对照工具 232
16.5检测优化工具 233
16.6设备尺寸参考 234
【媒体评论】
评论
- 名称
- 类型
- 大小
光盘服务联系方式: 020-38250260 客服QQ：4006604884
云图客服：
用户发送的提问，这种方式就需要有位在线客服来回答用户的问题，这种 就属于对话式的,问题是这种提问是否需要用户登录才能提问
