Misty Ice Designs v12 Sweet Remembrance

The Next part of this is likely going to be the most confusing part and that is adding in the table. When it comes to tables, it's almost always straight forward coding. It's important to remember what the defaults of a table are.
There's the border which is ALWAYS set to 1px by default. The cellpadding, cellspacing which is set to default at 5px and of course there is the width and height, which in ALL cases is set to snug up against your text. You always want to be sure to set these the way you want them.
If you want it to snug don't set it, but I can't imagine why you would. =P
In our case we're going to set each important property, and add in some style.

In the red portion of the table tag, we set the border 0 because we don't want their defaulted thick blue line around our layout, and the cellpadding and cellspacing to 0 as well because we don't want spacing around the table, everything has to fit right on top of each other. Finally we set the width and height. I set the width to the width of the title image, which is 750. (I could do a bigger image, but keep in mind most people are still on 800x600 that eye gouging resolution.) Then I set the height to 100%, because I want the layout to always span the WHOLE page, but never be too big.

In blue you'll notice we've included an inline style. This style tells the table that it has a background image, and to fetch the image from the images folder, it also tells it not to repeat the image.
Without the no repeat the image would continue to spread down the page.
So this table is being told that it's background is our title image.
The style is opened with style=" and the property is defined as background: url it's told to find the image in ('images/top.jpg') and it's then told not to repeat it with no-repeat and the property is closed with ; finally the style is closed off with "

So our table is open, now we need to start adding in rows (trs) and Columns (tds) If you don't know what this is, you need to go back to HTML 202 and read up on trs and tds because it gets pretty used from this point on =P

