|
Streamlined Background Set
tutorial by Whisper
Part 3 ~
Coding for the .HTML page.
I will
show you the basics in .HTML and you can take it from there.
Open the .HTML file you
saved from the image slice in your HTML editor.
At this point the code should look similar to this:
<html>
<body>
<!-- Begin Table -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="800" HEIGHT="600">
<TR>
<TD ROWSPAN="1" COLSPAN="2" WIDTH="800" HEIGHT="100">
<IMG NAME="wwsmearbgset0" SRC="ww-smearbgset_1x1.jpg" WIDTH="800" HEIGHT="100" BORDER="0"></TD>
</TR>
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="150" HEIGHT="500">
<IMG NAME="wwsmearbgset1" SRC="ww-smearbgset_2x1.jpg" WIDTH="150" HEIGHT="500" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="650" HEIGHT="500">
<IMG NAME="wwsmearbgset2" SRC="ww-smearbgset_2x2.jpg" WIDTH="650" HEIGHT="500" BORDER="0"></TD>
</TR>
</TABLE>
<!-- End Table -->
</body>
</html>
|
This is fine if you don't want anything else in the
table. But we want to add text and other content, so we need to make the
images the background of the cells.
We accomplish this by deleting the image and setting the cell
backgrounds.
<html>
<body>
<!-- Begin Table -->
<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"> </TD>
</TR>
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="150" HEIGHT="500">
<IMG NAME="wwsmearbgset1" SRC="ww-smearbgset_2x1.jpg" WIDTH="150" HEIGHT="500" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="650" HEIGHT="500">
<IMG NAME="wwsmearbgset2" SRC="ww-smearbgset_2x2.jpg" WIDTH="650" HEIGHT="500" BORDER="0"></TD>
</TR>
</TABLE>
<!-- End Table -->
</body>
</html>
|
As you can see with the first cell we removed the image then made it
the background.
Here is the code with all three cells done and the tabled centered.
<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"> </TD>
</TR>
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="150" HEIGHT="500" background="ww-smearbgset_2x1.jpg"> </TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="650" HEIGHT="500" background="ww-smearbgset_2x2.jpg"> </TD>
</TR>
</TABLE>
</center>
<!-- End Table -->
</body>
</html>
|
Now you can add your content to the main cell and the links in the strip on
the left.
Here is an example of that layout.
Onto part 4 ~ Inserting an iframe into your page.
Back
~ Tutorial
Index
|