I-frame Layouts

Notice how different my layout is? It's called a i-frame layout, definition below. This tutorial will help you put up a layout like mine.
NOTE:: Don't get discouraged if you don't get it right away, believe me, it took myself a while before I got the hang of it. Don't give it up!

What is an I-frame Layout: Inline frames are frames that can be placed anywhere on your page by absolute positioning. Basic number of frames in a layout are usually 3, but you can have as many as you want.

Layout Image:
Step 1:: Either make your layout, which I have templates you can use by Click Here OR use the premade I will be using in this tutorial and you can download that by Click Here. Here's the image I will be using:


Step 2:: Once you decided on your layout image, open that image up in 'Paint'. Note: Your paint may or may not look different then mine.


Step 3:: This part depends on whether your using the mouse on your computer or if you have a portable one. If your using the on your computer, don't don't work about this next part. If you have a portable one, then take your magnifying glass, , hover over your image and click twice to zoom in closer.


Step 4:: Whether you have a portable mouse or not, you can do this next part. Click on your select tool, . Starting with the top left corner over to top right, underneath 'menu' on the image, click and drag til you have a dotted border all the way around the entire black box to the bottom. See images below if you need to see what I'm talking about.




Now, notice while your using the select tool, at the bottom of paint is a bar and while your making a dotted line the numbers will appear and change. You will need these numbers, so while you still have the select tool steady at the bottom, either take a screenshot or write the numbers down. There will be three sets of numbers, see image below. The image shown is for all three frames.


Step 5:: You will continue 'Step 4' with the next two frames or if you used a template, it may be more or less. After your done, just save/upload your image to your host/image host.

Coding the Layout

Step 6:: Here comes the coding part, the numbers you got in 'Step 4' will be used in this part. You should have three sets and I'm sure you noticed that some are the same, which I will explain what everything is soon. Below is the code for the layout, copy and paste it in notepad:


LAYOUT URL- is the url to the layout image you uploaded.

iframe border- is the code for each frame you will be coding.


Step 7:: Now onto the actual coding. As I stated before, there are three lines of numbers you got in paint for each frame. Now let's take the code and gut it because the numbers you got will go into the coding.

Below is the image you should have got in paint:


Below is the image of the code:


I boxed the aread on each image by color, so it will be easier to know what area is what. Below is a explaination of each box and after you read each color and I also included other parts of the code you should know, just go ahead and plug in the numbers needed:
Red- These numbers are the size of your layout image. Width being the first set of numbers, height being the second set.
Orange- This is a name for your frames, so when you go to link your pages, they will show in a particular frame. You will understand this more when you go to link your pages.
Yellow- This is the url extension. I keep my names pretty simple, but you can name them whatever you would like. Just keep the extension part .html.
Green- These numbers are the width and height of each frame. Width being the first set of numbers and height being the second.
Blue- These numbers are the positioning of the frame in the layout image. Sometimes you may or may not have to play with the numnbers in the coding because they may be off, but for the most part they are pretty accurate. First number(s) being the left and second being the top.

Step 8:: Hopefully, that 'Step 7' wasn't confusing. It does take practice, it took me a while to learn and understand. Once you have done all that, the code should look like this:

Other Links

Below are some more links to tutorials to help you get your pages set up and such:

Basic HTML

CSS Stylesheet/Cheat Sheet

Centering I-frame Layout

Link to lots more tutorials


I hope this tutorial helped, if your still confused email me at breakableme@hotmail.com and I will explain it more.

If it helped, a link back is required, thanks.