Web网站建设
撰写时间：2023-05-02
修订时间：2024-02-16
本文集中分析了Web网站建设中需要考虑的一些常见问题。
需求
开发、设计一个网站时，我们需要从全局的角度考虑以下几个方面的问题：
- 是否需要代码仓库管理？
- 是否需要诸如PHP, Node.js, Java Web, ASP.net等特定的服务器端技术？
- 如何有效地管理文档内容？
- 如何创造性地融汇Node.js开发生态环境？
- 何时需要直接使用第三方的Web组件，何时需要开发自定义Web组件？
- 如何有效地应用诸如对比、重复、对齐、亲密性等最基本的设计理论？
- 如何实现网站全文搜索功能？
- 如何实现搜索引擎优化？
架构
明晰网页主要职责
作为技术网站，各个网页最主要有2种职责：
一是首页，侧重于简洁、绚丽的效果。这种网页，可使用文本居中的效果。一般来讲，这种展示性很强的页面由于左右两侧都没有其他内容，因此body元素不设置border，不使用与html不同的背影色，效果会更加理想。
二是展现类似于博客的技术文章，侧重于让用户获得较好的阅读体验。这种网页，文本应左对齐。
使用规范的HTML5标签
我们应该尽早地确定所有HTML网页所共用的页面结构，这样可避免以后不断地多次修改CSS样式。
一个HTML5网页典型的页面结构
main
根据HTML5规范，main元素代表文档中的主要内容。一个文档中不能存在多于一个的没有hidden属性的main元素。
article
article元素代表一个结构完整的书写内容，无须依赖于其他内容就可以予以分发、重用。如一个论坛帖子、一篇文章、一个博客词条、一个用户评论、一个交互性的Web组件，或者其他在内容上独立的部分，等等。
article可以嵌套使用。例如，对于一个博客文章，如果有用户评论时，可将每个用户评论都用嵌套的article来表示。
article在一个网页中可以多次出现。
main与article的组合使用
从上面可以看出，main元素侧重于网页的结构，而article元素侧重于文档的内容。当需要同时使用这两种元素时，可将后者作为前者的子元素使用。
section
section元素用于划分网页或文档的结构层次，一般来讲，需要带有一个标题。非常适合与article元素组合使用。
根据不同的层级，section元素可分别带有不同层级的标题。
第一级节标题
第二级节标题
DocBook与HTML的联姻
DocBook可基于一套源文档，动态发布HTML, PDF, eBook等多种媒介的文档。它是一种非常高效、经济的CMS(Content Management System, 内容管理系统)。这些年来，在经过较长时间地与LaTex, AssciiDoc, Markdwon等其他相应的文档书写工具进行比较后，我个人认为，如果需要同时兼顾HTML与其他输出媒介的质量，使用DocBook的价值最高。毕竟，DocBook正是基于XML, XSL等Web规范来创建的工具，它天生就对HTML有着内在完美的支持。
使用DocBook最大的问题是不能及时预览最终的网页结果。但事实上，即使我们只使用HTML，照样存在这个问题。我们通过使用各个HTML的标签，才能构建出一个漂亮的页面。我们需要在浏览器中加载后，才能看到其渲染后的实际效果。现在还有谁仍在使用FrongPage, DreamWeaver等工具软件来编写HTML吗？ :）
相比之下，DocBook的问题在于每次都需要批量转化较多文件，因此转换的时间过长。在长期的摸索实践中，我找到了最好的解决方案。在NetBeans中，使用Ant来构建一个基于DocBook的Java Freeform项目，并将NetBeans IDE工具栏的运行图标与相应的Ant target链接，通过灵活地精选相应的文档，使得生成文档的速度非常快，并能自动在浏览器加载特定页面。这样，当更新文档后，只需按一下运行键，根据我们精选文档数量的多少，就可在1-3秒内立即看到渲染效果，从而较好地解决了需要不断修改、不断渲染的问题。
尽管DocBook可以同时生成多种媒介的文档，但相对于HTML来讲，由于DocBook只关心文档结构问题，它所生成的HTML是一种相对静态的页面。如果习惯使用HTML来编写技术文档，由于我们可以直接使用各种先进、前沿的Web技术，将比DocBook转化的HTML页面更加灵活、生动、交互性强。例如，语法加亮、在线编辑、实时预览等等。这是传统的基于纯文本的媒介所不具备的强大功能。
注：如果配置妥当，DocBook所生成的HTML文档可以加载动态的JavaScript脚本，从而令网页更加灵活。但，由于各网页的需求不尽相同，因此需要配置较多数量的网页模板。
实际上，我们输出为HTML的次数要远高于输出为PDF的次数。我们可能只会在所有文档都完成之后的最后阶段，才一次性地输出为PDF文档，而在其他的99%的时间内，我们都在不断地、重复地输出为HTML文档。因此，将重心放在如何输出高质量的HTML应用程序的效果上面，是绝对有必要的。
鉴于此，在进行与HTML相关的DocBook写作时，我们不妨转换一下思路：先关注构建功能齐全的HTML应用程序，然后再通过特定的工具，将HTML文档的内容转换为DocBook文档。而如果我们遵循上一节中使用规范的article, section等标签来书写，则提取内容就变得非常轻松了 ─ 我们只需提取网页文件中的article部分即可。
博客文章的管理
博客文章一般需要接受用户的评论，由于用户评论需要指向特定的博客文章，因此，博客文章与评论都应纳入到数据库中统一管理。
Safari的阅读视图
当使用了main及section等标签后，并且，当某些section元素的段落子元素大于2个以上时，Safari会出现阅读器视图图标。
阅读视图可以剥去网页中原有的CSS样式，以及过滤掉网页中除主文部分之外的其他内容，以背影色为灰色、前景色为白色的方式来显示主文内容，尤其适合于在移动设备上阅读。它可以让我们更加专注于主文内容，避免受到复杂的网页中无关主文部分的干扰，具有较好的阅读体验。此外，在一些不支持暗黑模式的网站，阅读视图可以有效地保护眼睛。
进入阅读视图模式后，还可以将整个网页的所有主文部分，非常方便地复制下来。
主题模式切换
简介
随着现在越来越多的操作系统加入了暗黑主题与高亮主题的切换功能，在网页中实现主题模式切换越发受到人们的关注。暗黑模式可以很好地保护我们的眼睛。当我们习惯暗黑模式之后，再去访问那些不支持主题切换的网站时，会感觉非常刺眼，其难受程度甚至到了忍无可忍的地步，如果不是必须，则会果断地拒绝访问该网站。因此，从良好的用户体验的角度，网站是否支持主题切换，已经成为衡量网站质量的一项重要指标。
在能够切换主题模式的操作系统上，当我们切换主题模式时，会发现各个应用程序、各个窗口都会立即改变模式。这是因为系统同时通知他们，并要求他们立即统一予以响应。正在运行的浏览器也会收到此消息，但默认情况下，只有浏览器的最上端的地址栏、标题栏与标签页会自动响应而改变颜色，但网页内容不会。这是因为系统将是否响应主题模式切换的自主权交由开发人员决定。我通知到了，但改不改主题颜色，你说了算。
这是浏览器应否响应系统模式切换的内在机制。
如果我们什么都不做，则网页内容主题当然不会改变。如果希望网页内容响应，则有使用浏览器默认值响应及用户手工响应两种方式。
使用浏览器默认值响应
新建一个网页，不使用任何CSS样式。然后，单独设置下面的CSS样式：
在系统中切换主题。您会发现，网面上所有元素会随着系统主题的切换而相应地改变前景色与背景色。当系统主题为浅色时，网页为白底黑字；当系统主题为深色时，网页为黑底白字。
CSS的color-scheme属性可以让浏览器在特定的模式下面，使用默认的颜色值来渲染包括该元素在内的所有子元素的颜色。
上面的代码表示，当收到系统light
或dark
主题模式的消息时，浏览器将使用相应模式下默认的颜色值来设定当前网页的所有元素的颜色值，但不包括那些已经由用户设定了CSS样式的元素。可见，这是一个兜底设置：如果用户对于某些元素不设置，或者忘记设置了，那就由浏览器来代劳了。
而如果只设单个值：
则不管用户如何设置系统主题，浏览器都只会使用默认的暗黑主题来设置网页的主题。同样，如果上面的值改为light
，浏览器都只会使用默认的亮色主题来设置网页的主题。
设置以下的CSS：
我们显式地将网页背景色设为偏亮的白底，因此这实际上就是一个亮色主题。这不对。color-scheme: dark;表示只使用暗黑主题来设置，而我们手工设置了一个亮色主题，如何解决该冲突？规则：如果用户设置了特定的CSS规则，则会覆盖系统默认的暗黑主题颜色值。浏览器根本不会智能地判断用户设置的色调是否相互矛盾。
一般情况下，如果我们的要求较高，默认的色调不会满足我们的需求，因此这种功能作用不是很大。不过在网站建设初期，它还是有些作用的：先快速地使用自己倾向的色调，然后再专注CSS版面设置问题，最后再回来慢慢调试最终的色调。并且，可让我们将有关色调主题的CSS代码集中置于一个地方。
使用prefers-color-scheme手工响应
使用CSS的@media (prefers-color-scheme)，可以根据当前系统主题模式来作出相应的响应。
使用了两个@media (prefers-color-scheme)，分别接收系统相应主题模式的设置值，然后再相应地设置网页的主题模式。
运行网页后，当用户在系统中改变主题模式时，网页仍能实时地收到通知，上面的代码依旧能自动地进行切换CSS样式。
与上一节中的color-scheme所不同的是，@media (prefers-color-scheme)不会有默认值。但我们可以同时使用这两种方式。
使用prefers-color-scheme的问题
如果所有操作系统都支持主题模式的切换，则应用上节所介绍的技术就可简单地收到较好的效果。但实际上，有些操作系统，如麒麟Linux系统，就没有这种系统功能。此外，移动终端上如果没有显式地设置自动主题模式，在移动终端上也收不到通知。因此，单纯地使用上述技术不是一种通用的解决方案。
我们不仅可以通过CSS，还可以通过JavaScript来监听系统的主题模式。要点有二：一是查询，二是判断是否匹配：
如果收到事件信息，则监听其变动的事件。并在当前查询后或收到变动事件信息时，均调用handleColorSchemeChanged事件监听器来判断是否匹配。如果没有，或不匹配，则将网页的最顶层的html元素的className的值设置为dark
.
而在没有主题模式切换的操作系统中，我们收不到此信息。此时可直接判断html元素是否具有className属性值：
如果已经设置了className属性值，则直接返回；如果没有，则补充设置。
CSS的设置
而在CSS中，可用嵌套的子元素来进行设置：
记住用户所选择的主题偏好
系统主题通知是一个确定当前主题的一个来源，但当用户点击网页上的切换主题按钮后，所切换到的主题应优先于系统主题。因此，需要记住用户主题偏好：
当用户手工切换当前页面的主题后，点击链接转到同一网站中的另一网页时，应将用户当前偏好的主题也传至该网页。
使用localStorage而不是sessionStorage，可在同一网站中的不同标签页中都能收到统一的效果。
统一管理色彩
正确使用色彩，在网站开发中具有举足轻重的作用。色彩的使用，难点在于如何寻找一组和谐的颜色。这需要我们掌握一些最基本的色彩理论。但好消息是，现在有越来越多的网站都将各式各样的主题予以开源。因此已经不存在主题资源匮乏的问题。
还有另外的方法可帮助我们快速地确定主题色彩。在我们运行桌面应用程序或访问网站时，如果发现其主题色彩运用得很好，可使用系统的探色器工具软件将这些合作得很好的颜色值都记录下来，然后再从中挑选使用。例如，假设我们收集到了以下一组颜色，我们先将它们存储在第一个CSS文件中：
因为仅从颜色值我们很难判断是哪种颜色，因此先初步地用红、蓝、黄的名称来大致地对它们进行标识分类。
然后，在第二个CSS文件中，根据页面元素所要起的作用，进行第二步的组合：
第三步，再结合上一节的要点，根据具体的选择器，在第三个CSS文件中进行更进一步的嫁接：
这样做，有以下几个方面的好处：
- 我们有了两套明确、清晰的色彩方案
- 当我们需要修改页面上特定元素的颜色值时，只需要从第二个CSS文件中去查找源头颜色并予以修改
- 当需要添加不同的颜色方案时，只需复制并修改第二个CSS文件并添加到网页中就行了
- 第三个CSS文件一旦设计好后，不会再有变化，从而大大减轻了维护的工作量
分为三个CSS文件来管理，其目的在于解藕。三个文件各有分工，各司其职，可有效地解决修改时要在全局范围内不断地搜索相应部分的问题。
当然，在第二步中确定具体颜色值时，因为肉眼无法知晓具体的颜色，可以通过特定的工具软件予以协助。例如，本站的CSS Color Renderer等工具。
工具与资源
图像工具
制作图像是网站建设非常重要的一个环节。下面是个人使用过并觉得较好的一些制图工具软件。
- Visual Designer 2
- Vectornator
- Archi
此外，还有一些可根据代码来生成图像的技术，尤其适合程序员使用。其中许多已经开源。包括：
- GraphViz
- PlantUML
- Mermaid
免费图标网站
下面是存放在postimage.org上的一张图片：
免费存储图片网站
- postimage: 可免费存放图片，并支持外链。