响应式Web图形设计

出版者:人民邮电出版社

作者:Christopher Schmitt

页数:0

译者:曾斌

价格:0

isbn号码:9787115347763

具体描述

网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以创建响应式Web的角度，介绍了基础的HTML和CSS语法，并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。

《响应式Web图形设计》结构整、轻松易懂，能够帮助Web设计新手快速入门，并打下坚实的基础。

目录信息

第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
· · · · · · (收起)

读后感

全彩印刷，HTML5&CSS3基础知识+现代设计精髓理念，帮你掌握跨平台设计的秘密！ 精美彩色印刷 　网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以...

全彩印刷，HTML5&CSS3基础知识+现代设计精髓理念，帮你掌握跨平台设计的秘密！ 精美彩色印刷 　网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以...

全彩印刷，HTML5&CSS3基础知识+现代设计精髓理念，帮你掌握跨平台设计的秘密！ 精美彩色印刷 　网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以...

全彩印刷，HTML5&CSS3基础知识+现代设计精髓理念，帮你掌握跨平台设计的秘密！ 精美彩色印刷 　网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以...

全彩印刷，HTML5&CSS3基础知识+现代设计精髓理念，帮你掌握跨平台设计的秘密！ 精美彩色印刷 　网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。《响应式Web图形设计》以...

用户评价

这本书给我的感觉就像是请了一位经验丰富的导师，一步步地引导我跨越响应式Web图形设计的门槛。它最让我欣赏的一点是，并没有一开始就抛出一堆晦涩难懂的概念，而是从基础讲起，循序渐进。首先，它清晰地解释了响应式设计的核心理念，以及为什么在图形层面需要特别关注。然后，它系统地介绍了各种在响应式环境中处理图形的方法，从矢量图的优劣势分析，到位图的适配策略，都讲得非常透彻。我特别受启发的是关于“流式布局”和“断点”的概念在图形设计中的应用，这本书并没有停留在理论层面，而是通过大量的代码示例和设计图，展示了如何根据不同的设备宽度来调整图片的大小、裁剪方式，甚至完全替换图片。还有一个让我在实践中受益匪浅的部分，是关于“艺术指导”的理念，如何在保持整体设计风格一致性的前提下，为不同屏幕尺寸提供最佳的视觉呈现。书里讲解的那些“视口单位”（vw, vh）在图形排版中的应用，以及如何结合CSS媒体查询来控制元素的尺寸和位置，让我对如何创建真正“智能”响应的图形有了全新的认识。总的来说，这本书为我打开了一扇新的大门，让我能够更自信、更高效地应对各种响应式Web图形的设计挑战。

这本书的讲解风格非常清晰，而且逻辑性很强，一点也不枯燥。我之前以为响应式图形设计只是一些简单的尺寸调整，但读完这本书才发现，原来里面学问这么深。它详细地讲解了如何在HTML结构和CSS样式中实现响应式图形的灵活布局。特别是关于CSS Grid和Flexbox在处理图形元素时如何与媒体查询相结合，我学到了很多实用的技巧。书里还涉及到了一些进阶的主题，比如如何利用JavaScript来动态加载和调整图片，以应对更复杂的响应式场景。我觉得最棒的一点是，它没有仅仅停留在理论讲解，而是提供了大量实际项目的代码示例，让我能够直接上手实践，并且可以根据自己的项目需求进行调整。这本书还对各种响应式图像格式的优缺点进行了深入的比较，并给出了最佳实践建议，这对于避免在实际开发中走弯路非常有帮助。我特别喜欢其中关于“渐进增强”的思想在图形设计中的应用，如何在基础设备上提供可用的图形，而在更强大的设备上则提供更丰富的视觉体验。这本书无疑为我打开了新的视野，让我能够更从容地应对各种复杂的响应式Web图形设计需求。

