I-Frame Layouts

Ever look at those awesome looking frame layouts and not sure how to code them or make one? This step by step tutorial will help you through that.
Note: I would advise you to use my layout used in this tutorial because it does take some time to get the hang of coding.

Making your layout:
Step 1:: You can have as many frames as you would like, you would just have to code them. For the basic frames I use Paint and for the header, PS. Below is the image I will be coding:

Step 2:: Open your image into paint and click on the magnifying glass (

) to zoom into the area your working on. Crop around the area you want you page to show up, zooming in makes it easier. Below will show you exactly what I mean:

Step 3:: Once zoomed in, click on your selection tool (

) to being selecting the frame. ATTENTION:: while selecting the frames, there will numbers you need at the bottom of paint. Below will show you exactly what I mean:

I would keep the layout image being use open in paint.

Coding your layout:
Step 1:: The numbers you got from step 3 will be used in a code. Below is the entire code I use for i-frames. I will break down the parts that you may be confused about. Here's the code:

Step 2:: The first part is your basic background, nothing more to say there.

Step 3:: Replace BACKRGOUND URLLAYOUT URL with the url of your layout/background image. Still having your layout in paint, looking at the bottom status bar should be numbers, which is the size of your whole layout. The numbers I got are: 681x545. The first number is your width and the second is you height, so in the code replace the numbers below with the ones you got:

Step 4:: Next are the frames, if you have more than one frame, copy and paste the code below however many you need.

Step 5:: To actually code your frame, replace FRAME with whatever frame it is (right, left, or main). Next, replace URL with url of the frames (right.html, main.html, or left.html). Then, replace the width and height of your frames. Lastly, the left and top numbers are where your frames are positioned, so when you go to paste the entire code in index.html you would have to play around with it until you get it exact. Left is how far from the left the frame is and Top is how far from the top. Make sense?

Step 6:: If you are using my layout as practice, you should get something like this:

After you are done your layout should look something like this: CLICK HERE

I-Frame Layouts

Other Helpful Layout Links