前言

第1篇 如何选择字体

第1章

分解与易读性：字体易读吗

是什么让字体易读

对比Georgia与Helvetica

对比更多字体

课程1 在线比较字体

在Typetester上比较字体

写下你所看到的

在Typeteste r上设置字号

理解HTM L、CSS、Web服务器、浏览器及个人电脑是如何合作的

HTM L

CSS

浏览器

个人电脑与字体

继续前进

第2章息

审美与情感：字体是否承载了正确的信息

选择有恰当美学或者情感关联的字体

衬线字体给人以传统感觉，无衬线字体给人以现代感

与格式打交道

课程2文字的含义

表达同一单词的不同含义

写下你所看到的

编写你的首个HTML与CSS文件

命名规范

组织文件

编写HTML文件

DOCTYPE与DTD

标签

Head、Title和Body元素

编写CSS文件

描述元素

创建一个div

继续前进

第3章

对比度、字形及字符：这个字体能胜任吗

粗体中应该关注什么

斜体中应该关注什么

选择字体时还要考虑什么

如果单个字体无法达到想要的所有效果，怎么办

课程3一篇参考书目短文（第1部分）

使用单一字体创建一篇参考书目

写下你所看到的

使用HTML与CSS设计参考书目

编写HTML文件

编写CSS文件

改进版式设计

通过创建class来将标题设为斜体

继续前进

第4章

搭配两种字体

装饰字体：使用第二字体

确定你需要什么样的第二字体

考虑一致性与对比度

正文字体：使用第二字体

确定你需要什么样的正文第二字体

考虑平衡性与延续性

关于本章中使用的字体

课程4一篇参考书目短文（第2部分）

为标题设置装饰字体

使用你为标题挑选的字体

写下你所看到的

使用＠font-face与字体栈

理解＠font-face

法律问题：链入并非嵌入

技术问题：不同浏览器使用不同的字体格式

选择字体

构造字体栈

继续前进

插曲1 节奏与张力

第5章

版式布局中的节奏与张力

重复与对位

焦点

构造强调竖线

空间张力

课程5 A代表Alignment

课程概览

创造动态构图（第1部分）

编写HTML文件

编写CSS文件

添加并描绘区块（容器）

添加内容并定义元素

升华版式

创造动态构图（第2部分）

利用图片将字母A作为背景

增加类选择器，创造正文的对位

继续前进

第2篇 如何设计版式：带着目的浏览

第6章

我们的阅读方式（第1部分）

字号

行高

行宽

对齐

颜色（黑／白）

课程6系列电影（第1部分）

课程概览

创建系列电影页面

编写HTML文件

编写CSS文件

编写系列电影页面

继续前进

第7章

信息分片：竖直方向的分隔（spacing）与邻近（proximity）

基础分隔：段落

构造竖直分隔体系

课程7系列电影（第2部分）

课程概览

开发竖直分隔体系

确定并套用竖直分隔层级

理解边距叠加

优化竖直分隔

继续前进

第8章

利用标题将信息分片：层次结构与相似性

层次结构

层次结构和相似性

课程8系列电影（第3部分）

课程概览

创建标题体系

确定并套用层次体系

如有必要，返回调整

继续前进

第9章

处理版式细节

添加第二字体

运用分割线

数字和缩写词

处理标点符号

引号

单折号和双折号

避免寡行和孤行

课程9系列电影（第4部分）

课程概览

照顾版式设计细节

从FontSequirrelcom下载字体

在CSS文件里描述＠font-face

标识需要修改的地方

再次检查作品

继续前进

插曲2列表式信息

第10章

列表信息的版式处理方式

易读性

相近性

相似性

读者的阅读方式

分割线

数字

课程10 Martha的葡萄园轮渡时间表

课程概览

通过＜table＞＜tr＞＜td＞组织表格

编写HTML文件

编写CSS文件

构建轮渡时间表页面

构建表格

找出问题

找出新问题

重构表格周围的构图

继续前进

第3篇 版式运用：休闲阅读与持续阅读

第11章

我们的阅读方式（第2部分）

大小写

风格

字重

颜色

创造多样的文本风格

文本中的常见元素

多样的文本风格帮助定义元素

元素风格同样关乎网站带给人带来的感觉

课程11食谱（第1部分）

课程概览

将色彩、图片和列表结合起来

编写HTM L文件

编写CSS文件

