Basic Frames Tutorial

greenspun.com : LUSENET : Poesie d'Orient : One Thread

Frames are a simple concept and simple to do, but there are a few tricks to make them look & work right. Many people don't like frames, because they take a longer time to load and many people don't know how to use them correctly. Using frames should be a benefit to your viewers not a pain. Here is a quick overview: <p> 1.Create a html page that defines your frames, usually your first page (index.html). 2.Define the number of frames, color, border, name & attributes of each frame using the HTML tags outlined below.. 3.Create each separate HTML page that will go inside of your frames page. <p> The Code: <p> Your HTML code for frames needs to be inside of your HEADer tags, not your BODY tag. Here is the HTML for a simple two frame layout: <p> <FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> <p> <FRAMESET> starts the frame, you must end this with a </FRAMESET>. Here you define how many ROWS or COLS that you want. You also define the size of the frames. There are three ways to do this. by pixels - just type in the number of pixels that you want the frame to be. by percentage - type in the percentage of relative screen size. Make sure that all your %'s = 100% wild card - All of the extra space left over can be summed up by the asterisk *. For example, you can type 20%,20%,60% or type 20%,20%,* <p> <FRAME> defines the attributes of each frame. It specifies the NAME of the frame, the html file to call for, and any other attributes for that frame that may be different than the default. <p> The NAME is important. This is name that you will use in your links (HREF) to specify what frame to point to. I will give you an example: <p> Lets say you have a simple frames layout with two columns and you have several buttons in your first frame. By clicking on these buttons, you want the linked page to appear in the second column. So, in your 1st html page you add a link such as: <A HREF="products.html" TARGET="Frame2">Products</A> <p> By putting TARGET="_top" in a link, it will place the link in a fresh new page (Breaks the frames). <p> If you would like borderless frames, insert this inside of your FRAMESET tag: FRAMEBORDER="no" BORDER=0 <p>

-- (svillafania@geocities.com), October 23, 1998

Moderation questions? read the FAQ