From a design to a website

23 September 2009

Hopefully when designing your website you used a design package (like Adobe Photoshop) that uses layers.

The best way to now get that design onto a web page is to cut up the layered image into all the parts that you need.

Now when writing your HTML you should write it in a way that works with the layers so you can have a background image on a <div> tag, for example, and then have another <div> tag within the first <div> tag with the next layer up of the overall image.

As a lot of parts from the overall image may have a transparent background be sure to save them as either a .gif or a .png file so that the image has transparency.

If there's content areas within your website's design be sure to have a top to the content area, a middle slice of the content area and the bottom part of the content area.

Having the content areas in 3 parts means that you can write as much content as you want and the middle slice of teh content area can have a background repeat of repeat-y - then the content area box will stretch with the amount of text that you write.

Also for accessability reasons the end user will be able to increase the font size and it will just increase the content area's box size as well rather than having the text continuing outside of the content area and looking messy.

Please leave a comment using the form provided.