|
Installing the frame
To do this tutorial, you will need a Iframe layout previously sliced and notepad (notepad is provided with windows so everyone should have it). If you don't have a sliced layout, I invite you to check out one of my 3 slicing tutorials, one using Paintshop pro, another one using Photoshop and one using Serif Photoplus. |
| Step 1: When you slice a layout, you get a html file containing a table with all your sliced images in different cells. In order to install your Iframe, you will need to know in wich cell the Iframe area is located. Look at the layout below and see where the iframe is... The area surrounded by the red square is where I want to install my Iframe. |
 |
| Step 2: But you already knew where you wanted your Iframe... What you need to know is in wich cell is the Iframe image! In order to find it out you will have to open the folder where you have saved the layout. Check all the images and find the Iframe one. Please note that depending on wich program you have used to slice your layout and wich name you gave it while saving, your images may have a different name then mine. That's not important though, what's important is to remember the name of it. Back to my example, in my folder you can see this, and I have circled in red my Iframe image. Mine is called tut_03. |
 |
| Step 3: When slicing a layout, you get and html file too so open it in notepad. Wow, what is that? It's the code your slicer program generated while saving your sliced images. Do not panic here, if your follow my instruction step by step you wont need to be a programmer to be able to install your Iframe!!! Anyway here is what I have on my page: (Again, depending of the program you have used to slice, the coding can be different but the basic should be the same.) |
| Step 4: Now I won't go in much details about those codes but what you need to know is what is a cell! A cell starts with a <td> and ends with a <td>. To install your Iframe you will need to find the cell that holds your Iframe image. Remember my Iframe image is called tut_3? Let's find the cell that holds that image. It should be in this cell: |
| Step 5: Let's write down the width and the height of that image. In my case it should be width=350 and height=254. We will need those dimension in order to install our Iframe. |
| Step 6: To install the iframe, we will replace the image with an iframe code. So now let's delete the image code that is inside the cell. Delete everything except the <td> and the <td> tag. This is what you should have now: |
| Step 7: Now you will copy the Iframe code below between the two td tag. You will have to insert your information in it. first you will have to give your Iframe a name, I always call it frame, you can call it whatever you want. After that, when someone view your website, they see a page showing up in the frame, usually the home page where you have your updates, so insert the url of that page, mine is always home.html. Finally add the width and height that you wrote down previously. Do not change the rest of the code. |
* Very important, when you will create your menu or insert links in your website, if you want the page to show up in the frame you will have to add target="NAMEOFTHEFRAME" for the page to open in the frame. If you don't want the pages to open in the frame, like linking other sites, you will have to change the attribute to target="_blank". Your links should look like this: |
| Step 8: If you followed all the previous steps correctly you should now have this: Clickie. Of course you have an error page showing up in the frame because we didn't build up the home page yet! |
|
Congratulations, you have install your first Iframe! I invite you to follow the Part 2 of this tutorial to learn how to
add a background and center the layout. Any questions? Click here |