Home     Suze Says..blog      Link Cloud     Safelists     Traffic Exchange      Play Games- uVme

Using Frames

How to add HTML frames to your web site

When working with frames, it's important to know that a page with frames is really a page split into 2 or more sections, each containing its own html document.  Here is an example of how a page with 2 frames might look:

I am one html document, with my own url! I am another html document!

It looks like you just split up and defined a section of one page, but both frames are actually html pages. The page that houses the two frames is also its own html document. So let's begin by looking at how the main page can create frames. This is done by using the <FRAMESET> tag rather than the body tag at the beginning of the document. Here is an example of html code that will produce 2 frames, splitting the page down the middle:

<HTML>
<HEAD>
<TITLE>My webpage with frames</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">
<FRAME SRC="page1.htm">
<FRAME SRC="page2.htm">
</FRAMESET>

</HTML>

So, what does all of this stuff do? Here's the list:

  1. <FRAMESET>
    This tag tells the web browser to expect a series of frames rather than a normal page.
  2. cols="50%,50%"
    This command inside the FRAMESET tag tells the browser to split the page into two columns. In this case, the columns would each take up 50% of the space on the sceen. You can change the percentages to anything you like. You can also use pixels rather than percentages if you wish. If you use percentages, be sure to keep the % sign after each number, or the browser will read the number as a pixel value.
  3. <FRAME SRC="page1.htm">
    This tag lets you tell the browser the url of the document in the frame farthest to the left.....
  4. <FRAME SRC="page2.htm">
    This tag will specify the url of the next frame, going from left to right.

The browser will read your frame src tags for the columns from left to right, so be sure to keep everything in the order you want it to appear. Now, maybe you'd like 3  frames accross the page, uinstead of 2?  You just need to do modify your frameset tag and add another frame src tag for the third frame, like this:

<FRAMESET cols="33%,33%,33%">
<FRAME SRC="page1.htm">
<FRAME SRC="page2.htm">
<FRAME SRC="page3.htm">
</FRAMESET>

Now you will have 3 columns on the page, each column would be 33% of the total width of the page. If you don't want to leave it up to the browser what to do with the other 1%, you can change one value to 34% or decide to define the value in pixels instead.

So what about adding frames that go from top to bottom? Maybe you want something that looks similar to this:

Frame 1 Frame2
Frame 3

Well, now what we do is add another FRAMESET tag, but this time we use the "rows" command. Here the code to get a page divided like the example above:

<FRAMESET cols="50%,50%">
 <FRAME SRC="page1.htm">

 <FRAMESET rows="50%,50%">
  <FRAME SRC="page2.htm">
  <FRAME SRC="page3.htm">
 </FRAMESET>

</FRAMESET>

The rows command reads from top to bottom, like the cols command reads from left to right. You can have as many columns or rows as you like, but be sure to nest your frameset tags the way you want the frames to appear. In the example above:

  • The first FRAMESET tag tells the browser to divide the page into 2 columns.
  • The FRAME SRC tag following it tells the browser the first column should be filled with page1.htm.
  • The next FRAMSET tag is nested inside the first FRAMESET tag. This tag tells the browser to divide the second column into two rows, rather than using a sinlgle html page to fill the column.
  • The next two FRAME src tags tell the browser to fill the two rows with page2.htm on the topmost row and page3.htm on the following row, moving from top to bottom.
  • Be sure to close all of your FRAMESET tags after they have been used.

    Got it so far?  Piece of cake, right?  LOL  The next section, will show you some other great stuff we can do with frames. Frames 2: Linking and stuff.

    		•



    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15


    webmaster
    Middleburg, FL 32068