This is the sixth article in our Learning HTML series. In the first lesson,
you learned how to get started with basic coding. Lesson two discussed tables.
You learned ways to use images in lesson three. In lesson four, we had some
fun learning ways to create dynamic navigation buttons. And lesson five covered
special formatting codes to help you create unusual layouts. If you've missed
any of these previous articles, you can click the Archives
button above and check the Web Development department to see all these
In this article, I'll be discussing FrameSets and showing you how to
put them together.
Frames: Pros and Cons
I'm sure many folks can give you a list of reasons why you should or shouldn't
use frames for your web site. I remember when I was on a project interview,
many years ago. I proudly showed the interviewer my web site. But the first
thing he said, with a huge frown, was "why did you use frames?" I
could tell he didn't like frames and wasn't very impressed. No, I didn't get
the job. And I also ran home and started redesigning my web site to make it
more user friendly. The first thing I did was dump the frames!
Needless to say, my experience caused me to not be too impressed with sites
that use frames. Besides the fact that it makes the pages difficult to print,
another big stumbling block with frames is that it's difficult to bookmark a
particular page on a site, because the main FrameSet URL is always the one referenced.
If you've dug down to find an important page of information and you click to
save it, when you attempt to return to that page, you'll discover that the bookmark
only takes you back to the main FrameSet page. You'll have to go digging all
over again. Your users will have to know to right click inside the frame to
add that exact link to their favorites. However, the average web surfer isn't
aware of this fact. So you could end up with some frustrated visitors who might
give up on your site. There are ways to code around this issue, but few know
how to do it or bother.
But used properly, frames can enhance your presentation. I'm sure you
can find a lot of good and bad examples on the web, but one of the sites I quickly
became impressed with belongs to fellow MVP (for Excel), John
Walkenbach. John is a renowned Excel expert and developer and has written
many Excel books. But he's also an artistboth as a musician and photographer.
John uses frames to help him display his digital
photos on his site.
Photo displays are a great way to use frames, because they allow you to display
thumbnail images of your photos along a scrollable frame. When your user clicks
on one of the small images along the border of your page, the page for that
image is displayed in the target frame, thereby showing the enlarged
version of the image.
As you can see in the image below, this cropped shot from one of John's digital
photo pages gives you a quick look at the photos in a particular category along
the left. At the top you can choose a new category, from the frame containing
the category links. Notice that the top doesn't look like a frame because John
has used various options to color the frames to match and has hidden borders.
When I click on the tiger thumbnail photo in the list on the left (left frame),
the larger photo is displayed in the main frame.
I've also used this type of format to display some of the grandkid photo pages
for our family site.
Another good use of frames is to use them for small menu bars that need
to stay put. As you can see from the image below snapped from the Microsoft
Word MVP support site,
the top banner is displayed in a frame and then the menu bar is also displayed
in a small, enhanced frame below. The rest of the site is the main frame where
all the pages display.
I won't be displaying any examples of poor frame use, because I don't want
to offend those folks who are just learning to put together web sites. I know
how it felt years ago when I first attempted to use a side menu in a frame and,
although I thought it was good, I wasn't experienced enough to know that
it could have been much better. Live and learn! But if you'd like to see what
some folks think is bad design, check out the Web
Pages That Suck web site.
Understanding the Basics
For most people, the hardest part of getting started using frames is understanding
the basic idea of how the frames work. But it's really not that difficult, if
you stop and think about it. The FrameSet page contains the basic details
about the individual frames, such as their size, their name, and other optional
properties, such as whether you want default scrolls or not.
Say you have a FrameSet that contains two frames. The first is named
FrameOne; the second is FrameTwo. Normally, you would create a hyperlink just
by telling the link what page should be displayed when the user clicks it, such
<a href="myWebPage.html">Click here for my web page.</a>
However, when dealing with frames, you need to also tell the link where you
want the page displayedin which frame, or the target. So a hyperlink
located in your top menu frame that, when clicked, would display a picture in
your large main frame below, might look like this:
<a href="myWebPage.html" target="MainFrame">Click
here for my web page.</a>
Notice the additional target reference. If the first link was sitting
in a top frame and the user clicked it, the resulting page would be displayed
in the same frame. In other words, it would display within the same menu frame
that you clicked. Obviously, not the desired result. But by providing a target,
the page knows to go display itself inside the frame called MainFrame.
The illustration below might help you better understand.
Take a look at the first image below. First you see the FrameSet showing the
names of the frames. Next you see the two frames with the information they first
contain. You can see that the top, MenuFrame, contains a hyperlink. The bottom,
MainFrame, currently is blank. If you were to use a standard hyperlink tag,
as shown in the first code sample above, the default target location
would be the hyperlinks own frame. The photo you want displayed from the hyperlink
click, would be displayed in the top, MenuFrame, rather than the bottom frame.
However, if you compare the image above, which uses the standard hyperlink,
to the image below, which contains the hyperlink with the target tag, you can
see that the photo will now be displayed in the proper MainFrame (target location)
at the bottom.
So far we've learned that many people don't like sites with frames and also
that coding a site with frames is more difficult. So why bother? That's something
you'll have to decide. Assuming you have a good reason, let the lesson continue!
Building Your Frames and Pages
Let's give it a try. As always, you can follow along using NotePad or your favorite
code editor. If you're using a program such as FrontPage or DreamWeaver, you
can move to their code windows to follow along. If you prefer to use their WYSIWYG
(what you see is what you get) interfaces, then you'll have to check their help
files to learn how to layout and names frame within their user environment.
Open your editor and type the following:
<frame name="frameTwo" src="framePhotoPage.html">
Notice we start by telling the page that this will be HTML code. Then a FrameSet
is defined for the percentage of the page. Also notice that the argument used
is cols, as in columns. By reading that first line of code, you can decipher
that our FrameSet will be vertical columns, cutting the browser window
by 25% for one column and 75% for the second column.
The next step is to describe each frame. Since we have two defined in the frameset,
we need to have two frames defined within the FrameSet opening and closing tags.
Each frame is given a name. Then the src (source) argument is
given a file to display.
Save your code page. If you're using NotePad, be sure to manually add
the HTML extension, or NotePad will add a TXT extension and your
browser won't recognize it when you double click it to open it for viewing.
Now view your page in your browser.
Obviously, we're not finished yet. The reason we received an error saying the
pages can't be displayed is because we haven't created the pages yet! But notice
now that your window is sliced into two columns. One is 25% of the available
viewing area; the other is 75%.
Change the code to see how the page would display differently if you just change
the code we used above, slightly. Go to the cols tag and change it to
rows. Save your page and switch back to your browser, click Refresh
and see how the page looks now.
As you can see from the image above, with just that one change, we've change
the layout of the page from being divided vertically, to being divided horizontally.
If you wanted to create a navigation bar in a frame that would remain constant,
while the contents of the main portion of your window changes, you could use
one of these vertical or horizontal, two frame styles.
Now we'll create our individual pages so we have something more interesting
to look at than this page error. Create two new HTML pages. Enter whatever information
you want in them, but make sure that you name each with one of the two names
you originally used in your frame set. In my sample code above, I said the starting
source page of my first frame would contain a page called: "frameLinkPage.html";
the second frame would start with "framePhotoPage.html". Therefore,
the two new pages I would want to create would use these names. Also be sure
to save your two new pages within the same folder as the FrameSet page.
If you wanted to save them in another location, you would have to remember to
add the full server path!
After adding source pages in my folder, now, when I open my main FrameSet page,
it finds the Source pages and actually has something to display, as you can
see in the image below.
If I were to open the individual pages outside of the FrameSet, I would see
just the full, individual page, as you can see from the two screen shots below.
As you can see in this first image below, it only displays the information
that was contained in the left frame above.
And here is the full page that was displayed in the second frame.
As you can see, all we're doing is create regular HTML pages, but then we wrap
them within a FrameSet and tell the pages to display in whichever target
(frame) we want. Simple! No really, the basic concept is pretty simple.
The difficulty comes in trying not to go nuts keeping all these pages organized
in your head so that you know to send the correct page to the correct target.
And the problem worsens the more frames you use.
In John's photo sample image above with the Tiger, think about what's happening
there. Examine the diagram below and you can see that when someone clicks on
one of the links within the Category Frame, the code needs to tell the
resulting hyperlinked page to be displayed within the Photo Frame target
location. And when someone clicks on one of the thumbnails, which will be wrapped
within a hyperlink, that link will direct the resulting full page photo page
to be sent into the Main Frame target.
Obviously, if you were only using two frames, the code directing traffic would
be simpler, as you can see in the diagram below.
So, before you start planning out some elaborately framed page, consider how
much more work it's going to be for you in the long run if you have to continually
set up crisscrossing hyperlink targets. It can get pretty confusing if
you're not careful.
However, one thing you can do to help lower the level of confusion is to add
a default target to some of the frames. If you know that all the hyperlinks
should always be displayed to the same target location, you can include a default
target name right within the frame definition. This way, the frame would know
that all the hyperlinks that are displayed in, say, FrameOne, would always
be put into FrameTwo. Then you don't have to worry about adding the target into
each hyperlink. In this case, your FrameSet code could be written like this:
<frame name="frameOne" target="frameTwo"
<frame name="frameTwo" src="framePhotoPage.html">
Notice in the revised code above that now FrameOne has a master target set
which tells it to always send resulting pages into frameTwo. If you don't add
a master target within the Frame, then you'd have to add it into each individual
Let's go back to our code and we'll set up a quick link, so you can see exactly
how to do it. In your code editor, open the page you want to use as your navigation
or link page. Wrap the text for the link in a standard hyperlink tag, but remember
to add the target name for the frame.
Here's the code I'm using:
<a href="SecondPage.html" target="frmMain">
The code above says, display the words Page Two on this page. When the
user clicks on this link, send SecondPage.html to the frmMain frame.
However, remember, if I added a master target within the navigation frame, I
wouldn't have to bother using this type of individual target code. But it's
good to know how to do both, so, if necessary, you can occasionally override
Using the hyperlink target code above, when the main FrameSet page is displayed,
using column frames, with frame one calling the page with the above code, and
the second frame calling my main page, it displays like the image below.
And when the user clicks on the Page Two link I have displayed, as you
can see in the image below, the contents of only the Main Frame changes,
as my SecondPage.html is sent to that frame.
That's it for the basic training in this lesson. However, there's a lot more
you can do to enhance your frames. In this section, I'll briefly discuss some
of the other things you can do to modify your frame layout.
Resize or NoResize
In all the Frame code we used above, the default would be to allow the frame
column to be manually resized by the user. Give it a try and you'll see what
As you can see in the image below, although my original FrameSet was set to
allow 25% of the screen for the first column frame and 75% for the second one.
Because I didn't turn off the default Frame Resizing ability for the
user to manually change the column by grabbing it and moving it, the user can
change the percentage to whatever they want.
You can see in this first image below, that I've dragged the column border
far to the left.
And in the image below, you can see that I was also able to shove the column
all the way over to the right.
This ability may or may not be a good thing. It'll depend on your site and
whether you want the user to be able to make adjustments. If the user has a
small PC screen, you may want to allow them to make the necessary adjustments.
So keep this issue in mind. If you do not want them to be able to change the
percentage, you need to add NoResize="True" into your original
Your code would look like this.
<frame name="frameTwo" src="framePhotoPage.html">
Another thing you can do is just set one frame percentage and then set the other
at Infinite. To do this, just use an Asterisk. Notice the code
below. It says, set one frame at 25%, but set the other frame for as much space
as the user has available in their browser window.
It's usually better to use the asterisk, because then you only set the limits
you really need and don't put any restrictions on the user's window.
Maybe you'd prefer not to have the border column bar appear so that users don't
notice that the page contains frames. You can remove the bar by adding the code
below to your FrameSet definition.
<frameset cols="25%,*" frameborder="0" framespacing="0"
Then, you might want to also consider changing the background color of at least
one of the pages, so you can better see the separation.
I make a little color modification to my navigation page, by adding <body
bgcolor="blue"> to my navigation page and also by changing
my font to a style that contains <font face="arial" color="white">.
As you can now see in the image below, the frame on the left has a blue background
and the text for the link displays well in white. The border bar is gone, but
I can still see the separation of the page because of the color change.
You can also set whether you want the page to allow for scrolling. The default
is to have scroll bars shown. Although you can turn them off by adding Scrolling="No",
it's better to set it to Auto. By adding Scrolling="Auto" to
your Frame definition, if the page has enough room to be displayed in the user's
window, they won't be bothered by seeing scroll bars. However, if they need
to access something that has moved off their tiny screen, they can easily scroll
down to the additional information. The scroll bars will automatically appear,
A final consideration that you still need to think about is, what if the users
browser can't handle displaying frames? Although the percentage of users, these
days, who still use browsers that are unable to recognize frames are small,
you should still consider then to let them know that your page contains frames.
In your initial FrameSet definition, you can add text within a <NoFrames>
tag that explains to the user that your page uses frames. If their browser is
unable to recognize the frame tags, the alternate NoFrames text will be displayed
to them. In days gone by, when a larger majority of folks might not have frames
capabilities, most framed sites would also include nonframed content links.
This way, if the user who arrived at the site could view framed contents,
they would see the main frame site. But if their browser was unable to see the
framed content, they would get a different set of pages and links.
To create a totally efficient site, you should add the duplicate format. But
it's up to you and since the user base is so small, I don't know if I would
bother. However, another way around this issue is to redesign your site using
Tables, rather than Frames. The problem there is that you'll have to create
a master template so the navigation table appears on every page. If you do go
my site at www.mousetrax.com,
you'll notice my site looks like it may have been created with frames, but in
truth, I use a master table template.
To create a FrameSet that allows for NoFrames, you would modify your code as
I did below:
<frame name="frameOne" src="frameLinkPage.html">
<frame name="frameTwo" src="framePhotoPage.html">
<p>Sorry, this site requires a browser
that can view frames!</p>
Well, that's it for this lesson. Haven't thought much about the next lesson.
Guess you'll have to come back to find out! Wink!