使用 DocBook XML 和 CSS 的简单网站
Web 最初旨在使内容易于访问。今天，Web 开发人员专注于样式和营销，但是快速轻松地组合内容驱动的网站的需求仍然像蒂姆·伯纳斯-李最初构思 HTML 时一样有效。我采用了主要使用 DocBook XML 和 CSS 以及其他一些现成的 Linux 工具的方法，这使我能够建立以内容为中心的简单网站——一个简陋的内容管理系统。
我是一名嵌入式软件开发人员。HTML、XML、CSS 和 Web 总体而言对我所做的事情是外围的。我对 HTML 的细节和特性不像对处理器、NIC 和 UART 那样熟悉。然而今天，Web 是所有事物的一部分。嵌入式处理器在 Linux 下启动并运行的证明通常包括能够在其上浏览网页。我寻找客户，客户通过 Web 寻找我。虽然 JavaScript、跨浏览器 HTML、CSS、PHP、Ruby on Rails 等方面的专业知识不是必不可少的，但是 HTML 的基本知识和使用一些工具快速轻松地创建简单但有用的网站的能力越来越成为软件开发以及许多其他工作的核心技能。DocBook XML 提供了一种创建专注于内容且能够在多种形式（包括网页）中轻松使用的文档的方法。
这种方法有许多要素，并且它们不是高度相互依赖的。即使您不喜欢我的总体方法，您也可以从中提取一些片段并将它们融入您自己的方法中。我是一个软件工具型的人。可能有很多 Web 开发 IDE 可以为您完成所有工作，只要您了解它们，并且可能有很多 Eclipse 插件。功能强大的专用工具通常具有陡峭的学习曲线，只有在您做大量此类工作时才会得到回报。
本文不是关于 DocBook XML 的。它是关于如何使用 CSS 简单地呈现 DocBook XML 文档来构建网站。我不是 Web 开发人员，我选择学习具有广泛用途的工具。我用于构建 Web 内容的工具是用于编辑的 vim、用于宏处理的 m4 或 Perl 以及用于验证的 HTML tidy——与我用于开发软件和编写文档的工具相同。在过去的几年中，我已将基本的 XML，特别是 DocBook XML，添加到我的基本知识列表中。
我手头始终有一个简单的 DocBook XML 文章模板，每当我有灵感写一些比电子邮件更长的技术性内容时，我就会在 vim 中将其调出来。通过使用 DocBook XML 模板，我可以主要关注内容并产生清晰且有意义的结果，而最少强调演示。
最近，我发现借助 CSS，CSS 兼容的浏览器可以直接在任何网站上查看 DocBook XML 文档，而无需转换为 HTML，从而可以轻松地添加到我的网站。对于更复杂的文档，OpenOffice.org 支持 DocBook XML 作为输出格式，并且越来越多的工具可以生成和操作 DocBook XML。DocBook XML 可以直接被 OpenOffice.org 读取，也可以轻松转换为所有常用的文档格式，例如 HTML、PDF、Word 等。XML 的一个目标（在竞争激烈的 XML 文字处理器格式中很难识别的目标）是将内容与演示分离。这是我衷心赞同的原则。
我区分了网站中用于导航的部分和网站的内容。我刻意选择将内容与导航物理分离。除了极少数例外，所有内容页面都没有导航，并且充当独立文档。今天，我使用 DocBook XML 完成它们。以前，我使用 HTML；但是，我始终尝试保持内容和导航之间的分离。我的第一步是构建 HTML 演示/导航框架。我为站点创建主 HTML 索引页，我使用 HTML FRAMES 将显示划分为三个区域：标题、菜单和正文。FRAMES 在 Web 开发中有点不受欢迎，因为它们可以用于捕获其他人的 Web 内容并给人一种印象，即它是您自己的。它们还会阻碍导航，并且可能对残疾人士不太友好。但是，我不知道还有另一种同样易于使用的 Web 构造可以用于将内容与导航和演示分离。还有其他方法可以实现类似的效果，但是我所知道的所有方法都将导航和演示元素合并到内容中。我的目标是能够在 DocBook XML 中开发网站的内容，仅需修改以包含样式表并将演示和导航隔离在其他地方。
这种方法还有另一个异端副作用——它不需要 Web 服务器。您可以在您选择的浏览器中构建和测试所有这些，而无需安装 Web 服务器，完成后，您可以将其全部放在 CD-ROM 上，以便在任何装有 Web 浏览器的系统上查看。
我的索引页的核心是
<frameset class="frame" cols="140,*" bordercolor="#000000" frameborder="0" framespacing="0"> <frame class="frame" src="margin.html" name="Margin" scrolling="no" marginwidth="0" marginheight="0" <frameset class="frame" rows="100,*" bordercolor="#000000" frameborder="0" framespacing="0"> <frame class="frame" src="header.html" name="Header" scrolling="no" marginwidth="0" marginheight="0" /> <frame class="frame" src="home/index.xml" name="Body" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" /> </frameset> </frameset>
这会将浏览器显示划分为三个区域。左侧的菜单区域、顶部的标题以及大部分剩余内容的正文。我的标题页往往非常简单，基本上是
<body class="header" id="body-header"> <div class="header"> <h1 class="header">My Title</h1> </div> </body>
class 和 id 标签允许稍后使用 CSS 来重载样式。
边距几乎同样简单
<body class="margin" id="body-margin">
<div class="menu-box">
<div class="menu" id="home">
<a href="home/index.xml" target="Body">Home</a>
</div>
...
</div>
</body>
同样，class 和 id 标签用于 CSS 样式。menu-box 块元素包围所有菜单项。可以根据需要重复菜单块元素。CSS 可用于设置菜单项的样式以适应个人口味。为链接指定目标意味着当单击菜单项时，它会更改框架集“正文”框架中的文档。
我使用以下 CSS 创建突出显示的菜单按钮
div.menu-box {
display: block;
border-width: 2pt;
border-color: color_bkgr !important;
border-style: inset ;
}
div.menu {
border-style: inset ;
border-width: 5px ;
background: color_menu_bkgr1 !important;
border-color: color_menu_bkgr !important;
color: color_bkgr !important ;
font-weight: bold;
font-size: 8pt;
height: 14pt ;
Width: 110pt;
vertical-align: middle;
x-margin: 5pt;
x-padding: 5pt;
text-align: center;
padding-left: 5pt;
}
div.menu:hover {
position: relative;
top: 1px;
left: 1px;
border-color: color_menu_bkgr1;
background-color: color_menu_bkgr;
}
a.menu { text-decoration: none }
这些是非内容部分的所有关键元素。
菜单系统可以嵌套。将菜单项的目标更改为“Margin”可以拉入新的侧边菜单，并且可以根据需要重复多次。Internet Explorer 对 CSS（尤其是定位）的处理方式存在问题，因此它和正确符合标准的浏览器之间的显示存在细微差异。复杂的跨浏览器 CSS 定位可能非常困难，并且由于 Internet Explorer 7 计划以破坏早期版本的大多数已发布解决方法的方式修复许多 CSS 问题，因此情况进一步复杂化。此外，我建议小心背景颜色。我花了一小段时间未能弄清楚如何消除菜单区域和正文之间的白色条纹，该条纹仅在 Internet Explorer 中出现，并且仅在我使用背景颜色时出现。本文不是关于如何精通花哨的跨浏览器 Web 开发的；重点是提供一种简单的方法来轻松显示看起来令人愉悦的内容，而无需考虑浏览器。对于众多浏览器获得像素级相同的 CSS 跨浏览器结果是一项复杂的任务。
到目前为止，我忽略了 HTML 标头和问题，例如 color_menu_bkgr 不是有效的 HTML/CSS 颜色这一事实。
HTML 页面（例如 index.html、header.html 和 margin.html）需要有效的 HTML 标头，并且它们需要一个链接元素来引用 CSS 样式表，例如
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" title="default">
添加到标头。
上面的 CSS 摘录来自 stylesheet.css，它还可以包含您可能想要添加的任何其他 CSS 或对默认 DocBook CSS 的覆盖。DocBook XML 有许多 CSS 样式表可用——DocBook Wiki 上列出了一些，我使用的特定样式表是 badgers-in-foil（请参阅在线资源）。badgers-in-foil 样式表使我能够在几种不同的浏览器中令人满意地呈现 DocBook XML 文章。
所有 XML 页面都需要添加到 XML 标头的两个样式表链接
<?xml-stylesheet href="/css/docbook-css/driver.css" type="text/css"?> <?xml-stylesheet href="/css/stylesheet.css" type="text/css"?>
第二个链接不是绝对必要的，但它可以用于覆盖或向 DocBook XML 文件添加其他样式信息，而无需更改 DocBook XML 样式表。
我使用宏处理器 m4 处理框架、XML 和 HTML 包装器以及许多重复元素的生成。使用 Perl 或 bash/sed 也可以轻松完成。这使我能够将标准标头、颜色和其他有用的字符串替换定义为 m4 宏。color_bkgr 是一个 m4 宏，它将在任何出现它的地方被 m4 替换为我为此站点选择的背景颜色。每当我需要创建一个新网站时，我都会重复使用相同的框架。我可以通过更改一些宏来创建一个具有不同内容、标题、颜色等的新站点。但是，复杂性逐渐增加到我开始考虑从 m4 迁移到 Perl 进行预处理的地步。我正在使用 XML 和 HTML 的自动生成，因此在处理后使用 HTML tidy 来验证它是一个绝妙的主意。
首先，安装 HTML tidy 和 m4。我主要使用 Debian 和 Debian 衍生产品，因此安装 tidy 和 m4 包括
apt-get install tidy apt-get install m4
大多数发行版都应该提供 m4，并通过其软件包系统提供 tidy。请参阅资源以获取 tidy 和 m4 的主页。
然后，我有一个文本文件 (pages.list)，其中包含所有页面的基本名称列表及其类型：CSS、HTML 和 XML
stylesheet,css index,html header,html margin,html home,xml ...
我使用一个简短的 shell 脚本在每个页面上运行 m4 和 HTML tidy，并将结果放在它们所属的位置
#!/bin/sh
# $Id:
# $URL:
#dest=../test
dest=..
lname=pages.list
dopage() {
echo "$1"
if [ "$2x" == "xmlx" ]; then
if ! [ -d $dest/$1 ]; then
mkdir $dest/$1
fi
m4 -D_xml $1.m4 | tidy -i -xml >$dest/$1/index.xml
elif [ "$2x" == "htmlx" ]; then
m4 $1.m4 | tidy -i >$dest/$1.html
elif [ "$2x" == "cssx" ]; then
m4 -D_css $1.m4 >/var/www/share/css/$1.css
else
echo "Whoops $1 $2"
fi
}
if [ -f $lname ]; then
list=`cat $lname | grep -v '#' | awk '{print $1}' | tr '\n' ' '`
for argv in $list ; do
page=""; fmt=""
page=`echo $argv | awk -F "," '{print $1}'`
fmt=`echo $argv | awk -F "," '{print $2}'`
dopage ${page} ${fmt}
done
fi
现在，m4 可以处理标准标头、样式表链接、宏替换、颜色名称替换等的生成。菜单项甚至可以从宏项自动生成。
用于生成标头页面的 header.m4 文件变为
define(_page,header)dnl include(defs.m4)dnl include(hdr.m4)dnl <div class="header"> <h1 class="header">_title</h1> </div> include(ftr.m4)dnl
查看我们创建的任何框架和内容都不需要 Web 服务器，但是大多数网页都由 Web 服务器分发。大多数 Web 服务器都不需要额外的配置；但是，添加到 /etc/apache2/conf.d 的以下 CSS 配置文件会创建一个别名，允许跨多个站点共享 CSS 目录，或者无论 Web 站点内的相对路径如何，都可以轻松引用它
Alias /css /var/www/share/css/ <Location /css> Order allow,deny Allow from all Options Indexes FollowSymLinks MultiViews </Location>
这是一种软件工具方法。对于少量内容很少的网站，添加自动化生成 HTML 或 XML 标头和页脚的复杂性没有任何好处。在内容量大、频繁修改或站点数量众多时，可能会有很大的好处。
我几乎没有触及 DocBook XML。我大学时开始使用文本格式化程序（如 runoff、nroff 和 text）在我的 H8 上进行“文字处理”。将内容与外观分离的概念自然回归到我的非 WYSIWYG 文字处理根源。
有工具可用于对 XML 文档进行 WYSIWYG 处理。如果您更习惯于 WYSIWYG 文字处理器，最简单的方法是使用 OpenOffice.org，它可以将文档另存为 DocBook XML。但是，OpenOffice.org 的 DocBook XML 功能有限。通常不可能从格式良好的 OpenOffice.org 格式或 Word 格式文件转换为 DocBook XML 文档，而不会丢失演示文稿的某些方面。Plain DocBook XML 比演示细节更关注内容和结构。OpenOffice.org 不会将样式表与保存的 DocBook XML 文档关联，因此样式项（例如字体、字号、缩进等）将由您使用的 DocBook XML CSS 提供。如果您不完全满意，您可以修改样式表或通过“级联”新样式表来覆盖它，从而更改您想要更改的元素。
正如我之前提到的，我对 badgers-in-foil 样式表感到满意。我的 CSS 几乎没有做任何更改。我更专注于轻松创建可读文档，并将它们添加到我的网站或根据需要将它们转换为其他文件格式。正如我提到的，我通常选择从简单的 DocBook XML 文章模板开始。我使用 vim 将我的内容添加到该模板。该模板使用了最少的 DocBook XML，除了某些 XML 基础知识（例如确保开始和结束标记保持匹配）之外，我的段落几乎没有使用几个非常明显的标记。
精通 DocBook XML 的用户可以掌握丰富的 DocBook XML 结构，但是普通用户可以通过缓慢学习几个标签轻松生成越来越复杂的文档。我发现 DocBook XML 比 HTML 易用得多。XML 在标记匹配和嵌套规则方面是严格的，并且很少或根本没有特性。结构和组织——列表、表格、段落、章节、节等等——都在 DocBook XML 中完成。外观和演示文稿决策在样式表中制定。有能力的 CSS 开发人员可以将基本的 DocBook XML 文章转换为优雅的东西。但是，我的目标不是优雅的文档和网站，而是快速而简单地使内容在各种格式中具有信息性和可读性。
DocBook XML 是一种越来越流行的构建 Web 文档的方法。许多开源项目以及 Linux 内核越来越依赖 DocBook XML 作为文档的标准格式。《Linux 文档项目》提供了一份作者指南，其中包含我经常使用的示例文章模板，以及大量指向其他 DocBook XML 资源的链接。Eric Raymond 的“DocBook Demystification HOWTO”出色地解释了为什么 DocBook XML 很重要以及为什么它正在取代大多数其他开源文档格式。Michael Smith 的“听我的建议：不要学习 XML”与之类似，并解释了为什么有价值地使用 DocBook XML 不必涉及成为 XML 或众多相关 XML 技术方面的专家。权威指南（作者 Norman Walsh 和 Leonard Muellner）将为您提供您可能需要了解的更多信息，以及当您对 DocBook XML 的使用开始变得更加复杂时，提供关键答案。最后，我希望本文清楚地表明，有效利用 DocBook XML 可以很简单，并且只需要开发最少的新技能。
本文的资源： /article/9263。
Dave Lynch 是一名软件顾问。Web 开发、XML、CSS 和 HTML 是他编写的嵌入式和系统软件的偶尔切线元素，通常在 Linux 下，徒劳地试图谋生。在另一生中，他是一名建筑师，目前，当他不破坏他的网站或为客户编写软件时，他会通过建造自己的房屋来让自己忙碌起来。
