写给程序员的Web设计书

第1章 引言 1

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

《写给程序员的Web设计书》会开发，也要懂设计，领悟先进的Web设计理念，让你的网站煜煜生辉。Web设计常常面对着一个很大的挑战，它需要结合设计人员与程序员的思维。要跨越纯视觉思考者和纯线性思考者之间的交流鸿沟。现实世界中。很多网站就是程序员设计的作品。如何让程序员拥有设计者的视角，了解配色、字体、页面布局等知识，并熟悉相关技术和设计工具，是《写给程序员的Web设计书》重点讲述的内容。《写给程序员的Web设计书》字里行间融汇了先进的Web设计思想，让开发人员得以避免网页设计误区。真正提高设计能力。开发出爽心悦目的网站。 《写给程序员的Web设计书》系统而深入地阐释了网站的设计与实现，帮助读者从开发人员的角度理解什么是设计。通读《写给程序员的Web设计书》之后，读者可以跨越纯视觉思考者和纯线性思考者之间的交流鸿沟。《写给程序员的Web设计书》的主要内容有：如何挑选配色，如何选择字体，如何用Photoshop实现基本设计，如何创作Banner等页面元素，如何制作HTML和CSS模板以及如何测试设计的兼容性和可访问性等。《写给程序员的Web设计书》适合开发人员和Web设计师研读，对于那些独立且没有设计背景的开发人员非常有用。【作者简介】作者：（美国）霍根（Brian P. Hogan） 译者：吴珂霍根，Brian P. Hogan，是一名自由职业者和开发顾问。他从1995年就开始从事专业网站开发，使用ASP、PHP和Ruby开发过各种类型的网站和Web应用程序。他喜欢传授技术知识，撰写技术文章，尤其擅长网页设计和开发方面的技术。