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 tables. 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(1px and it's bevelled). 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
Unlike when making a table layout this is rather straight forward coding, we're going to make a simple and clean table that holds all the images in place. We know the specific height and width of the table and of each cell as it holds an image.

In the table tag, we set the border to equal 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 or we have horrid white lines seperating our images.
Finally we set the width and height. I set the width to the width of the layout image, which is in this case 700. (I could do a bigger image, but keep in mind that there are people are still on 800x600 that eye gouging resolution and side scroll bars are not pretty, neither are vertical ones when the layout has frames.) Then I set the height to 500, because that's the height of the layout image.

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.
Also on a PC you can in an browser window right click the image and check the properties. If you don't have an imaging program and are viewing your image in a browser window.

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>
This is where our title image is going to be going, so it needs nothing fancy. We're going to add a class="top" into our td tag. Our TD tag should now appear something like this:

We'll come back to the significance of the class in a moment.

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 or we want to make sure we save our work. Before we can do a preview however, we need to close the div layer, body and html.
So at the bottom of our code(The last things typed into the notepad) 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. (With our current code though it's just a blank white page.)

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

Okay so we have a title row but no image in it. I want you to open up your style.css file. (Oh wait we didn't create one!! o.o! So open up a blank notepad and save it as style.css in the same folder your index.html is saved)
Now in this blank page we're going to add in our image, along with the row specifications. (If you don't know how to work with CSS you should go back and read CSS 101)
First let's open up the CSS tag.

td.top {
And then close it. Drop down to a new line an add }

Inbetween { and } we're going to want to add in our CSS properties. Remember that CSS is different than HTML, the = becomes : and ; must seperate properties.
Let's start with our height and width. The height of the frame is 142 and the width is 700 so add,
width: 700px;
height: 142px;
To our code, and the code should now look like this:

td.top {
width: 700px;
height: 142px;
}

The spacing is optional. I just do it to make things easy to find and read.

Next we want to add in our vertical alignment as a cell in a table defaults to middle, we want top. And we also want to set our background. We're going to put the top image into the background because this will prevent the little image tool tip from showing up when someone is hovering over your title image.
The properties we want to add are,
vertical-align: top;
background: url('images/top.jpg');

With the vertical-align it's pretty straight forward, top. With the background however it's important to remember that the image is in a different place. If you wanted to specify other properties here you could. You could add in that if the image doesn't show the background is black background: url('images/top.jpg') black; or that the background doesn't repeat. background: url('images/top.jpg') black no-repeat; In our case these are optional, no text goes in this cell so it shouldn't make a difference either way. I like to be certain that there is no repeat so I add that in.
Matching our codes up you should have something like this now for the style.css

td.top {
          width: 700px;
          height: 142px;
          vertical-align: top;
          background: url('images/top.jpg') no-repeat;
}

Okay then we have everything set for the title image. If you preview your page now you'll see your top image there all by itself.
The best way to do this is to go back to the HTML now and add in the frame work for just the tables, then come back and create the css after. This will make it so you can't preview your page for a while, or more so that there will be nothing to see but you can check your code after.
So go back to index.html in notepad and let's take a look at our code again.

We're going to need to add in the rest of the columns and rows. (When slicing an image up tables can become very complicated. If you didn't understand the tables layout or the tables tutorials, you should go back and practice with them.)

We're going to make our next row now. This row will involve tables inside of tables, this makes it so I don't have to fuss with the colspan and rowspan properties and just have to remember that I open a tag I close it after.
So before we get really confusing let's make our three rows (Just like we split up the images!) Our first one is made already as it was our title row, let's make the middle.
After our last </tr> enter down a line and open a new tr.
<tr> don't forget to close it. (Enter down a line) </tr>
In between those we want to open up our td. <td> and close it, </td>

Now that we have that part we need to add the class for this td. For this one we want to add in class=middle We'll fix it up in the CSS after. Just make a note that you need a td.middle class. (Handy to have a scrap piece of paper to write this down on, or you can alternatively just type td.middle into your css file and leave it till we come back to it.)

Our HTML Code should now look like this:

Now to keep things simple for now we'll come back to our middle row and create the bottom one.
Below our LAST </tr> let's enter down to a new line and open a new tr.
<tr> and then enter down again and close it </tr>
Once again in between those we're going to add our td.
<td> and then close it </td> (Picking up the pattern?)

The class here is simpley... bottom! So inside our <td> tag let's add class=bottom Really you can name the classes anything you want, I just like the KISS rule. (Maybe because it says KISS...)
Alright let's take a look at that HTML. (Don't forget we're going to later need a td.bottom in our CSS)

Okay so now we're going back to <td class="middle"> </td> and we're going to get a little tricky. The middle has a few sections to it, so we're going to make a table inside this td. The height of the table is the height of the middle section which in our case was 325px and our width remains 700px.
So let's open the table

<table border=0 cellpadding=0 cellspacing=0 width=700 height=325> and then we'll remember that we should close the table. </table>

Just like when we diced the image there will be Five columns (Tds) all in one row (Tr). I've labelled them as left, linkarea, seperator, mainframe, right (The lables are the class='s)
So first I opened my <tr> in between my <table> tags.

<tr> and I closed it. </tr>
And then in between the <tr> tags I add in the five td's closing each one after.

Now I have all five columns, the same as how I divided my picture up! However the linkarea was also divided so we need to add another table in between <td class=linkarea> and </td>

Before we do that let's take a look at the code we have so far.

Okay so if all is good with the code, let's get back to adding the table inside the linkarea so we can have a pretty iframe there after.

