页面布局
下部分要做的项目内容直接明了。现在是时候来创建所有页面并扩建出整个网站。
此部分工作涉及转移旧网站HTML页面上的内容，将其添加到新的WordPress页面，进行更新，并重新设计格式。
具体内容包括：
- 创建网站主页
- 重新设计和简化“产品”页面
- 采用连续一致的观感，重新设计单独的产品页面
- 重新设计“活动”页面
- 更新“工作坊额外福利和工作坊照片”页面
- 更新《聪明人的个人发展》图书页面和“资源”页面
- 采用连续一致的观感，重新设计单独的工作坊页面。我还创建出Beaver Builder模板，从而使添加新的产品和工作坊页面更轻松容易。
- 更新“推荐阅读”页面
- 更新“博客文章存档”页面（包含从网站创建第一年开始的所有博客），在其中加入16篇HTML文章，比如《清醒生活的勇气》、《现在就干》和《培养热烈欲望》。
- 更新《赚取百万美元试验》页面（这项试验从2005年一直进行到2007年）
- 重新编写“关于”页面，添加用于采访的媒体介绍，还有更多照片
- 更新了一般性的FAQ（常见问题解答）和工作坊FAQ
- 重新设计了“音频”页面
- 添加一个新的“视频”页面，提供了来自我和一些朋友YouTube账户的视频内容
- 更新了《亲自见面》页面，添加了我经常使用的公共见面场所的位置地图
- 更新了“捐款”页面，并用“Give”插件处理捐款操作
- 添加了一个“放弃版权声明”页面
- 更新了“法律声明”和“隐私声明”页面
- 更新了邮件列表的注册页面
- 重新设计了“博客”页面
- 重新设计了所有目录页面
- 在“Simple Yearly Archive”插件的一些帮助下，重新设计了“博客存档”页面
- 用“Ninja Forms”插件重新创建联系表格
- 更新了另外几个小的页面
以上都是相当轻松的工作，但因工作量挺大，也花了我数周时间。
我在页面布局上做了大量实验，并创建出制作新页面的一些标准布局，从而给整个网站一种连续一致的观感。
我让每个页面都处于WordPress管理之下，使整个网站更易维护。自己还去除了所有原始的手工编码HTML网页，并把它们的旧.htm链接重新指向新页面。
收集反馈
在勤奋创建网站页面期间，我将开发进程中的早期作品版本给一些朋友展示，还在2015年十月中旬参加的WordPress见面会上展示。我觉得网站看起来开始接近发布状态，也收获了一些不错的积极反馈，但自己也能从其他人的反应中，看出仍有更多工作要做。
自己的最大领悟是，我需要改进字体排印。回头看时，等项目进行到此刻才承认字体排印问题，似乎有点愚不可及。在很大程度上，字体排印是我事后才产生的想法。我的所有文字内容主要使用默认设置，其中包括用于主体文本的常见无衬线字体，它很可能是Helvetica字体。
我意识到自己仍有需要学习的大量知识。尽管并无必要相信现已使用的字体有任何问题，我还是决定提升标准，弄清可以做些什么来改进字体排印。
字体排印
我确实不怎么了解字体排印。在我脑中，字体排印就是字体的同义词。另外，我推想选择字体并非那么重要，只要字体在屏幕上看起来没问题，不像人们在婚礼请柬上使用的花式笔迹便可。在我看来，坚持使用常见的网络字体似乎完全没问题。
我是伴随低分辨率显示屏和点阵式打印机成长起来，它们与今天普遍使用的高分辨率显示设备完全不同。我在字体排印方面的意识觉悟，至少可以说是懵懂无知。
我决定自己应该学习字体排印，减少这方面的个人劣势。其他人似乎明显能看出我并未注意到的事情。我猜字体排印应该也没那么难学。毕竟，我不用学会汉字才能搞懂此事。我只需学习如何在更高的知识水平上，处理自己网站的字体排印设计。那能有多难？
结果表明，学习基本的字体排印知识一点都不难。它只是需要花费时间。
去年十月底，我用Google搜索找出字体排印方面的资料，花了2-3天进行研究，每天学习8-10个小时。对于所有看起来对自己项目有用的知识，我都做了笔记。我先寻求理解此事，而非实际应用。
在进行研究的头一小时，我便轻松学到比以往全部所知都要多的字体排印知识。那些知识的确很有道理。基于在几天内有意学习的内容，我便意识到自己确实能在网站的字体排印方面做得更好。
我遇到的最有用网站，是Butterick’s Practical Typography（Butterick的实用字体排印学）。第二喜欢的网站是Web Typography（网站字体排印学）。我全部看完了这两个网站。
无论何时学习新事物，我都发现把新知识与已经理解的某种事物联系起来会很有帮助。我开始把字体排印与时尚知识近似看待。对字体排印的选择，也是自我表达的一种手段。我开始好奇哪种字体给人的感觉会像我一样，如同直接去问：这件衬衣感觉像我的风格吗？
我成长在一个年代较早的网络字体排印世界，那时的统治字体是Arial、Verdana和Times New Roman，所以自己还有许多需要抛弃的旧知识。我了解到，字体排印的概念内容要比字体选择大得多。好的字体排印还会考虑各种字符元素的精确间距、行高、字母间距、标题布局、粗体和斜体的使用、不同字体的平衡处理、项目符号的类型与间距、字行长度，等多得多的内容。说字体排印等同于字体本身，就像在说时尚等同于纺织面料。
随着深入学习字体排印，我意识到自己由于无知，一直犯着大量错误，现在我也终于能看出那些错误之处。我开始用CSS编码进行试验，为标题、字体、字号、页边空白、字母间距等更多细节测试不同的可能选择，通过一点点努力，我也看到了网站的进步提升。
只是举个例子，我学会留意到oblique italics（变倾斜体）与real italics（真正斜体）之间的差别。许多网络字体会采用算法倾斜字母的方式，生成基于原始字体的斜体版本。这种冒充的斜体看起来也没问题，但一套真正的斜体字，看起来会比倾斜普通字体得到的斜体字更漂亮美观。只要字体设计师选择如此，真正的斜体字体还可包含额外的花边装饰。
只有直接在我的网站上观看，而非通过RSS阅读器、电子邮件，或无法应用合适字体的其他网站上观看时，接下来这部分内容才有意义。
请注意这两行Arial字体间的差别：
Arial字体的斜体版本，看起来基本就像正常字体被变斜后的版本。
现在请注意同样两行字在Charter字体下的差异：
你能看出差别吗？Charter字体包含某些带有花边装饰的更美观斜体字。你可以看出特定字母在变成斜体后有着不同的渲染结果；它们并非仅仅是正常字体的变斜字母。请尤其注意a、e、f、i和z等字母的普通版本与斜体版本之间的差异。
有些字体只包含普通版本的基本字体，它们会用算法方式生成其他变体形式，比如斜体、粗体和粗斜体。而更高品质的字体，可能针对每种变体形式，去设计特别版本。斜体字母并非仅仅是将普通字母变斜。粗体字母也不是清一色地加粗正常字母。
在早期网络世界里，使用字号范围在10-12个像素点的无衬线字体十分常见。在普遍使用14寸至17寸低分辨率显示器的年代，这种做法也合情合理。但在如今分辨率更高、屏幕更大的显示设备环境下，主体文本内容使用更大字体才合乎情理，甚至高到25像素点也很正常。
研究过字体排印后，我开始比以往更关注细节，自己也确实沉迷其中。我做过的试验和调校工作，可能有些人会认为多得荒唐。
在选定这个网站使用的字体前，我看过不止600种字体。
我为标题、子标题、菜单标签、页脚链接、按钮说明、表格区域等更多细节，测试过不同的字体、字号和字母间距。有时各种字体间的差异非常微妙。我偶尔要反复查看5-10次，才能弄清两种选项里的哪一个才是最佳选择。我还不时寻求Rachelle的帮助，来获取新鲜的观点视角。
我为主体文本试验了几种不同的字体类型，决定最佳选择是把字体大小基于窗口宽度进行调整。在显示器或笔记本电脑上，当窗口扩展得比内容区域更宽时，主体文本字体最大可以有24个像素点。当窗口宽度缩小时，字体大小会以半点像素的缩进量，逐步朝16个像素点缩小。这种变化完全是通过CSS（层叠样式表）完成。因此，当你扩大或缩小自己浏览器窗口的宽度时，我的网站文字会逐渐改变字体大小，这样即使在小窗口里，网站内容依然可读。
当然，我们也可使用浏览器即时改变字体大小（比如在Mac电脑里同时按下Cmd和减号，以及Cmd和等号，来缩小和放大字体，再同时按下Cmd和0返回正常大小），但很多人都想不到这些做法。
在研究字体排印前，我甚至没注意到有着更大字体的网站会让人更快阅读。我办公桌上用的是27英寸的4K显示屏，有了更大的字体，我可以靠在椅背上更放松地阅读。虽然为小屏设备采用方便移动阅读的字体设计很重要，会有多少人也考虑自己网站在更大显示屏上的视觉效果？谁想在一个27英寸的显示屏上阅读只有10-12像素点的小字体？市面上已有成百上千万的大显示屏，包括更大屏幕的iMac桌面电脑。
我在字体排印方面做了许多小调整，除非有意寻找，否则大多数人永远都不会留意到这些微小之处。例如，我编写了自定义的CSS，用于改变圆点符号和数字符号，从而让它们比主题文本在颜色上看起来稍微淡一点。这种效果可以让人较不注意项目符号，把更多注意力放在文本内容上。为实现这种效果，我不得不移除默认的项目符号，基本上要用CSS重新对它们进行编程。弄清如何做到此事，就是很有意思的挑战。
在网站的其他部分，我有意移除了自己觉得多余，或会增加不必要杂乱观感的项目符号，比如“推荐阅读”网页上的书单部分。
我还改变了引号、代码和表格的外观样式，即使自己几乎很少在文章中用到后两项内容。
正如你很可能已经看到的，当我学习某样新事物时，喜欢完全沉迷其中。连续很多天里，我感觉就像完全在字体排印学里生活与呼吸。这就是我最喜欢的学习方式 — 完全彻底的沉浸式学习。
设计好单篇博客文章
这个网站上需要设计好的最重要页面类型，就是普通的博客文章页面。它是大部分新访客来到网站首先看到的内容，以及读者通常花最多时间的地方。只是为让这类页面看起来正确美观，我便花了数天时间，对每个小细节进行调整，直到自己感觉确实良好。
针对标题和子标题（H1、H2、H3等标题层级），我采用了PT Serif字体。这款俄国人设计的字体是我最喜欢字体之一。我喜欢它在a、c和s字母上的尖钩设计。PT Serif是Google字体集的一部分，可供任何人免费使用。
对于主体文本，我差点也采用PT Serif字体，在设计网站的一段时期里，我一直使用它。但后来我无意中发现Charter字体，自己对它更为喜欢。在我看来，Charter字体的阅读体验更轻松容易一点。Charter并不像PT Serif那样，包含在Google字体集里，我必须把它单独下载并添加到自己网站上。Charter是由Matthew Carter创作的一款免费字体，此人也创作了Verdana和Georgia字体。由于自己曾在旧网站上大量使用Verdana，不知怎地Charter字体看起来也很适合我的新网站。
我还遇过的一个问题是，文章文本的每行宽度该有多少。我知道太长的文本宽度会让人更难阅读，更窄的文字栏可以使人读得更快，但我并不知道理想的行宽。有个网站建议每行45-90个字符比较合适，但那种指导范围太大。做过更多调查后，我发现每行66个字符可以当做理想推荐行宽。我调整了页边空白，直到内容部分的每行宽度在66个字符左右。我感觉这种排版效果看着挺棒，而且发现文字内容很易阅读，于是采用了这种选择。当然这种排版只在足够宽的屏幕上才能显示出来。若我试图在手机小屏幕上适配每行66个字符的排版，就需使用小得荒唐可笑的字体。
特色图片
我知道，如今在博客文章里插入特色图片很常见。这项功能在我开始写博客的2004年还不存在，自己以前创作的所有博客文章也没有特色图片。我的个人观点是，大多数情况下，那些图片都是毫无必要的多余之物。当在其他网站上看到那些图片时，我倾向于觉得它们令人分神和显得幼稚。或许是因为有太多内容作坊喜欢使用诱人照片，我也倾向把特色图片与低品质内容关联起来。
但我能理解为何有些人喜欢使用特色图片。若你对Pinterest或Instagram等图片分享网站感兴趣，这种做法便合乎情理。添加图片也许会使关联文章看起来更漂亮一些。
可能主要的问题是，许多博客作者在选择特色图片时并未太细心，他们过度依赖免费的库存图片。在时间管理文章中插入闹钟图片，或在健身文章里插入随意的慢跑者图片，真会给文章添加任何价值吗？当看见免费库存照片时，我猜想对应的文字内容也同样毫无吸引力，自己会直接点击返回按钮，免得在很可能毫无价值的东西上浪费时间。
在某些情况下，特色图片肯定能增添价值，比如为菜谱博客插入饭菜照片，或为旅行博客插入地点照片。但若博客作者仅仅在事后才想起放上特色图片，我就更愿只看到文字内容本身，因为那种阅读体验更简单快捷。
鉴于我对特色图片的负面印象，还有看到人们普遍的草率使用方式，自己在重新设计网站时，便毫不犹豫地排除了这个选项。我看不出有任何理由，要在网站上添加这些无用事物。与那些看到图片后会想“哇，一张闹钟图片哦！”的读者相比，我更愿吸引那些更聪明的读者。
只有当使用图片恰当合适，会给文章增添价值时，我才会在文章的合理位置插入图片。我喜欢明智审慎地，而非胡乱地使用图片。
空白间距
在整个设计项目里，我必须做的最辛苦工作，就是细心调校每个页面上不同元素间的空白间距。
刚开始这个设计项目时，我并不清楚是否存在一种明智方法，可以调整页面上不同元素间的间距，比如标题、子标题和主体文本间的间距。我直接使用了所有默认设置。
后来我意识到，以主体文本中行高（每行基准线到基准线）的倍数为基础，存在一种调整间距的更精确方法。我把页面的垂直布局，想成在页面上从上到下进行乐曲创作，此时页面的每一行（包括空白行或其他情形），就像作曲时的一个音符。假如音符间的间距恰当，我们就会听到美妙音乐。但若音符出现得过早或过晚，音乐听起来就不太对劲。所以我意识到，如果随意安排不同元素间的间距，那就像随意写作一首歌。最终结果将缺乏和谐效果。
当一首歌听起来不和谐时，我们的耳朵便会感觉受到冒犯。当单个音符出现的位置不当时，我们也能听出其中的差别。
若网页上的各种元素没有和谐的间距安排，最终结果就是，那个页面在视觉上会显得更为复杂。由于网站设计者没有对间距给予太多重视，大多数网页都有这个问题。他们只需解决这一个问题，自己网站的页面就会显得更不复杂，能让读者眼睛感觉更加放松。
我从普通的博客文章页面着手，开始细致调整网页垂直方向上的元素间距，以使各种元素的基准线，都与主体文本行高的整数倍相一致。从页眉到页脚，所有元素的位置都要协调一致。我发现当做完这种改变时，整个页面看起来会比以前更加舒缓。
在一个页面上阅读时，我们的双眼习惯于用相同间隔扫描文字内容。这些不同行内容之间的间距，会建立起特定的扫描节奏。若我们在段落之间，或遇上子标题时出现停顿，而且每种页面元素对应的基准线，刚好与先前建立的扫描节奏相一致，那么双眼自然就能以同样的节奏，继续阅读下一块内容，整个阅读体验将和谐融洽。但当这些页面元素没有落在恰当的相应位置，便会打乱我们的阅读节奏，导致双眼不得不重新做出调整。这种阅读更易让人疲劳，也使页面看起来比正确的样子更加复杂。
间距方面最基本的经验教训，就是若在文本内容的两段间出现空白行，那么上一段的底部基准线到下一段的顶部基准线之间的间距，应当刚好是行高的两倍。若非如此，你便会打乱人们的自然扫描节奏，你的文本内容将比正确的页面布局更难阅读，整个页面看起来也缺乏和谐感受。只要你解决好这一个问题，就会在观看文本并试着阅读时，看出和感觉到前后差别。
对于博客文章页面的文本布局节奏，我采用了下面这种间距方案：
空白行
标题
空白行
日期
空白行
文本
文本
文本
空白行
文本
文本
文本
文本
空白行
空白行
子标题
空白行
文本
文本
…
文本最后一行
空白行
空白行
阅读相关文章：
空白行
第1个链接
第2个链接
…
第7个链接
空白行
分割线
上一个链接 / 下一个链接
空白行
所有这些页面元素的基准线都落在主体文本行高的整数倍上。如果行高是33像素点，那么这些页面元素的基准线，就会落在页面垂直方向的33、66、99、132等像素点上。
一旦自己喜欢博客文章的外观结果，我便把这种间距安排应用到网站的其他页面上。我用了大概两周时间，才使每个页面看起来都正确无误。因为自己必须调整众多CSS元素，才能让它们彼此和谐融洽。
当这种新间距安排成为网站默认选择后，有些元素只偏出5个元素点我也能看出，因为那时自己会有不和谐的感觉。例如，当在“产品和工作坊”页面添加侧边栏时，我便感觉某个地方不对劲。问题出在，网站侧边栏里用了稍微更小的字体，行高自然也默认变小。一旦我把行高调整到与主体文本匹配的高度，那种整体和谐感便重新回归。
也许我在此事上有点过于投入，但我确实喜欢最终得到的结果。我的双眼在阅读每个页面时都感觉更轻松舒适。阅读长文也没那么令人疲惫。和谐感替代了不和谐感。即使大多数人永远不会清醒留意到这些细节，我依然感觉很高兴付出如此多努力，为了读者利益做好这些改进。
完成这些额外工作改变了我和自己网站的关系。我经常把旧网站只看成作品内容的容器。我在乎作品的内容，但我不太在乎网站设计。通过付出80%的努力工作来获得那额外的20%价值，我感觉自己与不断进化的网站有了更多联系。它并非只是我放置在外的某样事物。现在我把自己也更多融入其中。这个网站也开始反映出我的某些价值观，比如关爱、和谐和优雅。此种结果让我对整个项目感觉甚至更加美好，提升了我业已高涨的工作热情。我开始比先前更加享受这项工作，并非从回避困难工作，而是从拥抱困难中获得更多享受。
然而不利一面是，这个过程也让我变成某种设计上的势利眼。我现在很难再去看其他网站的页面设计，尤其是杂乱的新闻文章。那些糟糕不和谐的页面设计，会让我毫无阅读兴趣。只是通过一些CSS调整，整个网站的阅读体验就会轻松容易得多。
升级CSS技能
CSS意指层叠样式表（Cascading Style Sheets）。它是用来描述网页上各种元素样式和位置的编码语言。
开始着手这个项目前，我已有不错的CSS编码技能，但在进行这个项目期间，我的CSS技能得到了巨大成长。我不断遇到自己想做的改变，但又不知如何下手。有时我会通过Google搜索直接找到确切解决方案，同时额外学会一些新的CSS编码技巧。其他时候我则必须想出自己的解决方案。
项目进行期间，我学会使用一些自己从未用过的CSS编码，比如:before、:after、:nth-last-child，和:nth-last-of-type选择器。我感觉更有能力用CSS做些创意工作。自己使用它的速度也快了许多。
无论自己何时要去调整页面某部分的样式，我会首先在脑中创造出想要的外观画面。然后再想出如何用CSS代码，让它看起来和自己想要的完全一样。到项目完成时，我通常只用几分钟就能编写出某种正确的外观效果。
我用CSS改变了网站上的几乎所有默认格式，以使整个网站看起来一致和谐。我重新改造了Ninja Form的联系表格，Give页面的捐款表格，Jetpack插件的文章输出布局，还有Simple Yearly Archive插件的存档页面格式。
这也是我的自定义CSS文件几乎长达800行的原因，而且那还是网站主题自带CSS文件以外的附加部分。我还重新组织和评论了CSS文件，从而让它更易维护。
我很享受所有这些细节工作。我喜欢在不知怎么做时，想出编码方案的那种工作挑战。能够面对可以推动自己提升知识和技能的挑战，是种无比精彩的学习体验。此时几乎每天都是一趟学习经历。