Part III: Using Dynamic HTML

In this part of the project, you will use Dynamic HTML to create some interesting client-side effects.

Step 1

If you don't already have the Bookstore web project open in Visual InterDev, open it now. Right-click the DEFAULT.HTM file. Choose Open With from the pop-up menu, and open the file with FrontPage Editor. Insert a new line above the hyperlink that connects to the site search page. On this new line, insert a table by choosing Insert Table from the Table menu. In the Insert Table dialog box, set the number of columns to two and the number of rows to two, set the width of the table to 100 percent, and click the OK button.

In the first cell of the table, insert an image by choosing Image from the Insert menu. In the Image dialog box, type the following URL:

/BOOKSTORE/IMAGES/HOTLIST.GIF

To insert a horizontal dividing line above and below the table, choose Horizontal Line from the Insert menu. Save your work, and exit FrontPage Editor.

Step 2

Return to Visual InterDev, and open DEFAULT.HTM in the text editor. Identify the table that you inserted in FrontPage by locating the following HTML code in the Web page:

<TABLE BORDER="0" WIDTH="100%">     <TR>         <TD WIDTH="50%"gt;<IMG         SRC="../Bookstore/images/hotlist.gif" WIDTH="153"         HEIGHT="48"></TD>         <TD WIDTH="50%">&nbsp;</TD>     </TR>     <TR>         <TD WIDTH="50"%>&nbsp;</TD>         <TD WIDTH="50"%>&nbsp;</TD>     </TR> </TABLE>

The <TR> tags identify new rows in the table, while the <TD> tags designate cells in the table. You need to break the table at the beginning of the first cell in the second row. In this cell, add a <FONT> tag manually by simply typing in the code. The final result should look like this:

<table border="0" width="100%">     <tr>         < td width="50%"><img         src ="../Bookstore/images/hotlist.gif" width ="153"         height ="48"></TD>         < td width="50%">&nbsp;</TD>     </tr>     <tr>         < td width="50"%><FONT ID="txtSpecial" COLOR="BLUE" SIZE="4">         Learn Dynamic HTML</FONT></TD>         < td width="50"%>&nbsp;</TD>     </tr> </table>

Step 3

In the HEAD section, create a SCRIPT section and add some code that uses Dynamic HTML to draw attention to the specials. Insert the following code between the <SCRIPT> tags:

Sub txtSpecial_OnMouseOver()     txtSpecial.Size = "5"     txtSpecial.Color = "Red" End Sub Sub txtSpecial_OnMouseOut()     txtSpecial.Size = "4"     txtSpecial.Color = "Blue" End Sub

Step 4

Save the file, and preview it in the browser by selecting Preview In Browser from the File menu. You should see a monthly special appear below the Hot List image on the page, as shown in Figure 6-5. Now try passing your mouse over the special.

Figure 6-5. A monthly special.

Step 5

Now that you have generated some Dynamic HTML, use the Window object to create a scrolling message track that appears in the status bar of the Internet Explorer browser. Return to Visual InterDev, and make sure that DEFAULT.HTM is open in the text editor. In the SCRIPT section, add the following code to create a scrolling marquee in the status bar of the browser:

` Script-level variables Public strMessage Public intSpaces Public intTimeout Sub Window_OnLoad()     ` Initialize the variables when the page     ` is fully loaded     strMessage = "Check out this scrolling text!"     intSpaces = 100     intTimeout = Window.SetTimeout("Scroll", 100) End Sub Sub Scroll()     ` Call this routine     ` every 100 milliseconds     Dim strTemp, i     strTemp = ""     ` Scroll right to left     intSpaces = intSpaces - 1     If intSpaces = 0 Then intSpaces = 100     ` Create padding of spaces     For i = 1 To intSpaces         strTemp = strTemp & " "     Next     ` Write message     Window.Status = strTemp & strMessage          ` Reset timer     intTimeout = Window.SetTimeout("Scroll", 100) End Sub

Step 6

Save your page by choosing Save from the Visual InterDev File menu. Right-click DEFAULT.HTM, and view it with Internet Explorer. You should see the scrolling message on the status bar.