Congratulations!!

You have a frame page! Hopefully you found that making a frame page was much easier than you thought it would be. All you needed to do was make a very simple and short FRAMESET HTML DOCUMENT to combine the two pages together. Now lets take a closer look at the tags now that you know how to write a frame page.

What the tags do:

• FRAMESET: A FRAMESET is simply a collection of frames that make up the browser's window. A FRAMESET HTML DOCUMENT defines a group of frames and their attributes (ROWS, COLS, MARGINHEIGHT, MARGINWIDTH, NAME, NORESIZE, SCROLLING, and SRC etc.). When you type in the name of the URL for your Frames Page it is the URL for the Frameset Document that you made that hooks all the URLs up together as one. Maybe think of a FRAMESET like the main Highway with several roads off of it. The roads would be like the Frame Src tags or in our case the different URLs that make up a frame page. Most people using frames will use their FRAMESET DOCUMENT as their index.html.
  
  You can also use nested FRAMESET tags within a FRAMESET tag if you really want to get imaginative with your frame pages (similar to nested Tables). I will leave that up to your own imagination! Just know that you can do this if you really like to experiment and play to push the frame page making experience to the max!
  
  
• ROWS & COLS: You set the width of your rows or columns in either pixels or percentages! Just separate the percentages or pixel # by commas. Let me show you an example: You want to make three rows and use percentages to set the width of each row. So you put ROWS="30%,30%,30%".. This adds up to 90 percent of the browser window. Oops we have 10 percent left over. Not to worry! If the percentages don't add up to 100 percent, the browser will automatically and proportionally resize each row to make up the difference.
  
  Another neat thing is the use of the asterisk in setting your frame row or column widths. Lets use the above example of ROWS="30%,30%,30%" but change the last number to an asterisk (ROWS="30%,30%,*"). You will see that the last number of 30 was replaced with an asterisk. What will doing this make it do? It will tell the browser to size the column or row width to whatever space is left over. In this case we have used up 60 percent with out first two rows (30%+30%) of the browser window and then we used the asterisk. So the width of the last row will be 40 percent (30%+30%+40%=100%). The browser will add the rest of the remaining space into the asterisk. Nifty huh? This can really come in handy for those of us that can't count!
  
  
• FRAME SRC: This tag denotes the source of the frame. Frames read like you do, left to right. You used two frame sections for your frame page so you needed to have two FRAME SRC tags. The more frames you want on your page the more FRAME SRC tags you would use to point to other HTML documents etc.
  
  
• /FRAMESET: This is used to close the FRAMESET tag in the same way that other tags like /CENTER are needed for closure of an opening tag.

NAMES and TARGETS

The "NAME" Game

Now follow along and lets redo your frame page a little! The first thing you will need to do is "NAME" your frames. This is done by adding the "NAME" attribute to your Frame Source tag, (FRAME SRC=), which is found on your FrameSet Document(see fiqure below). Below you will find the formal lesson on how it all works! Sometimes it is a little confusing at first, but actually is quite simple when you really think about it. We are simply naming each of the different frames on the page in the FrameSet Document and then referring to that Frame name on the menu link itself by using the Target attribute within the link. Why do we have to name them? We name them so when you click on a link from your frame menu, the page will open up inside the frame of your choice (one that you named in the FrameSet Document).

Step one

• Open your framelesson.html.
  
  
• Find the FRAME SRC tags.
  
  
• In the FRAME SRC="menu.html" tag add NAME="menu".
  <FRAME SRC="menu.html" NAME="menu">
  
  
• In the FRAME SRC="index.html" add NAME="main".
  <FRAME SRC="index.html" NAME="main">
  
  
• Save the file.

Next you will add the links on your menu.

Step Two

• Open the File named "menu.html"
  
  
• Add a link to your index.html page on the menu. <A HREF="index.html">Home</A>. You may use either a small image or text as the link.
  
  
• After the URL, add TARGET="main" inside the<A> tag (as seen in the below example). This will cause the link to open in the main section of your frame! You are "Targeting" the Frame that you Named "main" in your FrameSet Document (the largest frame).
  <A HREF="index.html" TARGET="main">
  
  
  