开始添加内容

拆分文本才能看到元素

将信息分块

创建并定义食材列表

将烹饪原料的div容器变得窄一些

创建并定义主导航列表

为每个文本元素设置符合其自身语意的风格

继续前进

第12章

表达结构和韵律：栅格

模块化的栅格与文本

网页栅格与阅读

如何建立栅格

从文本需求出发

手动完成实体元素块的排布

使用图片处理软件来排布页面元素

乐于修改元素

为最佳布局手工着色

草图比以往更重要

课程12食谱（第2部分）

课程概览

探索栅格并记录过程

建立栅格

使用嵌套的div元素来创建复杂列

挑选你想创建的布局

理解列与行

让代码变得井井有条：CSS 中的记号

HTML中的记号

构建基础的页面结构

如何构建基础页面结构

在结构容器中摆放内容

重新定义内容的布局

如何重新排布内容

修复“双倍边距”bug

即将完成

继续前进

第13章

帮助读者纵览网站内容：导航

导航也是文本，需要具备可读性

点击我，我会带你前往目的地

读者在网页中所处的位置

哦，你可以去这些地方

你已经到过这里了

随时待命

课程13食谱（第3部分）

课程概览

链接语法与伪类选择器

准备开始：下载一些页面以便于链接

添加链接语法：主导航

为主导航链接增加交互性

创建并描述一个“You Are Here”类

添加链接语法：区域链接

为区域链接添加交互

创建并描述“You Are Here”类

添加链接语法：广告

继续前进

第14章

系统的跨页面应用

应用系统的五个原因

对于读者来说，系统使网站更易用

你已经完成了这项艰难的工作，为什么要重新再做一次

不同的页面感觉起来依然是整体的一部分

允许多人在网站上工作，且保持一致性

数据驱动的网站创建动态页面

一开始就为不同的页面进行规划

考虑灵活性

课程14食谱（第4部分）

课程概览

在多个页面中应用CSS

创建一个新网页

确认并解决问题

如何解决系统中的问题

构建剩余的食谱页

继续前进

插曲3构建字体库

第15章

构建自己的字体库

分类

五大字族

扩展五大字族分类体系

老式字体

过渡字体

现代字体／Didone

粗衬线字体

无衬线字体

特排字体

辨识优秀的Web字体

优秀的Web正文字体

优秀的Web特排字体

构建字体库

免费或者开放授权的字体

购买Web授权

订阅服务

课程15批判地分析字体

课程概览

查看新字体的哪些方面

使用Font Squirrel的Web字体

找到需要调整的地方

我是如何修复自己设计里的问题的

使用Google Web Fonts的Web字体

找到需要调整的地方

我是如何修复自己设计里的问题的

使用Typekit的Web字体

找到需要调整的地方

我是如何修复自己设计里的问题的

继续前进

第4篇 版式设计：理念风格

第16章

传统版式

传统版式的特点

传统版式有文本框

传统版式使用衬线字体

传统版式寻求平衡感

传统版式传达优雅感

排版师的角色

课程16以传统方式设计与制作网站

课程概览

设计过程

传统页面元素

回顾背景图片

编写HTML文件

编写CSS文件

添加背景图片

填入并准备文字

设计版式页面

链接其他课程文件夹中的文件

继续前进

第17章

现代主义版式

现代主义版式的特征

现代主义版式以某种构筑方式运用留白

现代主义版式使用无衬线字体

现代主义版式使用对比来突出重点

现代主义版式传达不对称的、鲜活的情感

排版师的角色

课程17以现代主义方式设计并实现网站

课程概览

设计过程

现代主义版式元素

修改CSS来创作新设计

设计版式页面

修改CSS即修改全部

继续前进

第18章

后现代主义版式

后现代主义版式的特征

后现代主义版式会把文字放到页面任何位置

后现代主义版式使用任意可行的字体

后现代主义版式使用对比来突出内容

后现代主义版式通过形式传达内涵

后现代主义版式传达结构意义

排版师的角色

课程18 用后现代主义的方式设计并实现网站

课程概览

设计过程

后现代主义版式元素

探索“烂”代码

设计版式页面

继续前进

附录A

继续前进：推荐阅读资料

挑选和使用字体

处理页面中的文本

开发栅格

版式设计历史

Web版式设计前沿

代码：CSS和颜色

对版式设计的情感

参考文献