Frames


Frames, just like tables, are a good way of organizing things on your site. However, they can be real confusing. Frames are just two or more web pages combined to one page.
*Be sure to go to the links section to learn how to target links. However, I'll explain here too.

Basic Frame

Example:  

Code:  

<frameset cols="25%,75%"> <frame src="FRAME 1 URL" name=FRAME1> <frame src="FRAME 2 URL" name=FRAME2> </frameset>

Info: For this or any other frames don't put the code in the <body>. That was what messed me up when I started frames. Change URL's to the pages you want to show. You have to name them so that you can target your links. Also you can replace any numbers for the 25 and 75, those are just the percentage each frame takes of the page.

Basic "Rows" Frame

Example:  

Code:  

<frameset rows="25%,75%"> <frame src="FRAME 1 URL" name=NAME> <frame src="FRAME 2 URL" name=NAME> </frameset>

Info: Same as the basic frame except u change the "cols" to "rows".


Example:  

Code:  

<frameset rows="30%,75%,"> <frameset rows="100%,"> <frame src="FRAME1 URL" name=FRAME 1> </frameset> <frameset cols="30%,70%,"> <frame src="FRAME2 URL" name=FRAME2> <frame src="FRAME3 URL" name=FRAME3> </frameset> </frameset>

Info: This is just a frame within another frame.

If you want to make some different frames, go ahead! You know how to make frames go horizontal, vertical and you can put frame codes within frames.

Inline Frame (i-frame)

Code:

<iframe src="URL" frameborder="1" width=150 height=100 name=FRAME NAME></iframe>

Info: You can put a frame on one of your pages. It's good for more advanced layouts.

Frame Extras

*just add these codes in the frame

Borders  

Code:  style="border:2 solid FF0000"

No Scrolling:

Code:  scrolling=no

No Border

Code:  border=0 frameborder=0

No Resizing

Code:  : noresize

Targeting Links

Lets say you are using the Basics Frame. You named frame 1 "menu" and frame 2 "main". If you want a link in "menu" to open in "main" when clicked use this code for the link:

<a href="URL" target="main">TEXT</a>

It's easy really. But if you need help use the contact form

Back