Frames Tutorial by Lady Starlite

I am by no means an expert at Frames but I wanted to learn how to set them up and I thought I would share that information with others. 

 I know a lot of people don't like to visit pages that use frames because their browsers do not support them but when Frames are used properly they can be a definite asset to navigating a large web site.  Frames allow the visitor to browse your site without ever having to leave the page they are on.  This simplifies navigation and allows the visitor to hone in on only those pages they're interested in viewing.

Keeping all this in mind, here is my feeble attempt at a Tutorial for setting up frames. 

 Good Luck!

 

Here is how a frames page works: Look at the image below .  It illustrates that the frames page pulls in page 1 and page 2 into itself.  One page is made of 2.   (In actuality there are 3 pages here....., not four as viewed in the diagram. The top image is just to show the result.. what the viewer sees)

 

Here is the code that makes the frames page work:

-------------------------------------------------------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<frameset cols="114,*" frameborder="NO" border="0" framespacing="0" rows="*"> 
<frame name="leftFrame" scrolling="NO" noresize src="index.html">
<frame name="mainFrame" src="contactPage.html">
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">

</body></noframes>
</html>

----------------------------------------------------------------------

Now, within this code there are some things that need to be taken note of.

1). <frameset cols="114,*" frameborder="NO" border="0" framespacing="0" rows="*">

A) This line establishes that you are making a frames page. The cols=”114,*” sets the size of your frames. For instance if you look at the image above you will see how the frames page is divided into two parts. One side is bigger than the other. That size is defined by setting it like this cols=”leftSideSize,rightSideSize”. You will notice that the line I provided has cols=”114,*”. You know what the asterisk does but I wanted to make sure you noticed that…,. if there is an asterisk(*) that side’s size will take up whatever is not taken up by the other side.

B). the frameborder=”No” tells the page whether or not to make a border between your pages (tacky! Unless done very well).  If you want a border just do a “yes” instead of a “No”

C). I never use framespacing="0" and I can't really tell you what the heck it does. If you play with it and notice anything kewl let me know. *Smile*

D). The rows="*"> is basically just what it says. If you want to split your page into more than just 2 column you use this to insert rows.

 The code is like this:      rows="59,65,64,443" 

( What you're saying here is that you want 4 pages wide with pages 59 and 65 and 64 and 443 as the relative rows height
What you're actually doing is calling in additional pages so you will need to add some additional lines but we'll get to that in a sec.) 

2). <frame name="leftFrame" scrolling="NO" noresize src="index.html">
     <frame name="mainFrame" src=" contactPage.html ">
     </frameset>

A). These three lines indicate which pages you are going to have pulled into the frames page. The first line indicates the first page. Where “Leftframe” is the name of the frame and is how you tell what page goes into what section of the frames page. These names can be changed for example you could have it like this instead :

                    <frame name="myHomePage" scrolling="NO" noresize src="index.html">
                    <frame name="myContactPage" src=" contactPage.html ">

A1). Now if you were to add some rows like we did above (I told you we'd get back to this! *G*) you would have to do something a little different to call in the pages. You would have to do this.

    <frameset cols="114,*" frameborder="NO" border="0" framespacing="0" rows="59,65,64,443"> 
    <frame src="page3.html">
    <frame src="page4.html">
    <frame src=" page5.html">
    <frame src=" page6.html">
    <frame src=" page7.html">
    <frame src=" page8.html">

3) The only other line that you need to take note of is this;
                                    <noframes><body bgcolor="#FFFFFF" text="#000000">

A). The only thing this line does is to tell the person viewing this page that they have their ability to view frames pages turned off. for instance:

If my browser does not support frames and I went to your page and you had this code :

<noframes><font color="#990000"><b><font face="Arial, Helvetica, sans-serif">Your browser does not support frame. Please update your browser. </font></b></font>

Then I would see a message pop up that says:
“Your browser does not support frames. Please update your browser.” 

Well, that's it for this tutorial.... I hope this helps!  Feel free to copy this tutorial to your own system but please do not direct link to my site. Thank you!

Back to Tutorial Site Map