• Now add a link to one of your other pages from your real site. Don't forget to put in the target tag in the link. You will want this link open in the bigger frame too, so have the link target the frame you named "main". If for instance you put "menu" in your target tag the page would open in the smaller frame (where the menu is on the frame). That wouldn't quite work would it? You would view just a piece of the page if viewed in the menu frame.
  
  
• Finally, add a link to a page that is not on your site.

Go to your framelesson.html and reload! To reload frames you need to go to each individual frame and right click. Then select reload frame! Do this for the menu frame and the main frame. Now try each of the links. You may need to move things around or change the sizes to fit in the frame space that you have designed.

Three ways to load a page!

Here is how its done!

This is the default. It just happens without you doing a darn thing (no target tag). So, if that's all you want to happen, do nothing more than what you already know. Browsers are programmed to handle frame clicks just that way. However, for consistancy so you don't forget to target a frame you can add TARGET="_self" (see below). Lets look at the two other methods.

2. When you click on a link in a frame and--another frame on the screen receives the information.

OK, great...you've already named your frames and caused this to happen on your menu links by targeting the frame named "main". So you have seen how this works.

3. When you click on a link in a frame and--the frames go away and you get a new full page.

You need to TARGET the link to be it's own page. Easy enough! Just follow the format above but make the TARGET="_top" Note the underline before the word "top". You have already achieved doing this as well with the third menu link above! Remember it looks like this:

<A HREF="http://www.geocities.com/bisonhtml" TARGET="_top">

Magic TARGET names

Now we are going to look at other ways to use Targets! In the below Target examples you will learn how to open pages in different windows. The different target names below are standard HTML Target Names that we can also use. Remember that the Target just tells the browser where to open the page when the link is clicked!

These standard target names all begin with the underscore character.

TARGET="_blank"

This target will cause the link to always be loaded in a new blank window. This window is not named.

TARGET="_self"

This target causes the link to always load in the same window the link was clicked in. This is useful for overriding a globally assigned BASE target.

TARGET="_parent"

The _parent target causes the page to be loaded into the parent window, or frameset, containing the frame that contains the URL reference. If the reference is in a window or top-level frame, it is equivalent to the target _self

TARGET="_top"

This target makes the link load in the full body of the window (with no frames). This defaults to acting like "_self" if the document is already at the top. It is also useful for breaking out of a FRAME.

Putting it all together!

What do I do if a browser can't read Frames?

1. Don't do frames. (Oh, I could have guessed that one, Einstein!)
2. Write a page without any frames and offer a choice to go to a framed page or to a non-framed page. But that means you have to write two pages--bummer.
3. Use <NOFRAMES> and </NOFRAMES> commands.

Ooooooo...tell me more about the NOFRAMES command. Well, it's simple. You write a basic frame page - BUT - you put in the <NOFRAMES> tag as well as the ending </NOFRAMES> tag and copy or make a non frames version of the page. A browser that can not view frames will automatically view only the content between those two tags and skip the Frame part.

It all sounds simple but I still don't quite get it! First take a look at the sample coding below. Do you notice that we added a <NOFRAMES> & </NOFRAMES> tag? What is going on? If a browser can't read the frame code of the document (the browser can not read frames) then it skips over the frameset code and reads the code between the NOFRAMES tags instead. First lets pretend that we are not doing a frames page! You have a your regular HTML Document (like your index page). Now we are going to put it in with the FRAMESET DOCUMENT. We first need to add the tag <NOFRAMES> before the beginning <BODY> tag. Now add the </NOFRAMES> tag after the ending </BODY> tag. It will only read what is between these two tags (<NOFRAMES> & </NOFRAMES>.

IMPORTANT ! Do not include anything before the <BODY> tag or after the </BODY> tag. Only the tags themselves and whatever is between them.

Now we need to add the code for the FRAMESET DOCUMENT.. All you need to do is put the entire FRAMESET (but leave the ending </FRAMESET> out) code above the (<NOFRAMES>) tag. Now put in </FRAMESET> tag after the </NOFRAMES> tag. Remember to put a </HTML> tag as the last tag on your page and immediately after the </FRAMESET> tag. Thats it!! Your done! When a browser comes along that can not handle frames it will only read the content between the <NOFRAMES> & </NOFRAMES> tags. So it will view the page as a standard NONFRAME page. On the other hand if a browser comes along that DOES read frames (most do) then it will NOT read the content between the <NOFRAMES> & </NOFRAMES> tags and only read the code for the FRAMESET DOCUMENT!

Get What's Happening?