Misty Ice Designs v12 Sweet Remembrance

A lot of things I do are the pieces needed to make a layout, this time we're doing something called Let's make a layout. Now this will instruct you how to take a layout image, similar to the one we're going to use, and then make a layout from it.
This does not teach you how to make a layout image... err, I would teach that but that's something that is really based on design and tastes... I could walk you through the steps I took to make the image and get you to make it or I could just give you the image to start with.
A very important note, if you use the image that I'm supplying to make your layout and use that image AS your layout, then you need to link back to me and give me the credit for the image, if you use this to code your layout give the credit... you can say you coded it because you did but please just give the credit to me for the help... you know "Thanks to LadyPSerenity for her tutorial 'Let's make a Layout'" that's really kinda polite. We've already found some places direct linking... don't do that. And when you do that now you get a little image that says you stole from us =P

This is the image we're going to use:

Remember this is a thumbnail, click to make it bigger.

But you really don't need that piece, that's just to show you what it looks like. (I've had a few people ask me how I make a layout - So I'm going to do an image tutorial one, not that it'll be helpful to anyone but I'll do one up anyway and see what happens right =P) Unlike with Div layouts where you can have ONE image, and a background (Isn't very nice to load times but you can do it) This one requires us to break the image up.
So we need a top, a link bar and a bottom.

This is the top:

Another thumbnail, click to make it bigger.

This is the link bar:

Another thumbnail, click to make it bigger.

This is the Bottom:

And again a thumbnail, click to make it bigger.

And this is the background image:

CLICK ME!
(The image was impossible to see and stuffs so it got a text link and a border)

Save these to YOUR HARDDRIVE. Do NOT DIRECT LINK.

So now we have the images we need to start with the coding. There are programs that can be used to do the coding, but I perfer to use notepad myself, and it's great to learn using notepad(or the MAC equivalent to the free text editor). That way if you need to edit the code later, you know what you're doing.
So we're going to open up notepad now. (or MAC Equivalant to a free text editor)
First in notepad you need to add in the simple HTML beginnings

<html>
<head>
<title>Give your Page a Title here</title>
</head>
<body>

If you note, there are no properties defined in the body tag, most properties defined in the body tag are refused by Firefox, I hate firefox... personally but that's my personal opinion. I will however state that it's a widely used browser and it's best to code with most browsers in mind.
While we can't code with every browser in mind IE and Firefox are the most commonly used, so we code for them, and hope for the best with the rest. (well you can always download their browsers and check)

Remember when saving this you need to save it as filename.html replace file name with the name of the page. If it's your MAIN PAGE save it as index.html if it isn't save it as something that accurately links to what it's about. For example a links page would likely be links.html or a staff page may be staff.html
There are other versions you can save as such as .php or .htm but we're going with .html today
There will be a tutorial on using PHP in a layout, as using the php includes can often be VERY handy for updating. (Most free hosts however do not support PHP)

Now For my purposes I've called this site MiD Let's Make a Layout // Something More ..//
The title of the page will show up in the window at the top and in your taskbar. As is seen below:

Once we have this we have the beginning of our layout, all our fancy codes will go into a style sheet. There are two ways to do a style sheet you can link to an outside one, or you can have an inline one. I perfer to link to them, cleaner code. Some people perfer inline as to have less pages uploaded on their site. (cleaner code is always a goal for me, makes it easier to find things later when you want to update. Sure someone can 'steal' your code, but honestly if they're doing that it means you did a good job)
For this, we're using an outside one.

This means our next line of code should look like this:

When doing this ENSURE that your path to your style sheet is correct. If your page is in a folder, for example my page is in the letsmakealayout2 folder but my style sheet is in my root directory, then I would would make the line look like this <link rel="stylesheet" href="/style.css">
The / makes the system know to look into the root directory for the style sheet.
You can name the style sheet anything you want, I've named mine style. (If adding a style doesn't make sense go back to HTML 202 )
The link rel tag MUST go inside the header for the html file. <head> and the </head> Typically placing it under the title tag will work.

Once we have this, lets move onto getting the image on and the div in. You can code an entire site through style sheets(for this layout we're going to use a vast amount of the style sheet, it makes centering easier).
We're going to code through a combination of style sheets and HTML. In this case we're going to make some of the dimensions and properties of our table in the style sheet. The code I'm using to make this layout was originally coded by the Co-webmaster Aaron. I'm using his code, and modifying it to suit a simpler need and to be able to explain it out to you.
The Style sheet in this case will involve a vast majority of our properties(And of course the small things to make things pretty), so we're going to finish up some HTML and then begin on the Style sheet.

A few things to note, I call this a "Tables" layout but we still use div layers in it. As it helps with centering and making things work in the manor we desire them to.
Most of the time when you code a layout it's classified by what the MAIN component is. The main component of this layout is tables, as it's built off of them, and if I removed them the layout wouldn't work.
In the case of the div layers, I could probably remove them and have the layout still work, but then I'd have to do a few more extra things to get it to work.

So onto the Next Part!

We're going to start by centering our "table" (The one we haven't created yet) and to do this we're going to use a div layer. So the next line of code is this:

This code will simply center our text/table/page for us. We want a very centered table, after all anyone can align things to the right.

Alright so our notepad code looks something 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">

Depending on what you titled your layout, where your style sheet is located things might vary a little, but the overall appearance should be this.

For the next Part... move onto the next page =P

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