使用 StyleVision 设计网页：HTML 设计指南

当今商业环境变化迅速，这意味着信息以及所需的信息格式经常发生变化。虽然一些网页包含内容相对稳定的部分（例如“关于我们”和“路线”页面），但如今大多数企业网站都在不断更新，添加新的数据。因此，许多组织选择将网页内容存储为XML格式。这使得组织能够以高度高效的方式创建内容，因为XML文件中的信息可以用于多种用途，并以多种输出格式呈现。与XML文件相关的XML Schema描述了内容的结构。StyleVision是一款强大的样式表和报表设计工具，可以帮助您充分利用XML。StyleVision允许您创建具有复杂格式的网页，采用基于模板的、拖放式设计界面。StyleVision自动生成XSLT样式表，以便您可以将设计集成到新的或现有的网站中。您甚至可以直接从文件菜单生成ASPX Web应用程序。

在这篇文章中，我们将设计一个网页，以展示 StyleVision 的一些 HTML 格式化功能。虽然 StyleVision 内置的格式化功能允许您通过简单的拖放操作创建复杂的设计，但为了这个示例，我们将使用 CSS3、图片和其他标准的网页设计元素，创建一个网页，即使内容发生变化，也不需要重新格式化。

我们最初的 StyleVision 设计非常简单，可以说是最基础的版本。

如您在下面的“模式树”窗口中看到的，原始 XML 模式的设计目的是为了能够将 XML 内容以书籍的形式发布，其中包含了总览、章节标题、章节子标题以及正文内容。我们只是简单地将对应这些部分的元素拖动到了设计窗口中。

如您在下方看到的，XML内容已正确显示——而且我们无需手动编写任何XSLT或HTML代码就能实现这一点。然而，在将其发布为网页之前，它还需要进行样式调整。

虽然在StyleVision界面中的“样式”和“属性”面板中几乎可以对所有设计元素进行格式化，但在此示例中，我们将使用一个CSS文件来应用格式。这样，如果我们需要更改格式，我们只需在XSLT中指向一个新的CSS文件，而无需直接修改设计本身。

我们将使用Altova公司的XMLSpy软件 XML 编辑器它集成了CSS2和CSS3的编辑和创作功能，方便我们创建CSS样式。

以下截图展示了我们在 XMLSpy 中创建的 CSS 文件的一部分，其中包含了 h1、h2 和 h3 标题的属性。我们将在 CSS 文件中定义这些元素。之后，我们将在 StyleVision 中将它们分配给 XML 文件中的相应元素。

请注意，我们在 h1 标签中使用了 CSS3 的 box-shadow 属性，在 h3 标签中使用了 box-sizing 属性。XMLSpy 和 StyleVision 都支持 HTML5 和 CSS3。

一旦我们创建了 CSS 文件，我们就会返回到 StyleVision，并将该文件应用到我们创建的设计中。要将 CSS 文件应用到 StyleVision 设计，我们只需在“设计概览”中点击“添加新的 CSS 文件”链接，然后找到并选择该文件即可。

请注意，一个 StyleVision 设计可以支持多个 CSS 文件。我们最近发表了一篇博文，介绍了如何动态地将 CSS 文件分配给 StyleVision 设计。现在，我们可以开始将我们在 CSS 文件中创建的选择器分配给设计中的元素。我们先从章节标题开始。我们将选中章节标题元素的“内容占位符”，然后在菜单栏上的下拉框中选择 "h1"。

在我们的 CSS 文件中，我们定义了 h1 元素的字体、字号、颜色和对齐方式。我们还使用了 CSS3 的 box-shadow 属性。

以下是我们的设计在HTML代码中的呈现方式，其中使用了h1选择器来定义章节标题元素。

同样，我们将把 "h2" 和 "h3" 选择器分别分配给概述和章节小标题元素。我们的设计现在看起来是这样的。

以下是HTML代码的显示效果，请注意，我们使用了CSS3的box-sizing属性来定位子标题（“创建引人注目的输出”和“视觉样式表设计”），并将文本围绕它们进行排版。

最后，我们将使用源XML文件中名为“coverimage”的属性，在页面底部添加一张图片（如图所示）。

为了将图片添加到我们的设计中，我们只需将“coverimage”元素从“Schema Tree”（模式树）拖动到“Design Window”（设计窗口），然后选择“创建图片”。这将打开“插入图片”对话框。接下来，我们将切换到“动态”选项卡，点击“编辑 XPath”按钮，然后在“Schema Tree”中选择“cover image”元素。

“插入图片”对话框将显示在下方。