您现在的位置:首页 >> 网络教学 >> WEB编程技术 >> 内容

VB与DHTML

时间:2009-6-19 10:51:58 点击:4057

一、HTML及DHTML简介

(一)DHTML页面设计器

World Wide Web即WWW,又称万维网,是Internet上的信息检索工具。使用专门的网页开发工具,如VBScript、JavaScript等语言或软件可以设计Web网页。在还没有VB的时候,没有极深的专业知识,是不敢涉足网络编程的。但现在,在VB里,并不需要掌握这些专门的网页开发工具,而直接使用集成的动态HTML语言(简称DHTML)来开发基于HTML语言的应用程序。不同于由静态HTML语言(超文本语言)开发的存放在服务器上难以变更的网页,这些应用程序以HTML文档和DLL动态链接库文件存储在客户机上使用,可以访问Internet服务器,且具有更快的响应速度。

(二)HTML语言

HTML语言,称为超文本标记语言,通过它可以往普通文档中加入一些特殊的标识符(这些标识符具有一定的语法结构)。HTML文档也称为Web文档,它由文本、图形、声音和超链接组成。超链接是嵌入在文本中的特殊指令,它可以使浏览器装入特殊的页面。每个HTML文档称为一个Web页面,页面是浏览器中看到的内容。Internet上的Web站点一般由多个页面组成,可以通过超链接在页面间切换。所有的页面均放在作为服务器的计算机上,它由任何发出请求的计算机提供指定的页面。

1.       HTML文件的基本结构

HTML文件由标记、代码和注释组成。标记是HTML中用来控制文字、图形等显示方式的符号。例如:

<p><font size= “7” color= “#0000FF”> </font>江山留胜迹,我辈复登临。</p>

是一个标记,表示以7号蓝色字显示文字“无风荷叶动”。其中“<>”表示这是HTML的标记而非普通文本,font是标记,/font是结束标记,表示前面font标记的结束,size和color是属性,7和#0000FF分别是它们的值。HTML标记的一般格式为:

<标记(名称) 属性1=“属性值1”属性2=“属性值2”属性3=“属性值3”……>

文本内容

