|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Visual Basic 6 Black Book
Creating DHTML PagesThe 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 you see in Figure 21.2.
In the following few 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, as shown in Figure 21.3.
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. For reference, the Web page that we create, page1.htm, appears in Listing 21.2. Listing 21.2 page1.htm
<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>
Adding Text To DHTML PagesAdding 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 in Figure 21.4.
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.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited.
|
)
)
)
){kind=link}
){kind=link}
){kind=link}