Streamlined Background Set
 tutorial by Whisper

 

Part 4 ~ Inserting an iframe into your page.

 

The simple coding from part 3 is fine if your content fits exactly in the cells.  I don't know about you but rarely does anything fit exactly for me LOL!

So in part 4 we are going to add an iframe to our page.

Make a new .HTML page and for this lesson name it content.html.

Set the background of this page to your background color.

Here is an example of the code for that:

<BODY bgcolor="#E6D9F7">

Now add the content you want to this page and save.

Back to the .HTML page that has your tabled background on it.

Here is the code with the iframe added to your page:

<html>
<body>

<!-- Begin Table -->
<center>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="800" HEIGHT="600">
<TR>
<TD ROWSPAN="1" COLSPAN="2" WIDTH="800" HEIGHT="100" background="ww-smearbgset_1x1.jpg"> &nbsp;</TD>
</TR>
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="150" HEIGHT="500" background="ww-smearbgset_2x1.jpg"> &nbsp;</TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="650" HEIGHT="500" background="ww-smearbgset_2x2.jpg">
<iframe width="550" height="400" src="content.html" align="center" frameborder="0" hspace="1" vspace="1" scrolling="auto" name="iframe1"></iframe>
</TD>
</TR>
</TABLE>
</center>
<!-- End Table -->

</body>
</html>

To have your links open in the iframe you will need to add a tag to your link codes like this:

<a href="http://" target="iframe1">

Here is the example of this layout.

Have fun creating!!

Many thanks to my fabulous testers!
Click their names to view what they came up with...

Jen

Mystii

CJ

Back     ~     Tutorial Index