The Testing Department is on the phone. You may have heard of the company’s Web site crash they need to redesign the company Web page. From scratch. Can you do it? You start up Visual Basic sure, you say, no problem. You can use Visual Basic to design dynamic HTML pages. To do that, just select the Dynamic HTML Application item in the Visual Basic New Project dialog box. This opens the DHTML Page Designer.
In the following topics, we’ll see how to use the DHTML Page Designer to implement DHTML pages. In general, you add the elements you want in your page to the right window in the Page Designer, and it gives you an idea of how the page will look in the browser. The window on the left in the Page Designer shows the logical structure of the page by indicating which HTML elements are contained in other HTML elements. Using the Page Designer, then, you can get an idea of both how your page will look and how it’s organized in HTML.
Note that you can use Visual Basic in the DHTML pages designed with Visual Basic. How is this possible? It’s possible because what you’re really creating is an ActiveX DLL project that will be loaded into the Internet Explorer when you open the Web page. This DLL runs in the Internet Explorer’s process (and you have to place the DLL file for the project on your Web site so it can be downloaded).
To make the needed DLL file, just select the Make ProjectName.dll item in the File menu. You might just want to create an HTML Web page, without any DLL files at all, and you can do that too. Just don’t add any code to the page; stick to standard HTML elements. Usually, the HTML page is stored in the Visual Basic project. To store it in a separate HTM file, click the DHTML Page Designer Properties icon at upper left in the DHTML Page Designer, opening the Properties dialog box.
Select the Save HTML in an external file option, and give an HTM file name to save your Web page as. To test the Web page, select the DHTMLProject properties item in the Project menu, clicking the Debugging tab in the Properties pages that open. Make sure the Start Component option button is clicked and the start component is set to DHTMLPage1, then click on OK. Now select the Start item in the Run menu to open the Web page. Now that we’ve started designing our DHTML Web page, we’ll add text, images, tables, and other elements including ActiveX controls to the page in the next few topics.
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content='"MSHTML 4.72.3007.2"' name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>
<P>Here’s an image:</P>
<P> </P>
<P>Here’s <INPUT id=SubmitButton1 name=SubmitButton1 style="LEFT: 17px;POSITION: absolute; TOP: 170px; Z-INDEX: 103" type=submit
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content='"MSHTML 4.72.3007.2"' name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>
<P>Here’s an image:</P>
<P> </P>
<P>Here’s <INPUT id=SubmitButton1 name=SubmitButton1 style="LEFT: 17px;POSITION: absolute; TOP: 170px; Z-INDEX: 103" type=submit
value=SubmitButton1>a Submit button:
</P>
<P> </P>
<P><IMG id=Image1 name=Image1 src="c:\vbbb\dhtml\image1.bmp"style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100">
</P>
<P>
<OBJECT classid=CLSID:35053A22-8589-11D1-B16A-00C0F0283628 height=24,id=ProgressBar1
style="HEIGHT: 24px; LEFT: 127px; POSITION: absolute; TOP: 248px; WIDTH:100px; Z-INDEX: 101"width=100>
<PARAM NAME="_ExtentX" VALUE="2646">
<PARAM NAME="_ExtentY" VALUE="635">
<PARAM NAME="_Version" VALUE="393216">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="MousePointer" VALUE="0">
<PARAM NAME="Enabled" VALUE="1">
<PARAM NAME="OLEDropMode" VALUE="0">
<PARAM NAME="Min" VALUE="0">
<PARAM NAME="Max VALUE="100">
<PARAM NAME="Orientation" VALUE="0">
<PARAM NAME="Scrolling" VALUE="0">
</OBJECT>
<INPUT id=Button1 name=Button1 style="LEFT: 26px; POSITION: absolute; TOP:
248px; Z-INDEX: 102" type=button value="Click Me!">
</P>
<P>Here’s an ActiveX control:</P>
<P align=center> </P>
<P>Here’s a table:</P>
<P>
<TABLE border=1 id=Table1 name = Table1>
<TR>
<TD>This
<TD>is
<TD>a
<TR>
<TD>3x3
<TD>HTML
<TD>table
<TR>
<TD>ready
<TD>to
<TD>use.</TD></TR></TABLE></P>
<P>Here’s a hyperlink:
<A href="http://www.microsoft.com"
id=Hyperlink11 name=Hyperlink1>Microsoft
</A>
</P>
</BODY>
</HTML>
</P>
<P> </P>
<P><IMG id=Image1 name=Image1 src="c:\vbbb\dhtml\image1.bmp"style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100">
</P>
<P>
<OBJECT classid=CLSID:35053A22-8589-11D1-B16A-00C0F0283628 height=24,id=ProgressBar1
style="HEIGHT: 24px; LEFT: 127px; POSITION: absolute; TOP: 248px; WIDTH:100px; Z-INDEX: 101"width=100>
<PARAM NAME="_ExtentX" VALUE="2646">
<PARAM NAME="_ExtentY" VALUE="635">
<PARAM NAME="_Version" VALUE="393216">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="MousePointer" VALUE="0">
<PARAM NAME="Enabled" VALUE="1">
<PARAM NAME="OLEDropMode" VALUE="0">
<PARAM NAME="Min" VALUE="0">
<PARAM NAME="Max VALUE="100">
<PARAM NAME="Orientation" VALUE="0">
<PARAM NAME="Scrolling" VALUE="0">
</OBJECT>
<INPUT id=Button1 name=Button1 style="LEFT: 26px; POSITION: absolute; TOP:
248px; Z-INDEX: 102" type=button value="Click Me!">
</P>
<P>Here’s an ActiveX control:</P>
<P align=center> </P>
<P>Here’s a table:</P>
<P>
<TABLE border=1 id=Table1 name = Table1>
<TR>
<TD>This
<TD>is
<TD>a
<TR>
<TD>3x3
<TD>HTML
<TD>table
<TR>
<TD>ready
<TD>to
<TD>use.</TD></TR></TABLE></P>
<P>Here’s a hyperlink:
<A href="http://www.microsoft.com"
id=Hyperlink11 name=Hyperlink1>Microsoft
</A>
</P>
</BODY>
</HTML>
Adding Text To DHTML Pages
Adding text to a DHTML page is easy: just click the right window in the DHTML Page Designer (which represents the way your page will look when it runs). Just use the mouse to place the blinking insertion point where you want the text to appear, and type the text you want there. For example, we’ve added the text “Here’s some text!” in the Web page in the Page Designer.
Adding the text we’ve placed in our Web page adds this HTML to the Web page itself note the Page Designer uses the <P> paragraph HTML tag for each paragraph of text:
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content='"MSHTML 4.72.3007.2"' name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>You can format the text by selecting the text font, size, and style (bold, italic, or underlined) with the controls at the top of the Page Designer. Besides being able to format the text, you can also specify its alignment right, center, or left with the buttons in the Page Designer’s toolbar.using buttons in the DHTML Page Designer toolbar. These HTML elements are especially important in DHTML because you can specify dynamic HTML styles and properties that apply specifically to <SPAN> or <DIV>.
Adding Images To DHTML Pages
The Aesthetic Design Department is calling again. Your new Web page is fine, but what about adding images?Can you do that? you ask. Sure, they say, that’s half of what the Web is all about. To add an image to a DHTML page in the Visual Basic DHTML Page Designer, you click the Image tool, which is the sixth tool down on the left in the Page Designer toolbox. Doing so adds an empty image to the page; move that image to the position you want and size it appropriately.To add an image to this DHTML control, set its src property (the name of this and other DHTML control properties are intended to match the corresponding HTML tag attributes; this property matches the <IMG>
tag’s src attribute). In this case, we set the src property to an image on disk: file:///C:/vbbb/dhtml/image1.bmp, although of course you can use a URL here.
Here’s how the image is added to the HTML of our Web page—note that the Page Designer sets the <IMG>tag’s position attribute to absolute, which is how it can let you position the image anywhere you want it in the Web page:
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content=‘"MSHTML 4.72.3007.2"’ name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>
<P>Here’s an image:</P>
<P> </P>
<P><IMG id=Image1 name=Image1
src="c:\vbbb\dhtml\image1.bmp"
style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100">
</P>Because we’re using dynamic HTML, the image element is an active element: you can click it, for example, and add code to react to that click like this, where we display a message box indicating that the user clicked the image:
Private Function Image1_onclick() As Boolean
MsgBox "You clicked the image!"
End Function
Adding text to a DHTML page is easy: just click the right window in the DHTML Page Designer (which represents the way your page will look when it runs). Just use the mouse to place the blinking insertion point where you want the text to appear, and type the text you want there. For example, we’ve added the text “Here’s some text!” in the Web page in the Page Designer.
Adding the text we’ve placed in our Web page adds this HTML to the Web page itself note the Page Designer uses the <P> paragraph HTML tag for each paragraph of text:
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content='"MSHTML 4.72.3007.2"' name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>You can format the text by selecting the text font, size, and style (bold, italic, or underlined) with the controls at the top of the Page Designer. Besides being able to format the text, you can also specify its alignment right, center, or left with the buttons in the Page Designer’s toolbar.using buttons in the DHTML Page Designer toolbar. These HTML elements are especially important in DHTML because you can specify dynamic HTML styles and properties that apply specifically to <SPAN> or <DIV>.
Adding Images To DHTML Pages
The Aesthetic Design Department is calling again. Your new Web page is fine, but what about adding images?Can you do that? you ask. Sure, they say, that’s half of what the Web is all about. To add an image to a DHTML page in the Visual Basic DHTML Page Designer, you click the Image tool, which is the sixth tool down on the left in the Page Designer toolbox. Doing so adds an empty image to the page; move that image to the position you want and size it appropriately.To add an image to this DHTML control, set its src property (the name of this and other DHTML control properties are intended to match the corresponding HTML tag attributes; this property matches the <IMG>
tag’s src attribute). In this case, we set the src property to an image on disk: file:///C:/vbbb/dhtml/image1.bmp, although of course you can use a URL here.
Here’s how the image is added to the HTML of our Web page—note that the Page Designer sets the <IMG>tag’s position attribute to absolute, which is how it can let you position the image anywhere you want it in the Web page:
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<META content=‘"MSHTML 4.72.3007.2"’ name=GENERATOR>
</HEAD>
<BODY>
<P>Here’s some text!</P>
<P>Here’s an image:</P>
<P> </P>
<P><IMG id=Image1 name=Image1
src="c:\vbbb\dhtml\image1.bmp"
style="LEFT: 40px; POSITION: absolute; TOP: 107px; Z-INDEX: 100">
</P>Because we’re using dynamic HTML, the image element is an active element: you can click it, for example, and add code to react to that click like this, where we display a message box indicating that the user clicked the image:
Private Function Image1_onclick() As Boolean
MsgBox "You clicked the image!"
End Function
0 comments:
Post a Comment
Dear Visitors All The Tricks And Hacks Posted Here Are Only For Knowledge Purpose.Don't Use These for Illegal Operations.