The jQuery Javascript library has a neat feature that makes the maintenance of static sites a lot easier. It is possible to load a different page into a div (or any other defined area on a page).
The syntax for this is relatively simple
<div id="footer">
<p>Page requires javascript to load the footer links into this area.</p>
</div>
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$('#footer').load('index.html #footer ul.menu');
</script>
This solves the problem of wanting to make sure that the footer is identical on all pages without having the problem of making sure that you edit all 20+ pages in a static site. Sure it would be a whole lot easier to just use a dynamic site and include whatever code was needed in the page, but some sites are still made out of static (X)HTML so this is a neat fix.
The $('#footer').load('index.html #footer ul.menu'); line is the key one, it loads the index.html page and then extracts the contents using a CSS selector #footer ul.menu and replaces the existing footer div on the current page with the specified content from the index page.
Yes, the obvious complaint is that it slows down the page load time, but for most static sites this is less of an issue than the maintenance hassle of ensuring that every page is updated whenever a change occurs. It also has the side effect of cutting down the total size of the pages for sites that have lots of boilerplate code in the footer or sidebars.
For completeness I should also show the footer from the index page
<div id="footer">
<ul class="menu">
<li class="menulinks">
<div><a title="Home" href="index.html">Home</a></div>
</li>
... lots of other links missed off here
</ul>
</div>