前言 1
第1篇 如何选择字体 11
第1章 11
分解与易读性：字体易读吗 11
是什么让字体易读 11
对比Georgia与Helvetica 11
对比更多字体 13
课程1 在线比较字体 16
在Typetester上比较字体 16
写下你所看到的 16
在Typeteste r上设置字号 17
理解HTM L、CSS、Web服务器、浏览器及个人电脑是如何合作的 17
HTM L 17
CSS 17
浏览器 18
个人电脑与字体 18
继续前进 19
第2章息 21
审美与情感：字体是否承载了正确的信息 21
选择有恰当美学或者情感关联的字体 21
衬线字体给人以传统感觉，无衬线字体给人以现代感 22
与格式打交道 23
课程2文字的含义 25
表达同一单词的不同含义 25
写下你所看到的 26
编写你的首个HTML与CSS文件 26
命名规范 26
组织文件 26
编写HTML文件 27
DOCTYPE与DTD 27
标签 28
Head、Title和Body元素 28
编写CSS文件 30
描述元素 30
创建一个div 32
继续前进 35
第3章 37
对比度、字形及字符：这个字体能胜任吗 37
粗体中应该关注什么 37
斜体中应该关注什么 38
选择字体时还要考虑什么 39
如果单个字体无法达到想要的所有效果，怎么办 40
课程3一篇参考书目短文（第1部分） 42
使用单一字体创建一篇参考书目 42
写下你所看到的 43
使用HTML与CSS设计参考书目 43
编写HTML文件 43
编写CSS文件 44
改进版式设计 46
通过创建class来将标题设为斜体 48
继续前进 49
第4章 51
搭配两种字体 51
装饰字体：使用第二字体 51
确定你需要什么样的第二字体 51
考虑一致性与对比度 51
正文字体：使用第二字体 53
确定你需要什么样的正文第二字体 53
考虑平衡性与延续性 53
关于本章中使用的字体 55
课程4一篇参考书目短文（第2部分） 56
为标题设置装饰字体 56
使用你为标题挑选的字体 56
写下你所看到的 57
使用＠font-face与字体栈 57
理解＠font-face 57
法律问题：链入并非嵌入 57
技术问题：不同浏览器使用不同的字体格式 57
选择字体 58
构造字体栈 60
继续前进 62
插曲1 节奏与张力 65
第5章 65
版式布局中的节奏与张力 65
重复与对位 65
焦点 66
构造强调竖线 67
空间张力 69
课程5 A代表Alignment 72
课程概览 72
创造动态构图（第1部分） 73
编写HTML文件 73
编写CSS文件 74
添加并描绘区块（容器） 74
添加内容并定义元素 79
升华版式 80
创造动态构图（第2部分） 82
利用图片将字母A作为背景 82
增加类选择器，创造正文的对位 84
继续前进 85
第2篇 如何设计版式：带着目的浏览 89
第6章 89
我们的阅读方式（第1部分） 89
字号 89
行高 90
行宽 91
对齐 93
颜色（黑／白） 95
课程6系列电影（第1部分） 96
课程概览 97
创建系列电影页面 98
编写HTML文件 98
编写CSS文件 99
编写系列电影页面 102
继续前进 104
第7章 105
信息分片：竖直方向的分隔（spacing）与邻近（proximity） 105
基础分隔：段落 106
构造竖直分隔体系 106
课程7系列电影（第2部分） 110
课程概览 110
开发竖直分隔体系 111
确定并套用竖直分隔层级 111
理解边距叠加 112
优化竖直分隔 112
继续前进 114
第8章 115
利用标题将信息分片：层次结构与相似性 115
层次结构 115
层次结构和相似性 117
课程8系列电影（第3部分） 120
课程概览 120
创建标题体系 121
确定并套用层次体系 121
如有必要，返回调整 122
继续前进 124
第9章 125
处理版式细节 125
添加第二字体 125
运用分割线 126
数字和缩写词 127
处理标点符号 127
引号 127
单折号和双折号 128
避免寡行和孤行 129
课程9系列电影（第4部分） 131
课程概览 131
照顾版式设计细节 132
从FontSequirrelcom下载字体 132
在CSS文件里描述＠font-face 133
标识需要修改的地方 134
再次检查作品 138
继续前进 140
插曲2列表式信息 143
第10章 143
列表信息的版式处理方式 143
易读性 143
相近性 143
相似性 144
读者的阅读方式 144
分割线 144
数字 145
课程10 Martha的葡萄园轮渡时间表 147
课程概览 147
通过＜table＞＜tr＞＜td＞组织表格 148
编写HTML文件 148
编写CSS文件 148
构建轮渡时间表页面 148
构建表格 149
找出问题 152
找出新问题 157
重构表格周围的构图 157
继续前进 159
第3篇 版式运用：休闲阅读与持续阅读 163
第11章 163
我们的阅读方式（第2部分） 163
大小写 163
风格 164
字重 165
颜色 165
创造多样的文本风格 167
文本中的常见元素 167
多样的文本风格帮助定义元素 167
元素风格同样关乎网站带给人带来的感觉 167
课程11食谱（第1部分） 169
课程概览 170
将色彩、图片和列表结合起来 170
编写HTM L文件 170
编写CSS文件 171
开始添加内容 171
拆分文本才能看到元素 172
将信息分块 173
创建并定义食材列表 173
将烹饪原料的div容器变得窄一些 175
创建并定义主导航列表 177
为每个文本元素设置符合其自身语意的风格 179
继续前进 181
第12章 183
表达结构和韵律：栅格 183
模块化的栅格与文本 183
网页栅格与阅读 184
如何建立栅格 186
从文本需求出发 186
手动完成实体元素块的排布 186
使用图片处理软件来排布页面元素 187
乐于修改元素 187
为最佳布局手工着色 188
草图比以往更重要 188
课程12食谱（第2部分） 190
课程概览 191
探索栅格并记录过程 191
建立栅格 191
使用嵌套的div元素来创建复杂列 191
挑选你想创建的布局 191
理解列与行 192
让代码变得井井有条：CSS 中的记号 195
HTML中的记号 196
构建基础的页面结构 196
如何构建基础页面结构 197
在结构容器中摆放内容 200
重新定义内容的布局 201
如何重新排布内容 201
修复“双倍边距”bug 205
即将完成 206
继续前进 206
第13章 207
帮助读者纵览网站内容：导航 207
导航也是文本，需要具备可读性 207
点击我，我会带你前往目的地 207
读者在网页中所处的位置 208
哦，你可以去这些地方 209
你已经到过这里了 210
随时待命 210
课程13食谱（第3部分） 212
课程概览 212
链接语法与伪类选择器 213
准备开始：下载一些页面以便于链接 213
添加链接语法：主导航 213
为主导航链接增加交互性 216
创建并描述一个“You Are Here”类 217
添加链接语法：区域链接 218
为区域链接添加交互 220
创建并描述“You Are Here”类 221
添加链接语法：广告 222
继续前进 223
第14章 225
系统的跨页面应用 225
应用系统的五个原因 225
对于读者来说，系统使网站更易用 225
你已经完成了这项艰难的工作，为什么要重新再做一次 225
不同的页面感觉起来依然是整体的一部分 225
允许多人在网站上工作，且保持一致性 226
数据驱动的网站创建动态页面 226
一开始就为不同的页面进行规划 227
考虑灵活性 227
课程14食谱（第4部分） 229
课程概览 230
在多个页面中应用CSS 230
创建一个新网页 230
确认并解决问题 231
如何解决系统中的问题 231
构建剩余的食谱页 237
继续前进 238
插曲3构建字体库 241
第15章 241
构建自己的字体库 241
分类 241
五大字族 241
扩展五大字族分类体系 242
老式字体 242
过渡字体 243
现代字体／Didone 244
粗衬线字体 245
无衬线字体 246
特排字体 247
辨识优秀的Web字体 247
优秀的Web正文字体 247
优秀的Web特排字体 248
构建字体库 249
免费或者开放授权的字体 250
购买Web授权 251
订阅服务 252
课程15批判地分析字体 254
课程概览 255
查看新字体的哪些方面 255
使用Font Squirrel的Web字体 255
找到需要调整的地方 258
我是如何修复自己设计里的问题的 258
使用Google Web Fonts的Web字体 260
找到需要调整的地方 262
我是如何修复自己设计里的问题的 262
使用Typekit的Web字体 263
找到需要调整的地方 266
我是如何修复自己设计里的问题的 266
继续前进 268
第4篇 版式设计：理念风格 271
第16章 271
传统版式 271
传统版式的特点 271
传统版式有文本框 271
传统版式使用衬线字体 272
传统版式寻求平衡感 273
传统版式传达优雅感 274
排版师的角色 275
课程16以传统方式设计与制作网站 276
课程概览 277
设计过程 277
传统页面元素 277
回顾背景图片 277
编写HTML文件 277
编写CSS文件 278
添加背景图片 278
填入并准备文字 279
设计版式页面 280
链接其他课程文件夹中的文件 280
继续前进 281
第17章 283
现代主义版式 283
现代主义版式的特征 283
现代主义版式以某种构筑方式运用留白 283
现代主义版式使用无衬线字体 284
现代主义版式使用对比来突出重点 284
现代主义版式传达不对称的、鲜活的情感 284
排版师的角色 286
课程17以现代主义方式设计并实现网站 287
课程概览 288
设计过程 288
现代主义版式元素 288
修改CSS来创作新设计 288
设计版式页面 288
修改CSS即修改全部 289
继续前进 289
第18章 291
后现代主义版式 291
后现代主义版式的特征 291
后现代主义版式会把文字放到页面任何位置 291
后现代主义版式使用任意可行的字体 291
后现代主义版式使用对比来突出内容 291
后现代主义版式通过形式传达内涵 292
后现代主义版式传达结构意义 292
排版师的角色 292
课程18 用后现代主义的方式设计并实现网站 295
课程概览 296
设计过程 296
后现代主义版式元素 296
探索“烂”代码 296
设计版式页面 296
继续前进 297
附录A 299
继续前进：推荐阅读资料 299
挑选和使用字体 299
处理页面中的文本 299
开发栅格 299
版式设计历史 300
Web版式设计前沿 300
代码：CSS和颜色 300
对版式设计的情感 300
参考文献 301