学习响应式设计pdf

图书网 2018年9月8日20:18:32
评论
2.1K
摘要

全面覆盖从项目立项到网站上线的工作流程  
详细讲解响应式设计策略和技巧,为各式设备打造极优的用户体验  
充分利用渐进增强优化用户体验  
不仅面向Web开发人员,适合从事网站相关工作的各类人群阅读参考

学习响应式设计 内容简介

《学习响应式设计》分为四部分,全面介绍响应式Web设计策略与技术,引领大家掌握从项目立项到网站上线的响应式设计工作流程。首先介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、需要掌握HTML和CSS知识、图像处理,以及响应式设计的核心:媒体查询。第三部分带大家全面了解响应式设计的工作流程,从用户体验的角度探讨响应式设计,确保网站在各种设备上的适应性和功能完备性。

学习响应式设计 目录

第一部分 响应式设计基础

第1章 什么是响应式设计

1.1 一点儿基础

1.2 简史

1.2.1 固定宽度设计

1.2.2 移动Web浏览

1.2.3 移动网站

1.2.4 更多的设备

1.2.5 媒体查询

1.2.6 灵活性

1.2.7 响应式网页设计

1.3 为什么是响应式设计

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

1.3.2 更少的工作

1.3.3 搜索优化

1.4 总结

第2章 响应式内容

2.1 内容策略

2.2 内容整理

2.2.1 仅使用你需要的

2.2.2 如何精简

2.2.3 内容审计

2.3 内容编写

2.3.1 用户如何阅读

2.3.2 简明的语言

2.4 内容平等

2.5 内容管理

2.6 自适应内容

2.7 总结

第二部分 创建响应式网站

第3章 响应式网站之HTML

3.1 使用HTML

3.1.1 HTML版本

3.1.2 Web标准

3.1.3 使用HTML5

3.2 页面基本结构

3.2.1 文档类型声明

3.2.2 文档结构

3.2.3 页面标题

3.2.4 字符集

3.3 视口

3.3.1 宽度

3.3.2 初始缩放比

3.3.3 用户可缩放

3.3.4 最大缩放比

3.4 结构性元素

3.4.1 屏幕阅读器

3.4.2 <header>

3.4.3 <nav>

3.4.4 <footer>

3.4.5 <article>

3.4.6 <aside>

3.4.7 IE支持

3.5 创建一个页面

3.5.1 结构性元素

3.5.2 加入内容

3.5.3 无样式页面

3.6 清晰和语义化的HTML

3.6.1 分离内容与表现

3.6.2 注释

3.7 总结

第4章 响应式网站之CSS

4.1 CSS的工作方式

4.2 CSS版本

4.3 置CSS于何处

4.3.1 嵌入式样式

4.3.2 样式表

4.3.3 内联样式

4.4 层叠

4.4.1 层叠的作用方式

4.4.2 重要的规则

4.4.3 内联样式

4.4.4 ID选择器

4.4.5 类、属性和伪类选择器

4.4.6 元素与伪元素选择器

4.4.7 继承规则

4.4.8 默认值

4.4.9 发生冲突怎么办

4.5 使用层叠

4.5.1 默认值和重置

4.5.2 继承规则

4.5.3 元素规则

4.5.4 其他规则

4.5.5 保持简单

4.6 注释

4.7 组织你的样式表

4.8 盒模型

4.8.1 度量单位

4.8.2 em

4.8.3 高度与宽度

4.8.4 外边距与内边距

4.8.5 边框

4.8.6 盒子大小

4.9 显示

4.10 定位

4.10.1 静态定位

4.10.2 相对定位

4.10.3 绝对定位

4.10.4 固定定位

4.10.5 定位元素的度量单位

4.11 浮动和清除

4.12 基本样式

4.13 总结

第5章 媒体查询

5.1 何为媒体查询

5.2 媒体查询结构

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

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

5.5 我们可以查询什么

5.5.1 视口宽度和高度

5.5.2 屏幕宽度与高度

5.5.3 方向

5.5.4 宽高比

5.5.5 分辨率

5.5.6 其他媒体特性

5.6 浏览器支持

5.6.1 IE条件注释

5.6.2 测试媒体查询结果

5.7 断点

5.8 设计范围

5.9 响应式设计

5.9.1 渐进增强

5.9.2 用网格进行设计

5.9.3 使用网格列

5.9.4 优先为小屏幕设计

5.10 使用媒体查询

5.11 两列布局

5.11.1 使用浮动

5.11.2 使用网格

5.11.3 加入媒体查询

