Our template content is starting to take shape. We do have a space above the menu bar to put the page heading though and so we probably ought to add that next. It is also common to include a logo at the top left linked back to the home page so we really ought to include that there as well.

<h1><a href="index.html"><img id="logo" src="logo.gif" width="66" height="92" alt="Home"></a>
Page Heading Goes Here</h1>

The heading text will need to be changed for each of our pages but we'll include a small amount of text there for the time being so we can see how the page looks. You will of course also include your own logo in place of the one I have included (you'll need to use your preferred graphics program to create the logo or get someone to create it for you) and the size will probably be different.

#logo {float:left; margin:0; padding:5px; border:0;}
h1 {text-align:center; font-family: Helvetica,Arial,sans-serif; margin:0; padding: 10px;}

The way we have done the logo makes it extremely easy to move the logo from the left to the right side if we need to (such as if we want translations of the page into languages that read from right to left). We would simply replace the float:left with float:right. That helps to demonstrate just how easily all our web pages will be able to be changed in the future just by making minor changes to the stylesheet used by all the pages.

That's the top section of our template page sorted out so the next step will be to apply formatting to the content area.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow