Web Site Template Design Pattern Code

HTML and XSL Code for a Web Site Template

In the HTML code for each page of the web site, include an <?xml-stylesheet?> instruction referencing the site's style sheet file.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="<#/path/template-name.xsl#>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title><#Page Title#></title>
   </head>
   <body>
      ... see other HTML Design Patterns ...
   </body>
</html>

Create a single style sheet file at the location specified by the <?xml-stylesheet href?> attribute.

<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:html="http://www.w3.org/1999/xhtml"
   xmlns="http://www.w3.org/1999/xhtml"
   exclude-result-prefixes="xsl html"
>
 <!-- Copyright 2011 Accilent Corp. Permission to use granted. Provided AS IS, no warranties. -->
 <xsl:output method="xml" version="1.0" omit-xml-declaration="no" indent="yes" doctype-system="about:legacy-compat"/>

 <xsl:template match="/">
 <!-- removes stylesheet processing option -->
  <xsl:copy>
   <xsl:apply-templates select="*"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="/html:html/html:body">
  <xsl:copy>
   <xsl:apply-templates select="@*"/>
   <header>
    <#HTML code for header#>
   </header>
   <xsl:apply-templates select="node()"/>
   <footer>
    <#HTML code for footer#>
   </footer>
  </xsl:copy>
 </xsl:template>

<!-- requires <nav id="left-nav"></nav> where navigation is to appear -->
 <xsl:template match="html:nav[@id='left-nav']">
  <xsl:copy>
   <xsl:apply-templates select="@*"/>
   <ul>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/<#another-page.html#>"><#Link Text#></a></li>
    <li><a href="/<#subdirectory#>/"><#Link Text#></a></li>
    <#more navigation links#>
   </ul>
   <xsl:apply-templates select="node()"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="@*|node()">
  <xsl:copy>
   <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
 </xsl:template>

</xsl:stylesheet>

The match="/html:html/html:body" template shows an example of how to include content based on the location of a unique HTML element in the source document. In this case the template is adding some HTML header code and some footer code to the <body> element.

The match="html:nav[@id='left-nav']" template shows an example of how to include content based on the location of an element with a specific id attribute. In this case the template is adding a series of site-wide navigation links on the left hand side of each page.