这本书的出版，简直就是给那些还在为如何在不同设备上展示精美又实用网页图形而苦恼的开发者和设计师们送来了一场及时雨。我一直觉得，响应式设计固然重要，但一旦涉及到图形，就容易变得复杂，甚至牺牲掉视觉效果。这本书从一开始就抓住了这个痛点，它没有回避那些棘手的问题，而是直接提供了解决方案。它深入浅出地讲解了如何理解和应用各种响应式图形的技术，比如可伸缩矢量图形（SVG）的优势，以及如何在不同的屏幕尺寸和分辨率下保持图形的清晰度和美观。我特别喜欢其中关于图片优化和加载策略的部分，这不仅仅是技术层面的讲解，更包含了许多实操性的建议，比如如何利用srcset和sizes属性，如何考虑图片格式（JPEG、PNG、WebP等）的选择，以及如何在保证质量的同时，最大限度地减少加载时间，从而提升用户体验。书中的案例分析也非常有启发性，它展示了如何将这些理论知识转化为实际的设计，让我们可以看到真实的网页设计是如何一步步构建出既美观又适应各种设备的图形元素。总而言之，如果你想在响应式网页设计领域更进一步，尤其是在图形表现力方面有所突破，这本书绝对是值得你花时间去研读的。它带来的不仅是知识，更是解决问题的信心和创新的灵感，让我觉得之前的很多尝试都变得豁然开朗。

这本书的出现，对于我们这些长期在Web前端摸爬滚打的人来说，无疑是一次重要的知识更新。它并没有罗列一些陈旧的知识点，而是紧跟行业发展的步伐，将响应式Web图形设计中最前沿、最实用的技术一网打尽。我尤其欣赏它在讲解过程中所展现出的深度和广度，不仅仅是停留在基础的概念上，而是深入到每一个技术细节的原理和应用。例如，在讲解图片响应式处理时，它不仅提到了 srcset和sizes属性，还深入探讨了如何通过更精细的媒体查询来控制图片在不同视口下的表现，甚至是利用CSS滤镜和混合模式来创造动态效果。书中的案例分析更是精彩，它通过真实的网站设计案例，向我们展示了如何将这些先进的技术巧妙地融入到实际的设计流程中，从而创造出既美观又具有高度适应性的网页图形。我尤其受益于书中关于“内容感知”的讲解，如何在不同屏幕尺寸下，智能地为用户呈现最适合的内容，而不是简单地进行缩放或裁剪。总而言之，这本书为我提供了解决当前Web开发中诸多挑战的有力武器，让我能够以更专业、更创新的方式来应对响应式Web图形设计带来的各种需求。

我拿到这本书时，正值我对如何让网页上的图片在不同设备上都看起来不失真、不模糊而感到头疼。读了这本书后，感觉像是找到了救星。它非常直观地展示了各种响应式图形技术的实际应用，尤其是对SVG的运用，这本书简直是把SVG的潜力发挥到了极致。我之前对SVG的理解仅仅停留在简单的图标，但这本书让我看到了它在复杂图形、插画，甚至动画方面的巨大价值，而且重点在于如何让这些SVG在不同分辨率下依然保持矢量的优势，不会出现像素化的问题。书中的内容不仅仅是告诉你“怎么做”，更重要的是解释了“为什么这样做”，比如它会详细分析不同图片格式在响应式设计中的适用场景，以及如何在服务器端和客户端进行优化，以达到最佳的性能表现。我印象最深刻的是关于“视网膜屏”的适配策略，以及如何利用CSS来动态地调整图片的大小和显示方式，让用户无论在手机、平板还是桌面电脑上，都能享受到高质量的视觉体验。这本书还提供了一些关于如何进行性能测试和优化的实用技巧，这对于提升网页的整体加载速度和用户满意度至关重要。总体而言，这是一本非常务实的书，对于任何希望在响应式设计中提升图形表现力的开发者和设计师来说，都具有极高的参考价值。

很基础

书把前端很多地方都介绍到了，而且配有大量图，看的也不费力，适合初学者或闲暇时不错的读物

很基础

书把前端很多地方都介绍到了，而且配有大量图，看的也不费力，适合初学者或闲暇时不错的读物

在众多Web入门书中，这本小书的特色在于从整体着眼“基本概念”，而非侧重编程或设计的基本概念，因此会谈到可访问性、配色、图片处理、图标字体、用于印刷的CSS设置等其他技术类书籍较少触及的话题。全书彩印，比较精美。