学习响应式设计PDF|Epub|txt|kindle电子书版本网盘下载

学习响应式设计PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第一部分 响应式设计基础3

第1章 什么是响应式设计3

1.1 一点儿基础3

1.2 简史6

1.2.1 固定宽度设计6

1.2.2 移动Web浏览7

1.2.3 移动网站8

1.2.4 更多的设备9

1.2.5 媒体查询10

1.2.6 灵活性11

1.2.7 响应式网页设计12

1.3 为什么是响应式设计12

1.3.1 每个设备都得到正确的设计12

1.3.2 更少的工作14

1.3.3 搜索优化14

1.4 总结15

第2章 响应式内容16

2.1 内容策略16

2.2 内容整理18

2.2.1 仅使用你需要的18

2.2.2 如何精简19

2.2.3 内容审计20

2.3 内容编写20

2.3.1 用户如何阅读20

2.3.2 简明的语言22

2.4 内容平等23

2.5 内容管理24

2.6 自适应内容24

2.7 总结27

第二部分 创建响应式网站31

第3章 响应式网站之HTML31

3.1 使用HTML32

3.1.1 HTML版本32

3.1.2 Web标准33

3.1.3 使用HTML533

3.2 页面基本结构34

3.2.1 文档类型声明34

3.2.2 文档结构34

3.2.3 页面标题35

3.2.4 字符集36

3.3 视口37

3.3.1 宽度40

3.3.2 初始缩放比40

3.3.3 用户可缩放40

3.3.4 最大缩放比41

3.4 结构性元素41

3.4.1 屏幕阅读器42

3.4.2 ＜header＞43

3.4.3 ＜nav＞43

3.4.4 ＜footer＞43

3.4.5 ＜article＞44

3.4.6 ＜aside＞44

3.4.7 IE支持44

3.5 创建一个页面45

3.5.1 结构性元素45

3.5.2 加入内容46

3.5.3 无样式页面47

3.6 清晰和语义化的HTML48

3.6.1 分离内容与表现48

3.6.2 注释49

3.7 总结50

第4章 响应式网站之CSS51

4.1 CSS的工作方式52

4.2 CSS版本53

4.3 置CSS于何处57

4.3.1 嵌入式样式57

4.3.2 样式表58

4.3.3 内联样式59

4.4 层叠59

4.4.1 层叠的作用方式59

4.4.2 重要的规则60

4.4.3 内联样式60

4.4.4 ID选择器60

4.4.5 类、属性和伪类选择器61

4.4.6 元素与伪元素选择器61

4.4.7 继承规则61

4.4.8 默认值62

4.4.9 发生冲突怎么办62

4.5 使用层叠62

4.5.1 默认值和重置63

4.5.2 继承规则64

4.5.3 元素规则64

4.5.4 其他规则65

4.5.5 保持简单65

4.6 注释66

4.7 组织你的样式表66

4.8 盒模型67

4.8.1 度量单位68

4.8.2 em68

4.8.3 高度与宽度69

4.8.4 外边距与内边距70

4.8.5 边框71

4.8.6 盒子大小72

4.9 显示74

4.10 定位75

4.10.1 静态定位75

4.10.2 相对定位75

4.10.3 绝对定位76

4.10.4 固定定位77

4.10.5 定位元素的度量单位78

4.11 浮动和清除79

4.12 基本样式81

4.13 总结83

第5章 媒体查询85

5.1 何为媒体查询85

5.2 媒体查询结构87

5.3 在样式表链接中使用媒体查询89

5.4 使用媒体查询的其他方式90

5.5 我们可以查询什么91

5.5.1 视口宽度和高度91

5.5.2 屏幕宽度与高度92

5.5.3 方向92

5.5.4 宽高比92

5.5.5 分辨率93

5.5.6 其他媒体特性93

5.6 浏览器支持94

5.6.1 IE条件注释94

5.6.2 测试媒体查询结果96

5.7 断点96

5.8 设计范围97

5.9 响应式设计98

5.9.1 渐进增强98

5.9.2 用网格进行设计99

5.9.3 使用网格列100

5.9.4 优先为小屏幕设计101

5.10 使用媒体查询102

5.11 两列布局102

5.11.1 使用浮动103

5.11.2 使用网格105

5.11.3 加入媒体查询107

5.12 设置最大宽度108

5.13 如何选择断点109

5.14 总结110

第6章 图像111

6.1 显示图像的方式112

6.1.1 CSS替代方案112

6.1.2 内容图像113

6.1.3 背景图像113

6.1.4 图像拼合113

6.1.5 图标字体114

6.2 替代文本115

6.3 图像文件格式118

6.3.1 JPEG119

6.3.2 GIF119

6.3.3 PNG120

6.3.4 SVG120

6.4 优化图像121

6.4.1 像素与分辨率121

6.4.2 高密度屏幕122

6.4.3 压缩图像123

6.4.4 实际尺寸124

6.5 内容图像126

6.5.1 ＜img＞元素126

6.5.2 加入图像127

6.5.3 灵活的图像尺寸129

6.5.4 媒体查询130

6.5.5 最大宽度132

6.5.6 用图像叙事134

6.6 背景图像134

6.6.1 加入背景图像135

6.6.2 对齐136

6.7 响应式图像137

6.7.1 建议的客户端解决方案138

6.7.2 其他解决方案139

6.7.3 断点143

6.8 总结145

第三部分 玩转响应式设计149

第7章 响应式设计工作流程149

7.1 策略与规划149

7.1.1 用户研究150

7.1.2 内容150

7.2 内容先于布局152

7.2.1 内容组件152

7.2.2 以文本模式进行设计153

7.2.3 线性设计155

