Vital Signs Case Study Style Guide: Footer Formatting

Footer Section The footer should begin with a five-point horizontal rule to separate it from the body section of your web page. Use the <HR SIZE=5> tag to accomplish this. The first set of items in the footer should be the local navigation buttons. This set should contain three clickable graphics representing previous, next, and home buttons. The previous and next buttons should link each page to its logical predecessor and successor. They should create a path that a viewer can use to go once through the whole document from beginning to end and backwards if necessary. The home button on the home page of your web write-up should link to a logical page elsewhere at you Vital Signs site. The home buttons on the constituent pages of your report should link to your case study home page. The first page of your report should have no previous button and the last page of your report should have no next button.



Here is an example of HTML code for the rule that begins the footer section and the local navigation buttons.

<HR SIZE=5>

<A HREF="vh_bkgd.html"><IMG SRC="images/prevs.gif" WIDTH=68 HEIGHT=39 BORDER=0></A>

<A HREF="our_inv.html"><IMG SRC="images/nexts.gif" WIDTH=68 HEIGHT=39 BORDER=0></A>

<A HREF="sgl_home.html"><IMG SRC="images/homes.gif" WIDTH=82 HEIGHT=39 BORDER=0></A><BR>

Separated from the local navigation buttons by a line break should be the small Vital Signs graphic logo, vstiti.gif, or small graphic logo from your school. Then, aligned to the middle of that graphic and to the right should go the text "The Vital Signs Curriculum Materials Project." This text should be linked to the Vital Signs home page at http://www-archfp.ced.berkeley.edu/vitalsigns/.

This example shows HTML code for the small Vital Signs logo and text linked to the Vital Signs home page. Use the Vital Signs graphic if you are submitting your study to Vital Signs, and use your own graphic if your web report will be posted at your school web site.

<BR>

<IMG SRC="../../img/vstiti.gif" WIDTH=200 HEIGHT=83 ALIGN=MIDDLE>

&lt;FONT SIZE=-1><A HREF="http://www.ced.berkeley.edu/ cedr/vs/">TheVital Signs Curriculum Materials Project</A><BR>

Follow the footer logo and link information with another line break then three information elements about the page; the name of the author or contact person, a statement of copyright, and the dates when the page was created and last revised. Create an email link to the author or contact person using the <A HREF="mailto:whoever@wherever.edu"> tag. Next, include a statement of copyright similar to "All contents copyright (C) 1998. Allan Daly. All rights reserved." Finally, list the date that the first draft of the document was posted to the web, and date of the most recent revision of the document. Use text similar to "Created April 23, 1996 Revised: July 17, 1996."

Here is an example of HTML code showing three correctly formatted footer information lines.

<BR>

<I>Comments to author:</I><A HREF="mailto:adaly@ced.berkeley.edu">
adaly@ced.berkeley.edu</A><BR>

<I>All contents copyright (C) 1998. Allan Daly. All rights reserved.<BR>

Created:</I> April 23, 1996 <I>Revised:</I> July 17, 1996<BR>

The last item that belongs in the footer is the URL of the page. Separate it from the three information lines with a line break, then list the complete "http://…" address of the page. Format the text of this address as simply bold. Note that this text will fall inside the <FONT SIZE=-1> tag, so it continues to be small text. Lastly, follow the URL address with a couple line breaks so the bottom of the page will be formatted nicely.

Here is some example HTML for the URL address.

<BR>

<B>URL: http://www-archfp.ced.berkeley.edu/vitalsigns/ workup/siegel_house/sgl_bkgd.html
</B></FONT><BR>

<BR>
<BR>

Comments to author: vitalsigns@
ced.berkeley.edu

All contents copyright (C) 1998. Vital Signs Project. All rights reserved.

Created: 08/26/96
Revised: 09/09/02

http://www-archfp.ced.berkeley.edu/vitalsigns/bld/case_study_style/tech_foot.html