</标记(名称>

有的标记没有结束标记,称为单标记。

从上面的例子可以看出,一个HTML网页文件有如下基本结构:

(1)注释:文件中的注释用“!”标记,“<!”表示注释开始,“>”表示注释结束,中间的所有内容表示注释,且可以换行,它们并不在浏览器中显示出来,仅为设计人员阅读方便。注释可以放在任何地方。

(2)HTML文件标记:HTML文件以<html>开头,</html>结尾。虽然HTML文件标记在语法上是可选的,但如果省略,有些浏览器有时可能会发生错误。因此,在每个文件中应加上该标记。

(3)文件头部标记:<head></head> 之间的内容表示文件的头部信息,标记网页的标题、预定义变量等。其中常用的是title标记,用来说明网页的标题,<title></title>之间的文字将显示在浏览器的标题栏中,之中不能有其他标记。head标记和title标记都是可选的,但建议不要省略。

(4)文件主体用<body></body>标记:网页正文中的所有内容(包括相应的格式化标记)都包含在这个标记之间,包括文字、表格、图象、声音和动画等。

2.       HTML语法规则

HTML语言遵循以下语法规则:

(1)         HTML文件以纯文本形式存放,扩展名为“*.htm”或“*.html”。若系统为UNIX系统,扩展名必须为“*.html”。

(2)         HTML标记不区分大小写,<html>和<HTML>是相同的。

(3)         多数HTML标记可以嵌套,但不可以交叉。例如:

<p><font color= “#0000FF”face= “方正粗圆简体,方正黑体”>页面设计</p></font>

将不能正确显示。

(4)         HTML文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。例如:

<p><font color= “#000000”face= “方正粗圆简体,方正黑体”>

接着前面的部分,我们讲页面设计

 </font></p>

<p><font color= “#000000”

   face= “方正粗圆简体,方正黑体” 接着前面的部分,

我们讲页面设计

</font></p>

都是正确的,且显示效果相同,但html标记中的一个单词不能分两行书写。

(5)         HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用<br>标记,换段用<p>标记,<p>表示段落开始,</p>表示段落结束,如果源文件中有多个连续空格,显示时也只显示一个。若需要多个空格,可以使用多个&nbsp。

3.HTML常用标记

①HTML文件标记

功能:说明文件为HTML文件。

格式:<html>…</html>

说明:

<html>放在文件开头,</html>放在文件结尾,中间可以加入其他标记和文字。它们都是可选标记,即可以省略,但不推荐这么做。

②文件头部标记

功能:说明文件头部。

格式:<head>…</head>

说明:

l         该标记出现在文件的起始部分、用来说明文件的有关信息,如文件标题、搜索引擎,可用的关键词以及不属于可见网页内容的其他信息。

l         head标记的起始标记和结束标记之间可以插入其他标记,如title标记等。

③网页标题标记

功能:设置页面标题

格式:< title>…</title >

说明:网页标题是提供网页内容和功能的提示性文字,它出现在浏览器的标题栏中,一个网页只有一个标题,并且应出现在文件的头部。

④文件主体标记

功能:设置文件主体

格式:

<body background= “img-URL”bgcolor= “color”text= “color”alink= “color” vlink= “color”leftmargin= “value” topmargin= “value”>

</body>

其中:

l         background:设置网页背景图像。

l         bgcolor:设置网页背景颜色,默认为白色。

l         text设置网页非链接文字的色彩,默认为黑色。

l         link:设置网页链接文字的色彩,默认为蓝色。

l         alink:设置网页正被单击的链接文字的色彩,默认为蓝色。

l         vlink: 设置网页已经单击(访问)过的链接文字的色彩,默认为蓝色。

l         leftmargin:设置页面左边空白。

l         topmargin:设置页面上面空白。

l         image-URL:图像文件的路径。

l         color:颜色值。可以是颜色代码,如RED(红的)、GREEN(绿)、BUUE(蓝)、YELLOW(黄)、WHITE(白)和BLACK(黑)等。也可以是#加6位十六进制数,如#000000(黑)、#0000FF(蓝)、#FFFFFF(白)、和#FF0000(红)等。

l         value:空白量。可以是数值,也可以是相对页面窗口宽度和高度的百分比。

说明:

l         body标记说明文件的主体,可以省略,中间可以插入其他标记和文字。

l         其属性可以省略,也可以有一个或多个。

l         若使用网页背景图像属性,当图像小于浏览窗口时,浏览器将以多个背景图像的方式铺满整个显示窗口。

例如:

<body bgcolor= “#008000”text= “#00000”>…</body>

设置背景为绿色,普通前景文本为白色(除非再用font标记说明)。

<body background= “/images/bgimage01.jpg”>…</body>

将images目录下的bgimage01.jpg图像文件设置为背景图像。

⑤超链接标记

功能:建立超链接

格式:<ahref = “URL”target= “window_name”>显示文本或图像</a>

其中:

l         href:要链接到目标的URL地址。

l         URL要链接到的网页、网站或电子邮件地址,可以是绝对地址,也可以是相对地址,如http://www.sohu.com.cn、research.htm、mailto:xinwenzx@263.net等。

l         target:指出要显示超链接内容的窗口名,如果该窗口不存在,则打开一个新窗口。

说明:该标记建立超链接,标记中间可以嵌套其他标记,如图像标记image、文本格式标记font等。当在浏览器窗口中单击显示文本或图像时,将在指定的窗口中显示相应的内容。

例如:

<a  href= “www.sohu.com.cn”target= “sohu”>搜狐网站</a>

单击“搜狐网站”,打开一个名为“sohu”的新窗口,在其中显示搜狐网站的主页。

<a  href= “English.htm”>English Version </a>

单击“中国地图”时,将在当前窗口显示English.htm文件的内容。

<a  href= “mainto:xinwenzx@sina.com”>联系我们 </a>

单击“联系我们”,将打开Outlook或其他电子邮件软件,收件人地址为xinwenzx@sina.com,就可以给作者写信了。

⑥标尺线

功能:在页面上画横线。

格式:<hr width= “value” size= “value2” align= “value3” color= “color1”>

其中:

l         width:标尺线长度。value1的值可以是点数,如50、100、200等,窗口改变时,横线宽度不变,也可以是相对窗口的百分比,如50%、100%,默认是100%。

l         size:标尺线的高度。value2的值可以是绝对点数,也可以是(相对长度的)百分比,默认高度为1。

l         align:在页面中的水平位置。value13的值可以是Left(居左)、right(居右)、center(居中),默认是居中。

l         color:标尺线的颜色。color1为#加6位十六进制RGB数码或者预定义色彩,如Black、Olive、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow和Aqua等。

说明:当size值较大时,可以产生长方形或正方形图形。

(2)文字格式标记

①标题格式标记

功能:用于定义文章内章节标题的显示格式。

格式:<hn align= “对齐方式”>…</hn>

其中:

l         n:标题字号。可以是1、2、3、4、5和6,数字越小,字号越大。

l         align:水平对齐方式。取值为Left、right或center。

说明:用该标记实现文章标题的效果有限,通常用font标记实现文章实际标题的丰富多彩效果。

②文字格式标记

功能:设置网页中普通文字的显示效果。

格式:<font face= “字体” size= “字号” color= “颜色”>…(文字)</font>

其中:

l         face:指定文字的字体。如“楷体_GB2312”表示楷体,“黑体”表示黑体,“宋体”表示宋体。

l         size字号,表示文字的大小,其值为1~7之间的整数,值越大,字越大。若数字前面加上“+”或“-”,则表示相对基准字号的大小,如基准字号为3号,则+3表示6号字。

基准字号用如下标记定义。

格式:<basefont size= “基准字号”>

其中“基准字号”也是1~7之间的整数。

l         color是文字颜色,颜色值的选择同上。

注意:浏览器显示字体与客户端安装的字体有关,如果网页文件中设置了客户端没有安装的字体,则以默认的送体字显示。因此,在使用字体时,应尽量使用一般操作系统都会安装的宋体、黑体和楷体字。

③字型设置标记

功能:设置文字的风格,如黑体、斜体、带下划线等。这是一组标记,各种标记的格式和具体功能列在表13-5中。

表13-5 字型设置标记

标  记

格  式

功  能

<b>

<b>受影响的文字</b>

黑体

<i>

<i>受影响的文字</i>

斜体

<u>

<u>受影响的文字</u>

带下划线

<tt>

<tt>受影响的文字</tt>

标准打印机字体

<strike>

<strike>受影响的文字</strike>

带删除线

<sub>

<sub>受影响的文字</sub>

产生下标

<sup>

<sup>受影响的文字</sup>

产生上标

<big>

<big>受影响的文字</big>

大字体文本

<small>

<small>受影响的文字</small>

小字体文本

注意:

l     一些浏览器不能正常显示黑体和斜体时会加下划线或反向显示,甚至忽略。

l     可以将几种文字的效果混用,如

<b><i>无风荷叶动</b><i>

④段落标记

功能:设置文章段落开始和结束。

格式:<p align= “水平对齐方式”>…</p>

其中:align是水平对齐方式,取值为Left、right或center。

说明:一个段落的开始表示上一个段落的结束,所以段落的结束标记可以省略

⑤强制换行标记

功能:另起一行显示文字。

格式:<br>

说明:这是一个单标记,其实它与段落标记在显示效果上都是另起一行书写。它们的不同之处是,段落标记的行距要宽。图13-2是两种标记的不同显示效果。

⑥预排格式标记

功能:保留文字在纯文本编辑器的格式,原样显示,不受前面的文字格式和段落格式的影响。

格式:<Pre>…(预排格式文本)</Pre>

说明:若已用其他文本编辑器编好了一段文本,如果把它放进网页文件,常常需要加许多标记才能达到原来的显示效果。如果在文本开头加上<Pre>,在末尾加上</Pre>,那么中间就不用加其他标记了,这时文本中间的回车换行符就起作用了。

⑦文本对齐方式标记

功能:设置多个段落的文本居中、居左,还是居右。

格式:<div align= “对齐方式”>…(文本)</div>

其中:align是对齐方式,其值为center、left或right。

说明:

l         对齐可以在多个标记中实现,如<p>、<hn>等。如果多个段落有相同的对齐方式,则可以将这些段落嵌套进<div>、</div>之中。

l         如果是多段居中,还可以使用center标记。

格式:<center>…(多段文本)</center>

(3)列表标记

分段排列出一组级别相同的项目称为列表。如果每段前面加上一个序号,则称为有序列表;每段前面加上一个相同的符号,则称为无序列表。

①       无序列表

功能:设置无序列表。

格式:

<UI type= “加重符号类型”img src= “图像文件”>

   <Li type= “加重符号类型”img src=“图像文件”>列表项目1

   <Li type= “加重符号类型”img src=“图像文件”>列表项目2

<Li type= “加重符号类型”img src=“图像文件”>列表项目3

   …

</UI>

其中:

type:在每个项目前显示加重符号的类型,其值为disc(实心圆)、circle(空心圆)、square(实心方块)。

img src:以指定的图像为加重符号,其值为图像文件的URL地址。

说明:

l         <UI>和<Li>是组标记,不能单独使用,两个参数都可以默认。

l         每个列表项目的加重符号可以相同,也可以不同。<Li>标记中默认时,使用<UI>中的加重符号,都默认时加重符号为实心圆。

②       有序列表。

功能:设置有序列表。

格式:

<OI type= “序号类型”start= “起始号码”>

   <Li type= “序号类型”>列表项目1

   <Li type= “序号类型”>列表项目2

   <Li type= “序号类型”>列表项目3

</OI>

其中:

l         type:在每个项目前显示的序号类型。其值为1(阿拉伯数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、I(小写罗马字母)。

l         start:开始序号。

说明:无序列表和有序列表。可以嵌套,产生缩进的、有层次的列表项目。

(4)表格标记

表格是将文本和图像按一定的行、列规则进行排列,以便更好地表示长信息,有利于快速查找信息,表格中的格子称为单元格。

功能:建立基本的表格。

格式:<Table summary=“文字”  bgcolor=“color1”  background= “ImageURL”

border=“n”bordercolor= “color2”width= “x或x%”align= “left/right/center”>

<caption align= “top/bottom/left/right”>表题(表格说明)</caption>

<tr>

   <th>表头1</th><th>表头2</th>…<th>表头n</th>

<tr>

   <th>表项1</th><th>表项2</th>…<th>表项n</th>

<tr>

   <th>表项1</th><th>表项2</th>…<th>表项n</th>

</table>

其中:

l         <table>…</table>:表格说明。该标记可以省略。

l         summary:对表格格式或内容的简要说明,它并不在网页上显示,相当于表格的注释。

l         bgcolor:表格的背景颜色,取值同body标记中的颜色属性。

l         background:表格的背景图像,取值为图像的URL地址。

l         border:指出表格线的宽度(粗细),n取整数,单位为像素数,n=0表示无线。

l         bordercolor:表格线的颜色,取值同上。

l         width:表格宽度,取值为点数或相对于窗口的百分比。

l         height:表格高度,取值为点数或相对于宽度的百分比。

l         align:表格在页面中的相对位置,取值为left、right或center,分别表示居左、居右或居中。

l         <caption>…</caption>:表格的标题说明。

l         align标题相对表格的位置,取值为left、right或top、bottom,分别表示表格上部左边、表格上部右边、表格上部居中、表格上面、表格底部。

l         <tr></tr>:定义行,该标记中间的内容显示在一行。

l         <th></th>:定义表格表头的一列,表头的每一列需用一个<th>标记,内容显示加黑。

l         <td></td>:定义表格内容的一列。与<th>的区别是内容不加黑显示。

说明:

l         <Table>中的bgcolor、background、align、height、width等属性可以放在td标记中,作为单元格的属性。

l         一行的开始表示前一行的结束,一列的开始表示前一列的结束,所以<tr>、<th>、<td>均可以作单标记使用。

l         <th>标记可以用于每行的第一行,设置行标题。

l         <caption>、<th>、<td>标记之间可以嵌套其他格式化标记,如<p><font>等。

l         单元格内容可以是文字,也可以是图像。

l         表格可以嵌套,表格嵌套可以产生复杂表格,也可以使用<tr><th><td>中的其他属性实现单元格的合并,属性Rowspan=n表示将n行作为一行,属性Colsan=n表示将n列作为一列。

(5)图像和多媒体标记

①图像标记

功能:在当前位置插入图像。

格式:<img src= “图像文件” URL “alt= “简要说明” longdesc= “详细说明”

width= “x” height= “y” border= “边框宽度” hspace= “x” vspace= “y” align= “对齐方式”>

其中:

l         src:用来说明要加入图像文件的URL地址,通常图像格式为.gif或.jpg。

l         alt:作为图像的文本替代说明,当图像无法显示时,显示简单说明。

l         longdesc:关于图像的详细说明。

l         width:图像的宽度,可以为点数或相对窗口宽度的百分比。

l         height:图像的高度,可以为点数湖相对窗口宽度的百分比。

l         border:图像外围边框宽度,其值为非负整数。

l         hspace:水平方向空白(图像左右留多少空白)。

l         vspace:竖直方向空白(图像上下留多少空白)。

l         align:在页面中的位置,left、right或center。

说明:图像的宽度和高度指图像显示时的大小,与图像的真实大小无关。

③       背景音乐标记

功能:在网页中加入声音,声音文件格式为*.wav、*.au和*.mid。

格式:<bgsound src= “声音文件” loop= “播放次数”>

其中:src指明声音文件的URL地址,loop控制播放次数,取-1或infinite时,声音将一直播放到浏览者离开该网页为止。

④       视频标记

功能:在网页中加入视频信息,格式为*.avi。

格式:<img src= “imageURL” dynsrc= “aviURL ” loop= “n” start= “开始时间” controlsloopdelay= “时间间隔”>

其中:

l         src:指向一幅静态图像的URL地址,在未载入.avi文件时,先在.avi的播放区域显示该图像。

l         dynsrc:用来指明视频文件存放的路径和文件名。

l         loop:指明视频文件播放的次数,如果其值为infinite,则反复播放直到浏览者离开该网页。

l         loopdelay:指明两次播放的间隔时间,单位是豪秒。

l         start:指定何时开始播放视频文件,它的两个属性值为fileopen和mouseover。Fileopen是在链接到含本标记的页面时开始播放,mouseover是将鼠标移动到.avi播放区时才开始播放,默认值为fileopen。另外,当鼠标在.avi播放区单击时,也可使浏览器开始播放。

l         controls:在视频窗口下附加MS-Windows的.avi文件播放控制条。

此外,还有IMG的常见属性,如Width、Height、Align等也可以使用。

(6)         超链接标记

超链接是网页制作中最关键的内容。超链接把页面一个个链接起来,使得网页的浏览非常方便。具有超链接的文本、图像、表格、多媒体称为热点和锚点。

功能:在页面中加入超链接。

格式:<a href = “URL”>热点文本或图像</a>

其中:href指向要链接的网页地址,可以是绝对地址、相对地址,页内书签。

说明:“热点文本或图像”指在页面上显示的文本或图像,当鼠标指向该文本或图像时,光标变成手型,单击该文本或图像就会链接到(显示)URL指向的网页。

例如:

<a href= “http://www.tsinghua.edu.cn”>清华大学</a>

是绝对地址链接,链接到清华大学主页。

<a href= http://www.tsinghua.edu.cn/research/index.htm>清华大学</a>

是绝对地址链接,链接到清华大学网站research目录下的index、htm页面。

<a href= “English.htm”>清华大学</a>

是相对地址链接,链接到当前目录下的English页面。

<a href= “research/index.htm”>清华大学</a>

是相对地址链接,链接到research目录下的index.htm页面。

<a href= “http://www.tsinghua.edu.cn”><imgsrc= “images/tsinghua.gif”></a>

是图像链接,单击images目录下的/tsinghua.gif文件显示的图像时,链接到清华大学主页。

二、 DHTML 基础

1.设计DHTML页面的方法

在VB中,可以使用DHTML应用程序设计器来开发DHTML类型的应用程序。DHTML应用程序是包含一组DHTML页面和已经编译过的Visual Basic代码的应用程序,能够响应用户在浏览器中执行的操作。

在Visual Basic中,单击“文件”下“新建工程”中的“DHTML应用程序”,就可以看到工程资源管理器窗口内,Visual Basic为新工程添加了一个公共模块和一个DHTML设计器,双击“设计器”文件夹中的“DHTMLPage1”即可打开DHTML页面设计器,如图13-1所示。

这时在工具箱中添加了一个HTML选项卡,其中有一些常用的HTML元素,如SubmitButton、ResetButton、TextField等。

在“引用”对话框中,可以发现Visual Basic为工程引用了两个新的对象库:一个是Microsoft

DHTML Page Runtime Library1.0,一个是Microsoft HTML Object Library。按【F2】键打开“对象浏览器”对话框,在里面可以查看这两个库中所有的额对象。

打开modDHTML模块,发现VB已经编写好了两个函数:PutProperty函数和GetProperty函数,代码如下:

Public Sub PutProperty(objDocument As HTMLDocument,strName As String, vntValue As Variant,Optional Expires As Date)

   objDocument.cookie = strName & “=” &CStr(vntValue) & _

   IIf(CLng(Expires)=0, “”, “; expires=” & Format(CStr(Expires), “ddd,dd-mmm-yy hh:mmm-ss”) & “ GMT”) ‘ & _

End Sub

Public Function GetProperty(objDocument As HTMLDocument,strName As String) As Variant

  Dim aryCookies() As Variant

  Dim strCookie As Variant

  On Local Error GoTo NextCookie

  aryCookies = Split(objDocument.Cookies, “;”)

  For Each strCookie In aryCookies

     If Trim(VBA.Left(strCookie,InStr(strCookie, “=”)-1)) =Trim(strName)

Then

GetProperty=Trim(Mid(strCookie, InStr(strCookie, “=”) +1))

Exit Function

End If

NextCookie:

Err = 0

  Next strCookie

End Function

为什么要使用这个模块呢?这是因为浏览器是不能保存状态的,所以在应用程序中要使用这两个函数来保存和获取之前操作的数据信息。

可以看到,在DHTML页面设计器中有两个窗格,即左边的树型视图窗格和右边的细表窗格,树型视图窗格内显示HTML页面里所有元素的分层结构。页面设计器为每一个元素列出其ID、控件类型,并且在某些情况下列出元素开始的内容。如果某个元素不包含ID,就在属性窗口为它指定一个。具有ID的元素以粗体显示。在细表窗格显示页面的可视化界面,在这个窗格中可以创建新的页面或编辑已有页面。同VB的窗体设计器一样,DHTML页面设计器也有控件工具箱、工程管理器和属性等窗口。

在DHTML页面设计器窗体的上方,有一个与Microsoft Word“格式”工具栏相似的“格式”工具栏,用来设置页面的元素格式编排、字体属性和对齐方式等内容。

在“格式”工具栏下方有一排工具按钮,分别是DHTML页面设计器属性、执行编辑器、在选项首尾添加<div>…</div>标记、在选项首尾添加<SPAN>…</SPAN>标记、将选项转化为链接、表操作、显示表边界、显示细节、绝对位置、锁定、绝对位置模式和顺序按钮。

在DHTML页面设计器中可以像FrontPage或者其他Web页面编辑器一样编写Web页,同时还可以对Web页上的元素(在VB中把它们当作对象)编写VB代码。

当然也可以使用其他编辑器编写Web页,然后在“DHTMLPage属性”对话框中选择“保存HTML于外部文件”单选按钮,再单击“打开”按钮来引用已经存在的Web页。当然也可以选择“工程”下的“添加DHTMLPage”命令来添加新的DHTML设计器。

DHTML应用程序由下列部分组成:DHTML页面、VB代码(使用它来处理HTML页面产生的事件)、ActiveX组件和工程DLL(当调试或编译工程时自动产生)。

2.DHTML中的关键对象

在DHTML的类库中涉及到3个主要的对象:DHTMLPage对象,BaseWindow对象和Document对象。BaseWindow对象是HTML库的HTMLWindow对象,而Document对象也是HTML库的Document对象。

BaseWindow对象是浏览器的实例,使用它来显示Document对象。而Document对象则是整个HTML页,它包含了DHTMLPage对象。在程序中可以通过Document对象的事件来访问DHTML对象模型并响应用户的操作。

而DHTMLPage对象为HTML页面提供了加载、卸载、初始化和终止事件的功能,但是在程序中不能通过Document对象对DHTMLPage对象直接访问。

在VB编码过程中,把HTML各个元素看作对象,并通过它们的属性、方法和事件来对这些元素进行访问或者操作。在应用程序中是通过ID属性来识别这些元素的,HTML中每个元素都有一个唯一的ID属性。

DHTML的对象有个特点,就是可以共享事件处理程序。当某个子对象发生一个事件时,事件可以沿着对象链向上“游动”,直到它遇到一个处理这个事件的事件处理程序。这个过程被形象地称为“事件气泡”。使用“事件气泡”可以减少代码编写的数量。但如果把对象的CancelBubble属性设置为True,则“事件气泡”传送到这个对象为止。

在应用程序中用元素的ID属性来访问或者操作这个元素的属性、事件和方法,使用Value属性获得某属性的属性值。DHTML对象的事件和VB事件在命名上不同,具体如表13-2所示。

表13-6 DHTML对象的事件

DHTML事件

对应的VB事件

说明

OnKeyDown

KeyDown

键被按下时触发

OnKeyUp

KeyUp

键被释放时触发

OnKeyPress

KeyPress

按下键盘上的字符键时触发

OnClik

Clik

单击,或者焦点所在的元素在按回车键时触发

OnDblClick

DoubleClick

双击时触发

OnMouseOut

鼠标离开时触发

OnMouseOver

鼠标进入新的元素时触发

OnMouseDown

MouseDown

鼠标按下时触发

OnMouseUp

MouseUp

鼠标释放时触发

OnMouseMove

MouseMove

鼠标移动时触发

OnFocus

GotFocus

焦点接受时触发

OnBlur

LostFocus

焦点离开时触发

OnSelectStart

SelectChange

第一次初始化选择时触发

OnSelect

按下鼠标在文档中移动时触发

OnDragStart

DragDrop和DragOver

第一次拖动选择时触发

OnChange

Change

按【Tab】键从一个元素离开或在一个元素上按回车键时,释放该键时触发

OnError

Error

出错时触发

OnReady

Initialize

初始化时触发

OnLoad

Load

下载时触发

OnResize

Resize

调整大小时触发

OnScroll

Scroll

滚动时触发

OnUnload

Unload

卸载时触发

OnAbort

单击“停止”按钮时触发

OnReset

单击“重置”按钮时触发

OnSubmit

单击“提交”按钮时触发

3.DHTML应用程序的编译和发布

DHTML应用程序必须作为DLL或者一个进程的组件来编译。

DHTML工程中有DHTML设计器和代码模块。对每个设计器来说,VB将把工程保存为.dsr文件、.dsx文件和HTML文件。.dsr文件是一个包含设计器的源代码和对HTML文件的引用的文本文件,.dsx文件保存着这个设计器的二进制信息。

在“文件”菜单中选择“生成DHTMLProject.dll”命令,VB就会把整个工程编译为.dll文件。

测试和调试DHTMLProject工程,可按【F5】键和【F8】键运行工程或单步执行工程。在调试工程时,VB就会自动启动Internet Explorer。

使用VB的“打开和发布向导”功能来给DHTML应用程序打包。此向导把工程生成的DLL文件和所有的相关文件(包括.dsr文件和.dsx文件,以及VB应用程序运行需要的DLL文件)打包到压缩包或者CAB文件里面。注意,这里没有把HTML文件和HTML文件所用到的文件打包进去。

最后把此压缩包和HTML文件(包括HTML文件所用到的文件)复制到Web服务器相应的位置上。这样用户就能访问到这个DHTML应用程序了。

三、 在Internet Explorer中使用DHTML

下面看一个设计DHTML页面的实例。

1.       用FrontPage设计初始的HTML页面

(1)启动FrontPage,在“文件”菜单上选择“新建”菜单下的“网页”命令,选择“框架网页”选项卡,再选择“横幅和目录”选项,单击“确定”按钮,结果如图13-2所示。(2)在每个框架中单击“新建网页”命令,为框架创建页面。修改页面、框架及元素的属性,并分别把上、左和右框架保存为Demotop.htm、Demoleft.htm和Demoright.htm,主页面保存为Demomain.htm。

(3)用FrontPage生成的HTML页面代码如下:

①Demo1.htm

<html>

<head>

<title></title>

</head>

<body background= “blue” bgcolor= “#c0c0c0” id= “demolid1”>

<p align= “center”><span id= “demoltitle”>DHTML动态风格</span>

<script>

Var initialColor;

initialColor=0;

initialR=254;

initialG=2;

initialB=123;

rIncrement=-1;

gIncrement=1;

bIncrement=-1;

Function tick(){

Var hexR,hexG,hexB;

hexR=intToHex(initialR);

hexG=intToHex(initialG);

hexB=intToHex(initialB);

initialR +=rIncrement;

initialG +=gIncrement;

initialB +=bIncrement;

If (initialR<0){

initialR=255;

rIncrement*=-1;

}Else If(initialR>255){

initialR=0;

}

If (initialG<0){

initialG=255;

gIncrement*=-1;

}Else If(initialG>255){

initialG=0;

}

If (initialB<0){

initialB=255;

bIncrement*=-1;

}Else If(initialB>255){

initialB=0;

}

hexColor = “#”+hexR+hexG+hexB;

demoltitle.style.color = hexColor;

window.setTimeout(“tick();”,10);

}

Function intToHex(anInt){

Var theString;

Var aDigit,aHexDigit;

Var I;

theString = “”;

For(i=1;i>=0;i--){

p = power(16,i);

aDigit = anInt/p;

aDigit =round(aDigit);

anInt = anInt-(aDigit*p);

aHexDigit=digitToHex(aDigit);

theString = theString +aHexDigit;

}

Return theString;

}

Function power(aNumber,aBase){

Var rval;

If(aBase==0)

Return 1,

rval = aNumber;

For(i=1;i<aBase;i++){

 rval=rval*aNumber;

}

Function round(aNumber){

 For(i = 16;i>=0;i--){

  If(aNumber>=i)

 Return i;

}

Return 0;

}

Function digitToHex(aDigit){

If (aDigit<10)

 Return aDigit;

Else If(aDigit==10)

 Return “A”;

Else If(aDigit==11)

 Return “B”;

Else If(aDigit==12)

 Return “C”;

Else If(aDigit==13)

 Return “D”;

Else If(aDigit==14)

 Return “E”;

Else If(aDigit==15)

 Return “F”;

}

window.onload=tick;

</script></p>

<hr>

<p align= “center” id= “demolid3”><font color= “#008000”>

鼠标经过可产生动态风格</font></p>

<p align= “center” id= “demolid4”><span id= “demolBK”>背景

</span><span id= “demolColor”>颜色</span><span id= “demolSize”>

大小</span><span id= “demolFont”>字体</span><span id= “demolItall”>

斜体&nbsp;</span><span id= “DemolBold”>粗体</span></p>

<hr>

<p align= “center” id= “demolidB”><font color= “#008000”>改变鼠标形状

</font></p><p align= “center” id= “demolid9”><span id= “demolCursor1”>

手指形</span><span id= “demolColor2”>十字形</span><span id= “demolColor3”>等待形

</span></p>

</body>

</html>

②Demo2.htm

<html>

<head>

<title></title>

</head>

<body><div>

<p align= “center”><font color= “#0cc00c” face=楷体_GB2312”

size= “4”>DHTML时钟</font></p>

<p align= “center” id= “”><font color= “#0cc00c” face= “Verdana”

size= “7”><span id= “timetext”>12:23</span></font></p>

<font color= “black” face= “宋体” size= “4”><font color= “black” face= “宋体”

Size= “4” id= “”>

<script LANGUAGE= “VBScript”>

<!—

Sub Window_Onload()

  inTimeout = Window.SetTimeout(“Scroll”,20)

End Sub

Sub Scroll()

  timetext.innertext = time()

  intTimeout = Window.SetTimeout(“Scroll”,20)

End Sub

-->

</script>

</div>

<p id= “textchange”>可以替换的文本</p>

<p><input id= “TextField1” name= “TextField1” style= “HEIGHT:25px;

  LEFT:5px;POSITION;absolute;TOP:171px;WIDTH:198px;”><input

id = “button1” name= “Button1” style= “HEIGHT” :23px;LEFT:210px;

value= “click我替换”></font></p></font>

<p><font color = “black” face= “宋体” size= “4”><select id= “List1”

name= “List1” size= “4” style= “HEIGHT”:81px;LEFT:20px;POSITION:absolute;

Top:224px;WIDTH:148px” value= “List1”>

</select><input id= “TextField2” name= “TextField2” style= “HEIGHT:20px;

LEFT:190px;POSITION;absolute;Top:240px;WIDTH:111px;”><input

POSITION;absolute;Top:269px;WIDTH:104px;” type= “button” value= “加入列表”></font></p></font>

</body>

</html>

③Demo3.htm

<html>

<head>

<title></title>

</head>

<body><span>

<dl>

<dd><p>Hello,you can dray me<img scr= “file:\samples\build2.jpg”

width= “140” height= “186” alt= “build2.jpg”>

id=demo3image style= “HEIGHT”:186px;LEFT:59px;POSITION;absolute;

Top:111px;WIDTH:140px;Z-INDEX:100”>border=0

Hspace=0 useMap= “”></p>

</span></DD></DL>

</body>

</html>

2.       创建DHTMLProject工程

(1)在“文件”菜单上选择“新建工程命令”,打开“新建工程”对话框。选择“DHTML应用程序”选项,单击“确定”按钮。

(2)在“工程资源管理器”窗口中单击右键,从弹出的菜单中选择“添加”命令,在弹出菜单的下级菜单中选择“DHTMLPage”命令,打开“DHTMLPage2属性”对话框,如图13-3所示,单击“取消”按钮。重复添加7个DHTMLPage。

(3)在“文件”菜单上选择“保存工程”命令,把工程、DHTMLPage页面和modDHTML模块保存,文件名为DHTMLProject.vbp、DHTMLPage1-7.Dsr和modDHTML.bas。

3.引入初始HTML   页面

(1)在“工程资源管理器”窗口中双击“DHTMLPage1”选项,打开DHTML页面设计器。在DHTML页面设计器工具栏上单击“DHTML页面设计器属性”按钮,打开“DHTML页面设计器属性”对话框,选择“保存HTML于外部文件”单选按钮,单击“打开”按钮,从“打开”对话框中选择“demomain.htm”文件,单击“确定”按钮。这样就把HTML页面文件引入了工程。

(2)重复步骤1类似的过程,把“demoleft.htm”引入到DHTMLPage2;把“demotop.htm”引入到DHTMLPage3;把“demoright.htm”引入到DHTMLPage4;把“demo1.htm”引入到DHTMLPage5;“demo2.htm”引入到DHTMLPage6;“demo3.htm”引入到DHTMLPage7。

(3)在DHTML页面设计器窗口的左窗格中通过操作HTML元素列表夹,选择HTML页面元素,对其属性进行编辑和修改,或者单击DHTML页面设计器窗口上的“启动编辑器”按钮,启动VB设置的默认HTML编辑器,对HTML页面进行编辑。

4.为DHTML编码

(1)为 DHTML页面元素编写代码,首先需要为该元素指定唯一的ID,而DHTML页面中的表单类型的元素添加到页面时,其ID已自动设定。指定ID的方法如上节。在DHTMLDEMO中为如下元素指定ID。

DHTMLPage5          背景           demo1BK

                    颜色           demo1Color

                    大小           demo1Size

                    字体           demo1Font

                    斜体           demoItali

                    粗体           demoIBold

DHTMLPage7          图像           demol3Image

DHTMLPage8          图像1    &, nbsp;     Img2

                    图像2          Img3

(2)为DHTMLPage2中的事件编写代码,结果如下:

Option Explicit

Private Function button1_onClick() As Boolean

   BaseWindow.window.Parent.frames(“main”).navigate “demo1.htm”

End Function

Private Function button2_onClick() As Boolean

   BaseWindow.window.Parent.frames(“main”).navigate “demo2.htm”

End Function

Private Function button3_onClick() As Boolean

   BaseWindow.window.Parent.frames(“main”).navigate “demo3.htm”

End Function

(3)为DHTMLPage5中的事件编写代码,结果当光标指到相应的文本上时,文本就改变为对应的样式。整个代码如下:

Private Sub demo1BK_onmousemove()

   demo1BK.Style.backgroundColor = “green”

End Sub

Private Sub demo1BK_onmouseout()

   demo1BK.Style.backgroundColor = “#c0c0c0”

End Sub

Private Sub demo1Bold_onmouseout()

   demo1Bold.Style.fontWeight = “normal”

End Sub

Private Sub demo1Bold_onmouseover()

   demo1Bold.Style.fontWeight = “bold”

End Sub

Private Sub demo1Color_onmouseout()

   demo1Color.Style.Color = “black”

End Sub

Private Sub demo1Color_onmouseover()

   demo1Color.Style.Color = “red”

End Sub

Private Sub demo1Cursor2_onmouseout()

  demo1Cursor2.Style.cursor = “default”

End Sub

Private Sub demo1Cursor2_onmouseover()

  demo1Cursor2.Style.cursor = “crosshair”

End Sub

Private Sub demo1Cursor3_onmouseout()

  demo1Cursor3.Style.cursor = “default”

End Sub

Private Sub demo1Cursor3_onmouseover()

  demo1Cursor3.Style.cursor = “wait”

End Sub

Private Sub demo1Cursor1_onmouseout()

  demo1Cursor1.Style.cursor = “default”

End Sub

Private Sub demo1Cursor1_onmouseover()

  demo1Cursor1.Style.cursor = “hand”

End Sub

Private Sub demo1Font_onmouseout()

  demo1Font.Style.fontFamily = “宋体”

End Sub

Private Sub demo1Font_onmouseover()

  demo1Font.Style.fontFamily = “隶书”

End Sub

Private Sub demo1Itall_onmouseout()

  demo1Itall.Style.fontStyle = “normal”

End Sub

Private Sub demo1Itall_onmouseover()

  demo1Itall.Style.fontStyle = “italic”

End Sub

Private Sub demo1Size_onmouseout()

  demo1Size.Style.FontSize = “16xpl”

End Sub

Private Sub demo1Size_onmouseover()

  demo1Size.Style.FontSize = “24xpl”

End Sub

(4)为DHTMLPage6中的事件编写代码,结果当单击“Click我替换”按钮时,按钮左边输入框内的文本就取代上面的文本;当单击“加入列表”按钮时,按钮上面输入框内的文本就加入左边的列表。代码如下:

Option Explicit

Public strSub As String

Private Function button1_onClick() As Boolean

  Textchange.innerText = TextField1.Value

End Function

Private Function button2_onClick() As Boolean

  Dim e As HTMLOptionButtonElement

  Set e = Document.createElement(“OPTION” )

e.Text = TextField2.Value

e.Value = “ListItemValue”

List1.Options.Add e

TextField2.Value = “”

End Function

Private Function List1_onClick()As Boolean

  If List1.selectedIndex >=0 Then

List1.Remove(List1.selectedIndex)

  End If

End Function

(5)为DHTMLPage7中的事件编写代码,结果当光标指在图形区域上时,可以按住鼠标拖动图形移动。代码如下:

Option Explict

Public curElement As Variant

Public xOffset,yOffset

Private Function demo3image_ondragstart()As Boolean

   If BaseWindow.event.srcElement.tagName = “IMG” Then

     BaseWindow.event.returnValue = False

 End If

End Function

Private Function demo3image_onmousedown()

   Dim xxStr,yyStr As String

If BaseWindow.event.Button = 1 And IsEmpty(curElement) Then

   If BaseWindow.event.srcElement.tagName = “IMG” Then

Set curElement = BaseWindow.event.srcElemen

xxStr = curElement.Style.Left

yyStr = curElement.Style.Top

xxStr = Left(xxStr,Len(xxStr) - 2)

yyStr = Left(yyStr,Len(yyStr) - 2)

Xoffset = BaseWindow.event.x = CInt(xxStr)

Yoffset = BaseWindow.event.x = CInt(yyStr)

End If

End Sub

Private Sub DHTMLPage_load()

   curElement = Empty

End Sub

Private Sub Document_onmousemove()

   If BaseWindow.event.Button = 1 And Not IsEmpty(curElement) Then

     If BaseWindow.event.srcElement = curElement Then

       curElement.Style.Left = BaseWindow.event.x – Xoffset

       curElement.Style.Top = BaseWindow.event.y – Yoffset

       BaseWindow.event.cancelBubble = True

     End If

   End If

End Sub

Private Sub Document_onmouseup()

  If Not IsEmpty(curElement) Then curElement = Empty

End Sub

作者:Admin  
  • 上一篇:脚本编写语言VBScript
  • 下一篇:VB与XML
  • 本类热门
    本类推荐
    本类固顶
    • 没有
  • VB程序设计学习网站(赣南师范学院) © 2008 版权所有 All Rights Reserved.
  • 地址:江西省赣州市经济技术开发区 赣南师范学院数学与计算机科学学院 邮政编码:341000
    Email:ZQ188@163.com 技术支持QQ:87319633 移ICP备10086号
  • GnsySjxy! V2.4