On Day 2 you learned how to build basic HTML pages the manual way. You also manually inserted scripts and objects into HTML pages. Now it's time to leave the trusty text editor and study some new tools. First, today's lesson
provides a look at the Internet Assistant for Microsoft Word—a free add-in that enables you to build HTML pages in the familiar environment of a word processor. Then you will work with SoftQuad’s HoTMetaL, a tool dedicated to building Web pages.
Next you will learn about the Internet Information Server(IIS) Add-In for Microsoft Access. This free add-in builds database front ends and reports for your Web pages. Finally, the tour ends with a look at the ActiveX Control Pad. The ActiveX Control Pad
is specifically designed to integrate ActiveX Objects and scripting into your Web pages.
These tools are representative of the two dozen or so tools available to the HTML developer today—and dozens more are on the horizon. After today you will have a working knowledge of each of these tools. You will also have a good foundation for
future decisions about which tools to use for all the works that are going to be generated by ActiveX on the Internet.
The Internet Assistant for Microsoft Word is a free add-in that gives Word the capability to read and write Web pages. Its biggest advantage is that it enables you to create Web pages in a familiar environment. To download it, set your browser to
http://www.microsoft.com/msword/Internet/IA/default.htm
and follow the download instructions. After you have it downloaded, bring up Word. If you have the toolbars selected, you will see some eyeglasses on the far left of the toolbar, next to the style drop-down list box, as shown in Figure 4.1.
Figure 4.1. Word with Internet Assistant added.
Press this button to go into Web Browse view. If you don't have the toolbars turned on, select Web Browse from the View menu. Your screen will look like Figure 4.2.
This is the screen where your tour begins.
This tour highlights the features added by Internet Assistant to Microsoft Word. Let's start by making a new Web page.
Choose New from the File menu to bring up the New Document dialog shown in Figure 4.3.
Figure 4.3. New Document dialog.
Click Html.dot. This loads the HTML style sheet. Space down toward the middle of the page and type in the text This is My First Word Web Page. Save it as FirstPage.htm. (Don't fight the default extension Word wants to add.) Then call it up in your Web
browser.
Choose View | Source on your browser to see the Word-generated source code in Listing 4.1.
Listing 4.1. FirstPage.htm .
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> <TITLE>Untitled</TITLE> </HEAD> <BODY> <P> This is My First Word Web Page<BR> </BODY> </HTML>
Not bad. This code generates all the sections discussed yesterday: <HTML>, <HEAD>, <TITLE>, <BODY>, and <P> (although it did use the old-style <P>; you might remember that the one studied yesterday had the end tag
</P>). If you want to see the tags in the document, go back to Word and choose HTML Source from the View menu. Your screen will change to look like the one in Figure 4.4.
Looks like you are back in the text editor business from yesterday. Just to check this area out, add the line:
<INPUT TYPE ="TEXT" NAME ="TextBox1" SIZE = "20" MAXLENGTH ="15">
Then return to Edit mode by clicking on the Return to Edit Mode button on the floating toolbar. You should see a screen like the one in Figure 4.5.
Figure 4.5. Added field viewed in Word.
The added field is easier to see if you view it in the Web browser. You can launch the Web browser from Word. There is a button on the top toolbar, two to the right of the big light bulb, that will start your Web browser. The Web page with the
<INPUT> tag on it should look like Figure 4.6.
Figure 4.6. Added field viewed in a browser.
I tend to use tools that let me drop back to the source instead of their more automated cousins. Let's take a general look at what you can add to this page. Use the Bulleted List and Numbered List buttons, Add Image (use the GoldStar.Gif in the Day 10 sub directory and the Alignment button to center it and the title), Add Link (Link to the FirstPage.htm you just did), and Add Title to make your page look something like Figure 4.7. Save it as TestPage.htm.
Figure 4.7. Adding other elements.
All of this adding produced the document in Listing 4.2.
Listing 4.2. The source for TestPage.htm .
<HTML> <HEAD> <TITLE>My First Web Page</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <P> <CENTER><IMG SRC="GOLDSTAR.GIF" ALT="Could Have Had a Picture Here"></CENTER> <P> <CENTER>This is My Second Word Web Page<BR> </CENTER> <P> Numbered List <OL> <LI>Thing One <LI>Thing Two <LI>Thing Three </OL> <P> Un-Ordered List <UL> <LI>Sined <LI>Sealed <LI>Delivered </UL> <P> <A HREF="FirstPage.htm" >Goto First Page</A> </BODY> </HTML>
This source code produces a Web page that looks like Figure 4.8.
Figure 4.8. TestPage.htm in the browser.
Keep experimenting to find what you can build. On the whole, the editing capabilities of Word are good, but it doesn't include support for scripts and objects.
With Internet Assistant installed, you can load URLs with the same ease you load a file. Pick Open URL from the File menu. Use
http://www.mcp.com/sams/
This will bring the Sams home page into Word and demonstrate how Word can be used as a Web browser, as shown in Figure 4.9.
Figure 4.9. Word as a Web browser.
If you bring up the same page in your Web browser, you may notice (if your browser supports animation) that the book on the Sams home page is animated. Word shows it as a static picture. The Web browser capability of Word can be used to preview your
pages with a less-capable Web browser to make sure your message gets across to those still using older Web browsers.
As you have seen, Word is good at creating simple HTML pages, but it doesn't include support for scripts and objects. You can put them in manually, but as you have seen, that can get really complicated really quickly. It does have a spell checker and
that puts it miles ahead of most text editors. I would look for word processors and publishing programs to keep integrating HTML technologies and to compete with the specialized programs, like HoTMetL, for a share of the dollars you will spend on Web
publishing .
HoTMetaL , from SoftQuad, is a dedicated HTML editing tool (see Figure 4.10). Information on the three versions—Professional, Lite, and Free—is available on the Web at
http://www.softquad.com
Figure 4.10. SoftQuad home page .
This tour covers the highlights of HoTMetaL. It is not an attempt to cover every aspect of the program, but to give you a feel for how it can help. Let's start by making a new Web page.
Choose the New entry under the File menu. You will get a New dialog just like you did in Word, where you can pick from various types of templates. Choose Intranet/Intranet Home Page. You should wind up with a screen that looks like Figure 4.11.
Figure 4.11. Choosing the intranet template in HoTMetaL .
Listing 4.3 contains the source for this page.
Listing 4.3. The source for TestPage .
<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN">
<HTML>
<HEAD>
<TITLE>{Your Intranet} Internal Home Page</TITLE></HEAD>
<BODY
BGCOLOR="#A4AE93" TEXT="#1F0291" LINK="#332E04" VLINK="#740AB4" ALINK="#332E04">
<H1 ALIGN="CENTER"><FONT COLOR="#A40052">{YOUR INTRANET}</FONT></H1><IMG
SRC="IMAGE/crumpled.gif" ALIGN="BOTTOM">
<P><FONT SIZE="+3">W</FONT><FONT SIZE="+1">elcome to {YOUR INTRANET}, the
internal
<A HREF="http://www.w3.org/hypertext/WWW/TheProject.html">World Wide Web</A>
site for {YOUR COMPANY}. Like any Web, this one will continue to grow. Revisit
this page from time to time and see what's new.</FONT></P>
<UL>
<LI><FONT SIZE="+2" COLOR="#A40052">The Essentials </FONT>
<UL>
<LI><A HREF="{YOUR NEWS PAGE}">{YOUR INTRANET} Electronic News
</A> -- Access to company newsgroups. Read often!</LI>
<LI><A HREF="{YOUR DIRECTORY}">The people of {YOUR INTRANET}</A> Who's who,
and where?</LI>
<LI><A HREF="{YOUR FACILITIES}">{YOUR INTRANET}Facilities</A> (describes
computers, networks & The Internet, building systems, telephones, etc.)
</LI>
<LI>A <A HREF="{YOUR OFFICE}">map of {YOUR COMPANY}'s office space</A></LI></UL>
<P></P></LI>
<LI><FONT SIZE="+2" COLOR="#A40052">Making your job easier</FONT>
<UL>
<LI>A <A HREF="{YOUR TRAVEL PLANNER}">Travel Planner</A></LI>
<LI>An <A HREF="{YOUR EXPENSE REPORT}">Online Expense Report</A> (for when you
get back)</LI>
<LI><A HREF="{YOUR SEARCH PAGE}">Web Searching</A>: There must be fifty ways
to find your info...</LI>
<LI><A HREF="{YOUR NEWS PAGE}">Technology Watch</A> - What's new in {YOUR
INDUSTRY}</LI></UL>
<P></P></LI>
<LI><FONT SIZE="+2" COLOR="#A40052">{YOUR COMPANY}'s<A
HREF="{YOUR EXTERNAL PAGE}">External Pages</A></FONT></LI></UL><IMG
WIDTH="100%" HEIGHT="6" SRC="IMAGE/crumpled.gif" ALIGN="BOTTOM">
<P>Suggestions for changes, updates and other resources to include are
welcome. </P>
<ADDRESS><A HREF="mailto:webmaster@your.intranet.com">webmaster@your.intranet.com </A></ADDRESS></BODY></HTML>
This code is more complex that the code generated by Word. You will also notice that what you see in the HoTMetaL editing screen is closer to what you get on the Web browser.
The first thing you notice about HoTMetaL are all the toolbars. There are four: Standard, Common HTML, Other HTML, and Forms. The Standard toolbar contains the normal stuff (hard to resist saying standard stuff) with the most interesting button being
the last one on the right, SGML Check (see Figure 4.12).
Figure 4.12. HoTMetaL's toolbars.
As explained yesterday, SGML is what HTML is descended from. When you click the SGML button, a dialog comes up that shows you what elements have been used and if they are supported, as shown in Figure 4.13.
The next toolbar (see Figure 4.14) contains the common HTML commands such as headings <H1>, paragraphs <P>, alignment, and special characters. (Our HTML crash course did not address alignment.) In this menu the three alignment choices
(Right, Left, and Center) are represented by three buttons. To align text or other elements, select the element you want to align and press the appropriate button. The last key, Special Characters, is new. Let's see how this works.
Figure 4.14. Common HTML toolbar.
Open up a new, blank intranet form. Type the line Special Math Characters Include:, then push the Special Characters button. It will give you a floating dialog full of special characters. Choose what look to be special math characters. Save the
form as Math.html. Your form should look like Figure 4.15 and show up in the browser looking like Figure 4.16.
Figure 4.15. Math.html in HoTMetaL.
Figure 4.16. Math.html in the browser.
The Other HTML toolbar (Figure 4.17) starts with lots of different ways to do lists, then moves on to Address, Comments, Images, and Links. The last group of blank buttons enables you to launch you Web browser from inside HoTMetaL. Just to see how this
works, start a new form. Then add an ordered and an unordered list. For good measure add an address at the bottom. Save it as Lists.html. The source code should look roughly like Listing 4.4.
Figure 4.17. Other HTML toolbar.
Listing 4.4. The source for Lists.html .
<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN"> <HTML> <HEAD> <TITLE>Common Html</TITLE></HEAD> <BODY> <P>Here are some Lists</P> <P>First List</P> <UL> <LI>Thing One</LI> <LI>Thing Two</LI> <LI>Thing Three</LI></UL> <P>Second List</P> <OL> <LI>Red Fish</LI> <LI>Blue Fish</LI> <LI>Old Fish</LI></OL> <ADDRESS>myaddress@what.me.worry.com</ADDRESS></BODY></HTML>
This source produces a Web page that looks like Figure 4.18.
Figure 4.18. Lists.html in the browser .
The last toolbar, Forms (see Figure 4.19), is where we move from static to interactive. You will find a button to insert a Form section and then the familiar <INPUT> elements: Text, Check Box, Radio Button, Reset, Submit, and Hidden. There are a
few elements we haven't seen, like Select List, which works like a drop-down list box, and Multiline Edit, which is just what the name implies. Make a new form called Form. Add a <FORM>, then add a text box, a check box, and a select list. You may
remember from yesterday that there are many attributes associated with <INPUT>. How can we set them? Right-click over the Check Box element, choose Element Attributes from the pop-up menu, and you will get the INPUT Attributes dialog shown in 4.20.
The name gives it away. This is where you set the attributes.
Figure 4.19. Other HTML toolbar.
Figure 4.20. INPUT Attributes dialog .
When adding the select list, double-click on the button to bring up a dialog that enables you to add items to it. Your source should look like Listing 4.5.
Listing 4.5. The source for Lists.html .
<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN"> <HTML> <HEAD> <TITLE>Blank</TITLE></HEAD> <BODY> <FORM> <P ALIGN="LEFT" ID="TextBox1">Text Box: <INPUT TYPE="TEXT" NAME=""></P> <P ALIGN="LEFT">Check Box: <INPUT TYPE="CHECKBOX" NAME="CheckMe" ID="CheckBox1"></P> <P ALIGN="LEFT"> <SELECT NAME="SelectList" MULTIPLE="MULTIPLE" ID="SelectList"> <OPTION VALUE="First">First Thing</OPTION> <OPTION VALUE="Second">Second Thing</OPTION></SELECT></P></FORM></BODY></HTML>
This listing might vary from what you get due to the details of how you set your form up. HoTMetaL also enables you to connect to a CGI script with the <SUBMIT> button, just like what you did yesterday in the database demo.
HoTMetaL is for the professional Webmaster, someone who thinks in HTML rather that word processing terms. I have some friends who edit newspapers for a living and they are very at home with publishing tools like Adobe Page Maker, but not as comfortable
with a word processor. If they were Web editors (and their business could go that way), they would be at home in HoTMetaL.
The IIS Add-In for Microsoft Access is a free download that enables Microsoft Access, in concert with Microsoft Internet Information Server (IIS, which comes with NT 4.0) to
You can download the IIS Add-In from the following site:
http://www.microsoft.com/accessdev/itk/default.htm
Note
Make sure you download the IIS Add-In and not the Internet Assistant. They are two different products.
The IIS Add-In adds itself under the Tools/Add-In menu. Before you use it, you will need to design your database and add an entry into the System DSN section of the ODBC Database Administrator. An entry using the sample NorthWind database that ships
with Access is shown in Figure 4.21.
Figure 4.21. ODBC Administrator .
NOTE
Make sure you make this entry into the System DSN. The System DSN is reached by a button on the main screen of the ODBC Administrator.
After you have built and installed your database, go back to Access and select the IIS Add-In from the Add-Ins menu. The IIS will appear in the form of a wizard, as shown in Figure 4.22.
Figure 4.22. Access Internet Wizard.
Notice there are four choices. The first choice, Static Display Page Wizard, creates a Web page with data from a database. The user will see the same data every time the Web page is opened, even if the data in the database has changed. The second
option, Dynamic Display Page Wizard, creates a page that is linked to the data so that when the page is opened, it reflects the most current data in the database. These two options are interesting but not very interactive. Let's walk through the third
option, Query and Display Page Wizard. The second exercise at the end of the chapter uses the fourth option, Insert Page Wizard.
Choose Query and Display Page Wizard to bring up the screen shown in Figure 4.23.
Figure 4.23. Query and Display Page Wizard.
In this dialog, you type in the name of the System DSN you set up in the ODBD Administrator and choose a table to work with. Also, notice you can work with queries. If you are familiar with SQL, you know you could create a view of several different
tables to relate and extract the data you want. For those of you not familiar with SQL, there are several good books on the subject, including Teach Yourself SQL in 14 Days (a book I co-authored). You are not limited to the data in a single table.
Select the Products table and move on.
On the next page choose ProductName and UnitsinStock to search by and click the Add All Fields button to display all the fields on the form returned by the search. When you are done, the page should look like Figure 4.24. Verify your inputs, then move
on to the next screen.
The next page gives you some control over the format of the form. You can add a title and text, and even change the appearance of the data table. I added the text "This Form Allows you to Search the Product Database by Product Name and/or Units in
Stock," and a title, "Search of Product Database." Do what you need to do, as shown in Figure 4.25, and move on.
On the next and final page of the input sequence of the wizard, you can format the page returns with the results of the query. Add some kind of title—I added something about "The Results of the Product Database Query." Then press the
Finish button.
After you press Finish, IIS Add-In builds you a letter, shown in Figure 4.26, telling you what you built and where to put it.
Figure 4.26. Summary of wizardry.
What you produced, according to the letter, are three files: prodsrc.htm, prodsrc.idc, and prodsrc.hdx. The first file, prodsrc.htm, is your search page and needs to be moved to your Web pages. The next two files, prodsrc.idc and prodsrc.hdx, are your
script and return file templates. They go into the scripting directory. After everything is in place, call up prodsrc.htm with your Web browser through your Web server.
Using the Web Server
When you use scripts, you need to run the page through the Web server. This means using the http:\\myserver\prodsrc.htm format (assuming you put prodsrc.htm in your server's root directory) in your Web browser. Simply calling the form by double-clicking it in the Explorer or by using the File menu in your Web browser will not bring the Web server into play. You need the Web server to run the script and return the answer.
The Search form and its report are shown in the Figures 4.27 and 4.28.
Figure 4.27. Setting up the search.
Figure 4.28. Results of the search.
There is a problem in paradise. Try to search using the UnitsInStock field. You only get exact matches. This is not very useful. Look at the source code for the script file prodsrc.idc, shown in Listing 4.6.
Listing 4.6. The source for prodsrc.idc .
Datasource: TestNW Template: prodsrc.htx DefaultParameters: ProductName=%%, UnitsInStock="UnitsInStock" SQLStatement: +Select "ProductID", "ProductName", "SupplierID", "CategoryID", "QuantityPerUnit", "UnitPrice", "UnitsInStock", "UnitsOnOrder", "ReorderLevel", "Discontinued" +From "Products" +Where "ProductName" LIKE '%ProductName%' +AND "UnitsInStock" = %UnitsInStock% #IDC-Search FrontHTM-prodsrc.htm ReportHTX-prodsrc.htx
Do you see the problem? In the second to last line, after the +AND, the field "UnitsInStock" is compared with the variable UnitsInStock. Assuming these variables are passed as strings (they are) using a text editor, let's adjust the line to
read:
+AND "UnitsInStock" %UnitsInStock%
Save the file. Make sure you edited the one in the Internet Information Service script directory. You might think you are done. Think about it a minute. What is going to happen when you search by ProductName without using UnitsInStock? You will get an
ODBC driver error because the last part of the SQL statement won't make sense to the driver. Use your text editor and put a value in the <INPUT> tag that sets up the Units in Stock Query.(I suggest VALUE = "> 0".) Your source should look
like Listing 4.7.
Listing 4.7. The revised source for prodsrc.htm .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>Search of Product Database</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 Align = "Center"><FONT FACE="Arial" FONT COLOR="#000000">This Form Allows you to Search the Product Database by Product Name and/or Units in Stock.</H1></Font><BR> <FORM ACTION="/scripts/prodsrc.idc" METHOD = "POST" > <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TD ALIGN="RIGHT">Product Name</TD> <TD><INPUT NAME="ProductName"</TD></TR><P> <TD ALIGN="RIGHT">Units In Stock</TD> <TD><INPUT NAME="UnitsInStock" VALUE = "> 0"</TD></TR><P> </TABLE> <P><INPUT TYPE="SUBMIT" VALUE="Search" ALIGN="MIDDLE"> <INPUT TYPE="RESET" NAME="reset" VALUE="Clear all fields" ALIGN="MIDDLE"> </P></FORM> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B>. <BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
The revised line now reads:
<TD><INPUT NAME="UnitsInStock" VALUE = "> 0"</TD></TR><P>
Save your changes, making sure to save them to your scripts directory. Call up the Search form again. Notice that "> 0" appears in the Units In Stock field. Run the original search by entering c% in the Product Name field to make sure that
part works. It should. Now blank out the Product Name field (Reset works well for that) and enter "<= 39" in the Units in Stock field, as shown in Figure 4.29.
Figure 4.29. Finding products with 39 or fewer items in stock.
The results are shown in Figure 4.30.
Figure 4.30. The search result.
While you were running the last example, you might have accidentally left the Units In Stock field blank. If you did, you got the ODBC error we spoke of earlier. You can't rely on users to be perfect, so how can you fix this problem? Scripting! As I
mentioned earlier, you could use scripting to check the values before they are sent to the server. Hold this thought for a day or so and bring it up again, after you learn about specific scripting languages.
The IIS Add-In for Microsoft Access is representative of several products on the market, such as
These tools cost anywhere from nothing to a couple hundred dollars to thousands of dollars. They provide solutions ranging from your local intranet page to an Internet serving thousands of users per second. They all work by binding the Web browser and
the Web server together with a database, a process that is now part of your basic knowledge—a basic knowledge that includes basic HTML and the common themes of the tools that manipulate HTML. You are now ready for scripting and objects.
It is good that you are ready for scripting and objects now because six months ago you would have been working with a text editor. The ActiveX Control Pad is in the front of a pack of tools that will be competing for your Web development dollars.
Before you go off and spend, or recommend your company spend (my favorite thing to do), a great deal of money on new technology to support scripting and objects on the Net, let's see what you can get for free. Point your browser to
http://www.microsoft.com/workshop/author/cpad/default.htm
Download and install the ActiveX Pad Control.
After you have it installed, open up the ActiveX Control Pad. You will see a screen like Figure 4.31.
Figure 4.31. The ActiveX Control Pad.
I can hear some of you saying, "Wait a second! After all of this build up, I'm looking at another text editor! We've been tricked!" Just relax for a second. Appearances, in this case, are deceiving. Within a few paragraphs, I will introduce
you to more solutions than you have problems for.(I am only speaking about programming problems, personal problems are another book. Probably a big market for a book about personal problems brought on by programming...hmmm.)
You have already seen the text editor in the ActiveX Control Pad, and you could use it to make HTML pages using methods you have already seen. But the ActiveX Control Pad brings many new things to the table. Open the File menu and choose New HTML
Layout. Your screen will look like Figure 4.32.
For those of you familiar with Visual Basic or Delphi, this will look familiar. One of the most important things ActiveX Control Pad brings to the table is the capability to design a true What-You-See-Is-What-You-Get Web page. Remember how hard it was
in Word to get your working screen to look like the final output on your Web browser? HoTMetal was better, but try to put two lists side-by-side. The ActiveX Control Pad enables you to build a form by selecting an object and dragging it into position.
Let's build a form.
Add a label, two radio buttons, and a button. Make your page look like Figure 4.33.
Figure 4.33. First ActiveX form .
Now save it as activex1.alx. Is this some kind of proprietary format? No, we will look at its structure in a moment. When you create an HTML layout in ActiveX Control Pad, the results are saved in an ALX file and then inserted into an HTML page. Close
this screen and go back to the screen that looks like a text editor (Figure 4.31). Your cursor should be between the <BODY> tags. Pull down the Edit menu and click Insert HTML Layout. Your screen should look like Figure 4.34.
Figure 4.34. The Inserted HTML Layout.
Let's see what this looks like before we take start to dissect it. Save the HTML file as act1.html. Load the file into your browser. It should look like Figure 4.35.
Figure 4.35. The ActiveX Form in a browser.
Congratulations! I'll bet you are the first one on your block to use ActiveX controls. Well, maybe the first one in your cubicle. What have you done here? Let's go back and look.
First, put activex1.alx into a text browser. It looks like Listing 4.8.
Listing 4.8. Source for activex1.alx .
<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:440pt;HEIGHT:239pt;"> <OBJECT ID="Label1" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:8pt;LEFT:16pt;WIDTH:218pt;HEIGHT:55pt;ZINDEX:0;"> <PARAM NAME="Caption" VALUE= "This is my First ActiveX Control Pad Web Page"> <PARAM NAME="Size" VALUE="7705;1926"> <PARAM NAME="FontHeight" VALUE="280"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="Label2" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:62pt;LEFT:16pt;WIDTH:39pt;HEIGHT:16pt;ZINDEX:1;"> <PARAM NAME="Caption" VALUE="I Am:"> <PARAM NAME="Size" VALUE="1376;551"> <PARAM NAME="FontHeight" VALUE="240"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="OptionButton1" CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3" [cc:icc]STYLE="TOP:55pt;LEFT:55pt;WIDTH:108pt;HEIGHT:18pt;TABINDEX:2;ZINDEX:2;"> <PARAM NAME="BackColor" VALUE="2147483663"> <PARAM NAME="ForeColor" VALUE="2147483666"> <PARAM NAME="DisplayStyle" VALUE="5"> <PARAM NAME="Size" VALUE="3810;635"> <PARAM NAME="Caption" VALUE="Impressed"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="OptionButton2" CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3" [cc:icc]STYLE="TOP:86pt;LEFT:55pt;WIDTH:108pt;HEIGHT:18pt;TABINDEX:3;ZINDEX:3;"> <PARAM NAME="BackColor" VALUE="2147483663"> <PARAM NAME="ForeColor" VALUE="2147483666"> <PARAM NAME="DisplayStyle" VALUE="5"> <PARAM NAME="Size" VALUE="3810;635"> <PARAM NAME="Caption" VALUE="Crying"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="CommandButton1" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:133pt;LEFT:86pt;WIDTH:55pt;HEIGHT:16pt;TABINDEX:4;ZINDEX:4;"> <PARAM NAME="Caption" VALUE="Push Me"> <PARAM NAME="Size" VALUE="1926;550"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> </DIV>
Nothing very mysterious here. Looks like what we saw when we looked at the object tags. Look at the Listing 4.9 for our HTML page, act1.
Listing 4.9. Source for act1.html .
<HTML> <HEAD> <TITLE>New Page</TITLE> </HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="activex1_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="file: \source\chap04\activex1.alx"> </OBJECT> </BODY> </HTML>
Here we see that activex1.alx is not pasted directly into our screen but is instead fed into the HTML Layout Control. (That file path is something you might want to watch as you go from development to deployment.) The HTML Layout Control then takes the
form you designed and displays it exactly where you designed it.
Aside from the first What-You-See-Is-What-You-Get (WYSIWYG) method for designing Web pages, the ActiveX Control Pad supports both JavaScript and VBScript. Design a layout called activex2.alx. Put two radio buttons, an image, and a button on it. It
should look something like Figure 4.36.
Figure 4.36. Scripting example.
What I want this program to do is change the picture in the image according to which radio button is pushed when the user pushes the button. When you have the form looking like Figure 4.36, select the Script Wizard from under the Tools menu. As you can
see, the Script Wizard already knows what objects are on your form and what events come with them. Almost takes some of the fun out of this. The Script Wizard is shown in Figure 4.37.
Add the following code to the click event of commandbutton1:
if (OptionButton1.Value)
{
image1.picturepath = "cash.gif"
}
else
{
image1.picturepath = "pow.gif"
}
Also, change the GroupName on both the radio buttons to Choice. This relates the radio buttons. Notice that when you do this, the first radio button becomes active.
Save this layout to activex2.alx. Then insert it in to a new HTML document, just like you did the first example. Save the HTML document as act2.html. Run act2.html though the browser. You should have a screen that initially has no picture, but when you
press the button, a picture appears according to what is selected in the radio button. (See Figure 4.38.)
Figure 4.38. ActiveX and scripting.
You now know how to operate the ActiveX Control Pad!
Today you have learned about four tools that make creating HTML pages easier: Internet Assistant for Word, HoTMetaL, IIS Add-In for Access, and the ActiveX control pad. These tools are the in the vanguard of an army of tools that will be arriving
shortly. You now have a working knowledge of how they work and a good start toward making an intelligent decision about which tool is right for your job. During the next four days you will use them often, especially the ActiveX Control Pad tomorrow when
you learn VBScript.
Using Internet Assistant for Microsoft Word, build a table of name, state, and telephone number for at least three people.
Note
Refer to Appendix A, "Answers to Quiz Questions," for the answers to these questions.
