前言 ...................................................................................................... 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
· · · · · · (收起)