Boot Camp

Template Page
16
Template Page
We’ve looked at a lot of bits and pieces, so let’s start putting them together. We’ll do this
by creating a simple table-structured template page which will use a combination of the
things we’ve covered. This way you can see XHTML and CS in action. In this case, we’ll
look at template code for the Adopt-A-Furry-Friends concept mentioned earlier.
When you start building your web project, a template page is a seriously great first page.
While it’s tempting to jump in and start coding your index.html home page, starting with
a template page is more effective. This allows you to work through your comp layout and
coding kinds in a “safe” file, without the distractions of the content you will really need
to insert for the website.
Use a basic template page to structure your site, prelink your navigation, set up your
working footer, add head section styles and/or attach CSS links, add head section scripting,
and set placeholders for your real text. Use it also to code all your basic text and link
elements, so you can see in one place how all your headings, paragraph, list, and other
text will look. This way you can make changes that affect this one file, get it set up the
way you really want it, then use it as a template for your real website pages table data cell
borders so you can see how this looks.
Navigation Pre-linking
As you’ll see, we will set up some links for the navigation to be used on the web pages
in this web project. These links would be based on the pages you anticipate building for
the website project, based on the graphic site map you would have created in your project
planning stage.
The reason you will do this in a template page is so that when you replicate the template
for actual page building, you will have the links already in place. You can pre-link even
though the pages to be linked to have not yet been created. You can do this for your main
navigation links to your website pages, your footer navigation, your logo, and your Back
to Top links.
159