View Full Version : Coding Your Layout


Sugar Rush
09-30-2003, 01:19 AM
I saw that a couple people were asking about this or something similar to it, so I thought I'd give a short tutorial on making a layout :).

Ok, so you've been working really hard on this beautiful layout in your graphics program. Now, how do you get it on the net?!

Assuming you already have a host of some sort, take a look at all your images. Pretend this is what you want your layout to look like:

XXXXXXXXXXXXXXXXXXXXXX
XX I Love Myself XX
XXXXXXXXXXXXXXXXXXXXXX
XXX Me XXX You XXX Outsiders
XXXXXXXXXXXXXXXXXXXXXX

XX TEXT TEXT TEXT XX

XXXXXXXXXXXXXXXXXXXXXX

First say, how many images do I have? How many pages will this layout require? Now you have to decide: tables, DIVs, frames, iframes, etc? Which one will you use? Or will you use a combination of a few?

Say that I am using frames for my beautiful x's layout above. So I say to myself: "I have 3 images. I want two frames and an iframe in the second frame." (BTW - this is what I use for my site now, except I don't have an x's layout).

So, the first image:

XXXXXXXXXXXXXXXXXXXXXX
XX I Love Myself XX
XXXXXXXXXXXXXXXXXXXXXX

will go in the top frame, along with my links image:

XXXXXXXXXXXXXXXXXXXXXX
XXX XXX XXX
XXXXXXXXXXXXXXXXXXXXXX

In my bottom frame, I will add my iframe. Inside the iframe, I will use my background image:

XXXXXXXXXXXXXXXXXXXXXX

XX XX

XXXXXXXXXXXXXXXXXXXXXX

**NOTICE! THE TEXT THAT WAS ORIGINALLY IN THE LINKS IMAGE AND THE IFRAME IMAGE ISN'T THERE. THAT IS BECAUSE YOU WILL ADD THAT LATER**

So, now your gorgeous x's should look like this:

XXXXXXXXXXXXXXXXXXXXXX
XX I Love Myself XX
XXXXXXXXXXXXXXXXXXXXXX
XXX XXX XXX
XXXXXXXXXXXXXXXXXXXXXX

XX XX

XXXXXXXXXXXXXXXXXXXXXX

Now, open the iframe page. Start writing your text. Position it so that it is between the x's. Now, open the top frame. Start working on positioning your links between the x's. Now, your site will look like the one I originally posted on top!

Now, remember, the x's are just there as a symbol for your graphics. You don't have to use x's :lol:.

If you don't understand, PM me. I can help you code your layout if you'd like me to and if your layout isn't too complicated :).