Some more advanced options will help to overall better your template
and make it look more professional and clean. These include
adding graphics, changing widths, changing colors, etc. We
are
only going to go over a few since this is meant as a basic
tutorial.
CLEAN LINES
One thing you probably already noticed is that there is a thick colored
border around the table cells. That is because of cell
spacing in
the tables. removing that not only adds a cleaner look but
also
makes it so much easier to add graphics to your template and have them
line up properly. See the following example to see how they
are
removed:
In each beginning table tag we just had the highlighted code and this
removes all cell spacing. Once you do this to all of the
tables
in your template it should look similar to the image below:
Click to Enlarge
You see that it has a much cleaner look.
GRAPHICS
One thing that adds so much to templates are simple graphics.
I
have included a very simple header graphic in the tutorial template and
now it is time to add it.
In your css file you will need to edit the code in the following
image:
We added a height to the table on line 7, then changed the background
from a color to an image on line 8. We then eliminated the
background color for the table cell on line 14 (before image) and line
15 (after image). We added it to the table because we wanted
the
whole table to have the image. You can add images to cells or
tables depending on how you want them to display.
COLORS
Something as simple as changing colors in a cell can make a big
difference in appearance. Here we will change the colors in
just
the footer table cell. See the image below for
reference.
As you can see a very simple change for the background color.
It was changed to match the header image color.
Final Preview
This is the final preview of everything we have done to create a
template that is very simple and useable. There are a few
other
things that really should be done to fine tune the template, but this
is again a very simple and basic tutorial to create a template from
scratch.
Click to Enlarge
That is pretty much it. I hope I made it simple enough for
everyone to understand and learn from. If not please let me
know
and I will try to refine it a little more. Also if there is
anyone who would like to add to this, by all means contact
me.
; "Click to Enlarge"){kind=small}
; "Click to Enlarge")
; "Click to Enlarge")
; "Click to Enlarge")
; "Click to Enlarge")
; "Click to Enlarge")
; "Click to Enlarge")
