前言 ...................................................................................................... 1
第1 篇　如何选择字体
第1章
分解与易读性：字体易读吗 .................................................................11
是什么让字体易读 ............................................................................................11
对比 Georgia 与 Helvetica ..................................................................................11
对比更多字体 ....................................................................................................13
课程1　在线比较字体 ......................................................................... 16
在 Typetester 上比较字体 .................................................................................16
写下你所看到的 ................................................................................................16
在 Typetester 上设置字号 .........................................................................17
理解 HTML、CSS、Web 服务器、浏览器及个人电脑是如何合作的 ..........17
HTML ...........................................................................................................17
CSS ...............................................................................................................17
浏览器 ........................................................................................................18
个人电脑与字体 ........................................................................................18
继续前进 ............................................................................................................19
第2章
审美与情感：字体是否承载了正确的信息 .......................................... 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
斜体中应该关注什么 ........................................................................................38
选择字体时还要考虑什么 ................................................................................39
如果单个字体无法达到想要的所有效果，怎么办 .......................................40
课程3　一篇参考书目短文（第1部分） .............................................. 42
使用单一字体创建一篇参考书目 ...................................................................42
写下你所看到的 ................................................................................................43
使用HTML 与CSS 设计参考书目 ....................................................................43
编写 HTML 文件 .........................................................................................43
编写 CSS 文件 ............................................................................................44
改进版式设计 ............................................................................................46
通过创建 class 来将标题设为斜体 ..........................................................48
继续前进 ............................................................................................................49
第4章
搭配两种字体 ...................................................................................... 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　节奏与张力
第5章
版式布局中的节奏与张力 .................................................................... 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 篇　如何设计版式：带着目的浏览
第6章
我们的阅读方式（第1部分） .............................................................. 89
字号.....................................................................................................................89
行高.....................................................................................................................90
行宽.....................................................................................................................91
对齐.....................................................................................................................93
颜色（黑/ 白） ...................................................................................................95
课程6　系列电影（第1部分） ............................................................ 96
课程概览 ............................................................................................................97
创建系列电影页面 ............................................................................................98
编写HTML 文件 ........................................................................................98
编写CSS 文件 ............................................................................................99
编写系列电影页面 ......................................................................................... 102
继续前进 ......................................................................................................... 104
第7章
信息分片：竖直方向的分隔（spacing）与邻近（proximity） .......... 105
基础分隔：段落 ............................................................................................. 106
构造竖直分隔体系 ......................................................................................... 106
课程7　系列电影（第2部分） ...........................................................110
课程概览 ......................................................................................................... 110
开发竖直分隔体系 ......................................................................................... 111
确定并套用竖直分隔层级 .................................................................... 111
理解边距叠加 ......................................................................................... 112
优化竖直分隔 ......................................................................................... 112
继续前进 ......................................................................................................... 114
第8章
利用标题将信息分片：层次结构与相似性 .........................................115
层次结构 ......................................................................................................... 115
层次结构和相似性 ......................................................................................... 117
课程8　系列电影（第3部分） .......................................................... 120
课程概览 ......................................................................................................... 120
创建标题体系 ................................................................................................. 121
确定并套用层次体系 ............................................................................. 121
如有必要，返回调整 ............................................................................. 122
继续前进 ......................................................................................................... 124
第9章
处理版式细节 .................................................................................... 125
添加第二字体 ................................................................................................. 125
运用分割线 ..................................................................................................... 126
数字和缩写词 ................................................................................................. 127
处理标点符号 ................................................................................................. 127
引号 ......................................................................................................... 127
单折号和双折号 ..................................................................................... 128
避免寡行和孤行 ............................................................................................. 129
课程9　系列电影（第4部分） .......................................................... 131
课程概览 ......................................................................................................... 131
照顾版式设计细节 ......................................................................................... 132
从FontSequirrel.com 下载字体 ............................................................. 132
在CSS 文件里描述@font-face .............................................................. 133
标识需要修改的地方 ............................................................................. 134
再次检查作品 ......................................................................................... 138
继续前进 ......................................................................................................... 140
插曲2　列表式信息
第10章
列表信息的版式处理方式 .................................................................. 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 篇　版式运用：休闲阅读与持续阅读
第11章
我们的阅读方式（第2部分） ............................................................ 163
大小写 ............................................................................................................. 163
风格.................................................................................................................. 164
字重.................................................................................................................. 165
颜色.................................................................................................................. 165
创造多样的文本风格 ..................................................................................... 167
文本中的常见元素 ................................................................................. 167
多样的文本风格帮助定义元素 ............................................................ 167
元素风格同样关乎网站带给人带来的感觉 ........................................ 167
课程11　食谱（第1部分） ............................................................... 169
课程概览 ......................................................................................................... 170
将色彩、图片和列表结合起来 ..................................................................... 170
编写 HTML 文件 ...................................................................................... 170
编写 CSS 文件 ......................................................................................... 171
开始添加内容 ......................................................................................... 171
拆分文本才能看到元素 ......................................................................... 172
将信息分块 ............................................................................................. 173
创建并定义食材列表 ............................................................................. 173
将烹饪原料的 div 容器变得窄一些 ...................................................... 175
创建并定义主导航列表 ......................................................................... 177
为每个文本元素设置符合其自身语意的风格 .................................... 179
继续前进 ......................................................................................................... 181
第12章
表达结构和韵律：栅格 ..................................................................... 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
读者在网页中所处的位置 ............................................................................. 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
允许多人在网站上工作，且保持一致性 ............................................ 226
数据驱动的网站创建动态页面 ............................................................ 226
一开始就为不同的页面进行规划 ................................................................ 227
考虑灵活性 ..................................................................................................... 227
课程14　食谱（第4部分） ............................................................... 229
课程概览 ......................................................................................................... 230
在多个页面中应用 CSS .................................................................................. 230
创建一个新网页 ..................................................................................... 230
确认并解决问题 ..................................................................................... 231
如何解决系统中的问题 ......................................................................... 231
构建剩余的食谱页 ................................................................................. 237
继续前进 ......................................................................................................... 238
插曲3　构建字体库
第15章
构建自己的字体库 ............................................................................ 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 篇　版式设计：理念风格
第16章
传统版式 ........................................................................................... 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
现代主义版式使用无衬线字体 ............................................................ 284
现代主义版式使用对比来突出重点 .................................................... 284
现代主义版式传达不对称的、鲜活的情感 ........................................ 284
排版师的角色 ................................................................................................. 286
课程17　以现代主义方式设计并实现网站 ........................................ 287
课程概览 ......................................................................................................... 288
设计过程 ......................................................................................................... 288
现代主义版式元素 ......................................................................................... 288
修改 CSS 来创作新设计 ................................................................................. 288
设计版式页面 ......................................................................................... 288
修改 CSS 即修改全部 ............................................................................. 289
继续前进 ......................................................................................................... 289
第18章
后现代主义版式 ................................................................................ 291
后现代主义版式的特征 ................................................................................. 291
后现代主义版式会把文字放到页面任何位置 .................................... 291
后现代主义版式使用任意可行的字体 ................................................ 291
后现代主义版式使用对比来突出内容 ................................................ 291
后现代主义版式通过形式传达内涵 .................................................... 292
后现代主义版式传达结构意义 ............................................................ 292
排版师的角色 ................................................................................................. 292
课程18　用后现代主义的方式设计并实现网站 ................................. 295
课程概览 ......................................................................................................... 296
设计过程 ......................................................................................................... 296
后现代主义版式元素 ..................................................................................... 296
探索“烂”代码 ............................................................................................. 296
设计版式页面 ......................................................................................... 296
继续前进 ......................................................................................................... 297
附录A
继续前进：推荐阅读资料 .................................................................. 299
挑选和使用字体 ............................................................................................. 299
处理页面中的文本 ......................................................................................... 299
开发栅格 ......................................................................................................... 299
版式设计历史 ................................................................................................. 300
Web 版式设计前沿 ......................................................................................... 300
代码：CSS 和颜色 .......................................................................................... 300
对版式设计的情感 ......................................................................................... 300
参考文献 ......................................................................................................... 301