Next Up Prev


Step 09: Add Page Footers

At this stage, any novice user of the web is going to get a little frustrated because whenever they visit a country page or the order form page, they have to use their browser's BACK button to get back to where they came from. The back button never bothered me, but it's a good design principle to enable to the user to be able to click their way to where they want to go, rather than having to use the BACK button.

So, in this step, we add a footer to each page that contains a link to the home page. In addition to the link, we'll also add:

A webmaster email link: A hyperlink to the webmaster's email address should be included on most pages of most webs so as to enable visitors to report problems with the web. Most visitors won't report problems and the ones that attempt to will likely be discouraged if they have to surf through your web for an email address.

A link to a contact page: It's very frustrating to be surfing a company's web and actually want to ring them up or email them, but not be able to find their contact information! To avoid this scenario, we place a link to a contact page in the footer of every page in the Tarmac Travel web. The contact page doesn't exist yet. It will be created in a later step.

A copyright notice: It's a good idea to include a copyright notice on every page. This ensures that if users save or print out a page, that the copyright notice will follow the page around. The copyright page doesn't exist yet. It will be created in a later step.

Here's the HTML for the footer, which has been inserted into the HTML at the end of each page. It's messy, but there are only a few surprises, and these are explained below

<!-- Start of the page footer -->
<P>
<HR>
<FONT SIZE="2">
<A HREF="home.html">Back to the home page</A><BR>
<A HREF="mailto:webmaster@ross.net"
>webmaster@tarmactravel.com.au</A><BR>
<A HREF="contact.html">
Contact us to book your holiday.</A><BR>
<A HREF="copyright.html">
Copyright &copy; Ross N. Williams All rights reserved.</A><BR>
</FONT>
<HR>
<!-- End of the page footer -->

HR: This is just a horizontal rule.

mailto: This is just like a hyperlink to a web page, except that instead of taking the user to the page, it pops up an email window for the user to send email to the specified address.

HR: This is just a horizontal rule.

&copy; The copyright symbol is obtained using &copy;. This is one of many & escapes that are possible.

That's it for this step. Take a look at one or two pages to see how the footer looks. The footer was not added to the splash page (index.html) because splash pages have to be kept simple and elegant.

SourceSurfChanges Made In This Step
africa.html africa.html Added page footer.
antarctica.html antarctica.html Added page footer.
australia.html australia.html Added page footer.
china.html china.html Added page footer.
england.html england.html Added page footer.
greece.html greece.html Added page footer.
home.html home.html Added page footer.
index.html index.html
order.html order.html Added page footer.

Click here to go to Step 10


www.ross.net WebHints WebHints Tutorial
webmaster@ross.net
Copyright © Ross N. Williams 1997. All rights reserved.