Saturday, August 23, 2008

Splitting your Website Layout

Unfortunately we can't just tell the browser to take our little image and make a fully fledged website out of it. We have to tell him how to. To do this we first have to split our layout into boxes as the website will then be orderly and easy to realify.

Here's how I did it:

the website will have to be split so that each box can be represented by a box with the following attributes:
  • height (percent of screen/pixels/font size)
  • width (see above)
  • background color (any color represented by hex)
  • background image (any size and anywhere)
  • text or other content (tables/lists/links in any form of presentation)
Remember, keep the boxes to a minimum but still use enough of them to be able to produce neat code. A box for the header may include two other boxes, one for the title and one for a company logo or an add or something similar. Then you will need a box for the content (only one). Last but not least you will need a box for the footer which will display copyright information and the like. If you wrap all your boxes into one main box it will be easier to center ALL of the content. You can of course use one or two more boxes if you like, for example for an advertisement or new bar. All in all you should have 3-7 boxes.

Next we will start coding...

No comments: