新書推薦:
《
积极心理学
》
售價:NT$
254.0
《
自由,不是放纵
》
售價:NT$
250.0
《
甲骨文丛书·消逝的光明:欧洲国际史,1919—1933年(套装全2册)
》
售價:NT$
1265.0
《
剑桥日本戏剧史(剑桥世界戏剧史译丛)
》
售價:NT$
918.0
《
中国高等艺术院校精品教材大系:材料的时尚表达??服装创意设计
》
售價:NT$
347.0
《
美丽与哀愁:第一次世界大战个人史
》
售價:NT$
653.0
《
国家豁免法的域外借鉴与实践建议
》
售價:NT$
857.0
《
大单元教学设计20讲
》
售價:NT$
347.0
|
編輯推薦: |
*打牢基础!涵盖初学者必须掌握的HTML5和CSS3基本知识
*设计素养!学习前端工程师不能不懂的色彩与布局知识
*主流理念!掌握当今及今后主流的响应式WEB设计知识
|
內容簡介: |
网页中的图形设计是在线内容用户体验的关键,尤其是现在的用户会使用多种设备访问网页,如智能手机、平板电脑、笔记本电脑、桌面电脑,甚至是智能电视。《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。
《响应式Web图形设计》结构整、轻松易懂,能够帮助Web设计新手快速入门,并打下坚实的基础。
|
關於作者: |
Christopher Schmitt,Heavision.com公司创始人,专注于新媒体、设计和出版。他在Web设计领域有着超过20年的经验,并著有广受好评的《HTML5经典实例》一书。
|
目錄:
|
目 录
第1章 了解HTML 1
1 1 为什么要学习HTML? 2
1 1 1 HTML使得因特网更受欢迎 2
1 1 2 学习HTML,更好地理解网页设计 2
1 1 3 学习HTML很容易 2
1 2 HTML编程基础 4
1 2 1 文本编辑器 4
1 2 2 文字处理软件不是文本编辑器 4
1 2 3 用HTML编写代码 5
1 3 构建网页 6
1 3 1 指定DOCTYPE 6
1 3 2 保存和查看页面 9
1 4 布置页面内容 10
1 4 1 HTML标题 10
1 4 2 HTML文本标签 10
1 4 3 为网站创建链接 12
1 4 4 添加title属性 12
1 4 5 网站的链接 13
1 5 总结 15
第2章 使用CSS设置样式 17
2 1 CSS来帮忙 18
2 2 初识样式 18
2 2 1 声明 18
2 2 2 选择器 19
2 2 3 更多的CSS 选择器 19
2 3 添加CSS格式 20
2 3 1 链接到CSS 21
2 3 2 内联样式 22
2 4 块和行内格式化 23
2 4 1 HTML的通用元素 24
2 4 2 伪类和伪元素 25
2 5 专门为IE写CSS 27
2 6 常规流和定位 29
2 6 1 静态文本流static 29
2 6 2 固定定位fixed 29
2 6 3 相对定位relative 29
2 6 4 绝对定位absolute 30
2 7 总结 33
第3章 网页排版 35
3 1 网页字体 36
3 1 1 size属性和值 38
3 1 2 那么,你应该使用什么测量值呢? 39
3 1 3 粗细、样式、变形和修饰 40
3 2 网页安全字体实践 42
3 2 1 网页安全字体 42
3 2 2 移动安全字体 43
3 3 制作更好的字体栈 44
3 4 网页中的“Real Fonts” 45
3 4 1 @font-face属性 46
3 4 2 生成嵌入文件 47
3 4 3 免费字体 48
3 4 4 商业字体 50
3 5 总结 53
第4章 网页设计中的挑战 55
4 1 网络环境 56
4 1 1 揭示浏览器问题 56
4 1 2 使用测试页 58
4 1 3 颜色 58
4 1 4 屏幕和像素 59
4 1 5 可访问性 59
4 2 决定你的跨浏览器目标 61
4 3 针对不同设备开发网站 65
4 3 1 重置和标准化浏览器样式 65
4 3 2 特殊前缀 67
4 3 3 检验 68
4 3 4 测试 70
4 4 总结 71
第5章 网页中的颜色 73
5 1 网页颜色编码 74
5 1 1 十六进制颜色标记 74
5 1 2 重写HTML的默认颜色 74
5 1 3 图像边框 75
5 1 4 带透明度的CSS颜色 76
5 2 颜色属性 76
5 3 原色系统 77
5 4 颜色组合 78
5 5 构建配色方案 79
5 5 1 寻找基色 79
5 5 2 文化与颜色 81
5 5 3 浏览颜色的启示 82
5 5 4 构思方案 84
5 6 一致的颜色 85
5 6 1 校正颜色 86
5 6 2 拾取颜色 86
5 7 CSS颜色表 86
5 8 总结 91
第6章 网站图像 93
6 1 位数的问题 94
6 1 1 像素深度 94
6 1 2 色调分离和抖动 94
6 1 3 更多位意味着更多颜色 94
6 1 4 为什么位深度如此重要? 95
6 2 光栅图像格式 97
6 2 1 GIF图像格式 97
6 2 2 JPEG图像格式 98
6 2 3 PNG图像格式 99
6 3 图像压缩表 100
6 4 SVG:网页中的矢量文件 106
6 5 总结 107
第7章 为网页创建图像 109
7 1 使用Illustrator 110
7 1 1 为网页设置工作区 110
7 1 2 设置文档尺寸 111
7 1 3 导出光栅图像 114
7 1 4 使用Illustrator导出矢量图像 116
7 2 使用Photoshop 117
7 2 1 新建文档 117
7 2 2 导出光栅图像 117
7 3 管理Web图像文件 118
7 4 减小文件尺寸 119
7 4 1 压缩光栅图像 119
7 4 2 使用HTTP压缩 120
7 5 总结 123
第8章 透明度和阴影 125
8 1 使用GIF图像创造透明度 126
8 1 1 杂边 127
8 2 PNG半透明图像 128
8 2 1 8位PNG 128
8 2 2 24位PNG 129
8 3 CSS透明度 129
8 3 1 圆角 130
8 3 2 图像蒙版 130
8 3 3 元素透明 131
8 3 4 背景色透明度 132
8 3 5 文本阴影 132
8 3 6 3D文本阴影 133
8 3 7 盒阴影 133
8 4 总结 135
第9章 收藏夹图标和移动书签 137
9 1 收藏夹图标在哪里 138
9 2 收藏夹图标的图像格式 139
9 3 将收藏夹图标插入到网站中 139
9 3 1 为子网站设定收藏夹图标 139
9 3 2 推广收藏夹图标 140
9 4 为网页创建收藏夹图标 140
9 5 移动书签 144
9 5 1 文件格式 144
9 5 2 命名规范 144
9 5 3 自动图像处理 145
9 5 4 插入图标 145
9 6 混合收藏夹图标与移动书签 146
9 7 总结 147
第10章 列表和图标字体 149
10 1 无序列表 150
10 1 1 CSS项目符号图标 150
10 1 2 插入定制图标 151
10 2 定义列表 151
10 3 有序列表 152
10 3 1 改变顺序 153
10 3 2 设置目录 153
10 3 3 添加有序标记的另一种写法 154
10 4 高效列表设计 156
10 5 图标字体 158
10 5 1 选择一种图标字体 159
10 5 2 突出字符或者短语 160
10 5 3 创建可点击的单独图标 161
10 6 总结 163
第11章 图像映射 165
11 1 创造图像映射 166
11 1 1 基础的手工编码 166
11 1 2 使用Fireworks 168
11 2 响应式图像映射 170
11 3 总结 171
第12章 页面布局 173
12 1 CSS浮动 174
12 1 1 float属性 174
12 1 2 多重浮动 175
12 1 3 clear属性 175
12 2 浮动页面布局 176
12 2 1 页面结构 176
12 2 2 两栏流式布局 178
12 2 3 两栏固定布局 179
12 2 4 三栏流式布局 181
12 2 5 三栏固定布局 182
12 2 6 使用浮动布局的优缺点 184
12 3 CSS框架 184
12 3 1 网格系统 184
12 3 2 最后看看框架 187
12 4 响应式布局 188
12 4 1 适应媒体查询 189
12 4 2 流式布局 190
12 4 3 文本回流 192
12 4 4 媒体查询实战 193
12 4 5 响应式框架 199
12 5 总结 199
第13章 响应Web设计中的图像 201
13 1 缩放图像和媒体 202
13 2 缩放图像带来的问题 202
13 2 1 大尺寸图像 203
13 2 2 更大尺寸的图像 203
13 2 3 把网速考虑进来 204
13 3 自适应图像解决方案 204
13 3 1 另寻他法 204
13 3 2 压缩Retina图像 205
13 4 多图像解决方案 208
13 4 1 picture元素 208
13 4 2 srcset属性 209
13 4 3 使用图像补丁脚本 210
13 5 总结 217
第14章 对齐图像 219
14 1 图像与文本的对齐 220
14 1 1 baseline 220
14 1 2 text-bottom 220
14 1 3 text-top 221
14 1 4 top和bottom 221
14 1 5 middle 222
14 2 在浏览器窗口中居中图像 222
14 2 1 使用CSS 设置背景 222
14 2 2 仅用CSS 223
14 2 3 幸亏有jQuery,我们不用把数字写死了 224
14 3 在浏览器中伸展图像 225
14 4 总结 226
|
|