编织
这里将介绍本站建立使用的方法。
很抱歉，本站开放至今已经更换了第三次样式了……几乎每年都要推翻重做一次。
2017 年本站发布了首发样式。这是我首次尝试建站，使用 Dreamweaver 编写源代码。首发样式被放弃的原因很简单：过于看重形式上的东西，比如具有弹出效果的导航菜单，而没有对更重要的网站外观多做思考。况且当时的我技术水平也难当此任，面对 HTML 与 CSS 已经焦头烂额。最终，我在导航菜单的 JavaScript 上花费过多时间，费了很大功夫却建立了一个不太好看的网站，被废弃也是理所当然的了。
2017 年末，我有幸发现了 Adobe Muse 这个可以直接用图形方式设计网站的软件，如获至宝。其具有简便图形操作方式、继承自 InDesign 的模板系统、支持响应式页面的编辑器等。但这段时间遇上另外一个问题：设计的整体感较差，各个页面难以统一。原因也很简单：我没有先做草稿，而是直接开始搭积木般地制作了。页面的各个模块没有经过整体思考，常常是做到哪想到哪。这期间做了不少被废弃的页面，部分页面被多次推翻重做。
但这一版样式被完全放弃的原因，是 Adobe 突然在 2018 年初宣布，Muse 将在 3 月 26 日发布最后一个功能更新版本后停止开发，技术支持则在 2020 年 3 月 26 日结束。这意味着将来 Muse 将无法跟上不断发展的 Web 标准，我迟早会被迫放弃这个软件。既然如此，那么现在就放弃吧。
终于，我又回到了 Dreamweaver 自己编写源代码，但还使用另一个重要软件，稍后会提到。这一版样式经过更深入的思考，有以下几个关键特性。
自顶而下
必须考虑好每个页面间的层次关系，把能够预见的所有页面安排好链接关系，并确定在上级页面制作怎样的交互来进入下级页面。每一类页面都需要考虑如何扩展同级页面，并同时确定在上级页面中的交互模块如何扩展。
这里我用到了组织页面规划的软件 Adobe XD。这个软件能够帮助我快速设计页面外观，并安排页面之间的关系。从而避免一边思考如何写代码，一边思考如何设计，最终都没有做好的情况。
读者优先
一切设计以方便、简洁、美观为重，放弃不必要的过渡与动画效果，保证交互模块在电脑和移动设备上都具有预期的响应。此外，本站的全部页面都可以选择明、暗主题，并对本页面这种文字为主的页面限制每行文字的长度，方便阅读。
举两个简化效果的例子。首先，本站在设计初期曾考虑在鼠标悬停主菜单项时，使用变色或变透明度的效果。经思考后，这个效果被移除。因为在电脑上，鼠标会变成手形，已经足够表示该处为链接；而在触摸的移动设备上，根本没有「鼠标悬停」这种情况。其次，本站的主题切换曾经设计了淡入淡出效果。由于此效果耗时较长，会拖慢主题切换后的背景载入过程而影响观感，最终被移除。
复用代码
层叠样式表（CSS）的内容经仔细区分，所有通用的部分都被单独建立文件复用。在通用 CSS 中使用用户定义变量，对于框架相同而颜色、图片等细节不同的页面，只需在页面专属的 CSS 中为颜色、背景图片等相关变量指定不同的值即可。这大大简化了编写源代码的工作，不仅能确保网站结构一致，而且易于扩展新页面。
下面将介绍本站使用的软件。
原型设计
我使用 Adobe XD 来设计网站样式，XD 目前可以从 Adobe 官网免费下载使用。XD 除了有上文所说的好处外，还有一个非常方便的功能：导出多种分辨率的素材。我目前总是先在 XD 中设计好页面，然后导出其中的图片素材放到网站的文件夹里，非常方便。
源代码编辑
我只使用 Dreamweaver 的「开发人员」模式，将其当作代码编辑器使用。Dreamweaver 的页面预览功能可能不支持部分新特性，需慎重使用。也可以使用 Visual Studio Code 等其他代码编辑器。
网页服务器
本站目前为纯静态页面，即所有页面渲染工作都交由读者的浏览器完成，故需要预览时只需用浏览器打开本地文件即可。
若在网页源代码中使用了 PHP 等语言，即称为动态页面，需要服务器进行运算才能显示。要预览动态页面，必须要用 Apache 或 Nginx 等网页服务器软件。在本地计算机可以使用 XAMPP 等软件快速启用 Apache，或是直接上传到远程服务器上测试。
在网页源代码中，若 URL 使用以斜杠开头的绝对路径，则必须使用网页服务器才能够预览。因为绝对路径基于网站根目录，一般在网页服务器中才可以设置。在本地打开文件时，浏览器不清楚根目录在哪，所以这些绝对路径一般不会指向正确的地点。
浏览器
本站使用 Cookie 来记录读者选择的颜色主题。Cookie 是对一个站点起作用的，所以浏览器如果不把本地文件当作一个「站点」的话，就不能用这个浏览器在自己的电脑上测试 Cookie 功能。目前，Chrome 不会把本地文件当作站点，每次刷新页面会回到默认的暗色主题；而 Firefox 开发者版本可以把本地文件也当作站点，刷新并不会改变主题。
跨浏览器测试也是很重要的环节，因为我不能指定读者使用哪一款浏览器。大多数情况下，各个浏览器都会渲染出类似的结果，但对于使用了较新特性的网页则不一定。
本站中，部分组件使用了「下层对象模糊」功能，如果您使用了 Safari、Edge 或是最新版本的 Chrome，则能够看到首页标题「问候」一行有毛玻璃效果。Firefox 目前还不支持这个功能，这时候我就要考虑回退，即：针对不支持该特性的浏览器，应用另一种效果。在本站中，不支持下层对象模糊功能的浏览器，首页标题一行将使用颜色渐变来模拟毛玻璃效果。
文件上传
我使用 Dreamweaver 管理站点，直接在软件中点击上传即可把文件传到远程服务器上。也可以使用 FileZilla 等软件上传。
接下来介绍本站使用的较为先进的技术。
宽度自适应
本站会根据当前浏览器的宽度，在四种排版模式中选择一种显示。无论是电脑还是手机，都可以用合适的样式阅读本站。如果您想要测试，可以在电脑上调整浏览器窗口的宽度。
我为每类页面都写了用于四种不同宽度的 CSS，在 HTML 中对应的 link 标签内标记 media 属性，就可以在各种宽度下导入合适的 CSS。
弹性页面
如果您已经测试过宽度变化时页面的响应，应该发现了网页并不是在四个固定的排版间跳跃。在每个档位上，网页组件都能在一段范围内调整自己的尺寸，以适应的宽度变化。
这是因为本站大量应用弹性盒（Flex-box）来放置内容。弹性盒可以根据 CSS 中书写的规则调整自身的尺寸，并同时调整内容物（子对象）的排布。
网页字体
以往浏览器渲染页面时，只能使用读者设备上安装了的字体，而这是无法预知的。
当然，有一些被称为「网页安全字体」的字体，几乎在任何设备上都有预装。如果使用它们，自然就不用考虑读者用何种设备了。但如果字体是网页设计的一部分，我一定要让读者看到我指定的字体，怎么办呢？
现在，浏览器已经可以从服务器上下载指定的字体来渲染网页，以实现在任何设备上观感一致。对于西文，字体文件只需包含百个左右的字母即可，加载迅速，很容易应用。但是对于中文成千上万的汉字，字体文件往往非常大。我不可能让读者等待三分钟来加载一个页面，又该怎么办呢？
解决方案为「字体子集化」，即服务器上提供的字体仅包含网页上用到的字，这就大大降低了字体加载时间。每次修改网页上的文字后，都需要重新生成一次字体子集。使用 Python 语言编写的 FontTools 具有字体子集化的功能，我写了批处理文件来分别生成针对每个页面的字体文件。
您现在看到的字体为「更纱黑体 UI」，是一个将思源黑体的汉字与 Noto Sans 的西文字母拼合的字体。另外提一下，还有「等距更纱黑体」，是一个让中西文混合文本保持等距效果的字体，其西文部分使用的是 Iosevka 体。我在 Dreamweaver 中就用这个字体显示源代码，十分整齐。
内容分发网络
本站使用内容分发网络（CDN）为页面加载提速。
CDN 会将本站服务器的内容复制到全球各个节点上，并引导您的浏览器从距您较近的节点获取网页，从而提升加载速度。CDN 节点会在固定时间抛掉旧版本文件，回到本站服务器复制新版本文件。本站设置的缓存文件过期时间为一天。