The height of this table is still 325px but now we need to grab the width of this table (We can do this by looking at the width of links.jpg or toplinks.jpg the two images that will appear in this cell.) The width is 127px in our case.
So let's open up the table. (Remember we're doing this between <td class=linkarea> and </td>)
<table border=0 cellpadding=0 cellspacing=0 width=127 height=325> and then we'll remember that we should close the table. </table>
Next of course is our TR. <tr> close it, </tr>
Now before we had multiple columns this time we have multiple rows. So this time there will be two trs and two tds in the table.

In between our first TR let's open up our td.
<td> and then close it, </td>
The class name that I used for this one is toplink so we add in a class="toplink" and the line should now look like this:
<td class="toplink"> and then close it, </td>
That's all we need for this row, go below the </tr> and open up a new TR. <tr> close it, </tr>
Once again in between the tr tags let's open up our TD
<td> and then close it, </td>
The class name I used this time is linkframe so we add in a class="linkframe" and the line should now look like this:
<td class="linkframe"> and then close it, </td>

Finally we're done with creating the skeleton of our layout. All the tables are made and properly closed. Now what we need to do is create the matching CSS which will define our rows and columns, and add in our images.
Before we do that though let's take one final look at our HTML code, match it up!

<html>
<head>
<title>MiD Let's Make a Layout // There is No Cure..//</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div align="center">
<table border=0 cellpadding=0 cellspacing=0 width=700 height=500>
          <tr>
                    <td class="top"> </td>
          </tr>
          <tr>
                    <td class="middle"> <table border=0 cellpadding=0 cellspacing=0 width=700 height=325>
                    <tr>
                          <td class=left></td>
                          <td class=linkarea> <table border=0 cellpadding=0 cellspacing=0 width=127 height=325>
                          <tr>
                               <td class="toplink"></td>
                          </tr>
                          <tr>
                               <td class="linkframe"></td>
                          </tr>
                          </table></td>
                          <td class=seperator></td>
                          <td class=mainframe></td>
                          <td class=right></td>
                    </tr>
                    </table></td>
          </tr>
          <tr>
                    <td class="bottom"> </td>
          </tr>
</table>
</div>
</body>
</html>
Now if you were keeping track you'd know we have to define these properties:

td.middle
td.bottom
td.left
td.linkarea
td.seperator
td.mainframe
td.right
td.toplink
td.linkframe

Within our CSS. So let's go back to our style.css file and if we haven't already, open and close each one.

td.middle {
}
td.bottom {
}
td.left {
}
td.linkarea {
}
td.seperator {
}
td.mainframe {
}
td.right {
}
td.toplink {
}
td.linkframe {
}

Now for each one we need to define, the height, background and vertical alignment. There isn't a background image for each. The only cells with a background image are td.top (which we already did) td.bottom td.seperator td.right td.left and td.toplink While td.mainframe and td.linkframe have background images too we're going to be placing the iframes there and the iframe's pages will have their own CSS sheets with their backgrounds defined there. (Isn't this fun!)

Let's start with td.middle
In between the { and } let's add the width, height and vertical alignment
The middle section needs to align to the top, the width is still 700px and the height was 325px
width: 700px;
height: 325px;
vertical-align: top;

Next is the td.bottom
The width was still 700px and to get the height we check the size of the image bottom.jpg which tells us the height is 33px and once again our vertical alignment is top.
And here we need to add in a background so the background is bottom.jpg from our images folder and we don't want it to repeat.
width: 700px;
height: 33px;
vertical-align: top;
background: url('images/bottom.jpg') no-repeat;

Next is td.left
Now our width's are starting to change and our height is consistantly 325px. The width we get from left.jpg and is 53px the vertical alignment is still top and once again we have a background here. The background is left.jpg from our images folder and we don't want it to repeat.
width: 53px;
height: 325px;
vertical-align: top;
background: url('images/left.jpg') no-repeat;

Next is td.linkarea
There is no background here, but the height remains 325px, the width we can get from either toplinks.jpg or links.jpg and the vertical alignment is top.
width: 127px;
height: 325px;
vertical-align: top;

Next is td.seperator
Background is located in the images folder and is called seperator.jpg the width is 24px the height 325px and the vertical alignment is top.
width: 24px;
height: 325px;
vertical-align: top;
background: url('images/seperator.jpg') no-repeat;

Next is td.mainframe
There is no background here, the width can be taken from main.jpg and is 461px the height 325px and the vertical alignment top.
width: 461px;
height: 325px;
vertical-align: top;

Next is td.right
Background is located in the images folder and is called right.jpg the width is 35px and the height 325px and the vertical alignment top.
width: 35px;
height: 325px;
vertical-align: top;
background: url('images/right.jpg') no-repeat;

Next is td.toplink
Background is located in the images folder and is called toplinks.jpg the width is 127px with the height being 44px and the vertical alignment top.
width: 127px;
height: 44px;
vertical-align: top;
background: url('images/toplinks.jpg') no-repeat;

Next is td.linkframe
There is no background here, the width is 127px the height can be taken from links.jpg and is 281px and the vertical alignment top.
width: 127px;
height: 281px;
vertical-align: top;

Wow. Okay we got all the CSS and tables, we can now save both files (Hopefully you've been saving as you go along, I'd hate to see a powerfailure and all this wonderful work lost.
With a save, open up in IE and BAM you have a preview of how the site is looking so far! YAY!
Yea, I see the white spaces too, we'll fix those up as we move on into Part Three finally. What this tutorial was about damnit. iframes!

So onto the Next Part!

Let's Make a Layout(iFrames!) Part One :: Getting Started
Let's Make a Layout(iFrames!) Part Two :: Tables
Let's Make a Layout(iFrames!) Part Three :: iframes
Let's Make a Layout(iFrames!) Part Four :: CSS
Let's Make a Layout(iFrames!) Part Five :: Final Touches.