Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding the Final Touches
There is of course, no way that we can cover all of the intricacies of XSL in one article, but we've covered most of the basics we'll need for this project, with one exception. Now we'll look at putting it all together.
The overall HTML page we started out to emulate is structured as a table, with different cells holding different sections of content. If we add the rest of the HTML structure (including the navigational elements) to the XSL style sheet, we can see how to place the content:
...
<xsl:template match="/">
<html>
<head>
<title>Primary Outpost</title>
<style type="text/css">
* { font-family: arial, helvetica, "sans serif" }
.blurb { border: 1px solid green;
font-size: 10pt;
width: 90%;
padding: 10px; }
.blurbcell { text-align: center;
padding: 10px; }
a { text-decoration: none;
color: green; }
.headline { width: 100%;
text-align: center }
.navlinks { background-color: #EEEEEE }
.gossipcell { font-size: 10pt; }
.admincell { text-align: center;
font-size: 8pt; }
</style>
</head>
<body style="text-align:center">
<img src="images/logo.gif" alt="Primary Outpost Logo" height="67" width="496" />
<table>
<tr><td colspan="2" class="blurbcell">
<xsl:apply-templates select="content/blurb" />
</td></tr>
<tr><td width="20%" class="navlinks">
<p>
<a href="news/news.asp" title="the latest happenings">
<img src="images/news.gif" border="0" align="middle" alt="News"
height="39" width="39" />
News</a><br />
<a href="news/archives.asp" title="better late then never">
<img src="images/archives.gif" border="0" align="middle" alt="Archived News"
height="39" width="39" />
Archived News</a><br />
<a href="bazaar/bazaar.asp" title="shop">
<img src="images/bazaar.gif" border="0" align="middle" alt="The Bazaar"
height="39" width="39" />
The Bazaar</a><br />
<a href="auction/auctions.asp" title="got it? sell it. want it? buy it">
<img src="images/auction.gif" border="0" align="middle" alt="Auctions"
height="39" width="39" />
Auctions</a><br />
<a href="mySpace/mySpace.asp" title="carve out your niche">
<img src="images/myspace.gif" border="0" align="middle" alt="mySpace"
height="39" width="39" />
mySpace</a><br />
<a href="register.asp" title="jump on board">
<img src="images/register.gif" border="0" align="middle" alt="Register"
height="39" width="39" />
Register</a>
</p>
</td><td class="gossipcell">
<xsl:apply-templates select="content/gossip" />
</td></tr>
<tr><td colspan="2" class="admincell">
<xsl:apply-templates select="content/admin" />
</td></tr>
</table>
</body>
</html>
</xsl:template>
...
Rather than simply sending all children of the context node to be processed using xsl:apply-templates as before, the main template sends specific nodes to be processed using the select attribute, with the content being output as part of the HTML table. Like the match element, the select element uses Xpath expressions to designate sections of the XML document.
The final page is shown in Figure 7.
){kind=link}
Figure 7 The completed transformation.