字体之美 从传统印刷到WEB排版PDF电子书下载

前言 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