It's good to know the sizes of your images. You can find them in various ways. One way is on a PC, click the image, then in the left bar of the folder, look at the details. It'll tell you the size. You can also open the image in Photoshop, or Paintshop Pro (Or another imaging program out there not MSPaint... I don't think it works in MSPaint) and click "Image Size" or "Canvas Size" on the image, it'll tell you the sizes. Keep in mind we want the pixel size not the inches or centimeters.

Often when working with tables it becomes VERY confusing as to what you have open and what you don't.
You can sort this out in a few ways. You can use tabs, to tab each property over.
Creating something like this:

Which is what we'll be doing, but we'll also be closing our lines immediately after opening them.
So press enter, and on the next line down let's close our table.
</table>

At this point our code should look like this:

What we need to do now is open up our first row. To do this we need to go in between our table tags. So above the </table> line, make a new line, tab it over and use:
<tr>
And to make sure we're keeping things closed, make a new line, tab it over and close our tag.
</tr>

We now have our first row, we need to make a column for the row. Go above our </tr> make a new line, and tab over twice, then add:
<td>
Now we know we're going to want a total of two columns per row. One side will be for links and the other side will be for our content. (If you're doing a site keep in mind what's the LARGEST picture you're going to put in the content area, most often it's a 468x60 banner so you want your Content area to be at least 470px, which means we can really only make one link column if you want more you can make more, just your content area suffers =P we only have 748px to work with (the table is 750 px wide and there is a 1px border on each side))
With this knowledge we know our first row is for the Title image, but we didn't break the title image up into two parts, just one part......
So we need to tell this row that we want it to span over two columns
<td colspan=2>
Alright, now we have the colspan in there. We know the width is set right, but we need to set the height of the image in.
So knowing our top image is 750x195 we're going to use a inline style property to set the height of the column.

<td colspan=2 style="height:195px;">
Very simply we open our style with a style=" then we add in the property we want to define, in this case height:195px; and we close off the style with " then close our tag.
Remember with style's we don't use = we use : and to seperate properties we use ; instead of a closing tag (or in some cases spaces).
Now when closing a td, do not make a new line, simply close it at the end of your "content". But keeping with keeping things clean, let's close it now.
</td>

So now before we go on, let's match up our code:

Now we've been coding for sometime and we want to see a preview. Before we can do this however, we need to close the div layer, body and html.
So at the bottom of our code we need to add:

</div>
</body>
</html>

This will very simply close off the remaining open tags, and now you can save the file, then open it up in a web browser and it should look something like this:

Click the above to see it larger.

Yea, I know this is a long process... and we're not even halfway done yet.
So then, let's keep going.

When it comes to your first row, this row is our spacer. We've no intention to put text on it, as it's what created the blank space so that text doesn't start on our title image.
So we just want to add a space in between the td tags.
<td colspan=2 style="height:195px;">nbsp;</td>
At the beginning of the nbsp; you need to add a & if i was to add it, then you wouldn't see the code, as the html would read it as a space, and so you wouldn't see it heh.

Of course now we want to add in the linkbar image. So let's do that.
When it comes to the link bar, we have the intention of putting either link images, or text overtop of it so we want it to be a background, and it's a new row.
So let's start at the beginning and make a new tr.
Go after your </tr> make a new line, tab over and open a new tr.
<tr>
And don't forget to go down a line, tab over again and close it
</tr>

Now going inbetween the two tr tags, we're going to open a new td tag.

Now in the style, we still want to specify the height. Knowing that our image is 20px in height we'll set the height to 20px
And then we're going to add in the background property, in order to add our linkbar as the column's background.

So just like last time we don't want it to repeat, so we add in the no-repeat and we tell it where to find the image. Now we need to close our td tag. so at the end of the opening tag let's add

</td>

This time in between our tags we can add text, perhaps you want to add a quote, a line of text or some links, remember though, only ONE line will fit in here.
We don't want it getting stretched. (Typically only links end up in here.)
If you want to leave it blank add in the & nbsp; again (remove the space between the & and the nbsp;)

Now we have the top portion done, but if you preview it it looks a little off. This is going to happen until we get the rest in =P Right now previewing isn't going to help you much. It's best to finish writing the code and then tweak afterwards. So let's match our code and then continue on.
Your code should look something like this:

Remember to omit the space between & and the nbsp;

The next row we make is the row with the content. The important one shall we say.
So let's start with our tr. Go above the end of the table, add in a new line, tab it over, and add in the code to open a tr and to close it.

Now in between the lines we're going to open our new TD.
This time we don't need the td to span two columns, and for now we're going to make them simple, customizing them later in the CSS.
Often you would work along side your CSS in order to see how things are coming alone. Up till this point we really haven't needed to do that.
Beyond this point we don't Need to but things aren't going to look good in preview. So we'll continue without the preview's for now, and remember to add the necessary components to make our style work after.
Let's open the TD (After I blabbed - remember it goes between the <tr> and </tr> lines.
Our first Column (td) is our navigation.

The class=nav tells the browser to look in the style sheet and find a td.nav class in order to define the td.
Seeing as we don't have our style sheet set up yet, we're just prepping this for when we do.

Now we're going to make a div layer too, that will help us seperate the text a little more. Once again we're going to be telling the browser to look in the style sheet and find a class. At the end of your td open tag add this:

So we set the class=nav and this time we want it to find div.nav as we're in a div layer and it's class is nav.

Now we need to close both, and we need to close them in order.
So at the end of you line add
</div></td>

For the sake of time saving, let's throw some navigation in.
Between your <div class=nav> and your </div> let's add in some navigation.
Simple stuff.

With that there our side now has some navigation and our code looks like this:

Right, so if your code isn't almost identical to that, please double check it.

Next we'll add the content area. Go to where your LAST </td> was and make a new line. Tab over twice, and let's open up the second column.

Once again we're asking it to find a class in the style sheet. This time we're asking it to find the td.content class from the style sheet and use it's properties.

So we set the class=content and this time we want it to find div.content as we're in a div layer and it's class is content.

Now we need to close both, and we need to close them in order.
So at the end of you line add
</div></td>

For the sake of time saving, let's throw some content in.
Between your <div class=content> and your </div> let's add in some text.
Simple stuff.

<p>w00 w00 chugga chugga chugga w00t w00t we made this layout using Misty Ice Designs Let's Make a Layout - TABLES!

With that there our side now has some navigation and our code looks like this:

<html>
<head>
<title>MiD Let's Make a Layout // Something More ..//</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div align="center">
<table border=0 cellpadding=0 cellspacing=0 width=750 height=100% style="background: url('images/top.jpg') no-repeat;">
          <tr>
                    <td colspan=2 style="height:195px;">& nbsp;</td>
          </tr>
          <tr>
                    <td colspan=2 style="height:20px; background: url('images/linkbar.jpg') no-repeat;">& nbsp;</td>
          </tr>
          <tr>
                    <td class=nav><div class=nav><p><a href="/">link</a><br>
<a href="/">link</a><br>
<a href="/">link</a><br>
<a href="/">link</a><br></div></td>
                    <td class=content><div class=content><p>w00 w00 chugga chugga chugga w00t w00t we made this layout using Misty Ice Designs Let's Make a Layout - TABLES!</div></td>
          </tr>
</table>
</div>
</body>
</html>

Click the above to see it larger.

So far everything looks a mess. But things always get worse before they get better you know =P
So the next step is to add the bottom, and then of course we're going to need to start into the CSS, but that'll be a page over of course =P

So the bottom then. We'll need a new row, so let's open and close one.

Then in between or tr tags let's open up our column. This will be another column that needs to span two columns.

So with quickly checking, we know the height of the bottom image is 73px, so we added that in with our inline style. Now we need to close the td.

</td>

Go in between you td tags, and add the image code:

Now remember to set the height and width to what the size of the image is, and also to set the border to 0. If we make the image a link, we don't want that blue border to show up around it and destroy the look of the layout.

Now td line of code should look like this:
<td colspan=2 style="height:73px;"><img src="images/bottom.jpg" width=750 height=73 border=0></td>

And our whole code should look something like this:

Pat yourself on the back, the tables part is done. Time to move onto the more complex CSS but the good news is we're 50% of the way there... and the CSS really isn't that complex!
I'd show you a preview but it's still a jumbled mess. Better to save the preview for when we start getting some CSS in there to make it look fancy smancy.

So onto the Next Part!

Let's Make a Layout Part One :: Getting Started
Let's Make a Layout Part Two :: TABLES!! xD
Let's Make a Layout Part Three :: CSS
Let's Make a Layout Part Four :: Final Touches.