用户直接使用集成的动态HTML语言简称DHTML来开发基于

《用户直接使用集成的动态HTML语言简称DHTML来开发基于》由会员分享，可在线阅读，更多相关《用户直接使用集成的动态HTML语言简称DHTML来开发基于（22页珍藏版）》请在金锄头文库上搜索。

1、在VB里，用户直接使用集成的动态HTML语言（简称DHTML）来 开发基于HTML语言的应用程序。DHTML将文档中的每一个元素 都看成一个对象，通过对象的属性、事件和方法来操纵对象以改 变浏览 器中显示的内容。DHTML的编程与VB编程有所不同，前 者以窗体为基本界面，后者则使用Web页，但还是有很大的相似性 。 VB使用DHTML应用程序设计器来开发DHTML类型的应用程序。 单击“新建工程”中的“DHTML应用程序”即可打开DHTML页面设 计器界面，参见图15-1（为例15-1的设计界面）。图15-1 DHTML页面设计器第15章 VB与Internet 编程初步15.1 DHTML页

2、面设计器15.2 DHTML页面设计示例15.3 VB 应用程序的 Internet 扩展DHTML页面设计器有两个窗格，即左边的“树形视图”窗口和右边的 “细表”窗口，在“树形视图”窗口显示HTML页面里所有元素的分层结 构。页面设计器为每一个元素列出其ID、控件类型，并且在某些情 况下列出元素开始的内容。如果某个元素不包含ID，就在属性窗口 为它指定一个。具有ID的元素以粗体显示。在“细表”窗口显示页面 的可视化界面，在其上创建新的页面或编辑已有页面。在DHTML 页面设计器窗体的上方，有一个与Microsoft Word的格式工具栏相 似的格式化工具栏，可以设置页面的元素格式编排、字体属

3、性和对 齐方式等内容。 在格式化工具栏的下方有一排工具按钮，分别是DHTML页面设计 器属性、执行编辑器、在选项首尾添加标记、在选 项首尾添加标记、将选项转化为链接、表操作 、显示表边界、显示细节、绝对位置、锁定、绝对位置模式和顺序 按钮。 在创建DHTML工程的同时将创建modDHTML模块，其中包含两个 函数：PutProperty函数和GetProperty函数。15.1 DHTML页面设计器DHTML对象模型将DHTML中的每个元素部作为对象访问，每一 个对象有自己的属性、方法和事件，在创建应用程序时，能够通 过VB代码对HTML页面的布局、位置、每个元素的特性和容器进 行动态的修改。

4、主要的DHTML对象有BaseWindow和Document。 DHTML对象的事件和VB事件基本相似，但每个事件都带有前缀on 。表15-1列出了DHTML中的部分事件。事 件说 明Onabort当用户单击浏览 器的Stop按钮被触发onreset当用户单击浏览 器的Refresh按钮时 被触发onsubmit当用户单击 网页中的提交按钮时 被触发，通过对该 事件的处理程序的编写，可以实现 在数据被服务器处理前，由客户端进行数据有效性验证onbeforeunload当前HTML文档被下载时 被触发Onload在文档被装入以及所有页面元素下载后被触发Onunload当前页面被下载时 立即被触发

5、onmouseover当鼠标第一次移动到某对象时被触发onmouseout当鼠标移出某对象时被触发表15-1 DHTML中的部分事件15.1.1 DHTML对象模型对象说 明 Button命令按钮 SubmitButton提交按钮，将网页中的信息提交到某个服务器 ResetButton复位按钮，清除当前页面上文本域的内容 TextField只有一行的文本框 TextArea可支持多行输入输出的文本框 PasswordField口令输入框 Option单选 按钮 Checkbox复选按钮 Select类似于VB组合框的下拉列表框 Image图像框 Hyperlink超链接 Horizontalr

6、ule水平线 Fileupload文件上载 HiddenField可作为临时 存储区域的隐藏文本框 InputImage图像输入域 List列表框表15-2 HTML工具箱内的控件可以采用下面列出的方法之一，通过VB为DHTML应用程序创建页 面： （1）通过将VB工具箱中的HTML对象加入到页面设计器中来创建 页面。 （2）通过外部的HTML编辑器来创建页面。 （3）采用组合的方法创建页面。 单击DHTML页面设计器内的“HTML页面设计器属性”工具按钮，可 打开如图15-2的DHTMLPage属性对话框。如果选择“保存HTML于 外部文件中”，可以显示“新建”和“打开”按钮。单击“新建”按

7、钮可以在 DHTML页面设计器内建立新的HTML文档保存网页内容。单击“打 开”按钮可以将其他外部编辑器建立的HTML文档导入到DHTML页 面设计器中。如果选择“保存HTML作为VB工程的一部分”，则所设 计网页的HTML代码将保存在Dsx文件中。15.1.2 设计DHTML页面的方法图15-2 树形视图窗口例15-1：设计 如图15-3所示网页。 （1）新建工程时选择 “DHTML应用程序”，打开图15-1所示的DHTML页面设计 器，双击工程资源管理器中“设计 器”文件夹中的“DHTMLPage1”打开中间两个 窗口。 （2）在“细表”窗口输入“蓝天出版社欢迎您”、“新书介绍”、“ 读者

