Web Typesetting, Part 9: Frames

by Randy Finch

Get ready. You are about to be framed. No, I am not setting you up to take the fall. I am setting you up to take advantage of some of the latest technology in Web production. It is so new, that it is not yet in the HTML standards. I, of course, am talking about frames. The tags and attributes for coding frames was developed by Netscape for their Navigator Web browser and is gradually being added by other companies to their browsers. You might be asking, "Why should Randy be covering frames when Amiga browsers are not yet up to speed with this technology?" Well, it's just a matter of time before Amiga browsers will support frames and it's always good to be ahead of the game. So, let's get started.

What are Frames?

Frames divide a browser's display area into rows and columns similar to tables. However, unlike tables, each "cell" or frame can contain a totally different Web page. For instance, a title page could appear in a frame that spans the entire width of the browser window at the top of the viewing area. Another frame to the left of the remaining area could be used to display a page containing a hypertext table of contents. The frame on the right could be used to display another Web page based on the user's selection in the table of contents. This is exactly what I did in Figures 1 and 2. The title appears at the top. The table of contents to the left show the names of Web sites created by readers' of this magazine. These names appear as hypertext. When you click on one of the names, the home page for that site appears in the frame to the right.

How Do You Code Frames?

Frames are really quite easy to code. Look at Listing 1 to see the code for Figures 1 and 2. Basically, frames consist of a series of FRAMESET and FRAME tags along with their associated attributes. According to Netscape, the FRAMESET tag and the closing /FRAMESET tag replace the BODY and /BODY tags in regular HTML code. But Netscape Navigator allows the BODY tag to also appear in the code as in Listing 1. However, the FRAMESET tag must appear outside of the BODY.../BODY tags. Some browsers, such as Microsoft Internet Explorer, allow the FRAMESET tags to appear inside the BODY.../BODY tags. As Amiga browsers begin to support frames, be careful. Just because the frames code works with one browser does not mean it will work with all frames-supporting browsers.

FRAMESET is the basic structure for creating frames. Its attributes, ROWS and COLS, allow you to define how the rows and columns of the frames will be laid out. Looking at Listing 1, you will see that the first FRAMESET tag defines ROWS as 60,*. The 60 indicates that the first row should be 60 pixels high. The * indicates that the next row should contain all the remaining space. The method by which you can define columns and rows is very flexible. A percent sign can be used after a number to indicate that a certain percentage of the available space should be used for the frame. Also a number can be used in front of an asterisk to indicate relative size. For instance, suppose you wanted to divide the browser window into four rows where the first row was 50 pixels high, the third row used 20% of the vertical window space, and the second and fourth rows took up the remaining space with the second row taking up twice the height of the fourth. The following code would do this:

<FRAMESET ROWS="50,2*,20%,*">

Notice that an asterisk is used twice. This means that these two rows should use the space remaining after allocating 50 pixels to row 1 and 20% of the space to row 3. However, since a 2 appears in front of the asterisk representing row 2, this row should use twice as much space as the row 4 (Figure 3). You need to be careful how fancy you get when coding frames. Remember that different people will have different size browser windows. You could end up allocating all the available space to rows or columns defined with pixels and percentages and leave no space for the rows or columns defined with asterisks.

Once the initial division into rows or columns has taken place, each row or column can be further subdivided by using a nested FRAMESET tag. Ultimately, however, the FRAME tag will have to be used to define how each frame will appear. The FRAME tag has several attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. SRC allows you to define the Web page to appear in the frame. If this is not defined, the frame will be blank. NAME defines a name for the frame so that it can be referenced by another Web page. If no name is specified, then it cannot be referenced. MARGINWIDTH and MARGINHEIGHT allow you to specify how much of a margin, in pixels, should be used within the frame. If these attributes are not used, then it is left to the browser to decide appropriate margins. SCROLLING can be set to YES, NO, or AUTO. YES indicates that a scrollbar should be displayed by the frame. NO indicates that no scrollbar should be displayed. AUTO indicates that the browser should display scrollbars as needed. The default is AUTO. NORESIZE is a flag attribute that instructs the browser to not allow frame resizing. By default, the user can drag the frame borders to resize frames.

As you can see in Listing 1, I use a FRAME tag and a nested FRAMESET tag within my initial FRAMESET tag that divided the browser window into two rows. The FRAME tag specifies that an HTML file named acreaderslinkstitle.html (Listing 2) should be displayed in the first row with auto-scrolling. The nested FRAMESET tag further subdivides the second row into two columns. The first is 180 pixels wide and the second takes up the remaining space. The FRAME tag for the first column specifies the display of acreaderslinkstoc.html (Listing 3). This file is a bunch of hypertext links to other pages on the Web. The FRAME tag for the second column initially displays my home page, home.html. However, this frame is named ACReadersPage. If you look at Listing 3, you will see that all of the hypertext links specify a TARGET of ACReadersPage. Thus, when someone clicks on a link in the left column, a new page will appear in the right column. I think this is pretty cool and I think you will, too. If you have access to a browser that supports frames, check out my Web site, http://fly.hiwway.net/~rcfinch, to see how this works.

More Readers' Pages

Since my last article, I have received the addresses of more readers' Web sites. Here is a brief description of each.

Super Mouse

This site (Figure 4) was submitted to me by Hal White. It is currently under construction, but already contains some interesting links. He plans to add some artwork in the future. The address is http://www.nexusprime.org/personal/smouse/index.htm.

Kids Travel

Rodney Volkmar submitted this site (Figure 5). The main topic at this site is the Kids Can Travel desk that kids can use while traveling. Take a look at this site, especially if you have kids that get bored while on those long rides to Granny and Peepaw's house. The address is http://www.tol.net/kidstravel/.

R.C.H

Here's a Web site all the way from Finland (Figure 6). Roy Hallila plans to have the largest Amiga site in that country. However, at this point, he is still working on it. The address is http://www.sci.fi/~rch. Roy will be adding information about games, hardware, utilities, and posting links in the near future.

</FRAMESET>

Well, that about wraps it up for this time. Although I have covered frames as defined by Netscape, remember that other companies can always add new features to their browsers. Already, Microsoft has added border-less frames to its browser. I know it's hard to keep up, but it's always fun to have new toys to play with. Remember to keep sending me addresses for your Web sites.

I wanted to let you know that I have accepted some additional responsibilities related to a conference I attend each year. Therefore, I will have less time to write articles. I plan to conclude this series next month. However, I still intend to write standalone articles about Web publishing on a non-regular basis. If you have a topic you would like for me to cover, send me Email at webmaster@rcfinch.com. If I know anything about the topic and can write a halfway decent article, I will do so, time permitting.