Requirements: Adobe Photoshop & ImageReady*; Notepad [HTML editor]
* Photoshop or any other image editor you can work with. You will also need a slicing program if you do not have ImageReady.

Iframes designs are intermediate-HTML leveled; they involve slicing and a good understanding. This tutorial covers preparing the image and coding an iframes layout.

Introduction

Iframes can seem complex at first, but are actually pretty simple after the concept has been grasped. Iframes are actually very different from Frames. I think that Iframes are a lot easier to handle than frames.

This tutorial may seem very long, but it's really just a jumble of tiny steps. I broke it down as simply as I could.

This tutorial is actually a rewrite- the second Iframes tutorial I've written. You may view the original if you'd like.

In this tutorial, I have actually included many directions in the images. So when you see [View] in the directions, it's advised that you view the images for helpful tips.

Preparing the Images

In order to have an iframes layout, you need to prepare the image. You can't just place an iframe on an image, right?

Editing the Image

Pick an image. I chose this one.
Edit it to your liking. I made my image dark, and added some effects. [View]
Make room for the rest of your design. You can do this by adjusting the image size. [View]
Design the rest of the layout. For example, I added a gradient background and faded my main image. [View]
Add your content space/box. This is where your main content's iframe will go. [View]
Add your navigation space/box. This step is optional. It depends on the design you're planning.
Add the finishing touches. I added text and little boxes. [View]

Now that you have created the image, we will slice it. You need to switch to ImageReady to slice the image. Use the Jump to ImageReady button. [View]

Slicing the Image

After everything has loaded in ImageReady, you should see your image. Click the slice tool from the Tools bar. Click and drag where your iframes will go. If you don't understand this step, try testing around with it first. [View]
Now save everything. Do this by: FILE>>SAVE OPTIMIZED AS.* [View]

* I have a little tip for this. Since this step involves creating multiple files (images, .html document), I would advise creating a new folder just for the layout. If you save all the files in that new folder, finding your files and organizing will be much easier.

Coding

In this part, when I have a **, that means that it is optional- you only perform these steps if you have a navigation iframe.

Preview the .HTML document that ImageReady created in a browser.
In the browser preview of your layout, right click the content slice (or approximately where it is). Select Properties, and find out what the image is named. My content slice's image is named index_03.jpg. [View]
View the source code of your layout. [Internet Explorer: VIEW>>SOURCE / Open Notepad and open the .html file in it]
Look through the code, and find the table cell that contains the image that you just checked. In other words for me, I would be looking for index_03.jpg in the source code.
So, I want to be looking at the image code. The code looks like:
<img src="html/iframes/index_03.jpg" width=519 height=260>
Write down the width and height of the image. Mine is: width=519; height=260.
Now, replace the image code with the following code:
<iframe name="main" src="main.html" frameborder=0 framespacing=0 noresize width=### height=###></iframe>
The only thing you need to edit in the code that I provided above is the width and height (the ###). As you can see, the dimensions of my index_03.jpg was 519x260. All I did was plug them into the ###. Therefore, my code would look like the following:
<iframe name="main" src="main.html" frameborder=0 framespacing=0 noresize width=519 height=260></iframe>
View your layout now [in the browser]. It should have an iframe with a broken page. [View]
** Repeat the last eight steps. However, this time, you need to right click where the navigation slice is. Additionally, you need to change the iframe's name and src. Therefore, my code would look like this:
<iframe name="nav" src="nav.html" frameborder=0 framespacing=0 noresize width=### height=###></iframe>

Notice that instead of name="main", I now have name="nav"; instead of src="main.html", I have src="nav.html".
Create new blank document, and name it main.html. This will be your content page. Copy the following code and paste it on main.html:
<html> <head> </head> <body background="YOUR CONTENT SLICE IMAGE NAME HERE. [FOR ME, index_03.jpg]> This is my content space. This is my content space. This is my content space. This is my content space. This is my content space. This is my content space. This is my content space. This is my content space. </body> </html>
**Create another new blank document, and name it nav.html. This will be your navigation page. Copy the following code and paste it on nav.html:
<html> <head> </head> <body background="YOUR NAVIGATION SLICE IMAGE NAME HERE. [FOR ME, index_05.jpg]> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html" target="main">Your Link Here</a> <a href="main.html">Your Link Here</a> </body> </html>
**Explanation of the
<a href="main.html" target="main">Your Link Here</a> 

It looks just like a regular link except for the target="main". It is targeted to main- this means you want the link from the navigation iframe to appear in the content iframe. For example, if I wanted to have the visitor click on a link called "VISITOR/EXIT" in my navigation frame, my code would probably look like the following:
<a href="vistor_exit.html" target="main">VISTOR/EXIT</a>

What might actually help your understanding of this is by seeing it visually. Look at your layout. Scroll to the bottom of the navigation iframe. Click on the last link. Does main.html open up in the wrong iframe? Yes. Instead of having the page open in the content iframe, it is opening in the navigation iframe.

You should be able to see how important that target="" is now.
[TIP] Is the background moving along with the text when you scroll in the iframe? Open your .css document (or wherever your css is) and add the following:
body {background-attachment: fixed; }
Believe it or not, you're now done! All you have to do is edit nav.html and main.html to your liking.