Using Templates to Define Page Structure

A template is an HTML file with a little bit of special Webvanta code embedded in it to access the database and provide other special functions. You can have as many templates as you want, but you only need a single template if all of the pages of the site follow the same design.

Templates generally do not have any page-specific information, but instead provide the framework that is common to all pages of a type. Page-specific content is stored in regions that are defined by the template.

In some cases, your site may have only a single template. That's all you'll need if all of the pages follow the same overall structure. Most commonly, you'll have a handful of templates — perhaps one for the home page, a few different kinds of content pages.

At the other extreme, you could have a separate template for every page. This is rarely necessary, but it is sometimes the easiest approach for porting an existing site to the Webvanta platform.

Note: the template named "default" is used, by default, for all of the system pages, such as log-in, change password, page not found, etc. You can see on the template list (Structure > Templates) which pages use which templates. You should either update the default template to match the styling of your other pages, or reassign all of the system pages to another template.

Creating Your Own Templates

Your template can consist of any HTML you'd like. We've provided some examples templates that you are free to use, modify, or ignore. You can create as many templates as you'd like.

A good way to create your own template is to start from the complete HTML for the page. To make it into a Webvanta template, the first step is to remove all the page-specific content. This leaves you with a page that has all of the content that is constant from page to page, with holes for the page-specific content. Then, for each separate area of page-specific content, put in a WebvantaScript content tag (<w:content region="region_name" />). That's the essence of the conversion.

You may want to simplify your template but taking reusable pieces of it and creating snippets to hold those pieces, which enables you to reuse them in other templates.

Finally, if you want to use the dynamic menu creation provided by Webvanta's menu system, you'll need to replace your menu code with the appropriate WebvantaScript; see Creating Navigation for details.

Putting It All Together

Let's look at a concrete example: the basic two-column template provided as part of your initial site. Here's what it looks like:


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <w:snippet name='html_head' />

</head>

<body>

 <div id="outer_wrapper">

 <div id='wrapper'>

  <div class='container'>

   <w:snippet name='header' />  <!-- header snippet provides visual header and top navigation -->

   <div id='content_area' class='clearfix'>

    <div class="span-16 append-1 prepend-1">

       <w:content region='body' />  <!-- content for main column goes here -->    

    </div>

    <div class="span-5 append-1 last">

     <w:content region='right' />   <!-- content for right column goes here -->

    </div>

   </div>

  </div>

 </div>

 <w:snippet name='footer' /> <!-- footer snippet provides visual footer -->

 </div>

 <w:snippet name='analytics' />

</body>

</html>

We've put the entire HTML head section into a snippet, so we can reuse it in multiple templates:




<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title><w:meta:title /></title>  <!-- title tag pulled from CMS -->

<w:meta />             <!-- keyword and description from CMS -->



<!-- autodiscovery link for the default feed, which includes all database content -->

<link rel="alternate" type="application/atom+xml" title="RSS Feed" href="/feed.xml" />



<link rel="stylesheet" href="/blueprint-screen.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="/blueprint-print.css" type="text/css" media="print" /> 

<!--[if lt IE 8]><link rel="stylesheet" href="/blueprint-ie.css" type="text/css" media="screen, projection" /><![endif]-->



<link rel='stylesheet' type='text/css' href='/webvanta.css' media='all' />

<link rel='stylesheet' type='text/css' href='/dropdown_menu.css' media='all' />



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script src="/javascripts/jquery/1.3/plugins/jquery.form.js" type="text/javascript"></script>  <!-- required for ajax form submission script -->

<script src="/form.js" type="text/javascript"></script>  <!-- enables ajax form submission for comments -->

<script src="/menu.js" type="text/javascript"></script>  <!-- required for drop-down menu to work in IE6 -->



For the most part, this is the usual header stuff, with a couple of bits that are unique to Webvanta. The page metadata (title, description, and keywords) should be unique for every page, so those are no included in the template but are instead drawn from the database; you specify them for each page when you create the page.

Now, back to to the body of the template, we begin with another snippet that holds the Google Analytics code. The visual header, which includes the banner image and the menu bar, is created by the snippet "header".

The page structure is then defined using the Blueprint CSS framework to create the columns (which is the source of the odd class names). There's one content tag for the main column, and another for the right-hand sidebar.

Finally, another snippet provides the content for the footer.

Using Content Regions for Code

You can also use content regions for code. This is particularly useful in the head section, in which you can define content regions for page-specific CSS and JavaScript. For example, when we're building sites we often add a content region called page-css right after the CSS links in the head section, and another called page-js right after the JavaScript in the head.

When you use content regions for code, you need to disable the inplace editing so they don't get wrapped in markup. You do this by specifying editable="false":

<w:content region="page-js" editable="false" />