动态HTML(DYNAMICHTML,DHTML)

动态HTML（DYNAMIC HTML,DHTML）是一系列网络技术标准集。我们这里谈到的DHTML应用程序允许你编写Visual Basic代码来响应HTML页面上的操作，而不必把处理传给服务器„„

DHTML应用程序是一个Visual Basic 应用程序，它在一个交互的，基于浏览器的应用程序中使用一种动态DHTML和已编译VISUAL BASIC代码组合。一个DHTML应用程序驻留在浏览器所在机器上，它在那里解释和响应浏览器中最终用户执行的操作。DHTML应用程序使用VISUAL BASIC代码执行大多数相当于以前用脚本CGI处理和其他INTERNET应用程序开发方法来完成的处理，并且其中大多数处理不传到服务器即可完成。

总而言之，DHTML应用程序允许开发者和最终用户按一种新的方式和WEB页面来进行交互。但是DHTML应用程序必须运行在IE4以上。

DHTML应用程序的结构

一个完整的DHTML应用程序通常由以下几部分组成：

1） 一个或多个HTML页面；

2） VISUAL BASIC代码，它处理HTML页面产生的事件；

3） 一个运行时的部件，它存在于WEB浏览器或WEB浏览器控件中的页面上；

4） 一个工程DLL，它包含VISUAL BASIC代码并且被运行时部件访问，当调试或编译工程时，它自动产生。

编制一个DHTML应用程序

(1) 运行VB6.0中文版后，启动一个新的工程并选择“DHTML应用程序”作为工程类型。在“工程资源管理器”窗口中，打开设计器文件夹，然后双击“DHTMLPage1 “来在主窗口中显示它，在VB6.0中将它称作页面设计器。在页面设计器中可以对DHTML应用程序的界面进行设计，用来满足程序对功能的要求。页面设计器提供了各种设计工具。

（2）DHTML应用程序的页面设计

VISUAL BASIC 6.0提供了一个页面设计器。这个页面设计器实际上也是一个简单的网页制作工具。

1： 使用页面设计器进行页面设计

使用VISUAL BASIC自带的DHTML页面设计器，可以在VISUAL BASIC中设计HTML页面。该设计器允许在没有明确地编写任何HTML代码的情况下创建应用程序用户界面。可以添加HTML元素到设计器的绘图平面，根据需要安排它们，并设置控制它们外观的属性。VISUAL BASIC在所见物后面对每一个元素编写HTML代码，将它们保存在指定位置的一个HTML文件中或者保存在设计器本身中。

VISUAL BASIC提供了一组可以添加到页面的控件。这些控件包括最常用的HTML元素，如按钮，文本框，选项按钮，复选框和图像。在页面中不能使用原有的VB控件，如文本框或复选框；而必须使用专用的HTML控件。当打开页面设计器时，在左边的工具条将自动出现HTML控件。

2:设置控件属性

创建完用户界面后，还需要对界面中各个控件的属性进行正确的设置.

3：编写代码

在用户登录页面中，程序需要对用户输入的资料进行验证。如果，用户输入的资料符合校友身份将出现用户登录成功的页面，代码如下：

Private Function ButSubmit_onclick() As Boolean

If = "湖北大学" And Left(, 4) = "9506" Then

feng1 = MsgBox("欢迎你，我的老同学!")

te""

Else

MsgBox ("对不起，你没有资格进入本页！")

= ""

=""

End If

End Function

这里取学号前四个数字尽心验证。95代表95级，06代表专业。在这段代码中， BaseWindow对象的navigate方法被用来移动到要求的位置 age2. html是当工程编译时给页面指定的名字。一旦用户输入的资料不符合要求，则用户输入文本框将被清空。当用户输入出错时，可以通过清除按钮清除输入文本框中内容，代码如下：

Private Function ButReset_onclick() As Boolean

= ""

=""

End Function

当用户成功登录后，提供一个按钮可以连接到登录页面，代码如下：

Private Function ButBack_onclick() As Boolean

te ""

End Function

4:测试DHTML 应用程序

在代码中，由于程序编译后的名字，在测试时需要将其更名为程序临时生成的“DHTMLProject－DHTMLPage1"."DHTMLProject－DHTMLPage2"。即可开始测试程序。

5：生成DHTML应用程序

选择菜单中的生成,编译程序并将程序存放到指定位置。DHTML应用程序的编译方法与任何VISUAL BASIC工程的编译是相同的。通过在“文件”菜单中选取“生成”。一个DHTML应用程序必须被作为一个进程内部或一个DLL文件来编译。

6：发布DHTML应用程序

