出版日期:2016-1
ISBN:9787121279029
作者:【美】Laura Franz(劳拉• 弗朗茨)著
页数:324页
内容概要
Laura Franz 是马萨诸塞州大学达特茅斯分校的设计学副教授,她已经在该校执教Web 版式设计课程12 年。
她讲授多种版式设计课程,包括版式设计I,字形的历史与构造,以及页面版式设计介绍;版式设计II,版式即信息;版式设计III,实际情境中的版式:印刷业与Web ;版式设计IV,以字体设计为题的本科研究项目。她还是马萨诸塞州大学达特茅斯分校Web 与交互设计专业硕士认证的联合协调人。
她所做的专业设计既有针对传统印刷的,也有针对Web 设计的。正在进行的创新研究项目包括historictype.com、goodwebfonts.com 及新Bedford 字体项目。她教授Web 版式设计,也在相关专题讨论会上演讲,还曾为Lynda.com 撰写相关课程。
对于如何将这一行的艺术与责任传授给未来的版式设计师们,她也特别感兴趣。
书籍目录
前言 ...................................................................................................... 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
通过
组织表格 .................................................................... 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 作者简介 Web 页面之美,美在何处?在于字形传达出来的情感,在于版式对信息的合理分割和布局,在于与阅读场景的完美契合。而这一切的重中之重在于字体。《字体之美:从传统印刷到Web 排版》就教授怎样通过字体的设计、选择、搭配与布局,制作出带给人美感,帮助读者理解和找寻信息的Web 页面。 发布书评精彩短评 (总计2条)
类似图书 |