DevPapers - article Framing your website

In many instances you'll want to include one page inside the other. For example maybe you want to show two pages and to keep one of them static while the other moves. This effect can be achieved using frames.

<HTML>
<HEAD>

</HEAD>

<FRAMESET ROWS="25%,25%, *" COLS="*, 70%">
<FRAME SRC="http://www.devpapers.com">
<FRAME SRC="http://www.hotscripts.com">
<FRAME SRC="http://www.yahoo.com">
<FRAME SRC="http://www.google.com">
<FRAME SRC="http://www.hotmail.com">
<FRAME SRC="http://www.php.net">
<NOFRAMES>
Your browser dosn´t support frames
</NOFRAMES>

</FRAMESET>

</HTML>

The above example will result in something like this

In the above code the frameset tag is the container for all our desired frames. Notice that we are not using the body tag, this is because when using frameset you can't use the body tag(you can only use <body> inside the noframes tag).

ROWS="25%,25%, *" means that we want three rows of frames. The first and the second will occupy 25% of the window height and the third will occupy the rest. COLS="*, 70%" specify that we want two rows, the last one of 70% of the window width and the first one should occupy the rest. The values of rows an cols can be specified in pixels too.

Each frame is delimited by a frame tag, being the first one the one of the top left and the last one the one of the bottom right.

The <NOFRAMES> tags are necessary because there are many browsers that don't support frames. Between them you can provide a no frame version of your page or link it to another resource.

The sample layout above was somewhat crowded, lets make know a simpler layout and of more common use.

The above example will result in something like this

To accomplish this effect we have nested the frames. First we declared a frameset with two columns. The first column is filled with the frame navigation. The second column is filled with another frameset. This second frameset have two rows.

The FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 parameters indicate that we don't want to have borders on the frames. scrolling=no indicates that we don't want scrollbars on this frame.

Notice also that we have named each frame, this is to be able to navigate between them. For example if you have a link on your navigation frame that you want to show on your page2, then you have to target the link to that page. Finally, if you want to get rid of all frames on thewindow you target a link to _top. _top is the name of the actual window and will open your link on the whole window.

IFRAME

Another way to frame web pages is to use the iframe tag. This tag will embed another html document on your page. Lets see the following example.

<IFRAME SRC="myiframedpage.html" WIDTH=700 HEIGHT=300 NAME="page1">

Your browser doesn't support iframes

</IFRAME>

In the above example SRC="myiframedpage.html" indicates the source document of the iframe, and WIDTH=700 HEIGHT=300 indicate those dimensions.As with frames you can open links on the iframe by targeting them, in this case you should target to page1, the name of this iframe.