HandsOn Providing Easy Access to Data with Frames

This hands-on uses the following four HTML files: Review.html, Logo.html, Examples.html, and Results.html.

Table 28-2: HTML files

File Name



Creates a page containing two frames and breaks one frame into two rows (resulting in three areas visible on the screen). Specifies what should be displayed within each frame and tells browsers that do not support frames to ignore them.


Places a company logo and a hyperlink to navigate to the company web site.


Creates jumps to this chapter's hands-on examples.


Used for dumping information from the database or displaying the interface to obtain the data. Displays an information message to the user when the page is first opened.

If you don't feel like typing, the above files are available in the downloadable files and should be copied to your Learn_ASP folder.

1. Start Windows Notepad and enter the HTML code as shown below. <HTML>

<FRAMESET COLS="290,*"> <FRAMESET ROWS="110,*"> <FRAME SRC="Logo.html"> <FRAME SRC="Examples.html"> </FRAMESET>

<FRAME SRC="Results.html" Name="myDisplay"> </FRAMESET> <NOFRAMES>

This page requires frames to be viewed.


2. Save the file as Review.html in the Learn_ASP folder.

The HTML code in the Review.html file shown above demonstrates how to divide a page into several areas by using frames. Each frame is controlled by its own HTML file.

You create a frame by using the HTML <FRAMESET> and <FRAME> tags with various parameters. A frame can contain other frames. The page shown in Figure 28-35 has two frames. The left frame is broken into two rows.

The statement

divides the page into two columns. The left-hand column is 290 pixels wide, and the right-hand column occupies the remainder of the screen (denoted by the asterisk). A frameset can contain both frames and other framesets.

Taking Your VBA Programming Skills to the Web

Next, the left-hand column is divided into two rows, like this:

The top row is 110 pixels high, and the bottom row occupies the remaining portion of the frame. The top frame points to the Logo.html file. The source file for the lower frame is Examples.html:

<FRAME SRC="Logo.html"> <FRAME SRC="Examples.html">

The two <FRAME> tags provide the information about each frame. The SRC attribute defines the source data for the frame.

Next, we define the source data for the frame on the right-hand side:

<FRAME SRC="Results.html" Name="myDisplay">

The Results.html file is created later in this hands-on exercise. We use the Name attribute to define the frame's name so that we can refer to this frame later.

Each frameset ends with the </FRAMESET> tag. Browsers that do not support frames will display an information message located between the <NOFRAMES> and </NOFRAMES> tags:


This page requires frames to be viewed. </NOFRAMES>

3. Choose File | New to create a new document in Notepad.

4. Enter the HTML code as shown below.

<IMG ALIGN="Middle" WIDTH="127" HEIGHT="99" ALT="Visit us today!" SRC="Wordware.gif">

<Font Color="Blue"><A HREF="http://www.wordware.com">ordware Publishing</A></Font> </BODY> </HTML>

5. Save the file as Logo.html in the Learn_ASP folder.

The HTML code above places an image (Wordware.gif, available in the downloadable files) in the top row of the frame on the left-hand side using the <IMG> tag. The ALIGN parameter tells the browser to position the text that follows in the middle. The WIDTH and HEIGHT parameters determine the size of the image in pixels. These measurements can be easily obtained by opening the image in the Windows Paint program and choosing Attributes from the Image menu. The text placed to the right of the image is a hyperlink. Clicking on it will jump to the Wordware Publishing web site.

6. Choose File | New to create a new document in Notepad.

Part V

7. Enter the HTML code as shown below. <HTML><HEAD>

<BASE TARGET ="myDisplay">

<H4>Chapter 28 - ASP Examples</H4> <P>

<A HREF="GetCustomers.asp" target=myDisplay>Hands-On 28-7 (Retrieve _ records)</A><BR>

<A HREF="PageMe.asp">Hands-On 28-8, 28-9 (Limit records per page)</A><BR> <A HREF="FastRetrieve.asp">Hands-On 28-10 (Retrieve records using _

GetRows)</A><BR><P> <A HREF="ProductLookup.asp">Hands-On 28-11 (Use a drop-down box)</A><BR> <A HREF="MultiProductLookup.asp">Hands-On 28-12 (Use a multiple selection _

list box)</A><BR><P> <A HREF="NWDataEntry.asp">Hands-On 28-13 (Add a new record)</A><BR> <A HREF="UpdateProduct.asp">Hands-On 28-14 (Modify a record)</A><BR> <A HREF="DeleteShipper.html">Hands-On 28-15 (Delete a record)</A> </FONT></P></BODY> </HTML>

8. Save the file as Examples.html in the Learn_ASP folder.

The code in the Examples.html file is straightforward. It contains a set of jumps to different hands-on examples. Each of these examples has a corresponding .asp file in the Learn_ASP folder. To control where the requested information should be displayed, use the <BASE> tag:

<BASE Target="myDisplay">

The Target attribute is set to the name of the frame where the information should appear. When you place the BASE Target tag at the beginning of the file, all of the links will display in the same frame. Here's how we create the first hyperlink:

<A href="GetCustomers.asp" target=myDisplay>Hands-On 28-7 (Retrieve _ records)</A><BR>

The A tag defines a hypertext link. The href attribute specifies the associated URL. In other words, when the user clicks on the "Hands-On 28-7 (Retrieve records)" hyperlink, the GetCustomers.asp file will be requested and its output will be placed in the specified target (right-hand frame).

9. Choose File | New to create a new document in Notepad.

10. Enter the HTML code as shown below. <HTML>

Please select an option from the menu. </HTML>

11. Save the file as Results.html in the Learn_ASP folder. The Results.html file will display the information text when the Review.html file is first opened in the browser (refer to Figure 28-35 at the beginning of this section).

Taking Your VBA Programming Skills to the Web

12. Exit Notepad. You now should have four HTML files as outlined at the beginning of this hands-on exercise. Let's test out our user interface.

13. Open your browser and type http://localhost/NorthDB/Review.html in the address bar. Your screen should resemble Figure 28-35 earlier in this chapter.

14. Verify the results of each hands-on by clicking on its link.

Figure 28-36: When you click a hyperlink on the left-hand side, the right-hand frame will display the requested information as illustrated here.
0 0

Post a comment