When One Just Isn't Enough
For very simple web-sites, designing just one Master Page for all other resource documents to merge with is usually sufficient. However, more complex sites usually require several Master Pages -- probably one for each major section of the site -- where some section-specific elements are needed to distinguish one from another, or to otherwise improve the user experience with context-sensitive navigation and other content. It would be inefficient, even a hassle, to duplicate the surrounding content of the overarching site design elements into every section-specific Master Page just to add some context-specific elements. There is a better way and this is where Master Page chaining really helps!
HTML Master Pages empowers complex sites by providing a simple and predictable way to chain Master Pages. This feature enables designers to create a hierarchy of Master Pages so that overarching design elements are automatically inherited by every subordinate Master Page and every resource document that uses them. Setting up these merge chains is very easy as long as you follow the merging rules that have so far been discussed for HEAD tags and elements and BODY tags.
It is very important to remember that HTML Master Pages only looks at exactly two documents per merge: a resource document and its Master Page. Even when chaining Master Pages, one of the two documents is treated as a resource document (the one with an SSI-Template directive and at least one SSI-Filler directive) and the other its Master Page (the one with at least one SSI-Container directive). All merging rules that have so far been discussed apply at every stage in a merge chain.
Let's explore this technique with a simple, admittedly contrived example that builds upon the Master Page we have already created for this tutorial. We will create a subordinate HTML5 Master Page and CSS3 Style-Sheet as follows:
<!DOCTYPE html>
<html>
<head>
<title>Sections</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="SSI-Template" content="site-master.html">
<link rel="stylesheet" href="section-style.css">
</head>
<body>
<div title="SSI-Filler" id="master-content-1">
<section>
<header>
<h2>Something About Every Section</h2>
<p>Something relevant to every Section</p>
</header>
<article>
<div title="SSI-Container" id="section-content-1"></div>
</article>
</section>
</div>
</body>
</html>
article h2 {
margin-top: -0.5em;
margin-bottom: 0;
color: brown;
font-size: 1em;
font-style: italic;
}
article p:first-of-type {
font-family: sans-serif;
font-size: 0.8em;
color: blueviolet;
margin-top: 0;
text-align: center;
}
section > article {
margin-top: 0.25em;
padding: 0.5em 0.5em 0.25em 0.75em;
border: red dashed thin;
box-shadow: inset #ccc 0.25em 0.25em;
background-color: white;
color: #000;
font-size: 0.85em;
}
Results
As we did with this fictional site's "root" Master Page, we will preview the subordinate Master Page by loading it directly in a web browser at http://your-site/section-master.html. The output should be similar to:
More than you were expecting or did you anticipate this result? Even though this is a Master Page (it has at least one SSI-Container directive), it has an SSI-Template directive and at least one SSI-Filler directive which also makes this a resource document. Because a properly constructed SSI-Template directive exists in this file, HTML Master Pages will merge it with the specified Master Page upon request, giving you a "live" preview of its content and place-holders. As viewed from within the web browser, the resulting source code reveals this effect in more detail:
<!DOCTYPE html>
<html>
<head>
<title>Sections - Your Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Overarching description of your site">
<link rel="stylesheet" href="style-master.css">
<link rel="stylesheet" href="section-style.css">
</head>
<body>
<header>
<h1>On Every Page</h1>
<p>This content will appear on every page that points to this
file as its Master Page.</p>
</header>
<article>
<section>
<header>
<h2>Something About Every Section</h2>
<p>Something relevant to every Section</p>
</header>
<article>
<div title="SSI-Container" id="section-content-1"></div>
</article>
</section>
</article>
<footer>
© Your copyright notice here
<address>
Your name,<br>
when this page was last updated, and<br>
how to contact you here.
</address>
</footer>
</body>
</html>
Analysis
As you can see, the new file was processed by HTML Master Pages as a resource document, which resulted in a new, intermediary Master Page. It is this effect, when repeated for every such document pair, that enables web page authors to chain Master Pages.
You must remember that the content of the subordinate Master Page could only appear in its immediate Master Page because the subordinate Master Page contained two critical directives:
- An SSI-Template directive META element which specified the immediate Master Page to "chain into"
- An SSI-Filler directive DIV with an ID attribute value which exactly matched the ID attribute value of an SSI-Container directive DIV in that immediate Master Page
As a new intermediary Master Page, this resulting document is now able to receive content from other subordinate documents (whether they be resource documents or other subordinate Master Pages) because it also has at least one SSI-Container directive DIV.