7.2.4 内容层次155

7.3 考虑布局155

7.3.1 草图绘制155

7.3.2 从小屏幕开始156

7.3.3 移动优先157

7.4 原型158

7.4.1 线框图与原型158

7.4.2 线框图158

7.4.3 响应式原型159

7.4.4 原型中有什么160

7.4.5 从基础开始160

7.4.6 创建页面布局160

7.4.7 框架162

7.4.8 原型创建工具163

7.5 视觉设计164

7.5.1 样式板164

7.5.2 测试与调整165

7.5.3 风格指南166

7.6 响应式设计工具168

7.6.1 Adobe Photoshop168

7.6.2 Adobe InDesign168

7.6.3 Adobe Edge Reflow169

7.6.4 Adobe Dreamweaver170

7.6.5 浏览器171

7.7 推销响应式设计172

7.7.1 为什么要用响应式设计172

7.7.2 教育你的客户173

7.7.3 强调响应性173

7.7.4 响应式设计并不总是最佳选择174

7.7.5 费用174

7.8 与客户合作175

7.8.1 交付物175

7.8.2 陈述报告176

7.9 总结177

第8章 岂止手机178

8.1 用户体验178

8.1.1 用户至上179

8.1.2 手机用户的谬见180

8.1.3 为应用环境设计180

8.1.4 只用手机的用户181

8.1.5 使用多个设备182

8.2 设备无关的设计182

8.3 专注于移动优先183

8.4 尽你所能183

8.5 设备类型186

8.5.1 手机186

8.5.2 平板电脑187

8.5.3 其他设备187

8.5.4 台式电脑与笔记本电脑188

8.6 触摸188

8.6.1 电容式触摸189

8.6.2 多点触摸189

8.6.3 手势189

8.6.4 JavaScript事件190

8.6.5 触摸目标大小191

8.6.6 导航位置193

8.7 屏幕尺寸194

8.8 可访问性（通用化设计）196

8.8.1 视觉197

8.8.2 音频199

8.8.3 输入方法200

8.8.4 认知障碍201

8.9 决定支持哪些设备201

8.10 为何要用真实设备进行测试202

8.10.1 设备实验室203

8.10.2 购买设备203

8.11 测试203

8.11.1 验证器204

8.11.2 在浏览器窗口调整204

8.11.3 浏览器工具204

8.11.4 浏览器与操作系统205

8.11.5 仿真器与模拟器206

8.11.6 辅助技术207

8.12 总结207

第四部分 设计响应式网站211

第9章 文字排版211

9.1 始于HTML212

9.2 字型212

9.3 使用字体214

9.3.1 设计良好的字体214

9.3.2 自托管字体214

9.3.3 字体服务215

9.3.4 链接字体文件216

9.3.5 创建字体栈217

9.4 调整文字大小218

9.4.1 忘掉像素218

9.4.2 屏幕距离218

9.4.3 绝对与相对219

9.4.4 设置默认字体大小220

9.4.5 为什么是100％220

9.4.6 度量单位221

9.4.7 字体大小间的关系225

9.4.8 行高225

9.5 行长227

9.5.1 测试行长228

9.5.2 调整外边距及字体大小229

9.5.3 断字231

9.5.4 溢出换行232

9.6 留白233

9.7 内边距和外边距234

9.8 为屏幕尺寸改变字型234

9.9 总结235

第10章 导航及页眉布局237

10.1 响应式导航237

10.1.1 从小屏开始238

10.1.2 样式化列表238

10.1.3 水平导航240

10.2 网站品牌243

10.3 导航链接245

10.3.1 灵活性245

10.3.2 用户想要做什么245

10.3.3 基于目标的导航247

10.3.4 保持一致性248

10.3.5 保持简单250

10.4 导航模式250

10.4.1 顶部导航252

10.4.2 页脚导航254

10.4.3 切换式推出型导航256

10.4.4 切换式覆盖型导航260

10.4.5 部分优先型导航260

10.4.6 选择菜单型导航261

10.4.7 抽屉式导航263

10.4.8 底部导航264

10.4.9 跳过子导航266

10.4.10 被抛弃的导航267

10.4.11 用于宽屏幕的固定菜单269

10.5 页眉270

10.5.1 极简页眉270

10.5.2 复杂页眉271

10.5.3 导航图标273

10.5.4 其他图标275

10.6 总结277

第11章 性能279

11.1 性能的重要性280

11.2 性能作为设计元素280

11.2.1 网络连接281

11.2.2 平衡281

11.2.3 臃肿的网络281

11.3 网页加载与渲染方式282

11.3.1 延迟283

11.3.2 DNS请求283

11.3.3 重定向284

11.3.4 HTTP请求284

11.3.5 发送HTML文件284

11.3.6 解压285

11.3.7 DOM285

11.3.8 渲染＜head＞元素286

11.3.9 渲染＜body＞元素287

11.3.10 onload事件287

11.4 性能测量287

11.5 清理代码289

11.5.1 使用简单直接的代码289

11.5.2 缩小290

11.6 将HTTP请求减至最少291

11.6.1 串联291

11.6.2 第三方代码292

11.6.3 图像拼合293

11.7 服务器设置293

11.7.1 避免重定向293

11.7.2 文件压缩294

11.7.3 浏览器缓存295

11.8 JavaScript296

11.8.1 JavaScript做什么296

11.8.2 JavaScript的工作方式296

11.8.3 阻塞式JavaScript297

11.8.4 JavaScript库300

11.9 CSS301

11.10 托管302

11.10.1 内容分发网络302

11.10.2 内容管理系统303

11.11 有条件地加载内容303

11.12 重绘与回流305

11.13 RESS305

11.14 总结307