Article
Designing with Frames - an Introduction
A Frame-Based Site
Now that we've covered all the basic skills that are required to use frames, let's combine everything we've learned into a concrete example. As anyone who's surfed the Web much in the past few years has doubtless noticed, one of the most popular site layouts around uses a menu bar down the left-hand side of the page. A popular twist is to put this menu bar within a frame, so that the main content of the site can be scrolled up and down without the user ever losing sight of the menu.
As with any frame-based site, we begin by setting up our frameset. We will call our frameset file index.html, assuming it will be the first page loaded when someone is entering our site. As with any frameset file, it will not contain a <BODY> tag, but instead will use <FRAMESET>, <FRAME>, and <NOFRAMES> tags to define the layout.
<HTML>
<HEAD>
<TITLE> Welcome to my Web site! </TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=0 COLS="150,*">
<FRAME NAME="menu" NORESIZE SRC="mainmenu.html">
<FRAME NAME="main" SRC="welcome.html">
</FRAMESET>
<NOFRAMES>
<H1>Welcome!</H1> <P>This site was designed to use frames to
provide a menu bar to ease navigation; however, your browser
does not support frames. Click <AHREF="welcome.html">here</A> to go
to the main page of our site, where you can use the alternative
links we have provided to get around the site.
</NOFRAMES>
</HTML>
Notice several things about this example. We have used FRAMEBORDER=0 in the <FRAMESET> tag to hide the 3D borders that appear between the frames by default. In many cases, this makes a frame-based layout more attractive by making it look more seamless.
Next, we have used the NAME attribute of the <FRAME> tag to assign an appropriate name to each of our frames. This will help us later on when we'll need to define links between our frames.
Also notice the use of the NORESIZE attribute in our first <FRAME> tag. This prevents the user from altering the width of the menu bar, and keeps our site's layout the way we intended it. We do not need to specify NORESIZE for the main frame, because this happens automatically when we disable resizing for the menu frame. We have two frames. Obviously, if we're not allowed to resize one, we're not going to be able to resize the other, as this would mean resizing the first one to fill the window properly.
Finally, we've used the <NOFRAMES> tag to provide an alternate welcome message for users whose browsers do not support frames. As we don't want to have to create an entirely different version of our site for frames-incapable browsers, we simply provide a link to the same file we would normally load into our main frame. We can then provide a discreet set of links to get around our site within the main pages.
Next, we need to design our menu. As set in the frameset, our main menu will be contained in the mainmenu.html file. This will be an HTML file like any other, except that we will not need a <TITLE> tag, because frames don't have title bars in which to display their title.
<HTML>
<HEAD>
<BASE TARGET="main">
</HEAD>
<BODY BGCOLOR="DarkSlateBlue" BACKGROUND="menuback.gif"
TEXT="white" LINK="LightSkyBlue" ALINK="Orange" VLINK="#FF9900">
<BASEFONT SIZE="2" FACE="Arial, Helvetica, sans-serif" SIZE="-1">
<H3>Main Menu</H3>
<HR NOSHADE>
<A HREF="welcome.html">Welcome</A>
<P><A HREF="products.html">Products</A>
<P><A HREF="order.html">Order</A>
<P><A HREF="support.html">Support</A>
<P><A HREF="info.html">Info</A>
<HR NOSHADE>
</BODY>
</HTML>
The main thing to notice here is the <BASE> tag, which we've used to specify the default target for links in this file. Quite simply, this makes all the links in our menu load their target files into the main frame.
All that's left is to create the main pages of our site. These will be written exactly as if there were no frames in our site at all. There is no need to use the <BASE> tag, because it makes sense that, unless we specify otherwise by using the TARGET attribute in our <A> tag, we want the links in our main pages to load into our main frame. Remember that we must put a discreet set of links matching those in our menu frame somewhere, for those users whose browsers do not support frames.
I've provided the basics of what this site would look like. Use the following links to view it. When you're done, close the window to return here. Feel free to use this code in your own site if you like.