Frames













Frames

Frames are very easy, but often made to seem a little more difficult than they actually are. Now, let me begin my saying this, a web page that uses frames, isn't just one page, but really three pages in one. Once you grasp the knowledge of this, you can understand everything about frames. You have the page, let's say Frameset, now this is like a giant tray to hold to other independent web pages. So you have this one tray, that holds two web pages.

With that explained, you can divide the frameset into columns or rows, or eventually you'll understand how to nest framesets, and you can do a combination of the two. So for every frameset you need, the frameset (main page), and two pages that would go in the main page.

So, here is how to create the frameset page:
<html>
<head>
<Title>This is the frameset page!</title>
</head>
<frameset cols="20%, 80%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>

That's all there is to it, but let me describe it now. You have the html tags, and the head tags, you've seen those before. Now the Frameset cols= command is something new. This sets the size of the cols in the frameset, so one will be 20% the other will be 80%. Now the Frameset is also used if you want to create rows instead of columns, you would just type <frameset rows="20%, 80%"> Now the frame src, is just telling where to look for the other two pages that you you'll be including in this frameset. Remember when you upload your pages to put the frame source files in the same folder, otherwise you'll have to give the url where you stored the pages.

Links Inside Frames

When you create a hyperlink, once clicked, a new page will come up and your page will be replaced. Now with frames you have some options that might be of interest. It is possible to create a link that will open up in one of the frames you created. Here is an example:

<html>
<head><title>Frameset page</title>
</head>
<frameset cols="20%, 80%">
<frame name="One" src="page1.htm">
<frame name="two" src="page2.htm">
</frameset>
</html>

Now, the difference is the frame name= part, this will give you the ability to dictate where the links should open. So if you have a two column frameset, and you want to open a page in the second column, but still keep your frameset in place, you would do this:

<a href="example.htm" target="two">
Now this will tell the link to open in the frameset you named two. There are other target attributes which you can use, here is a brief list:

  1. Target="_top" This command will replace the frameset page with the new page that you linked to.
  2. Target="_blank" This will open a new browser window and the page will load there.
  3. Target="_parent" If you have pages in nested framesets and only want to update the freamset of the page with the link use this command.
  4. Target="_self" This will make sure that the link replaces the page with the link on it.

Scrolling

If you've been to a frameset, you see that you can scroll down. If you should want to remove the scroll bars you can. Here are a few things you can do with those scroll bars.

  1. By using just the ordinary <frame src="page1.htm"> You are defining the scroll bars on the setting of auto, the written tag would be <frame src="page1.htm" scrolling=auto> These commands basically allow the browser to decide whether or not scrolling is need. It will make the determination if scroll bars should be engaged. So if you just do the first command of frame src with no mention, it will automatically be saying scrolling=auto.
  2. If you want the scroll bars to appear no matter what, then you use this command: <frame src="example.htm" scrolling=yes> This will always place scroll bars on your frames sets.
  3. If you don't want the scroll bars to appear no matter what, use: <frame src="page1.htm" scrolling=no>

Now if you don't want the size of your frames tampered with, then use this command: <frame src="page1.htm" noresize> This will make the size of the frames unchangable, so if you set on frame at 20% the viewer couldn't resize the frame.

Removing Frame Borders

If you would like to have no borders on you frames page you would use this command: <frameset cols="20%, *" frameborder="0" framespacing="0" border="0"> Now this command will remove the borders and make all the frames pushed against each other. Now you should really set the margins to 0 if you are going to use borderless or invisible frames. This is the command to put all the information at the utmost top left of the frames: <frame name="one" src="page1.htm" marginwidth="0" marginheight="0"> Now this command will create margins of 0 on your frames page.

Complex Framesets

You've completed the basics lesson on frames, now we enter into complex framesets. So this is how we handle them. All a complex frameset is a regular frameset with other framesets nested inside the basic frameset, this is kind of like nesting tables, but only with frames. Now here is an example of what you would have to do:
<html>
<head><title>Complex Frameset</title>
</head>
<frameset cols="15%, 85%>
<frame src="page1.htm">

Everything up until this point is exactly like a regular frameset..here is where the change would occur

<frameset rows="20%, *, 20%>
<frame src="page3.htm">
<frame src="page4.htm>
<frame src="page5.htm>
</frameset>
</frameset>
</html>
Now, what did we do here? All we did was nest one frameset in another. This will create a frames set that has two columns, and in the second column there will be three rows. That's how you make a complex frameset, but don't go frames crazy, a neat easy layout can be very appealing.

Floating Frames

There is a thing called floating frames, but right now only Internet explorer supports them, and I don't think you should use them until Netscape can accept them. So, I will not be including it in this tutorial.

You've completed this tutorial, so, practice, try things out, and if you run into troubles you can drop me an email and I can help you.