5.12 设置最大宽度

5.13 如何选择断点

5.14 总结

第6章 图像

6.1 显示图像的方式

6.1.1 CSS替代方案

6.1.2 内容图像

6.1.3 背景图像

6.1.4 图像拼合

6.1.5 图标字体

6.2 替代文本

6.3 图像文件格式

6.3.1 JPEG

6.3.2 GIF

6.3.3 PNG

6.3.4 SVG

6.4 优化图像

6.4.1 像素与分辨率

6.4.2 高密度屏幕

6.4.3 压缩图像

6.4.4 实际尺寸

6.5 内容图像

6.5.1 <img>元素

6.5.2 加入图像

6.5.3 灵活的图像尺寸

6.5.4 媒体查询

6.5.5 最大宽度

6.5.6 用图像叙事

6.6 背景图像

6.6.1 加入背景图像

6.6.2 对齐

6.7 响应式图像

6.7.1 建议的客户端解决方案

6.7.2 其他解决方案

6.7.3 断点

6.8 总结

第三部分 玩转响应式设计

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

7.1 策略与规划

7.1.1 用户研究

7.1.2 内容

7.2 内容先于布局

7.2.1 内容组件

7.2.2 以文本模式进行设计

7.2.3 线性设计

7.2.4 内容层次

7.3 考虑布局

7.3.1 草图绘制

7.3.2 从小屏幕开始

7.3.3 移动优先

7.4 原型

7.4.1 线框图与原型

7.4.2 线框图

7.4.3 响应式原型

7.4.4 原型中有什么

7.4.5 从基础开始

7.4.6 创建页面布局

7.4.7 框架

7.4.8 原型创建工具

7.5 视觉设计

7.5.1 样式板

7.5.2 测试与调整

7.5.3 风格指南

7.6 响应式设计工具

7.6.1 Adobe Photoshop

7.6.2 Adobe InDesign

7.6.3 Adobe Edge Reflow

7.6.4 Adobe Dreamweaver

7.6.5 浏览器

7.7 推销响应式设计

7.7.1 为什么要用响应式设计

7.7.2 教育你的客户

7.7.3 强调响应性

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

7.7.5 费用

7.8 与客户合作

7.8.1 交付物

7.8.2 陈述报告

7.9 总结

第8章 岂止手机

8.1 用户体验

8.1.1 用户至上

8.1.2 手机用户的谬见

8.1.3 为应用环境设计

8.1.4 只用手机的用户

8.1.5 使用多个设备

8.2 设备无关的设计

8.3 专注于移动优先

8.4 尽你所能

8.5 设备类型

8.5.1 手机

8.5.2 平板电脑

8.5.3 其他设备

8.5.4 台式电脑与笔记本电脑

8.6 触摸

8.6.1 电容式触摸

8.6.2 多点触摸

8.6.3 手势

8.6.4 JavaScript事件

8.6.5 触摸目标大小

8.6.6 导航位置

8.7 屏幕尺寸

8.8 可访问性(通用化设计)

8.8.1 视觉

8.8.2 音频

8.8.3 输入方法

8.8.4 认知障碍

8.9 决定支持哪些设备

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

8.10.1 设备实验室

8.10.2 购买设备

8.11 测试

8.11.1 验证器

8.11.2 在浏览器窗口调整

8.11.3 浏览器工具

8.11.4 浏览器与操作系统

8.11.5 仿真器与模拟器

8.11.6 辅助技术

8.12 总结

第四部分 设计响应式网站

第9章 文字排版

9.1 始于HTML

9.2 字型

9.3 使用字体

9.3.1 设计良好的字体

9.3.2 自托管字体

9.3.3 字体服务

9.3.4 链接字体文件

9.3.5 创建字体栈

9.4 调整文字大小

9.4.1 忘掉像素

9.4.2 屏幕距离

9.4.3 绝对与相对

9.4.4 设置默认字体大小

9.4.5 为什么是100%

9.4.6 度量单位

9.4.7 字体大小间的关系

9.4.8 行高

9.5 行长

9.5.1 测试行长

9.5.2 调整外边距及字体大小

9.5.3 断字

9.5.4 溢出换行

9.6 留白

9.7 内边距和外边距

9.8 为屏幕尺寸改变字型

9.9 总结

第10章 导航及页眉布局

10.1 响应式导航

10.1.1 从小屏开始

10.1.2 样式化列表

10.1.3 水平导航

10.2 网站品牌

10.3 导航链接

10.3.1 灵活性

10.3.2 用户想要做什么

