Step 15: Add Footer Logo
Now that we've added so many images to the home page, the page footer is starting to look a bit drab. It's a good idea, in webs, to try and include some graphics in any feature that is repeated throughout the web, as in such cases, a little effort goes a long way. So in this step, we're going to add a Tarmac Travel logo to the footer. We'll link the logo to the home page so we can get rid of the home page link too.
Modifying The Footer HTML
Adding the logo image to the footer is actually
quite easy. All that's required is to insert HTML for
the image into the footer HTML on each page:
<A HREF="home.html"><IMG BORDER="0"
ALT="Tarmac Travel"
WIDTH="64" HEIGHT="32"
HSPACE="4" ALIGN="left"
SRC="binary/logo.jpg"></A>
As is usually the case with IMG tags, it's messy, but there are no surprises. The only new trick is the ALIGN="left" tag which instructs the image to float to the left, with subsequent material (in this case the text footer fields) flowing around the image.
How The Logo Was Created
Here's how the logo image was created. For small logos, it's better to use a glow around the text than a drop shadow.
Start with Kodak free Australia image number 18.
Clip a section in a 2x1 ratio.
Text "Tarmac Travel":
Amco Display SSi, 70pt, AntiAliased, Colour=Black
Noise.AddNoise(Type=Gauss,Amount=25,Monochromatic).
Alien.Glow(Wid=20,Op=80%,Col=White,Drop=Thin).
Select a little way inside outer edge. Invert selection and delete.
Select remaining content and use outer bevel.
Shrink down to 64x32.
For a small amount of work, this step has improved the look of every page in the web (except the splash page). Perhaps further work on the footer to make it even more graphical would be worthwhile. However, this tutorial has other fish to fry.
|