8、园地”、“联 系方式”四行文字，每输入一行回车。 （3）格式化四行文字，如将“蓝天出版社欢迎您”字体设置为“华文彩云”，字号 为6号。 （4）如有必要，在属性窗口设置每行文本的颜色（Color）属性，如将“蓝天出 版社欢迎您”设置为红 色（red）。15.2 DHTML页面设计示例（5）单击 HTML工具箱中的image控件，在第一行文本的左边画出一定大小的 图像框，右键单击该图 像框，从快捷菜单中选择 “属性”，打开该图 像框的“属 性”对话 框，单击 其中“图像源”栏右边的按钮，查找合适的图片，关闭“属性” 对话 框。在属性窗口将align属性为左对齐 （left）。 在树形视图 窗口的B

9、ODY标记 中列出了正在工作的HTML网页的原始内容。 BODY标记 包含了控制Web网页内容的基本图形外观和动作的指令，参见图 15 -2。 （6）单击 DHTML页面设计 器内的“HTML页面设计 器属性”工具按钮，可打 开如图15-3的DHTMLPage属性对话 框。单击 “保存HTML于外部文件中”按钮 ，输入文件名“c:myhtml1.htm”。（7）单击 “文件”菜单中的“保存”或“另存为”命令，保存所有文件，首先保存 的是代码文件.bas，取文件名为myhtml1.bas，其次保存的是类似于窗体文件的 设计师 文件.dsr，取文件名为myhtml1.dsr，最后保存工程文件.vb

10、p，取名为 myhtml1.vbp。 设计师 文件是包含HTML页面全部格式和控件的文件，有SourceFile和BuildFile 属性，分别用来指定设计阶 段导入的外部HTML文件和最后形成的HTML文件 。代码文件则包含浏览 器包所提供的PutProperty和GetProperty操作的函数。 程序运行效果参见图 15-4。注意地址栏中的显示内容，这是VB在内存中编译 DHTML应用程序时，在硬盘上建立的、用于存储程序的一个临时 文件。图15-3 DHTMLPage属性对话框 图15-4 在浏览器中浏览页 面例15-2：图15-4所示为利用Microsoft FrontPage制作的的

11、网页。在例15-1的工程中 ，添加该网页，并创建两个网页的链接。 （1）在例15-1的设计 窗口单击 “工程”中的“添加DHTML Page”命令，加入第二个 页面设计 器DHTMLPage2。 （2）打开DHTMLPage2属性对话 框，选择 “保存HTML于外部文件中”按钮，单 击“打开”按钮，浏览 并选择图 15-5网页的文件名“c:myhtml2.htm”。 （3）选定DHTMLPage1中的“新书介绍”文本，单击 工具条中的“将选项转 化为 链接”按钮将该文本格式化为超链接。 （4）打开如图15-6所示“新书介绍”文本超链接的属性页，单击 “浏览 ”按钮，浏 览并选择图 15-5网页

12、的文件名“c:myhtml2.htm”。或者单击 “树形视图 ”窗口中的 Hyperlink标记 ，然后在属性窗口的href属性栏内输入链接目标。也可以为任意一个事件或元素编写代码来创建网页之间的漫游，如： Private Function Hyperlink1_onclick() As Boolean BaseWindow.navigate “myhtml2.htm“ End Function 这里使用相对URL，也可以使用绝对 URL：“c: myhtml2.htm”。 采用上述方法，两个网页共用一个浏览 器中打开。如果希望在不同的浏览 器窗 口显示不同的网页，可以使用BaseWindow

13、对象的Open方法，由Open方法指定第 二个页面的URL实现链 接： Private Function Hyperlink1_onclick() As Boolean BaseWindow.open “myhtml2.htm“ End Function图15-6 属性页图15-5 在浏览器中浏览myhtml2网页例15-3：用SAPN标记符标记图15-1中的“蓝天出版社”文本，用DIV标记符标记 图15-1中的“联系方式”文本。程序运行时，当鼠标移动到“蓝天出版社”文本上时 显示一幅图片，鼠标移出“蓝天出版社”文本上时不显示图片。当单击“联系方式” 文本上后其字体颜色变为红色。 实现图片的显

14、示与隐藏的代码为： Private Sub NUM1_onmouseout()Image2.Style.visibility = “hidden“ 在DHTMLPage_Load事件过程中应加入同样的 代码 End Sub Private Sub NUM1_onmouseover()Image2.Style.visibility = “visible“ End Sub Private Sub num3_onmouseover()NUM3.Style.Color = “red“ End Sub 改变“联系方式”字体颜色的代码为： Private Sub NUE3_onclick ()NUM3.S

15、tyle.Color = “blue“ End Sub例15-4：编写代码，实现当加载例15-1的网页时，播放一个WAV格式的音乐文 件，如“c:welcome.wav”。 （1）利用“部件”对话框在工具箱中加载Multimedia MCI控件。 （2）将Multimedia MCI控件添加到网页中，并拖曳到页面的左边缘上。 注：将某个控件拖曳到页面的左边缘上可以使该控件隐含，如果要重新显示该控件，可 以在树形窗口中选定该控件，然后利用方向键移动到页面窗体内。 （3）编写代码： Private Sub DHTMLPage_Load()MMControl1.Notify = FALSE ： MM

16、Control1.Wait = TRUEMMControl1.Shareable = FALSE ： MMControl1.DeviceType = “WaveAudio“MMControl1.FileName = “c:welcome.wav“MMControl1.Command = “Open“ : MMControl1.Command = “ play“ End Sub例15-5：页面之间的数据传递 在例15-1中，当单击 “新书介绍”时，打开第二个 网页，单击 “放入购书栏 ”，然后单击 第三个网页中的“增书”按钮，则将该行读 书放入购书栏 （即添加到第三个网页的List1控件中）。参见图 15-7。图15-7 页面间的数据传递（1）在例15-1中添加第三