At one time, frames were one of the most useful parts of HTML; however, too many people misused them, and they soon became hated. Tables soon took their place and for the most part they are not needed. Still, we decided to include a frames tutorial for those of you who are daring enough to use frames, just remember - use them well!!
The basic layout to frames is simple. You have a page that controls the frames (index.html normally) and a page for each frame. Only the index or control page actually tells the frames how to act, so this is the only page we will be talking about for the most part. Frames come in two different styles, column (cols) and rows (rows). You can combine any number of column and rows that you wish to achieve a deserted effect.
The basic layout:
content for people with old, no frame browser can go here.
As you most likely noticed, this simple creates 2 very simple column (to make rows, just change cols to rows). We will now add some variables to the frames in order to make them look and function better.
<frameset .... >
- cols="x,y" the creates column for the frames
- rows="x,y" this creates rows for the frames
- framespacing="0" this spaces the frames from each other
- frameborder="0" this create or does not create a border for the frames
- border="0" this also creates or does not create a border for the frames
- marginwidth="0" this sets the margin width for the frames (any number works)
- marginheight="0" this sets the margin height for the frames (any number works)
- name="name-here" this works for targeting (talked about later)
- scrolling="no" this tells the browser to allow scrolling or not (yes/no/auto)
- noresize this tells the browser not to allow a frame to be re sizeable by the user (optional)
- Note how we close <frameset> tag last. Remember to close it or netscape won't see your frames!
By combining many different elements of frames and rows/column, you can create some amazing layouts. If you wish to see more examples ot these layouts, go to our code center and check out the frame templeates under "Html Templates". Now, we will explain targeting, a function which is most likely the most used and most misunderstood part of frames.
As you read before, one of the variables for the <frame> tag is name="name-here". This is part of targeting. A function that allows the webmaster to direct where a page should load (which frame). To use targeting, give each frame a name. Once you have done this, you are ready to target. The trick to targeting is simply entering the correct name in the link. For instance, if you had a page with a right frame (name="right") and a left frame (name="left"). And you wanted to have a link from the left frame open in the right frame, you would add target="right" to the link. So now, the link looks like <a href="url" target="right"> click me </a>. Of course, you can do much more complex targeting if you want, and using our 2 frame targeter script (under the java script tutorial), you can have a link open in multiple frames at once. However, before we end this tutorial we have one thing left to cover, targeting part 2. Besides targeting from one frame to another, you can target to a new page and more. Below are some common targets.
- target="_new" open the page in a new window, but only once
- target="_blank" opens the page in a new window, every time
- target="_top" opens the page in the same window, but erases all current frames
Related articles: Meta Tag Tuturial