动态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 daxue.Value = "湖北大学" And Left(xuehao.Value, 4) = "9506" Then
feng1 = MsgBox("欢迎你，我的老同学!")
BaseWindow.navigate"huaxue.DHTMLPage2.html"
Else
MsgBox ("对不起，你没有资格进入本页！")
daxue.Value = ""
xuehao.Value =""
End If
End Function
这里取学号前四个数字尽心验证。95代表95级，06代表专业。在这段代码中， BaseWindow对象的navigate方法被用来移动到要求的位置 huaxue.DHTMLPage2. html是当工程编译时给页面指定的名字。一旦用户输入的资料不符合要求，则用户输入文本框将被清空。当用户输入出错时，可以通过清除按钮清除输入文本框中内容，代码如下：
Private Function ButReset_onclick() As Boolean
daxue.Value = ""
xuehao.Value =""
End Function
当用户成功登录后，提供一个按钮可以连接到登录页面，代码如下：
Private Function ButBack_onclick() As Boolean
BaseWindow.navigate "huaxue.DHTMLPage1.html"
End Function
4：测试DHTML 应用程序
在代码中，由于huaxue.DHTMLPage1.html程序编译后的名字，在测试时需要将其更名为程序临时生成的“DHTMLProject－DHTMLPage1"."DHTMLProject－DHTMLPage2"。即可开始测试程序。
5：生成DHTML应用程序
选择菜单中的生成huaxue.dll，编译程序并将程序存放到指定位置。DHTML应用程序的编译方法与任何VISUAL BASIC工程的编译是相同的。通过在“文件”菜单中选取“生成”。一个DHTML应用程序必须被
作为一个进程内部或一个DLL文件来编译。
6：发布DHTML应用程序
使用VISUAL BASIC的打包和展开向导（Package and Deployment Wizard）可以包装和发布DHTML 应用程序。打包和展开向导将工程。DLL和所有相关的文件打包到一个“压缩包”或 .cab文件中。然后该向导可以发布这个压缩包文件和它相关支持文件到一个WEB服务器上指定的位置。
要部署的文件包括：
工程的DLL文件
包括VISUAL BASIC运行时DLL和工程的.dsr,.dsx文件。上面一个例子中工程DLL为huaxue.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 使用<style>和</style>标志对修饰文本
<html>
<head>
<title>DHtml举例1</title>
<style><!--
h2 {font-family：宋体;font-size=12pt;text-align:center;color:blue}
-->
</style>
</head>
<body>
<h2>被修饰文本</h2>
</body>
</html>
本例中，我们使用了<style>和</style>标志对来修饰文本，请留意红字，<style>和</style>标志对是加在<head>和</head>标志对之间的，而加上<!--和-->是为了让不支持<style>和</style>标志对的浏览器跳过样式表，否则可能会出错。本例先对<h2></h2>标志对中的文本样式在<style>和</style>标志对中进行定义，于是在后边<h2></h2>中就依样式表定义的内容对文本进行修饰。font-family定义字体，font-size定义字体大小，text-align定义文本对齐方式，color定义前景颜。
除此之外，我们还可以采用另一种方法来实现。请看下边的例子。
例2 直接用style属性修饰文本
<html>
<head>
<title>DHtml举例2</title>
</head>
<body>
<h2 style=font-family:'宋体';color:blue;font-size:12pt;text-align:center>被修饰文本</h2>
</body>
</html>
请务必注意font-family后是用单引号来定义字体的（font-family:'宋体'）。好了，现在您已经初步掌握了样式单的用法了，现在我们开始让您的主页动起来，请看下边的例子。
例3 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例3</title>
</head>
<body>
<h2 onmouseover=Decoration='underline' onmouseout=Decoration='underline' style=font-si ze:12;text-align:center>请将鼠标移到上面！</h2>
<br>
<h3 align=center onmouseover=lor='red' onmouseout=lor='green'>我是变龙！</h3>
</html>
在这个例子中，当您把光标放在文字上时,onmouseover事件将被触发，于是执行其后的style定义，此
时文字下加了一条直线（Decoration='underline'的作用），this用来指代当前的对象，即<h2></h2>标志对。当您把光标移开文字时onmouseout事件被触发，此时文字下的直线消失了（Decoration='underline'的作用），这样网页就有了动态的效果。同理，我们可以通过触发鼠标事件来改变文本的颜，如上例中的”我是变龙”所示。
再次提醒读者，在使用样式单的时候一定要注意格式。比如，在<style></style>标志对中进行样式单定义时应使用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>
<head>
<title>DHtml举例4</title>
</head>
<body>
<h3 align=center onmouseover=lor='red' onmouseout=lor='green' onclick=lor='blue' >我是变龙！</h3>
</body>
</html>
在这一例子中，当您把鼠标移动到文字上时，文字颜变为红，当鼠标离开文字时，文字颜变为绿，当在文字上单击鼠标时，文字颜变成了蓝。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。
例5 “轻松自学动态HTML”的图形标志
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>DHtml举例5</title>
<style>
<!--
body {font-family：宋体;font-size:9pt;color:#00aaff}
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt}
-->
</style>
</head>
<body bgcolor=#000000>
<br>
<table align=center border=0 width=27% bgcolor=#000000 cellpadding=12>
<td width=168><h2 class=top>轻松自学动态 ; HTML</h2>
<h2 class=bottom><span style=font-size:50pt;color:lime><i>t</i></span>
each youself DHtml</h2>
</td>
</tr>
</table>
javascript动态效果
</body>
</html>
例5的效果可以在windows自带的记事本里编写好，然后存为.html文件，然后打开看效果，请注意例子中的红部分，class属性是用来定义标志对使用的样式类，如<h2 class=top>……</h2>指定了 <h2></h2>标志对中使用样式类“top”，而“top”则是在<style></style>标志对中定义的。
OK，您会了吗？样式单就这么简单。
自学动态HTML——教程二
现在我们开始使用JavaScript来编写动态Html，JavaScript是一种脚本语言，使用起来就象是在编写程序一样。实际上，我们只要在Html文件中加入<script language=JavaScript></script>标志对，便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换，也能得到同样的效果。请看下边的例子。
例6 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例6</title>
<script language=JavaScript>
function change_text(){
if(document.all.lor==Red){
document.all.lor=Green;
}
else
{
document.all.lor=Red;
}
}
</script>
</head>
<body>
<br>
<h3 id=Dragon align=center onmouseover=change_text() onmouseout=change_text()>我是变龙！</h3>
</body>
</html>
例6中在<script language=JavaScript></script>标志对中定义了函数change_text()，当此函数被调用时，它将对对象Dragon的style属性中的color属性进行判断，若其颜值等于“Red”，则将其color值变为“Green”（document.all.lor=Green的作用），否则将其color值变为“Red”（documen
t.all.lor=Red 的作用）。而对change_text()函数的调用是在<h3></h3>标志对中进行的，id=Dragon定义了<h3></h3>标志对的对象名为Dragon，onmouseover和onmouseout都调用了change_text()函数，因此只要onmouseover或onmouseout 事件触发，都会执行change_text()函数，于是便改变了Dragon的属性，即当鼠标移动到或离开文本“我是变龙”
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论