10.3.3 基于目标的导航

10.3.4 保持一致性

10.3.5 保持简单

10.4 导航模式

10.4.1 顶部导航

10.4.2 页脚导航

10.4.3 切换式推出型导航

10.4.4 切换式覆盖型导航

10.4.5 部分优先型导航

10.4.6 选择菜单型导航

10.4.7 抽屉式导航

10.4.8 底部导航

10.4.9 跳过子导航

10.4.10 被抛弃的导航

10.4.11 用于宽屏幕的固定菜单

10.5 页眉

10.5.1 极简页眉

10.5.2 复杂页眉

10.5.3 导航图标

10.5.4 其他图标

10.6 总结

第11章 性能

11.1 性能的重要性

11.2 性能作为设计元素

11.2.1 网络连接

11.2.2 平衡

11.2.3 臃肿的网络

11.3 网页加载与渲染方式

11.3.1 延迟

11.3.2 DNS请求

11.3.3 重定向

11.3.4 HTTP请求

11.3.5 发送HTML文件

11.3.6 解压

11.3.7 DOM

11.3.8 渲染<head>元素

11.3.9 渲染<body>元素

11.3.10 onload事件

11.4 性能测量

11.5 清理代码

11.5.1 使用简单直接的代码

11.5.2 缩小

11.6 将HTTP请求减至最少

11.6.1 串联

11.6.2 第三方代码

11.6.3 图像拼合

11.7 服务器设置

11.7.1 避免重定向

11.7.2 文件压缩

11.7.3 浏览器缓存

11.8 JavaScript

11.8.1 JavaScript做什么

11.8.2 JavaScript的工作方式

11.8.3 阻塞式JavaScript

11.8.4 JavaScript库

11.9 CSS

11.10 托管

11.10.1 内容分发网络

11.10.2 内容管理系统

11.11 有条件地加载内容

11.12 重绘与回流

11.13 RESS

11.14 总结

学习响应式设计 精彩文摘

第 1 章 什么是响应式设计

现在,网络世界中的所有人几乎都听说过响应式网页设计(通常称为 RWD,即 Responsive Web Design 的缩写),但大部分人并没有很好地理解它是什么。

在本章中,你将学习响应式网站的基础知识。之后,我们将简述网页设计的简史,以便你理解响应式设计的思想来自哪里,以及它与旧网页设计方式之间的差异。

我们还会讨论为什么对于制作能很好地工作于不同设备与屏幕尺寸的网站而言,响应式设计通常是最佳选择,以及为何从长远来说它意味着更少的工作。我们也会介绍选择响应式设计的一个不太明显的效果:它对你的搜索引擎排名的影响。

1.1 一点儿基础

如果你拿起本书,是因为你听说过响应式设计,但还不是很明白它到底是什么,本节将帮助你了解响应式设计的基本知识。

即使你有一定的响应式设计经验,也可能觉得很难用通俗的语言向别人解释它。本节将给你一个更好的主意,告诉你如何向用户、客户、非技术团队成员或你的妈妈(她很好奇,想知道你每天在工作中都做些什么)解释响应式设计。

总的来说,响应式设计是一种方法,使网站可以在任何类型的设备和任何尺寸的屏幕上(从最小的手机直至最宽的桌面显示器)轻松浏览和使用。

最简单的解释方式是比较响应式网站与非响应式网站,并看看这两种类型的网站在智能手机上的浏览效果。

想象你正使用你的智能手机浏览一个固定宽度的网站,即一个被设计成总是以一个固定的宽度(比如 960 个像素)来显示的站点。你将看到整个网站就如同它在你的桌面显示器上显现的一样,但它最初以一个微小的尺寸进行显示,以适应屏幕。你频繁地放大和缩小它,以便阅读文字和浏览网站,如图 1-1 所示。这需要许多额外的操作。

图书网:学习响应式设计pdf

继续阅读

→→→→→→→→→→→→→→→→→→→→查找获取

程序设计

重构 改善既有代码的设计(中文版)pdf

《重构:改善既有代码的设计》(中文版)所提的这些重构准则将帮助你一次一小步地修改你的代码,这就减少了过程中的风险。很快你就会把这些重构准则和其名称加入自己的开发词典中,并且朗朗上口...
程序设计

数据结构 C语言版 第2版pdf

适读人群 :普通高校电子信息大类本科生学习、考研,同时也适合零售和培训。 采用“案例驱动”的编写模式。书中结合实际应用,将各章按照“案例引入——数据结构及其操作——案例分析与实现”...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: