您好，脚本专家！脚本就像生活，给人的观感非常重要
Microsoft 脚本专家
几百年， 甚至几千年以来，哲学家和圣人们都一直在告诫我们，在判断人或事的时候，不要只看外表。（提醒您，我们不应该对别人妄下判断；毕竟，情人眼里出西施。）要知道俗话说得好：真正的美来自于内在，而不是外表，您的本质远比您的外貌重要。
对于这一点，脚本专家只能给出一个评价：那就是废话。
没错，就是废话。脚本专家首先承认在完美的世界中，外观并不重要。但是我们并不是生活在完美的世界中。如果我们是生活在完美的世界中，那么法式炸薯条和热巧克力酱圣代就可以构成两大主食了。无论您愿不愿意，外观真的很重要。这对于脚本和其他东西都是一样的道理。
脚本专家注意到很少有人会被在命令窗口中运行的 VBScript 脚本纯粹的美而感动得痛哭流涕。（也许脚本专家 Dean Tsaltas 算得上一位，但是他是我们所能想到的仅有一位。）
另一方面，在我们这个高科技世界里，脚本专家在编写在命令窗口中运行的脚本时已不受限制，这也是实情。幸亏有了 HTML 应用程序 (HTA)，脚本专家才能够访问 DHTML 的功能，从而可以为脚本创建 GUI。可以利用这些相同的 HTML 技巧来创建 Windows Vista™ 的小工具，正如我们知道的那样，这是一个有可能会彻底颠覆系统管理脚本编写的方法。不过猜猜看?一旦您开始讨论 GUI，所有关于美是肤浅的这种陈旧老观念立即就会被扫地出门。对于在图形环境中运行的脚本来说，外观和功能与性能同等重要。
这就是问题所在。毕竟，我们只是脚本专家；我们怎么知道如何创建图形用户界面呢？似乎我们不太走运，对吗？
也许是的。但也许又不是。我们不是刚刚才听到有人说过“多亏了脚本专家”这样的话吗？
没有，真的没有。我们刚刚没听到有人这么说吗？或许是他们在喃喃自语或有些问题......
好吧，这没关系。应该有人曾经这样说过的，因为有脚本专家在这里提供帮助（不管您是否需要我们的帮助）。
为了带您初步了解 GUI 的奇妙世界，让我们看一下简单的小 HTA 的开始部分。（如果您想了解有关创建 HTA 的详细信息，请参阅 HTA 开发人员中心。）
我们在图 1 看到的便是奇特的桌面信息系统的第一部分。正如您所看到的那样，我们首先是在 HTA 窗口的右上角放置一个漂亮的小图形。这个思路是想在 HTA 第一次加载时，它会检索登录用户的名称，然后在此图像的顶部显示用户名及计算机名称。稍后我们会将各种类型的其他非常酷的项目添加到 HTA，但是正如他们所说的，要事第一。
图 1** 非常漂亮的 HTA 图形界面的初始 **
是的，我们确实不知道“他们”是谁。可能是其他哲学家中的某一位。可能是伏尔泰。因为这听起来像伏尔泰说的话。
当然，这是一个漂亮、简单的小应用程序，但是它的...美...也许还不能让脚本专家 Dean 感动得流泪。但是它称得上是一个很有用的演示工具，运用了适用于多种不同情况的基本概念。毕竟，很多这些夸张的 Windows Vista 小工具都是基于相同的原则运行的；它们只显示奇特的图形（即量表或刻度盘），然后在此图形的顶部写入一些文本。这使您看起来似乎拥有了一个非常酷的小量表，可以显示可用的磁盘空间，而实际上，您真正所拥有的是一个带有某个动态文本的通用图形结构。
嗯，坦白地说，这对我们没有什么意义。但是在我们深入研读这期专栏后，这些问题就会明朗化了。
关于我们能显示一个图形然后再于此图形的顶部写入文本的概念，还存在一个问题：就是它不起作用。可是，使用基本的 HTML 标记我们反而能获得一些类似图 2 中的效果。这可能并不是我们希望的情况。也许尼采说的“人类永远别指望能将文字放到图形的顶部，至少在 HTA 中就不行”是对的。
图 2** 覆盖文本的首次尝试 **
又或者也许是尼采错了：我们不是刚刚听到有人说——好吧，没关系？事实证明，我们不能使用传统的 HTML 做我们想做的事；它就是不起作用。当然，理论上我们可以将我们的图形创建成背景图形，然后使用表和不间断空格和各种其他小技巧来尝试让文本覆盖图片。之所以说“理论上”，我们有很好的理由，即除了最简单的情形之外，这个策略根本不起作用。
事实证明，还有一个更好的方法可以在 HTA 或 Windows Vista 小工具中创建奇特的布局：即级联样式表，说 CSS 可能更为人熟悉。
CSS 可用来定义文档的字体、边距和对齐方式、颜色和其他显示方面。（它特别适合网页。但是，由于 HTA 和小工具实质上就是网页，所以 CSS 同样适用于它们。)我们没法一一讨论所有您可以使用 CSS 进行的操作，因此如需详细信息，您可以非常方便地参阅 MSDN® 上详尽的 CSS 参考文档。一言以蔽之，现在我们可以使用 CSS 精密地控制 HTA 的布局，包括可以将一个项目（我们的文本）覆盖到另一个项目（我们的图形）上。
我们将阐述我们是如何处理所有情况的。但是在开始阐述之前，让我们先看一下图 3 中简单的 HTA 的代码。
Figure 3 最后，我们所获得的脚本......
<SCRIPT LANGUAGE=”VBScript”>
Sub Window_OnLoad
Set objNetwork = CreateObject(“Wscript.Network”)
strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = “<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>” & _
strUser & “<br>” & strComputer & “</font></p>”
End Sub
</SCRIPT>
<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>
正如您看到的那样，这个代码的内容并不多。我们有一个 Window_OnLoad 子例程，它可以（根据名称）在 HTA 每次启动或刷新时自动运行。我们将马上讨论这个子例程。此外，我们还有两个 HTML 元素：图形和范围。您肯定知道，我们会使用这些标记来插入图形，从而可以使用对齐属性来确保该图片显示在窗口的右边：
<img src=”test2.jpg” align=”right”>
它为我们提供了这个范围的 HTML 标记：
<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>
好了，我们已在这里使用了范围标记。范围标记到底是什么呢？嗯，实际上，范围只是 HTA 的一个指定区域；它是 HTA 窗口的一个“已标记”部分，我们可以用编程方式进行标识（主要是因为我们已将 ID UserData 指定给范围）。一旦设置了范围，我们就可以编写为该范围指定文本或 HTML 代码的子例程。实际上，我们不但可以这样做，在我们的 HTA 中我们也已经这样做了。
但是，正如我们说过的，我们会在稍后加以讨论。在我们讨论之前，我们需要先看一下已添加到范围标记中的样式参数：
style=”position:absolute;left:770px;top:150px”
这个参数，如您所料，是将动态文本成功置于图形顶部的关键。实际上我们在这里指定了三个独立的样式属性。
Position 我们已告诉 HTA，我们希望范围的精确位置在什么地方。这从本质上意味着我们始终要范围处在相同的位置，即使这意味着（在本例中便是如此）该文本会被写入其他项目（例如图形）的顶部。
Left 它仅指定了范围相对于 HTA 窗口最左边的位置。本例中，我们想要范围在距左侧 770 像素 (770px) 的位置开始。
Top 这个设置和 Left 属性非常相似，只不过这次我们是指定范围相对于 HTA 窗口上边缘的位置。本例中，我们要在范围开始之前在距窗口顶部往下 150 像素 (150px) 的地方开始。
我们是如何知道要将我们的范围的左边设置成 770 像素，而将顶部设置成 150 像素的呢？好，实话告诉您，我们并不知道。相反，我们是靠猜的；我们将图形放在页面上，并为范围的 Left 和 Top 属性指定值。然后我们打开 HTA，查看效果。正如您所料，我们可能偏了一点点，因此我们调整这些值，再刷新 HTA，然后再查看效果。我们这样做了几次，就像 Goldilocks，直到我们认为效果刚好为止。
注意：您可能知道 Goldilocks 和三只小熊、它们的床和椅子、不是太烫就是太凉的麦片粥等等。但是我们并不确定是否可以将 Goldilocks 看作是一位伟大的哲学家。但是您可能会说，看看她如何闯入别人家里，喝别人的麦片粥，坐别人的椅子，睡别人的床而没发生任何问题，显然在她身上体现了独特的哲学见解。
不管怎样，图 4 显示了我们的 HTA 现在的外观。当然，它不可能是一件艺术作品，但是我们倒是想看看毕加索会如何以编程方式打印图形顶部的信息。
图 4** 看看样式的强大功能 **
说到这儿，我们是如何以编程方式打印图形顶部的信息的呢？嗯，我们有好消息告诉您：终于到了要讨论 Window_OnLoad 子例程的时候了，如图 5 中所示。
Figure 5 Window_OnLoad 子例程
Sub Window_OnLoad
Set objNetwork = CreateObject(“Wscript.Network”)
strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = “<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>” & _
strUser & “<br>” & strComputer & “</font></p>”
End Sub
您知道，当我们可以更仔细地查看这个子例程时，我们发现实际上没有什么可讨论的，不是吗？正如您所看到的那样，我们首先是创建 Wscript.Network 对象的示例。然后我们使用这些代码行来检索用户名和域以及计算机名称：
strUser = objNetwork.UserDomain & “\” & _
objNetwork.UserName
strComputer= objNetwork.ComputerName
当然，那正好是我们想要写入 HTA 窗口的信息。我们需要做的就是将 strUser 和 strComputer 变量与小 HTML 标记结合起来，然后将产生的字符串分配给范围的 InnerHTML 属性：
UserData.InnerHTML = _
“<p align = ‘center’> “ & _
“<font style=’font-size:18pt;color:white’>”_
& strUser & “<br>” & strComputer & _
“</font></p>”
是的，我们知道那是一个看起来有点复杂的代码。但是它真得不是那么难弄。它只是看起来复杂而已，因为我们是将好几个项目结合到一个字符串中。我们以段落开始标记为开端，这个标记指定我们想使段落中的文字居中。
“<p align = ‘center’> “
接下来是字体开始标记，它指定我们应使用 18 号白色文本：
“<font style=’font-size:18pt;color:white’>”
strUser 是存放我们用户名的变量，格式为 Domain\UserName。“<br>”是插入一个换行符。我们插入它，以使用户名出现在一行中，而计算机名称出现在第二行中。strComputer 是存放计算机名称的变量。最后，我们添加字体结束标记和段落结束标记：
“</font></p>”
当您分别观察各个部分的时候，可以发现这个代码远没您想像得那么复杂。
顺便说一下，您可以放置差不多所有您想放入的 HTML 元素。例如，假设您想要一个按钮位于图形下面的居中位置。要达到这个效果，只要将它添加到您的 HTA 代码中：
<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>
结果产生的 HTA 如图 6 所示。
图 6** 如此可爱的按钮 **
此外，您必须摆弄这个按钮，使其置于正好的位置，但是这个过程不能太长。实际上，如果您愿意做一道数学题，您可能可以提前确定正确的位置。您需要知道的就是每个对象的宽度和高度（有些您可以通过使用样式参数来指定）和 HTA 窗口的宽度和高度。在默认情况下，至少在脚本专家的测试计算机中，HTA 的宽度大约为 1020 像素宽，高度大约为 685 像素（当然，效果可能会有所不同）。如果没有别的问题，您可以开始从这些数字入手，然后调整它们直到符合您的要求为止。
很显然，这是一个全面但过于简单的 CSS 简介，但是它为您提供了美化脚本的入门知识。哲学家可能会鄙视这些尝试，并会告诉您脚本真正的美来自于内在，而非外观。但是让我们换个角度思考。谁是史上最伟大的哲学家呢？没错：是柏拉图、苏格拉底、亚里斯多德，等等。明确这一点后，我想提一个问题：您见过这些哲学家的照片吗？这些说美不重要的人都没有留下一张自己的照片，您不觉得很有意思吗？不觉得奇怪吗？好些问题值得我们思索。
Microsoft 脚本专家为 Microsoft 工作，也就是受雇于 Microsoft。在玩、教或看棒球（以及各种其他活动）的闲暇之余，他们还负责维护 TechNet 脚本中心。您可以光顾他们的网站 www.scriptingguys.com，看看他们都在干些什么。
© 2008 Microsoft Corporation 与 CMP Media, LLC.保留所有权利；不得对全文或部分内容进行复制.