More Egg Baskets
In all the tutorial examples so far, we have created very simple 1-to-1 relationships between Master Page and resource document. Each Master Page had only one SSI-Container and each resource document populated that container from just one SSI-Filler. While this is useful in most cases, our web-site designs are sometimes more creative and require greater flexibility in where we place content. For this next feature, we will continue with our admittedly simplistic section-master.html Master Page add a second "section" to our fictional web-site which requires a two-column layout.
Our "Section Two" will need its own Master Page template and Style-Sheet to fulfill its requirements:
<!DOCTYPE html>
<html>
<head>
<title>Two</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="SSI-Template" content="section-master.html">
<meta name="description" content="Overarching description of Section 2">
<link rel="stylesheet" href="section-2-style.css">
</head>
<body>
<div title="SSI-Filler" id="section-content-1">
<div id="s2container">
<div id="s2navColumn">
<nav>
<a href="resource.html">Resource</a>
<a href="section1.html">Section 1</a>
<a href="section2.html">Section 2</a>
<div id="s2links">
<div title="SSI-Container" id="section-2-nav">Links go here!</div>
</div>
</nav>
</div>
<div id="s2contentColumn">
<div title="SSI-Container" id="section-2-content">
<p>Section 2 content goes here!</p>
</div>
</div>
</div>
</div>
</body>
</html>
#s2container p {
text-align: left;
color: #000;
font-family: sans-serif;
font-size: 0.9em;
}
#s2container a {
color: #c00;
}
#s2container a:hover {
background-color: #c00;
color: #fff;
}
/* Vertical sizing trick for floats borrowed from
* http://css-tricks.com/all-about-floats/
*/
#s2container:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#s2navColumn {
float: left;
width: 24%;
}
#s2navColumn nav a {
display: block;
font-family: sans-serif;
font-size: 0.75em;
}
#s2links {
margin-left: 0.5em;
}
#s2links a:before {
content: "2. ";
}
#s2contentColumn {
float: right;
width: 75%;
}
You should notice the following in these new source files:
- this HTML file uses a distinctively DIV-driven layout to illustrate that different authors with different styles still get the same benefits from pre-existing Master Pages;
- this CSS file uses a clear identifier scheme to help isolate its rules, thereby eliminating any unintended side-effects;
- this new Master Page has two SSI-Container directive DIVs,
section-2-navandsection-2-content, and both are bundled into one SSI-Filler directive DIV,section-content-1because that's the only SSI-Container directive DIV that the Master Page identified by the SSI-Template directive META provides for; and - both new SSI-Container directive DIVs provide default content that will end up in the final merge document if not overwritten by other resource documents.
Providing default content is optional and is used here only to nudge later web page authors of "Section Two" to add something to each container. Of course, far more clever content -- or nothing at all -- can be provided by default in this way.
Special Note
For this subordinate Master Page, we added regular DIVs around our SSI-Container directive DIVs in order to apply styling. Never directly style an HTML Master Pages directive! If you attempt to do so, your styling will be lost in the final merged document because all resolved HTML Master Pages directives are removed whenever a resource document is merged with its Master Page. This rule is excepted only for intermediary Master Pages (when accessed directly) in order to specifically assist web-site development and should never be relied upon in production.
Results
As we've been doing before with each new Master Page, we will preview this new one by accessing it directly in a web browser at http://your-site/section-2-master.html. Depending on your browser of choice, the output should be similar to:
By this point in the tutorial, there shouldn't be any surprises in the resulting source code:
<!DOCTYPE html>
<html>
<head>
<title>Two - Sections - Your Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Overarching description of Section 2">
<link rel="stylesheet" href="style-master.css">
<link rel="stylesheet" href="section-style.css">
<link rel="stylesheet" href="section-2-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 id="s2container">
<div id="s2navColumn">
<nav>
<a href="resource.html">Resource</a>
<a href="section1.html">Section 1</a>
<a href="section2.html">Section 2</a>
<div id="s2links">
<div title="SSI-Container" id="section-2-nav">Links go here!</div>
</div>
</nav>
</div>
<div id="s2contentColumn">
<div title="SSI-Container" id="section-2-content">
<p>Section 2 content goes here!</p>
</div>
</div>
</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
If you see anything here that you weren't expecting, please be sure to review the previous sections of this tutorial. The only notable difference here is that this intermediary Master Page output has two SSI-Container directive DIVs where all previous samples had just one.