Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Margins, Borders, and Scrolling

The problem with the nine-frame arrangement in Figure 21.5 is that it looks ugly and stupid. We can fix that.

The ugly parts are the gray dividers between the frames, which completely ruin the effect of surrounding the center frame with nicely designed graphics. There also isn't enough room in the top and bottom frames to display the graphics without scrollbars. Fortunately, there are HTML commands to get rid of the frame dividers, make more space in small frames by reducing the size of the margins, and force frames not to have scrollbars.

Before you read about these HTML magic tricks, take a look at the dramatic results they can achieve. Figure 21.10 is a nine-frame window displaying the same Web pages shown in Figure 21.5. Obviously, Figure 21.10 looks much nicer! In Figure 21.9, you can see the anti-ugliness medication I gave to the frameset code from Figure 21.6.

21fig09.gif

Figure 21.9 Like Figure 21.5, this is actually nine separate Web pages being displayed in nine frames.

21fig10.jpg

Figure 21.10 This is the frameset document shown in Figure 21.9. By adding some attributes to the <frame /> tags, I was able to make the frames look much nicer.

In addition to the name attribute, the <frame /> tag can take the following special frame-related attributes:

marginwidth and marginheight are pretty self-explanatory, but each of the other attributes is discussed in detail in the next few paragraphs.

Normally, any frame that isn't big enough to hold all of its contents will have its own scrollbar(s). The top and bottom frames in Figure 21.5 are examples. If you don't want a particular frame to ever display scrollbars, you can put scrolling="no" in the frame tag. Conversely, scrolling="yes" forces both horizontal and vertical scrollbars to appear, whether they are needed or not.

TIP

When graphics just fit within a small frame, Netscape Navigator and Microsoft Internet Explorer often display scrollbars that only scroll a few pixels down and have no real purpose. Rather than make the frame bigger (and take up valuable window real estate with empty margin space), you will often want to just turn off the scrollbars with scrolling="no".

The only situation I can think of where you might want to use scrolling="yes" is if some graphics won't line up right unless you can count on the scrollbars always being there. Chances are, you'll probably never need scrolling="yes".

People viewing your frames can ordinarily resize them by grabbing the frame border with the mouse and dragging it around. If you don't want anyone messing with the size of a frame, put noresize in the <frame /> tag.

Both Microsoft Internet Explorer and Netscape Navigator allow you to control the size of the frame borders or eliminate the borders altogether. This makes a frame document look just like a regular Web page, with no ugly lines breaking it up.

Unfortunately, you need to use three different sets of HTML tags for maximum compatibility:

Guess what? The official HTML 4 standard actually specifies yet another method for eliminating frame borders. To be compatible with that standard, you need to put a frameborder="0" attribute in every single <frame /> tag—not just in the <frameset> tags. This doesn't have any effect in any existing browser, but it's a good idea to include it now to avoid future compatibility problems.

The frameset document in Figure 21.10 uses all these methods, just to be thorough. I recommend you do the same.

When used together with custom graphics, borderless frames can allow you to create sites that are easier to navigate and more pleasant to visit. For example, when someone visits the site in Figure 21.10 and clicks one of the navigation choices in the bottom frame, the page he chose comes up in the middle frame quickly because the title graphic, navigation buttons, and border graphics all remain in place. The frames also automatically adapt to changes in the size of the browser window, so the nice "picture frame" effect looks just as good at 1,024x768 resolution as it does at 640x480.

Figure 21.11 shows the result of clicking the "Facts & Forecasts" link in Figure 21.10. Note that the middle frame gets its own scrollbar whenever the contents are too big to fit in the frame.

21fig11.jpg

Figure 21.11 Clicking a link at the bottom of Figure 21.10 brings up a new page in the middle frame, without redrawing any of the other frames.

Note

The official HTML 4 standard includes an <iframe> tag for embedding a frame into an HTML page. For example, the following displays the page mybio.htm in a 200x200-pixel region, underneath the heading Short Bios. If the document mybio.htm didn't fit in that small region, it would have its own little scrollbar(s) next to it.

<html><head><title>bios</title></head><body>
<h1>Short Bios</h1>
<iframe name="bioframe" src="mybio.htm" width="200" height="200">
</iframe><p>
<a href="yourbio.htm" target="bioframe" >Your Bio</a><p>
<a href="mybio.htm" target="bioframe">My Bio</a>
</body></html>

Clicking the "Your Bio" link would replace the contents of the 200x200-pixel region with yourbio.htm. Clicking "My Bio" would put mybio.htm back into that region.

Unfortunately, the only browser that currently understands the <iframe> tag is Microsoft Internet Explorer. The tag is ignored by Netscape Navigator and all other current Web browsers, so it isn't of much practical use today unless all your intended audience uses Internet Explorer version 3 or later. Other browsers should support it in the future. (You can view an <iframe> example online at http://24hourHTMLcafe.com/hour21 if you have Microsoft Internet Explorer.)

Share ThisShare This

Informit Network