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.