Designing a Layout

The layout and design of a website is like the cover of a book. You can't tell what the content is like, but if it's ugly and unusable no one's going to want to stick around to find out. Sure, you could just slap up black default text on a white background like our first page, but unless you're Salinger, it isn't going to be enough.

These are the steps I take to put together a layout:
1. First I find a nice image I'd like to use, like this butterfly:

2. I open the butterfly image in a graphics program (I use Paint Shop Pro). I press CTRL+C, which copies the butterfly to my clipboard. I then open a new, blank image at about 780x450 pixels, which is the size of the average browser screen, and paste my copied butterfly into the blank image. I position the butterfly where I'd like it to appear on the page, and by now I have a pretty good idea how the layout will look.

3. I create a new layer (in Paint Shop Pro, go to Layers>New Raster Layer) so that I can draw over the butterfly image without disturbing it. I draw some boxes for the navigation, and leave an area for the main body of text. I decide to decrease the opacity of the top layer (Layers>Properties) so that the layer below with the butterfly image shows through a bit.

4. My basic layout is finished, so I copy down the codes of the colors I used so I can use them in the HTML and CSS. This includes colors for the background, text and links.

5. I decide whether the layout would suit tables or frames better. This one would work best with tables, so I cut the image up so that the smaller pices fit into table cells around the text. Paint Shop Pro can do this if you go to File>Export>Image Slicer. You can divide the image up into rows and coloumns, and it will save the images and write the table code for you when you click "Save As".

6. Now, when we open up the .htm file that the Image Slicer saved, this is what our code currently looks like:

<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="710" HEIGHT="430">

<TR>
<TD WIDTH="250" HEIGHT="67">
	<IMG NAME="Image0" SRC="image_1x1.jpg" WIDTH="250" HEIGHT="67"></TD>

<TD WIDTH="418" HEIGHT="67">
	<IMG NAME="Image1" SRC="image_1x2.jpg" WIDTH="418" HEIGHT="67"></TD>
<TD WIDTH="42" HEIGHT="67">
	<IMG NAME="Image2" SRC="image_1x3.jpg" WIDTH="42" HEIGHT="67"></TD>
</TR>

<TR>

<TD WIDTH="250" HEIGHT="23">
	<IMG NAME="Image3" SRC="image_2x1.jpg" WIDTH="250" HEIGHT="23"></TD>
<TD WIDTH="418" HEIGHT="23">
	<IMG NAME="Image4" SRC="image_2x2.jpg" WIDTH="418" HEIGHT="23"></TD>
<TD WIDTH="42" HEIGHT="23">
	<IMG NAME="Image5" SRC="image_2x3.jpg" WIDTH="42" HEIGHT="23"></TD>

</TR>

<TR>
<TD WIDTH="250" HEIGHT="340">
	<IMG NAME="Image6" SRC="image_3x1.jpg" WIDTH="250" HEIGHT="340"></TD>
<TD WIDTH="418" HEIGHT="340">
	<IMG NAME="Image7" SRC="image_3x2.jpg" WIDTH="418" HEIGHT="340"></TD>

<TD WIDTH="42" HEIGHT="340">
	<IMG NAME="Image8" SRC="image_3x3.jpg" WIDTH="42" HEIGHT="340"></TD>
</TR>

</TABLE>

Notice how in every table <td> cell there is an <img>? Those are the chopped up bits of the layout. To put text into our layout, we need to set some of those images as backgrounds, so that they can have text over the top of them. If we look at the layout, we see that the second cell in the top row is our title area. So we change the top row from this:

<TR>
<TD WIDTH="250" HEIGHT="67">
	<IMG NAME="Image0" SRC="image_1x1.jpg" WIDTH="250" HEIGHT="67"></TD>
<TD WIDTH="418" HEIGHT="67">
	<IMG NAME="Image1" SRC="image_1x2.jpg" WIDTH="418" HEIGHT="67"></TD>
<TD WIDTH="42" HEIGHT="67">
	<IMG NAME="Image2" SRC="image_1x3.jpg" WIDTH="42" HEIGHT="67"></TD>

</TR>

To this:

<TR>
<TD WIDTH="250" HEIGHT="67">
	<IMG NAME="Image0" SRC="image_1x1.jpg" WIDTH="250" HEIGHT="67"></TD>
<TD WIDTH="418" HEIGHT="67" BACKGROUND="image_1x2.jpg">TITLE TEXT HERE</TD>
<TD WIDTH="42" HEIGHT="67">

	<IMG NAME="Image2" SRC="image_1x3.jpg" WIDTH="42" HEIGHT="67"></TD>
</TR>

7. Then we do the same for the menu and main text areas. However, notice how, although the main text area is mostly white, there is part of the butterfly's wing along the side? If we just left that as a regular background image, it would repeat all the way down the length of the table. We don't want it to repeat, so we need to add a no-repeat CSS tag. To do that, we change the bottom row of the table from this:

<TR>
<TD WIDTH="250" HEIGHT="340">

	<IMG NAME="Image6" SRC="image_3x1.jpg" WIDTH="250" HEIGHT="340"></TD>
<TD WIDTH="418" HEIGHT="340">
	<IMG NAME="Image7" SRC="image_3x2.jpg" WIDTH="418" HEIGHT="340"></TD>
<TD WIDTH="42" HEIGHT="340">
	<IMG NAME="Image8" SRC="image_3x3.jpg" WIDTH="42" HEIGHT="340"></TD>
</TR>

To this:

<TR>
<TD WIDTH="250" HEIGHT="340">
	<IMG NAME="Image6" SRC="image_3x1.jpg" WIDTH="250" HEIGHT="340"></TD>
<TD WIDTH="418" HEIGHT="340" BACKGROUND="image_3x2.jpg"
	STYLE="background-position:top left; background-repeat:no-repeat">
	BODY TEXT HERE</TD>
<TD WIDTH="42" HEIGHT="340">

	<IMG NAME="Image8" SRC="image_3x3.jpg" WIDTH="42" HEIGHT="340"></TD>
</TR>

The bit of code that says STYLE="background-position:top left; background-repeat:no-repeat" is CSS, and it says "keep the background image in the top left corner, and no matter how big the table cell gets, don't repeat it down the side.

That's it! Now you just add your navigation links and, finally, your content. Pretty easy, huh?