使用VISUAL BASIC的打包和展开向导（Package and Deployment Wizard）可以包装和发布DHTML应用程序。打包和展开向导将工程 。DLL和所有相关的文件打包到一个“压缩包”或 .cab文件中。然后该向导可以发布这个压缩包文件和它相关支持文件到一个WEB服务器上指定的位置。

要部署的文件包括：

工程的DLL文件

包括VISUAL BASIC运行时DLL和工程的.dsr,.dsx文件。上面一个例子中工程DLL为。当运行打包和展开向导时，这些文件将自动地包装到.CAB文件中。

与工程相关的HTML页面

打包和展开向导没有将它们包装到CAB文件中，但当部署CAB文件时，它将它们复制到WEB站点上指定的位置。

HTML页面引用的任何文件 打包和展开向导不能自动地识别这些从属文件，但可以添加它们到要发布的附加文件列表中。

发布DHTML应用程序INTERNET可以按照以下几个步骤进行：

（1） 调试和编译应用程序；

（2） 使用打包和展开向导生成一个包含应用程序所需文件的CAB文件。

（3） 数字签署CAB文件并重新编译。

（4） 使用打包和展开向导发布应用程序到指定的WEB服务器。

（5） 手工复制与应用程序HTML页面相关的任何文件（如图像）到WEB服务器上需要的位置。

（6） 测试应用程序中的页面确保对相关文件的所有连接能够正常工作，如果不行，可能必须调整WEB服务器上的文件位置来匹配HTML页面中的URL。

自学动态Html——教程一

如果您是HTML的初学者，请您先自学HTML。因为DHTML是现有的HTML技术的一个综合，所以HTML语言对学习动态HTML是非常重要的。

自从HTML 4.0出现以后，引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计，并且使网页具有交互性。其实动态Html（DHtml）并不是一种专门的技术，而是Html技术的一个综合，说白了就是一种技巧，但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了，废话少说，下面开始以实例来说明动态HTML在网页设计中的应用。

例1 使用标志对修饰文本

被修饰文本

本例中，我们使用了标志对来修饰文本，请留意红色字，标志对是加在和标志对之间的，而加上是为了让不支持标志对的浏览器跳过样式表，否则可能会出错。本例先对

除此之外，我们还可以采用另一种方法来实现。请看下边的例子。

例2 直接用style属性修饰文本

被修饰文本

请务必注意font-family后是用单引号来定义字体的（font-family:'宋体'）。好了，现在您已经初步掌握了样式单的用法了，现在我们开始让您的主页动起来，请看下边的例子。

例3 使用鼠标触发事件和动态样式表改变文本

请将鼠标移到上面！

我是变色龙！

在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发，于是执行其后的style定义，此时文字下加了一条直线（coration='underline'的作用），this用来指代当前的对象，即

再次提醒读者，在使用样式单的时候一定要注意格式。比如，在标志对中进行样式单定义时应使用text-decoration:underline，而不是用textDecoration='underline'来修饰文本，后者是用于事件触发中的（如onmouseover或onmouseout事件）。许多CSS属性的名字中都有连字符(像text-decoration)，但是连字符在许多脚本语言（如JavaScript）中是不合法的标识符，因此，在HTML或样式表中指明CSS属性的时候用连字符命名方式，但在作为一个脚本属性时，就必须去掉连字符，并将它后面的第一个字母大写。例如：

text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。

您可能想用鼠标点击文本来改变其的颜色，要做到这一点很简单，只要在onclick事件中定义样式即可，onclick的用法与onmouseover、onmouseout相似。请看下边的例子。

例4 使用onclick动态改变字体的颜色

我是变色龙！

在这一例子中，当您把鼠标移动到文字上时，文字颜色变为红色，当鼠标离开文字时，文字颜色变为绿色，当在文字上单击鼠标时，文字颜色变成了蓝色。

下面是我用样式单制作的一个自认为比较漂亮的Html文件。

例5 “轻松自学动态HTML”的图形标志

例5的效果可以在windows自带的记事本里编写好，然后存为.html文件，然后打开看效果，请注意例子中的红色部分，class属性是用来定义标志对使用的样式类，如

……

OK，您会了吗？样式单就这么简单。

自学动态HTML——教程二

现在我们开始使用JavaScript来编写动态Html，JavaScript是一种脚本语言，使用起来就象是在编写程序一样。实际上，我们只要在Html文件中加入标志对，便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换，也能得到同样的效果。请看下边的例子。

例6 使用鼠标触发事件和动态样式表改变文本

我是变色龙！

