---
title: "使用 StyleVision 设计网页：HTML 设计指南"
date: "2012-03-13"
categories:
- "applications"
tags:
- "html"
- "stylevision"
- "web-design"
description: 探索如何使用HTML和StyleVision设计动态网页，利用XML内容实现高效的更新，并利用其强大的格式化功能。
---
Status: #blog
Tags: #html #stylevision #web-design
Categories: [development](/blog/zh/category/development.md)
# 使用 StyleVision 设计网页：HTML 设计指南
当今商业环境变化迅速，这意味着信息以及所需的信息格式经常发生变化。虽然一些网页包含内容相对稳定的部分（例如“关于我们”和“路线”页面），但如今大多数企业网站都在不断更新，添加新的数据。因此，许多组织选择将网页内容存储为XML格式。这使得组织能够以高度高效的方式创建内容，因为XML文件中的信息可以用于多种用途，并以多种输出格式呈现。与XML文件相关的XML Schema描述了内容的结构。StyleVision是一款强大的样式表和报表设计工具，可以帮助您充分利用XML。StyleVision允许您[创建具有复杂格式的网页](https://www.altova.com/zh/stylevision/web-design.html)，采用基于模板的、拖放式设计界面。StyleVision[自动生成XSLT样式表](https://www.altova.com/zh/stylevision/xslt-html.html)，以便您可以将设计集成到新的或现有的网站中。您甚至可以直接从文件菜单生成ASPX Web应用程序。
[](http://lh6.ggpht.com/-H-qFnpImHnA/TzEYFD10sbI/AAAAAAAAAWw/xd9kXGKp02g/s1600-h/clip_image001%25255B6%25255D.png)
在这篇文章中，我们将设计一个网页，以展示 StyleVision 的一些 HTML 格式化功能。虽然 StyleVision 内置的格式化功能允许您通过简单的拖放操作创建复杂的设计，但为了这个示例，我们将使用 [CSS3](https://www.altova.com/zh/stylevision/xslt-css.html)、图片和其他标准的网页设计元素，创建一个网页，即使内容发生变化，也不需要重新格式化。
我们最初的 StyleVision 设计非常简单，可以说是最基础的版本。
如您在下面的“模式树”窗口中看到的，原始 XML 模式的设计目的是为了能够将 XML 内容以书籍的形式发布，其中包含了总览、章节标题、章节子标题以及正文内容。我们只是简单地将对应这些部分的元素拖动到了设计窗口中。
[](http://lh4.ggpht.com/-ObHzvln3T2M/TzEYF4WfRQI/AAAAAAAAAXA/jiNhGNHKSlQ/s1600-h/clip_image002%25255B4%25255D.gif)
如您在下方看到的，XML内容已正确显示——而且我们无需手动编写任何XSLT或HTML代码就能实现这一点。然而，在将其发布为网页之前，它还需要进行样式调整。
[](http://lh6.ggpht.com/-hLYoSfNTqwY/TzEYGl2298I/AAAAAAAAAXQ/U_mqgmdH5aI/s1600-h/clip_image003%25255B4%25255D.png)
虽然在StyleVision界面中的“样式”和“属性”面板中几乎可以对所有设计元素进行格式化，但在此示例中，我们将使用一个CSS文件来应用格式。 这样，如果我们需要更改格式，我们只需在XSLT中指向一个新的CSS文件，而无需直接修改设计本身。
我们将使用Altova公司的XMLSpy软件 [XML 编辑器](https://www.altova.com/zh/xml-editor/) 它集成了CSS2和CSS3的编辑和创作功能，方便我们创建CSS样式。
以下截图展示了我们在 XMLSpy 中创建的 CSS 文件的一部分，其中包含了 h1、h2 和 h3 标题的属性。 我们将在 CSS 文件中定义这些元素。 之后，我们将在 StyleVision 中将它们分配给 XML 文件中的相应元素。
请注意，我们在 h1 标签中使用了 CSS3 的 box-shadow 属性，在 h3 标签中使用了 box-sizing 属性。XMLSpy 和 StyleVision 都支持 HTML5 和 CSS3。
[](http://lh3.ggpht.com/-puzAVL_C0GQ/TzEYHbGkKeI/AAAAAAAAAXg/Jbs-r3id3Pk/s1600-h/clip_image004%25255B4%25255D.png)
一旦我们创建了 CSS 文件，我们就会返回到 StyleVision，并将该文件应用到我们创建的设计中。要将 CSS 文件应用到 StyleVision 设计，我们只需在“设计概览”中点击“_添加新的 CSS 文件_”链接，然后找到并选择该文件即可。
[](http://lh5.ggpht.com/-wP6AoGdp1oE/TzEYH5gIuBI/AAAAAAAAAXw/ML0VQuOItJg/s1600-h/clip_image005%25255B4%25255D.png)
请注意，一个 StyleVision 设计可以支持多个 CSS 文件。我们最近发表了一篇博文，介绍了如何[动态地将 CSS 文件分配给 StyleVision 设计。](https://www.altova.com/blog/2012/01/get-more-mileage-from-your-stylevision.html) 现在，我们可以开始将我们在 CSS 文件中创建的选择器分配给设计中的元素。我们先从章节标题开始。我们将选中章节标题元素的“内容占位符”，然后在菜单栏上的下拉框中选择 "h1"。
[](http://lh6.ggpht.com/-qW-eWAXrfac/TzEYIVYLIJI/AAAAAAAAAYA/nqSArbWHaNs/s1600-h/clip_image006%25255B4%25255D.png)
在我们的 CSS 文件中，我们定义了 h1 元素的字体、字号、颜色和对齐方式。我们还使用了 CSS3 的 `box-shadow` 属性。
以下是我们的设计在HTML代码中的呈现方式，其中使用了h1选择器来定义章节标题元素。
[](http://lh3.ggpht.com/-4r3Bf4jTBTI/TzEYI-jibcI/AAAAAAAAAYQ/4vf9KOnSFlA/s1600-h/clip_image007%25255B4%25255D.png)
同样，我们将把 "h2" 和 "h3" 选择器分别分配给概述和章节小标题元素。 我们的设计现在看起来是这样的。
[](http://lh3.ggpht.com/-BXquuuPNhaM/TzEYJeCEmMI/AAAAAAAAAYc/LfjSNsvaJ_s/s1600-h/clip_image008%25255B4%25255D.gif)
以下是HTML代码的显示效果，请注意，我们使用了CSS3的`box-sizing`属性来定位子标题（“创建引人注目的输出”和“视觉样式表设计”），并将文本围绕它们进行排版。
[](http://lh5.ggpht.com/-Rhd5pkkvhF0/TzEYLdxCXSI/AAAAAAAAAYw/LcNm6UHAYio/s1600-h/clip_image009%25255B4%25255D.png)
最后，我们将使用源XML文件中名为“coverimage”的属性，在页面底部添加一张图片（如图所示）。
[](http://lh5.ggpht.com/-RQANM46r-sw/TzEYNJw_ZxI/AAAAAAAAAZA/TXocXzFmzBY/s1600-h/clip_image010%25255B4%25255D.png)
为了将图片添加到我们的设计中，我们只需将“coverimage”元素从“Schema Tree”（模式树）拖动到“Design Window”（设计窗口），然后选择“创建图片”。这将打开“插入图片”对话框。接下来，我们将切换到“动态”选项卡，点击“编辑 XPath”按钮，然后在“Schema Tree”中选择“cover image”元素。
“插入图片”对话框将显示在下方。
[](http://lh5.ggpht.com/-3BYH6D8mYsQ/TzEYNhlJvuI/AAAAAAAAAZQ/_eZIzfhZuhw/s1600-h/clip_image011%25255B4%25255D.png)
我们还在CSS文件中添加了一些格式设置，用于处理图片。我们使用了CSS3的`border-radius`属性，它可以为元素添加圆角。
以下是我们在 CSS 文件中定义图像格式的部分，这个视图来自 XMLSpy 软件。
[](http://lh6.ggpht.com/-kqKu3KFbBns/TzEYOJ1ABJI/AAAAAAAAAZg/x1CmD0G_QME/s1600-h/clip_image012%25255B4%25255D.png)
除了我们在这里使用的排版技巧之外，我们还可以使用JavaScript函数、条件模板、自动计算等高级功能——但为了本示例的简洁性，我们将保持简单。
我们的设计已经准备就绪，可以正式发布了。以下是HTML视图的截图。
[图片]
既然我们对设计方案感到满意，现在可以通过“文件”菜单来保存自动生成的XSLT样式表。
[](http://lh3.ggpht.com/-P5WjHAVrUb8/TzEYPHCdk5I/AAAAAAAAAaA/Q1iWw8iMi5o/s1600-h/clip_image013%25255B4%25255D.png)
我们还可以通过选择“Web 设计”选项（位于“保存生成的文件”下方），为这个设计生成一个 ASPX Web 应用程序。 我们可以选择生成 HTML 4 或 HTML 5 格式的输出，甚至可以通过“文件”菜单中的“属性”对话框选择 Internet Explorer 的兼容性。
[](http://lh6.ggpht.com/-P7Q475fmxgc/TzEYP7OR1jI/AAAAAAAAAaQ/TVxvGxCnIgg/s1600-h/clip_image014%25255B4%25255D.png)
更重要的是，如果原始数据发生变化，这些变化会自动反映在HTML输出结果中。
如果我们在 XML 文件中添加新的内容，例如，这些新内容将以与原始内容相同的格式呈现，并且所有设计元素都将以正确的方式相互关联，因此无需重新编写 HTML 代码。
我们在这里新增了一个章节的副标题，并在底层XML文件中添加了相关内容，然后在HTML中预览了修改后的效果。
[](http://lh4.ggpht.com/-dQnw-NixtwY/TzEYQQkBpWI/AAAAAAAAAag/fpm63c9Okeg/s1600-h/clip_image015%25255B4%25255D.png)
正如您所看到的，StyleVision 兼具两者的优点：您可以创建一个统一的、适用于所有情况的 HTML 模板，同时具备动态格式化功能。借助 StyleVision 提供的全面格式控制，您可以设计出能够体现您想法的网页和 ASPX 应用程序。