Learning to create frames (part 2 of 2)
Frames alone are boring, but fortunately, we can spice them up by adding some attributes to it. Besides that, we can also control where content is loaded-it doesn't have to be the same frame that contains the link. In this section, we'll discuss:
Setting attributes for frames:
There are several attributes you can add to the individual tags of the master page, such as :show/hide scroll bars, hide border, resizable or not etc. Here is a list of the most common and useful attributes for frames:
|scrolling=yes/no/auto||Controls whether frameset contains scrollbars or not.|
|noresize||Adding this attribute will cause that particular frameset to not be resizable.|
|border=pixels||Sets the border size of each frameset|
|frameborder=no border=no framespacing=no||This is a combination of tags that I use to create "true" borderless frames in both NS and IE.|
Lets see how these attributes are inserted into the frame page then:
Lets say we want a left bordered frame with no borders showing:
<html> <frameset cols="30%,50%" frameborder=no border=no framespacing=no> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </html>
This will create a two columned frame with no borders showing. ( A very popular and more stylish way to set up frames).
You can also insert attributes in the individual frame src tags, which will add attributes to only that particular frame. Lets say I have something like this:
Assuming we only want scroll bars in page3, the rest without, we would do something like this:
<html> <frameset cols="50%,50%"> <frame src="page1.htm" scrolling=no> <frameset rows="50%,50%"> <frame src="page2.htm" scrolling=no> <frame src="page3.htm" scrolling=yes> </frameset> </frameset> </html>
Ok, the only way to truly understand how the various attributes work is by testing them out, so I'll leave that to you. (A lame excuse to move on.)
Loading content from one frame to another:
This is one of the most important topics regarding frames...how to have a link from one frame, that when clicked, will load content into another, among other things. By default, when you have a link in one frame, the content that's loaded will be loaded in the same frame. The key to manipulating where contents are loaded is by:
- giving each individual frame a name in the master page.
- Adding a "target=" attribute to the "<a href=>" tag and referring to that specific frame's name. All this takes place in the actual page containing the link, ie: page1.htm, and NOT in the master page.
Lets see what I'm talking about. We have a two column frame page, where, with a link on the left column, will load content into the right one:
First, we give each individual frame a name in the master page:
//master page <html> <frameset cols="30%,70%"> <frame src="left.htm" name="terminator"> <frame src="right.htm" name="terminator2"> </frameset> </html>
Now, in "left.htm", we will add a link that will utilize this name to refer to the right frame, so when clicked, will load the contents into this right frame. (instead of its own frame, the left frame).
//left.htm <html> <body> <a href="whatever.htm" target="terminator2">Link</a> </body> </html>
What if you want a link, when clicked, will load content into a full page (this is not the same as loading content into a new window) , instead of into any one specific frame? This can be achieved by do so:
//left.htm <html> <body> <a href="whatever.htm" target="_top">Link</a> </body> </html>
"_top" is a keyword, and when used, we cause the link to load its content into a full page, erasing all frames configurations.