The Iframe is one of the most used layouts for Web Graphic designers! It makes it easy to make a layout without having to use tables! In this tutorial you will learn how to make one and use it! ^_^. The program I am using is PSP 7.

We'll start from the absolute beginning! :) That way you can see how it's done! Ok we're going to be using this image. Save that and then open your PSP! Now what I usually do is check out the image size! Most images are bigger than they look! So lets go to: Image > Image Information.

Mine looks like this:

So it's a little big! We can either keep it as it is and make a big layout or resize it and make a smaller one! Lets resize it to make a little IFRAME layout! So go to Image/Resize and make your menu look like this:

After that do *not* save the image! :) If you do it will stay that size for ever and enternity! Next lets make a new image 500x500. Go up to File>New and make your menu look like this:

Now go back to the image of Cye and go to Edit>Copy then click back on the New Image and go Edit>Paste>New Layer. Your result should look like this:

Now lets move it right all the way to the end of the image. So that it looks like this:

This is our layout! :D See I told you it was simple! *snicker* Next, we are going to CUT the image up into smaller pieces! So click on the and a menu will appear. This is what will be your best friend as long as you make layouts! xD. The menu should look like this(or somewhat like it. If it's not exact don't freak out!)

Ok basically what all of these buttons mean on the screen are simple! Starting from the top and going left to right:
The Arrow means that after we cut it we can select a cut piece and it will let us change properties.
The cross-hatch/tic-tac-toe thingie will make a certain shape for you if you want to cut something weird!
The slicer/knife thingie is the button we will use! xD It lets you make the lines when you cut! I always use this one!
The square is our eraser! If you screw up you can erase it! But I usually just use the clear button at the bottom of the menu!
The hand image I rarely use. I believe it just moves the image around.


Cell Properties
This, other than the knife button, will be one of your main tools in making a layout!
URL: Will be if you have for instance Navigation on the image! You can use that to send the links places!
Alt Text: Hover over the image with the link and it will give a description if you write one in there
Target: Ah, the love of frames! We will use this one! This tells the Link which window to open in!.
The rest of these buttons don't worry! If you continue to use this technique you will learn on your own! Lets get on with cutting!! Ok lets first go down under the window where our image is and lets zoom out! That way we can see the big picture! If not we might cut the image up wrong!
Neeext is the fun part but we have to be careful! If not your layout won't work! We're just going to do a simple cut! Click the knife image and make yours look like mine!

See how one of the sliced pieces is outlined in green? That means its selected. Remember that Cell Properties thing? Well if we edit any of the Cell Properties what ever is outlined in green is what it will effect! So lets click the arrow button! And select the big square to the left of Cye. This will be our main menu!
Next, look over in the cell properties and do one thing! Go to URL and type: MAIN. This will come in handy later! Now since this is a simple layout thats it. BUT WAIT! Don't close it! At the bottom of the menu window click Save As. Make a new folder and call it "Cye Iframe" then open that folder and save the HTML file as index.htm. Then click close on the Image Slice Menu. That's it for the graphics!

The next steps will use coding for HTML. So lets open our browser window! And open the layout! Right now it's just an image still right? Hover your mouse around the left of Cye. It should come up with a link curser. GOod! xD That means you followed my directions earlier! Don't click it though, the link is only there so we know what image to use. On larger more complicated IFRAME layouts the background won't always be white. It could even be an image. In order to help the layout flow better and look clean and neat we will need the name of the image from the square we cut! So lets open the source to the index! Right click the browser window anywhere but on the image and go to "View Source".

Ok this mess you see in front of you on Note Pad is the table that PSP makes for us! Aren't they so kind?! So now the fun part is finding all of the parts we need which won't be hard at all. Search through your code and find that URL we made! Mine is: Image6_2x1 so lets do this:
See all of that JUNK in the way? We need it to go! First, copy the image name to the clip board! Then be careful and *only* DELETE what I TELL YOU. If you don't you can screw the layout up so much it's not useable!
Delete from here ONLY: <***IMG NAME="Image61" SRC="Image6_2x1.jpg" WIDTH="316" HEIGHT="246" BORDER="0"***>
Now we have a blank spot for the IFRAME. The code for the IFRAME is
<********iframe name="main" height="508" width="800" src="main.html" frameborder="0"*********><**/iframe***>
Without the asterics of course :D come on HTML Gurus. *lol*. Ok so thats the generic code. Of course with each layout unless you are *incredibly* lucky the size will change! But the URL to MAIN.HTML will always be the same! So lets change it to match what it tells us.
In your index paste the iframe code into that spot where we took the image code out! Make sure to change the size to what it is. And then open a new note pad and make a main.html. Since we have that image the background will be the image! Your First few lines of HTML will look like this!

Write some stuff in the <*P*> bracket! Then save it as main.html and then go back and refresh your browser window! Make sure you saved your index! Does yours look somewhat like mine?!!

If it does then you did it! ^_^ HORRAY!