A Semi-Dynamic Sitemap with XML, JavaScript and CSS Part Two

2164 Users read it.
by Dan Wellman

Welcome to part two of the sitemap tutorial.  In part one, we created the XML data store that holds information about all of the pages in the site, and we built the main body of JavaScripts that acts as the mechanics behind the page to dynamically write the content of the page.  In this article, we will be returning to the JavaScript file in order to improve the HTML output.  We will also create an HTML file and a CSS file to control the presentation of the output.  Let's get started with the HTML page.


The HTML page that holds the generated sitemap need not be very complicated; all we need to worry about is ensuring that the document is valid and making the call to the initial function in the JavaScript file.  The following page is all we really need:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/EN" http://www.w3.org/TR/html4/strict.dtd>

<html lang="en">


  <title>Site Map</title>

  <script type="text/javascript" src="sitemap.js">



<body onload="getData();">




The empty <p> element is used to meet validation standards because the <body> tag requires at least one child element, as does the <head> element.  Thisis really all that is needed because the rest of the content is generated by the JavaScript.  Other than this, I don’t think anything else here requires much explanation.  Save the file as sitemap.htm and reopen the JavaScript file to make some additions.

User Rating (Not rated)
0 reviews available
$2.79 USD

User Level:Any
Product:Dreamweaver MX, Dreamweaver 8, Dreamweaver MX 2004
Technologies:CSS, XML, HTML, JavaScript
Number Of Pages:7

Dan Wellman

Dan WellmanDan Wellman is an author and web developer based in the UK. His first book, Learning the Yahoo User Interface Library has just been published. Dan is an avid fan of all electronic music from old school hip hop to new school breaks and everything in between. On those rare moments away from a computer Dan enjoys spending time with his friends and family.

See All Postings From Dan Wellman >>

Follow us on twitter Subscribe to our RSS feed
Activate your free membership today | Login | Currency