具体描述
本书将指导您采用标准设计策略来满足以各种方式浏览网页的各类用户的需要。每章首先列举一个沿用传统HTML技术的实例,然后指出该实例的局限性,并利用XHTML和CSS对其进行重构。从中您将学会如何用简洁高效的HTML标记和CSS来取代臃肿的代码,从而创建加载速度极快、能供所有用户使用的网站。本书最后将前面各章讨论的所有页面组件珠联璧合地结合在一起,制作了一个页面模板。这一版全面润色和更新了上一版本,介绍了CSS 3和HTML 5方法,并重新设计了“新响应设计”等多个案例。
作者简介
Dan Cederholm是一位蜚声业界的Web设计师、作家和技术演讲人,在基于标准的Web设计领域享有盛誉。Dan自己开办了SimpleBits LLC设计公司,并曾帮助YouTube、Microsoft、Google、MTV、ESPN、Electronic Arts、Blogger、Magazine和Fast Company, Inc.等知名公司设计网页和重构网站。Dan参与创建和设计的Dribbble社区鼓励设计师们分享“手头工作”,在业界引起了极大反响,好评如潮。Dan此前曾撰写畅销书CSS3 For Web Designers and Handcrafted CSS: More Bulletproof Web Design。Dan现与妻儿居住在美国马萨诸塞州,在业余时间,他喜欢弹奏班卓琴,也喜欢打棒球。
目录信息
11 常见的方法3
12 为什么这样设计不是无懈可击的4
13 权衡我们的选择6
131 长度单位6
132 表示“相对大小”的关键字6
133 百分比值7
134 表示“绝对大小”的关键字7
14 无懈可击的方法7
141 关键字8
142 放弃像素级别的精确度8
15 为什么这样设计是无懈可击的9
16 接下来的操作9
161 设置基准值9
162 使用百分比值来获取不同的尺寸10
17 结合使用关键字和百分比值13
171 设定一个中间的关键字基准值13
172 慎用嵌套百分比值15
173 百分比值的一致性试验17
18 通过em实现灵活的文字18
19 rem单位19
110 本章小结21
第2章 可伸缩的导航栏23
21 常见的方法24
211 功能强大的选项卡25
目 录
X 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
212 通常的翻转效果 26
22 为什么这样设计不是无懈可击的 26
221 堆积如山的代码 26
222 不方便使用 27
223 可伸缩性的问题 27
224 不够灵活 27
23 无懈可击的方法 27
231 无样式的导航列表 29
232 两幅小图片 29
233 应用样式 30
234 采用浮动来解决问题 31
235 为选项卡定形 32
236 对齐背景图片 32
237 增加底边 34
238 悬停变换 35
239 选中状态35
24 为什么这样设计是无懈可击的 36
25 使用CSS 3渐变而不使用图片实现 37
26 通过em来实现 40
27 其他示例 42
271 MOZILLAORG 42
272 斜杠 43
273 ESPNCOM的搜索栏 43
28 本章小结 45
第3章 可扩展的行47
31 常见的方法 48
32 为什么这样设计不是无懈可击的 50
321 非必要的图片 50
322 固定的行高 50
323 臃肿的代码 51
33 无懈可击的方法 51
331 HTML 代码结构 51
目 录XI
332 标识出各部分 52
333 没有添加样式时的情形 53
334 添加背景 54
335 安排内容的位置 54
336 消失的背景 55
337 添加更多细节 56
338 四个圆角 58
339 文本和链接的细节 60
3310 最后一步 62
3311 针对IE7进行的修改63
34 为什么这样设计是无懈可击的 64
341 代码结构与设计效果的分离 65
342 不再有固定不变的高度 65
35 通过border-radius实现 66
36 另一个自适应扩展例子 68
361 HTML 代码 69
362 创建两幅图片 69
363 添加 CSS 70
364 自动扩展 71
37 本章小结 72
第4章 巧妙的浮动效果73
41 常见的方法 75
42 为什么这样设计不是无懈可击的 76
43 无懈可击的方法 77
431 对HTML代码无止境的抉择 77
432 使用定义列表 78
433 HTML代码结构 79
434 没有添加样式时的情形 80
435 为外围容器添加样式 80
436 标识图片 81
437 应用基本的样式 82
438 给图片定位 86
XII 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
439 反向浮动 86
4310 为任意长度的说明文字做准备 89
4311 浮动自清除 90
4312 尾声 92
4313 切换浮动方向 94
4314 表格效果 96
4315 更换背景图片 99
4316 应用box-shadow 101
4317 其他清除浮动元素的方法 103
4318 通过生成的内容进行清除 104
44 为什么这样设计是无懈可击的 107
45 本章小结 108
第5章 牢固的方框109
51 常见的方法 111
52 为什么这样设计不是无懈可击的 113
53 无懈可击的方法 114
531 HTML 代码结构 115
532 图片策略 115
533 应用样式 117
54 为什么这样设计是无懈可击的 119
55 通过CSS 3实现 120
56 其他圆角实现技术 124
57 框提示 132
571 单圆角 132
572 圆角提示 135
573 无懈可击的箭头 136
574 CSS 中的限制孕育了技术上的创新 137
58 本章小结 138
第6章 页面在缺失图片或CSS的情况下仍然易读139
61 常见的方法 140
62 为什么这样设计不是无懈可击的 143
目 录XIII
63 无懈可击的方法 144
64 为什么这样设计是无懈可击的 146
65 使用样式或禁用样式 148
66 常见的方法 149
67 无懈可击的方法 150
68 Dig Dug 测试 152
69 无懈可击的工具 153
691 Favelet 154
692 Web Developer Extension 156
693 Web Accessibility 工具栏 158
694 Firebug 158
695 将验证作为一种工具 159
610 本章小结 162
第7章 可转换的表格 163
71 常见的方法 164
72 为什么这样设计不是无懈可击的 166
73 无懈可击的方法 167
731 HTML 代码结构 168
732 应用样式 174
74 为什么这样设计是无懈可击的 186
75 本章小结 187
第8章 流动布局和弹性布局 189
81 常见的方法 190
82 为什么这样设计不是无懈可击的 192
821 大量的代码 192
822 噩梦般的维护工作 193
823 并非最佳的内容顺序 193
83 无懈可击的方法 194
831 HTML 代码结构 194
832 创建栏:浮动与定位 195
833 应用样式 197
XIV 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
834 gutter 201
835 栏的内边距 203
836 设置宽度的最大值和最小值 209
837 滑动人造栏 213
838 三栏布局 216
84 为什么这样设计是无懈可击的 223
85 基于em的布局 224
851 一个弹性布局的例子 224
852 HTML 代码 226
853 CSS 228
854 一致性是最理想的 230
855 注意滚动条 230
86 本章小结 231
第9章 构成一个整体 233
91 目标 234
92 为什么这样设计是无懈可击的 235
921 流动的布局 236
922 灵活的文字 237
923 即使没有图片和CSS也可以使用页面 238
924 国际化 240
93 构建过程 240
931 HTML 代码结构 241
932 基本样式 242
933 布局结构 242
934 灵活的网格 244
935 设置max-width 244
936 页头 247
937 灵活的图片 249
938 侧边栏 251
939 CSS 3的多栏布局 255
9310 媒体查询的魔力 256
94 本章小结 264附录D Excel快捷键 745
· · · · · · (收起)
读后感
他不是一本让你从入门到精通的书,但他却是一本让你从初级前端设计师变为高级设计师的一本书。他带给你的是一种思考方式的提升。所以在阅读本书的时候,你至少有一定的实战经验,这样可以让你发现你之前一些代码习惯可能并不是最无懈可击的,而通过你本次的阅读和自行的...
一个网站,无论看起来有多漂亮或者内容有多丰富,如果它不能适应各种各样的浏览情况,不能面向尽可能广泛的用户群,那它就不算是真正成功的。在《无懈可击的Web设计——利用XHTML和CSS提高网站的灵活性和适应性(第2版》一书中,作者,著名 Web 设计师 Dan Cederholm 讲述了若...
读过这本书,学校图书馆就有,纸质特好,读起来很舒服。重点是它讲的道理都深入浅出,给人深刻印象,让我收获很大。很喜欢。
Web设计, 注重从全局考虑设计,从用户角度考虑操作流程, 精于细节设计, 不断的提高网站的交互性, (对于交互,用户永远不会满足的)
用户评价
这本书在前端性能优化方面的内容,着实让我吃了一惊。之前我对前端性能优化的理解,仅仅停留在压缩图片和合并CSS/JS文件这些基础操作。但这本书的讲解,让我意识到性能优化是一个系统工程,涉及到方方面面。作者从CDN的使用、浏览器缓存策略、代码的懒加载和预加载,到如何优化图片格式和尺寸,再到JavaScript和CSS的性能瓶颈分析,都进行了非常深入的剖析。他不仅仅是告诉我们“做什么”,更重要的是解释了“为什么这么做”,以及“这样做会带来什么效果”。书中提供的各种性能测试工具的介绍和使用方法,也让我能够量化自己的网站性能,并找到具体的改进方向。我尤其喜欢其中关于“关键渲染路径”的讲解,让我明白了浏览器是如何解析和渲染网页的,以及如何通过优化这个过程来缩短页面加载时间。现在,我的网站加载速度有了显著的提升,用户的留存率也随之增加,这真是让我感到无比欣慰。这本书让我摆脱了“闷头苦干”的优化模式,学会了科学、系统地提升网站性能,让用户体验更上一层楼。
我一直觉得,一个成功的Web设计,不仅仅是好看,更重要的是它能够有效地传达信息,并且吸引用户采取行动。这本书在这方面的内容,让我感觉醍醐灌顶。它深入探讨了信息架构和用户流程设计,教我如何清晰地组织网站内容,让用户能够快速找到他们需要的信息。书中关于如何设计清晰的导航,如何利用CTA(Call to Action)按钮来引导用户完成目标,以及如何通过用户行为分析来不断优化网站的转化率,这些内容对我来说非常有价值。我过去往往会忽略用户行为分析的重要性,而这本书让我认识到,数据才是检验设计效果的最好标准。它提供了一些关于A/B测试和用户访谈的实用方法,让我能够真正站在用户的角度去思考问题,并不断迭代和改进我的设计。书中一些关于如何利用心理学原理来提升用户参与度的技巧,也让我耳目一新。现在,我不再仅仅是“做”设计,而是更懂得如何“用”设计去解决实际问题,实现商业目标。
这本书对于理解Web设计中的可访问性(Accessibility)和搜索引擎优化(SEO)的结合,简直是打开了一个全新的维度。我之前一直觉得这两者是相对独立的,甚至有时候会觉得它们之间存在矛盾。但这本书巧妙地将两者融合在一起,让我明白一个好的Web设计,必然是兼顾了用户体验、技术实现和搜索引擎友好性。它详细讲解了如何设计符合WCAG标准的可访问性页面,这不仅仅是为了遵守规定,更是为了让更多的人能够平等地访问和使用我的网站。作者还深入分析了SEO的各个方面,从关键词研究、内容优化,到技术SEO,再到外部链接建设,都给出了非常具体和实用的建议。更让我惊喜的是,书中还强调了可访问性设计对SEO的积极影响,例如良好的语义化HTML结构,清晰的导航,以及为图片添加alt文本,这些都能极大地提升网站在搜索引擎中的排名。这本书让我意识到,一个真正“无懈可击”的Web设计,必须是面向所有用户的,并且能够被搜索引擎友好地抓取和理解。
这本书真是太棒了!我最近刚读完,简直停不下来。书里关于响应式设计的讲解,比我之前看的任何教程都要清晰透彻。它不仅解释了为什么响应式设计如此重要,还一步一步地教我如何实现。书中大量的代码示例,都是可以直接拿来用的,而且都有详细的注释,让我能理解每行代码的作用。最让我印象深刻的是,作者并没有仅仅停留在技术层面,而是深入探讨了用户体验在响应式设计中的核心地位。他用很多真实的案例,展示了不同的屏幕尺寸和设备如何影响用户的使用习惯,以及如何通过巧妙的布局和交互设计来优化用户体验。我尤其喜欢其中关于“移动优先”策略的那一部分,让我彻底改变了过去的设计思路。之前我总是习惯于先设计桌面版,再慢慢适配移动端,这本书让我认识到这种方式的弊端,并且学会了如何从一开始就为移动设备考虑,再逐步扩展到更大的屏幕。而且,书中的一些关于视差滚动和微交互的技巧,让我眼前一亮,学到了很多让网站“活起来”的方法,用户反馈也明显好多了。总而言之,如果你想提升自己的Web设计技能,尤其是对响应式设计感到困惑,这本书绝对是你的不二之选。
我必须说,这本书的视觉设计部分简直是打开了我新的大门。作为一名设计师,我一直觉得自己在色彩搭配和排版上总觉得差点意思,这本书就像一位经验丰富的导师,手把手地教我如何构建一个既美观又实用的界面。它详细讲解了色彩理论在Web设计中的应用,不是那种枯燥的理论讲解,而是通过大量的优秀网站案例,让我直观地感受到不同色彩组合所带来的情感和视觉冲击。作者还花了很大篇幅来谈论字体选择和排版,这部分的内容让我受益匪浅。我之前总觉得随便挑个好看的字体就行了,但这本书让我明白,字体的选择、字号的大小、行高的调整,甚至是字母之间的间距,都会对用户的阅读体验产生巨大的影响。书中提供的一些字体搭配建议,还有关于如何利用排版来引导用户的视线,这些实用的技巧我立刻就在自己的项目中尝试了,效果立竿见影。而且,它还分享了一些关于留白艺术的智慧,让我明白了“少即是多”的道理,如何通过巧妙的留白来突出重点,提升页面的呼吸感。读完这本书,我感觉自己对“美”有了更深的理解,不仅仅是视觉上的,更是从用户体验的角度去理解设计之美。
本书将指导您采用标准设计策略来满足以各种方式浏览网页的各类用户的需要。每章首先列举一个沿用传统HTML技术的实例,然后指出该实例的局限性,并利用XHTML和CSS对其进行重构。从中您将学会如何用简洁高效的HTML标记和CSS来取代臃肿的代码,从而创建加载速度极快、能供所有用户使用的网站。本书最后将前面各章讨论的所有页面组件珠联璧合地结合在一起,制作了一个页面模板。这一版全面润色和更新了上一版本,介绍了CSS 3和HTML 5方法,并重新设计了“新响应设计”等多个案例。
Gradient app/border-radius.com really improve ur html css skills a lot if you are a green hand.
顶新版,重新学习写网页
Gradient app/border-radius.com really improve ur html css skills a lot if you are a green hand.
Gradient app/border-radius.com really improve ur html css skills a lot if you are a green hand.