Iframe Layout II - Designs / Layouts tutorial
- Added: Dec 14th, 2004
- Level: Medium/Hard
- Author: Melfina
- Reads: 82,525
- Description: The second part of the Iframe layout tutorial containing the coding.
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.
If you like this tutorial why not 
digg it or 
add to del.icio.us?
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.