例6中在标志对中定义了函数change_text()，当此函数被调用时，它将对对象Dragon的style属性中的color属性进行判断，若其颜色值等于“Red”，则将其color值变为“Green”（=Green的作用），否则将其color值变为“Red”（=Red的作用）。而对change_text()函数的调用是在

时，此文本的颜色将在红色（Red）和绿色（Green）之间变换。Document指代的是例6自身这个Html文档，all指代的是此Html文档的全部对象。

现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性，因为change_text()函数只能对Dragon对象进行颜色变换，若您想对一系列对象的文本（如列表中的每一行文本）进行颜色变换将会使代码增加。不用担心，我们马上解决。为了让change_text()函数更具有通用性，我把CSS样式单与JavaScript相结合，这将更加简单而且方便，请看例7。

例7 CSS样式单与JavaScript相结合改变文本

我是变色龙！

我是变色鸟！

我是变色兔！

从例7中可以看到，我在CSS样式单中定义了red和blue两个样式类，然后在change_text()函数中对调用该函数的对象进行样式类的改变，从而达到颜色的变换，关键语句在于ame=样式类名，此语句能使当前调用函数的对象的className属性改变，若class=red，当调用change_text()函数时，其className=blue，它的样式类也就变成了“blue”。

也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。下边是一个效果不错的DHtml，请仔细阅读。

例8 对列表进行动态变换

• 动态Html(DHtml)

• JavaScript

• VBScript

• 动态服务器页面(ASP)

• FrontPage98

• InternetExplorer

• SQL Server

本例中的特别之处在于红色字部分。CSS样式单首先定义了标志对的样式（body {font-family:宋体;font-size:9pt}），然后定义了另外两个样式类“first”和“later”，first类中的文本修饰是none，既没有修饰，而later的文本修饰是underline，及下加一条直线，并且，later类中还出现了cursor属性，其值为hand，即是网页中鼠标移到超级链结是出现的小手。除了小手外，cursor还可以取其它的值：default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。

注意到语句 eover=change_text;和eout=change_text;只就是我们解决上边提到的问题的关键语句，它们代替了Html文档中所有的onmouseover和onmouseout事件。

您大可以自己设计出更好看、更动感的DHtml来，不怕做不到，就怕想不到。

自学动态HTML——教程三

相信您已经对JavaScript有所掌握，现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来，您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display，它的值可以是（或null）和none。请看例9。

例9 隐藏和显示文本

• 请您点击，OK?

• 哈哈，我变了，请您再点击。

此例中，文本将在您点击以后改变颜色和内容，奇妙吧。display=或null是显示文本，而display=none时是显示文本，上边的代码对您来说应该多能读懂，我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细，大部分是用例子种的注释语句来说明，在此请读者多多谅解。下面的例子能产生闪烁滚动和颜色变换效果。

例11 闪烁滚动和颜色变换效果

请您在以下各行之间移动鼠标……

• AC 米 兰

• 国 际 米 兰

• 尤 文 图 斯

• 佛 罗 伦 萨

• 桑 普 多 利 亚

• 拉 齐 奥

下边我为您举了一个我比较常用的设计网页的方法。重点在于定义表格和链结的样式，并使用表格来控制文本输出。

例11 网页中常用的动态链结设计

a:link是定义链结部分（即语句《a href=……》……《/a》）有链结时的文本样式；a:visited是定义访问过的链结部分的文本样式；a:hover是定义鼠标移到链结部分上边时文本的样式。千万要记住这三个有关链结的样式定义的定义顺序，否则将得不到想要的效果。下边即是此例的效果，请您将鼠标移到文本上边去试试看效果如何。

自学动态Html——教程四

这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！

例12 动态改变文本和Html

《font color=gray》请点击下边的文字……《/font》

• 您好吗?
• 您姓什么?
• 恢复原样!

innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句ext=我很好!）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（）并下加一条直线（），即语句TML=我姓肖!。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。

下面我们来设计一个有趣的动态页面。

例13 文本的动态输入与输出

《form name=frm》

《font color=gray》请在文本框中输入文字:《/font》

在此处输出文本：

此例的动态效果，先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本。

自学动态Html——教程五

今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用《img src=…… alt=……》Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变《img src=…… alt=……》Html标志中的src属性。

例15 动态改变图像

《font style=font-size:9pt color=blue》在下边图形上移动鼠标可以改变图象《/font》

（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）

下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题，当您选择正确时会显示“笑脸”图像，而当您选择错误时将会显示“愁眉苦脸”图像。

例16 一道动态的选择题

《font color=gray》98-99赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：《/font》