Home Design Secrets
by Myrrhine
Welcome to the first home design secrets. Each edition of the Pan Historian we'll bring you a new design secret that you can use to build a beautiful Pan Historia home. Everyone knows that these things are so much easier with examples that you can see, so for every column we'll be using a real Pan home to demonstrate the secret we're revealing. For this edition Cressida of Troy has very kindly allowed us to poke around in her code so you too can learn how to use tables to build a great layout.
If you haven't already clicked through the link to Cressida's home, now would be a good time to do it, here is a small screenshot just to whet your appetite.
Look carefully at the picture and you'll notice three main graphics in play as part of the layout. There is the mottled red which makes up the main page background, the satiny, silky red that forms a frame for the text and a darker brownish red which against which all the images and text for the home are placed. These graphics are manipulated using tables to create the framed effect on the page. Here is the screenshot again, this time with the tables marked out.
Now you're going to want to know how to do something similar yourself. We'll use a different set of graphics and similar code to create this effect.
The first thing you'll need to do is pick out or make the graphics you're going to use in the layout. You'll need a main background, a background for the border, and a background for the table which contains all your text. Here are the graphics that I've chosen - they are all free from copyright and you may use them yourself if you like.
 |
 |
 |
Right so we have our graphics and we have a home to put them into. Let's move onto the code that will make these graphics work for you. First of all you'll need to set the spots up as you main page background. You can do that using CSS or HTML or both. The css code will look like this:
<style type="text/css"><!-- |
If you use HTML the code will look like this
<BODY background="http://www.panhistoria.com/www/panhistorian/spotbackground.jpg"> |
Want to know how it will look in a home if we just left it like this?
Not too good huh? The next step is to create the first table. This table is going to contain the graphic for the border. As I want the table to fill up as much space on the home as I can I'm going to see up the table to be a single cell that uses 100% of the space available to it. I also need to set the background for the table to the yellow border tile I created earlier. Here is the code.
<TABLE background="http://www.panhistoria.com/www/panhistorian/yellowborder.jpg"
cellpadding="10" border="0" width="100%"> |
You'll notice I've also set the cellpadding to 10 and the border to 0. This is because I want to make sure that the border is visible when I add my next table and to prevent the table from having any borders. You can often create interesting effects with borders on tables, experiment for yourself and see what you like. I've also left the cell empty - we'll fill it in just a moment. What does the home look like now?
A little bit better but not quite right. The next step is to add another table, this time using the spotty background again to make that yellow border really stand out. This table sits entirely inside the single cell of the previous table and it has exactly the same properties. Here is the new code with the new table in red:
<TABLE background="http://www.panhistoria.com/www/panhistorian/yellowborder.jpg" cellpadding="10" border="0" width="100%"> |
It's really important that you keep each table straight in your mind. If you miss a single </td> or </tr> everything will shift and move and it can be quite difficult to track down those mistakes. Double and triple check that you've got all your opening and closing tags in place. Here is how it's all looking now:
And now we're up to the final table. This table is where all the text for the home will be. This time it's going to go inside the single cell of the second table, and it's also going to have almost identical code. Feeling confused? Check out the code now, the new table is in blue.
<TABLE background="http://www.panhistoria.com/www/panhistorian/yellowborder.jpg" cellpadding="10" border="0" width="100%"> |
How's it looking now? Well not quite as spectacular as Cressida's, but it's well on the way.
What does it need to make it really look fantastic? Well some content for starters, and a little care and attention with CSS to make those links and text down the side stand out ... so experiment with graphics and tables to create an interesting layout. It's a great foundation for building a beautiful, unique home.
