具体描述
《写给程序员的Web设计书》系统而深入地阐释了网站的设计与实现，帮助读者从开发人员的角度理解什么是设计。通读《写给程序员的Web设计书》之后，读者可以跨越纯视觉思考者和纯线性思考者之间的交流鸿沟。《写给程序员的Web设计书》的主要内容有：如何挑选配色，如何选择字体，如何用Photoshop实现基本设计，如何创作Banner等页面元素，如何制作HTML和CSS模板以及如何测试设计的兼容性和可访问性等。
《写给程序员的Web设计书》适合开发人员和Web设计师研读，对于那些独立且没有设计背景的开发人员非常有用。
作者简介
Brian P. Hogan 是一名自由职业者和开发顾问。他从1995年就开始从事专业网站开发，使用ASP、PHP和Ruby开发过各种类型的网站和Web应用程序。他喜欢传授技术知识，撰写技术文章，尤其擅长网页设计和开发方面的技术
目录信息
1.1 说在前面的话 1
1.2 网页设计实战 2
1.2.1 明确要求 2
1.2.2 Photoshop 时间 3
1.2.3 代码时间 3
1.2.4 一切就绪 3
1.2.5 现实不一定总是如此美好 4
1.3 YourFoodbox.com 4
1.4 准备好了吗 4
1.5 致谢 4
第一部分 设计基础
第2 章 网页（再）设计的基础——重新设计Foodbox 8
2.1 目前的网站 8
2.2 收集需求 11
2.3 明确目的 12
2.4 从哪里入手 13
2.5 画出你的想法 13
2.5.1 一些约定俗成的布局风格 15
2.5.2 三张草图 15
2.6 挑选草图 17
2.7 小结 17
第3 章 配色 18
3.1 色彩基础 18
3.1.1 色调、饱和度和亮度 18
3.1.2 加法混色和减法混色 19
3.2 色彩环境感知 20
3.3 用颜色唤起情感 22
3.3.1 暖色 22
3.3.2 冷色 22
3.3.3 中性色 23
3.3.4 颜色和用户 24
3.4 配色方案 24
3.4.1 单色方案 25
3.4.2 相似色方案 26
3.4.3 互补色方案 27
3.4.4 分离互补色方案 28
3.5 网络安全色 29
3.6 创建配色方案 30
3.6.1 用技术法选择颜色 30
3.6.2 用自然选择法选择配色 35
3.7 选择一个方案 39
3.7.1 前景色和背景色 40
3.7.2 链接 40
3.8 小结 41
第4 章 字体和排版 42
4.1 深入字体 42
4.2 字体类别 43
4.2.1 衬线字体 43
4.2.2 无衬线字体 44
4.2.3 等宽字体 44
4.3 字体限制及应对方法 45
4.3.1 网页安全字体 45
4.3.2 图片替换 46
4.3.3 用字体栈来定义备用字体 46
4.3.4 选择备用字体 47
4.4 挑选字体 47
4.4.1 页面内容字体 48
4.4.2 标题字体 48
4.5 使用基线网格 49
4.5.1 行距 50
4.5.2 计量单位 50
4.5.3 为Foodbox 选择字体 52
4.6 小结 53
第二部分 图像设计
第5 章 为Foodbox 设计Logo 56
5.1 建立工作目录 56
5.2 Foodbox 的Logo 57
5.3 当我们需要自己设计Logo 的时候怎么办 60
5.4 小结 61
第6 章 设计样式页：页面结构 62
6.1 关于图层 62
6.2 基本结构 63
6.2.1 屏幕大小 64
6.2.2 定宽布局 65
6.2.3 设置网格 65
6.2.4 用辅助线划定区域 66
6.2.5 画出不同区域 67
6.3 放置Logo 67
6.4 用图层组组织图像 68
6.5 给Logo 加上倒影 68
6.6 页脚 69
6.7 小结 70
第7 章 设计样式页：内容相关 71
7.1 制作搜索框 71
7.2 餐谱导航标签云 72
7.3 范围潜变 73
7.4 做一个美味的摘要 74
7.5 主要内容 76
7.6 浏览器模仿 77
7.7 小结 78
第8 章 样式页上的按钮 79
8.1 制作搜索图标 79
8.1.1 创建图标背景 79
8.1.2 绘制放大镜 81
8.1.3 放置搜索图标 82
8.2 创建注册和登录按钮 82
8.2.1 添加文字 85
8.2.2 添加注册按钮 85
8.3 文字内容来了 86
8.3.1 替换掉原来的乱码 86
8.3.2 添加“最新菜谱”区 86
8.4 小结 87
第三部分 建设网站
第9 章 用HTML 做出主页 90
9.1 网页标准化 91
9.2 首页的结构 91
9.3 语义化的标签 93
9.4 主页的框架 94
9.4.1 doctype 94
9.4.2 html 标签 97
9.4.3 属性 97
9.4.4 head 和body 标签 98
9.4.5 没有闭合标签的标签 98
9.4.6 页面标题 99
9.4.7 body 标签：重头戏 100
9.5 页头 102
9.6 侧边栏 102
9.6.1 搜索表单 103
9.6.2 菜谱标签云 104
9.6.3 食材标签云 106
9.7 主要内容 108
9.7.1 意大利面图片 108
9.7.2 注册和登录按钮 109
9.7.3 最新菜谱区 110
9.8 页脚 110
9.9 验证标签 114
9.9.1 为网页开发设置Firefox 浏览器 114
9.9.2 Web Developer 工具栏 115
9.9.3 验证文档 116
9.10 HTML 5 116
9.11 小结 119
第10 章 为样式页面添砖加瓦 120
10.1 图像优化 120
10.2 处理不同格式的图像 121
10.2.1 GIF 121
10.2.2 PNG 122
10.2.3 JPEG 123
10.3 文档切片 124
10.4 创建切片 125
10.5 将Banner 导出成PNG 文件 127
10.5.1 隐藏图层 127
10.5.2 保存切片 127
10.6 导出其他图片 128
10.7 小结 129
第11 章 使用CSS 布局 130
11.1 浏览器招人厌 130
11.2 CSS 基础 131
11.2.1 选择符 131
11.2.2 声明：属性和值 132
11.2.3 关于“层叠” 133
11.3 浏览器如何解析CSS 136
11.3.1 嵌入式 136
11.3.2 style 标签 137
11.3.3 外部CSS 文件 138
11.4 创建并链接新的CSS 样式表 138
11.5 定义基本结构、页头和页脚 139
11.5.1 浏览器默认 139
11.5.2 盒模型 141
11.5.3 将内容居中 141
11.5.4 定义页头和页脚 142
11.6 将页面的单栏变成双栏 142
11.6.1 文档流 143
11.6.2 浮动 143
11.6.3 背景颜色和浮动 146
11.7 为内容加上外边距 148
11.8 主区域 148
11.8.1 主区域文字 148
11.8.2 注册按钮区域 149
11.8.3 最新菜谱 150
11.9 回到页脚 150
11.10 小结 151
第12 章 利用覆盖法替换各区域中的标题 152
12.1 什么是覆盖法 152
12.2 为覆盖做准备，调整HTML 152
12.3 覆盖文字 152
12.4 替换所有其他标题 153
12.5 替换链接 154
12.6 这种方法的缺陷 156
12.7 小结 156
第13 章 添加样式 157
13.1 设置字体和颜色 157
13.1.1 风格手册的重要性 158
13.1.2 伪类 159
13.2 标签云 160
13.3 搜索表单 160
13.4 页脚 161
13.5 清理零散的角落 161
13.5.1 去掉图片的边框 161
13.5.2 拉伸Banner 里的颜色 162
13.6 小结 163
第14 章 制作打印机友好的页面 164
14.1 准备工作 164
14.2 链接打印用样式表 164
14.3 去掉不需要的元素 165
14.4 设置外边距、宽度和字体 165
14.4.1 页面外边距 166
14.4.2 选择一个字体 166
14.4.3 加上一个分隔符 167
14.5 搞定链接 167
14.6 还要应付不习惯专有打印样式的用户 168
14.7 小结 169
第四部分 准备上线
第15 章 让网页适应IE 和其他浏览器 172
15.1 确定要支持哪些浏览器 172
15.1.1 支持浏览器 172
15.1.2 只支持某些特性 173
15.2 关于浏览器的一些数据 173
15.3 Internet Explore：你无法逃避的恶魔 174
15.4 IE7 175
15.4.1 IE 的诡异模式 176
15.4.2 XML 序言 176
15.4.3 在doctype 上方的注释 176
15.5 IE6 176
15.5.1 修复不正常的地方 177
15.5.2 解决分栏的问题 178
15.5.3 修正透明问题 178
15.5.4 修复页头图片下面的空白 179
15.6 IE8 180
15.7 其他浏览器 181
15.8 小结 183
第16 章 可访问性和可用性 184
16.1 可访问性对你来说意味着什么 184
16.2 关于可访问性的基础问题 185
16.2.1 盲人 185
16.2.2 色盲用户 189
16.2.3 有视觉缺陷的人 191
16.2.4 有听力缺陷的用户 191
16.2.5 行动障碍和没有鼠标的用户 192
16.3 包容一切 192
16.3.1 导航 193
16.3.2 处理出错信息 194
16.3.3 跨浏览器测试 194
16.4 重要的商业问题 194
16.5 改进Foodbox 网站的可访问性 195
16.5.1 添加跳转链接 195
16.5.2 屏幕阅读器和display:none 196
16.5.3 用“负位置”隐藏跳转链接 197
16.5.4 表单的标签 197
16.6 使用制表键 198
16.7 可访问性清单 200
16.8 小结 201
第17 章 制作收藏夹图标 202
17.1 创建简单的图标 202
17.2 创建收藏夹图标 202
17.3 小结 203
第18 章 搜索引擎优化 204
18.1 内容为王 204
18.1.1 “欺骗”搜索引擎 204
18.1.2 到底什么是内容 205
18.2 选择关键字 206
18.2.1 猜想他们是如何找到你的 206
18.2.2 决定你想如何被发现 206
18.2.3 看看竞争对手 206
18.2.4 添加关键字 207
18.3 完善页面内容 207
18.4 不要因为优化而忽略了用户 208
18.5 你和链接 208
18.6 到最后其实都是常识 208
18.7 小结 209
第19 章 针对移动设备的设计 210
19.1 移动用户 210
19.2 关于（很）小屏幕 211
19.3 JavaScript 212
19.4 提供移动版 212
19.4.1 移动版样式表 212
19.4.2 用户代理探测 212
19.4.3 使用子域名 213
19.5 做决定──到底要支持什么平台 213
19.5.1 在不产生重复内容的情况下制作一个镜像 214
19.5.2 调整内容 215
19.5.3 处理程序 216
19.5.4 进一步改进 218
19.6 为移动用户做重构 218
19.7 小结 219
第20 章 测试与性能优化 220
20.1 优化性能的策略 220
20.2 确定影响性能的因素 221
20.2.1 速度测试 221
20.2.2 YSlow 222
20.3 解决性能问题 222
20.3.1 设置超时报头 222
20.3.2 用ETag 改进缓存 223
20.3.3 用资源服务器分发请求 225
20.3.4 文件压缩 226
20.3.5 压缩脚本文件 226
20.4 图片优化 229
20.5 小结 230
第21 章 后续工作 231
21.1 其他页面和模板 231
21.2 高级模板 234
21.3 网格系统和CSS 框架 235
21.3.1 YUI 网格 235
21.3.2 960 网格系统 236
21.3.3 框架不是万能的 238
21.4 替换CSS 239
21.5 不要忘记为有版权的照片付钱 240
21.6 视觉效果 241
21.6.1 缩放图片 241
21.6.2 写代码 241
21.6.3 把动画放到主页上 243
21.7 多试多做 245
第22 章 推荐阅读 246
22.1 色彩资源 246
22.2 关于字体和排版的书 246
22.3 技术书籍 246
22.4 网站资源 247
参考书目 249
· · · · · · (收起)
读后感
专门讲色彩，布局还有ps部分的东西讲的还不错，特别适合入门级选手，希望下次改版能再丰富充实一下相关设计部分的内容，删除非设计领域的东西。 我手上有一本，看完了，需要的同学联系我：pengwawa@gmail.com,深圳地区。
评分p20 三色原则,首先是两种互相补充的颜色,然后再需要一种完全不相干的颜色 ===一直都是胡乱配的,没想到还有这样一种配法,虽然不一定合理,但是对我来说很有帮助 p43 字体类别 衬线字体(serif) 无衬线字体(sans-serif) 等宽字体 === 一直都见这种说法,但是不知道具体区别是什么...
评分作为一个长期做后台的老程序员，对页面设计的印象还停留在用dreamweaver画表格布局的时候。 这本书对经常做网站的前台开发来说可能很浅很入门，对我来说却是受益匪浅。http://www.kaopua.com/static/index_old.html 这是几天前我做的首页，http://www.kaopua.com/ 这是现在的...
评分p20 三色原则,首先是两种互相补充的颜色,然后再需要一种完全不相干的颜色 ===一直都是胡乱配的,没想到还有这样一种配法,虽然不一定合理,但是对我来说很有帮助 p43 字体类别 衬线字体(serif) 无衬线字体(sans-serif) 等宽字体 === 一直都见这种说法,但是不知道具体区别是什么...
评分p20 三色原则,首先是两种互相补充的颜色,然后再需要一种完全不相干的颜色 ===一直都是胡乱配的,没想到还有这样一种配法,虽然不一定合理,但是对我来说很有帮助 p43 字体类别 衬线字体(serif) 无衬线字体(sans-serif) 等宽字体 === 一直都见这种说法,但是不知道具体区别是什么...
用户评价
说实话，市面上关于前端技术的书籍汗牛充栋，但真正能静下心来认真读完的没几本，大多是泛泛而谈或者过时太快。这本书的优点在于它的“深度聚焦”。它没有试图涵盖所有框架或库的最新特性，而是把精力集中在了那些最核心、最不容易过时的基础之上——也就是Web设计的基础语言。我特别喜欢它对CSS布局演进历史的梳理，从Flexbox到Grid，作者不仅展示了如何使用，更解释了为什么我们要使用它们，背后的数学原理和设计意图是什么。这种追根溯源的学习方式，让我对布局的理解从“记住属性”升级到了“理解逻辑”。另外，书中对于现代浏览器环境的假设非常准确，比如对高DPI屏幕和视网膜显示的处理，提供的解决方案非常优雅且具有前瞻性，不是那种老旧的、需要大量Hack代码的应对方式。对于我这种追求代码整洁和技术优雅的开发者来说，这本书提供了一种构建“健壮且优雅”界面的方法论，而不是一堆零散的技巧集合。
评分我一直认为，优秀的设计是看不见的，它应该自然而然地引导用户完成任务，而这本书的精髓就在于如何让“看不见的设计”在代码中得以完美体现。我原本对“设计系统”这个概念感到有些模糊，觉得那似乎是大型公司的专属。但这本书非常接地气地讲解了如何从小处着手，构建一套属于自己的、可复用的设计规范，比如如何定义间距的比例尺、如何统一按钮的状态反馈等。它让我理解到，一致性是良好用户体验的基石，而一致性是通过严谨的代码结构和设计约束来实现的。书中对色彩理论在Web应用中的实际应用讲解得也十分精辟，不再是空泛地告诉你“要用舒服的颜色”，而是告诉你如何利用HSL或HWB色彩空间来确保你的主题色在不同背景下都能保持良好的可读性。阅读这本书的过程，就像是跟随一位经验丰富的资深设计师在我的代码库里进行一次深度的重构辅导，每一处细节的提升都带来了立竿见影的效果。
评分这本书简直是为我这种半路出家的前端开发者量身定做的救星！我之前对Web设计的理解总是停留在“能跑就行”的阶段，各种CSS布局总是让我抓耳挠腮，更别提什么响应式设计、性能优化这些高阶概念了。但这本书的讲解方式异常清晰，它没有堆砌那些晦涩难懂的理论术语，而是用一种非常直观的方式，手把手地带着你理解现代Web界面背后的设计哲学。特别是关于用户体验（UX）的那几章，对我触动很大。我以前总觉得设计是艺术家的事，跟代码没太大关系，但作者巧妙地将设计原则融入到实际的HTML和CSS结构中，让我明白一个好的界面是如何通过细微的间距、恰当的色彩对比和逻辑清晰的导航来提升用户满意度的。书中对组件化思想的阐述也非常到位，让我开始思考如何构建更具可维护性和可扩展性的样式系统，而不是写一堆“救火式”的补丁代码。这本书真正让我从一个只会“实现功能”的码农，转变为一个开始关心“用户感受”的工程师。它不仅仅是教你怎么写代码，更重要的是，它在教你如何“思考设计”。对于那些想让自己的项目看起来更专业、用起来更顺手的同行们来说，这本书绝对是案头必备的参考书。
评分我是一个沉迷于后端架构多年的老兵，对前端的视觉和交互部分一直保持着一种疏离感，觉得那些都是“表面功夫”。直到我们团队接了一个需要高度定制化前端界面的大项目，我才意识到，不懂点设计规范简直寸步难行。这本书的出现，可以说是及时雨。我特别欣赏作者对于前端性能与设计权衡的讨论。很多时候，为了追求华丽的视觉效果，我们牺牲了加载速度，这本书没有回避这个问题，反而提供了很多实用的、基于现代浏览器特性的优化技巧，比如如何科学地使用Web字体、如何处理图片懒加载，并且这些技巧都紧密地贴合着设计稿的实现需求。更让我耳目一新的是，它对无障碍设计（Accessibility）的重视程度。这通常是很多技术书籍容易忽略的角落，但作者花了大量的篇幅阐述如何通过语义化的HTML和恰当的ARIA属性，确保即便是使用屏幕阅读器的用户也能顺畅地使用我们的产品。这种前瞻性的视角，让我重新审视了自己过去对“完整产品”的定义——一个好的产品必须对所有人友好。读完后，我在代码评审中提出的反馈意见，立马显得专业和有深度多了。
评分这本书给我的最大启发是：Web设计不再是美工的事情，而是我们所有Web开发者的共同责任。过去我总是将CSS视为实现布局的工具，而这本书则将CSS提升到了“表达设计意图”的高度。我尤其欣赏作者在讲解交互状态设计时所使用的案例，那种对微动画（Micro-interactions）的细致打磨，让我明白了即便是最简单的点击反馈，如果处理得当，都能极大地提升产品的“质感”。书中关于响应式设计的部分，也摒弃了传统的“固定断点”思维，转而倡导基于内容的设计（Content-out Approach），这与我团队目前正在尝试的弹性布局理念完美契合。这种思维模式的转变，让我看清了过去一些设计决策的局限性。它成功地架设了一座桥梁，将抽象的设计美学和具体的工程实现牢牢地连接在一起，让程序员在写下每一行样式代码时，都能考虑到最终用户将如何感知和互动这个界面。这本书无疑拓宽了我作为一名软件工程师的职业视野。
评分还不错~
评分前面关于设计的部分仔细看了。后面关于html之类的东西简单翻了一下，因为早就熟悉了
评分前面关于设计的部分仔细看了。后面关于html之类的东西简单翻了一下，因为早就熟悉了
评分言过其实，一般
评分一般般，但是关于CSS的部分不错。
相关图书
本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等
© 2026 book.wenda123.org All Rights Reserved. 图书目录大全 版权所有