Iframe Layout II

This tutorial has two parts. Click here for the first part.

Preparing for the coding: Slicing

Now to the slicing part. Take the slicing tool and make a square exactly where you want the iframe. Make another square at the left for the navigation as it's shown on the image below.

We can save it now. Save the psd if you want and then go to File > Save for web. You can save all images as JPEG with quality 60. Make sure when you save that the Type says HTML and images. Name it index. If you browse your computer to find what you've just saved the layout, you'll notice that there's an image folder, that's where the layout images are.

Adding the iframe code

To the coding part! Open index.html (the file you've just saved) with Notepad or similar. If you have the layout psd open, notice the numbers on each slice. Find the one for the iframe.

We'll remove the img thing there and place our iframe. This is what you have at first:

    <TD><IMG SRC="images/index_number.jpg" WIDTH=x HEIGHT=y ALT=""></TD>

This is what you need to put:

    <TD WIDTH="x" HEIGHT="y"><iframe src="main.html" name="frame" WIDTH="x" HEIGHT="y" frameborder="0"></iframe></TD>

Just replace x and y with the actual sizes.

Placing the navigation

We need to put the navigation links now. Find the slice for the navigation and change this:

    <TD><IMG SRC="images/index_numbernavigation.jpg" WIDTH=x2 HEIGHT=y2 ALT=""></TD>

to this:

    <td background="images/index_numbernavigation.jpg" style="background-repeat: no-repeat; padding: 5px;" width="x2" height="y2" valign="bottom">
    <a href="yourlink.html" target="frame">Link here</a><br>
    <a href="yourlink.html" target="frame">Link here</a><br>
    <a href="yourlink.html" target="frame">Link here</a><br>
    <a href="yourlink.html" target="frame">Link here</a><br>
    <a href="yourlink.html" target="frame">Link here</a>
    </td>

The target="frame" part is really important, because if you don't put that, the link will just open on the whole page instead of inside the iframe! You can change valign="bottom" to what you want: center, top or bottom.

Centering the layout (optional)

If you want to center the iframe layout place the table on a div like this:

<div align="center">
<table>
the rest of code here...
</table>
</div>

Changing the body properties

Let's change the background color and fix the margins. Replace this:

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

with this:

<body bgcolor="#yourcolor">

Making the page inside the iframe

We have to make the page that goes on the iframe now! Create a new document on Notepad and put this:

<html>
<head>
<title>Your site title</title>
<style>
body { background-attachment: fixed; }
</style>
</head>

<body background="images/index_number.jpg">
Write all your content here :)
</body>
</html>

Remember that index_number.jpg is the name of the image for the iframe, so put the actual number instead of number. Save it as main.html on the same folder where index.html is.

Ta-da! You're done! Now add your CSS or any other code you want and you've finished your layout.

Tutorial © Melfina. Do not reproduce in any way without previous permission from the author. Printed from http://celestial-star.net