Here are some suggestions for getting maximum benefit out of the ExSite templating system:
The WYSIWYG editor is convenient for regular content updates, but it does not give the direct control over the HTML that you need for template detailing. Furthermore, many details of templates (including meta-tags, CSS and Javascript references, and missing content objects) are invisible in WYSIWYG mode. For these reasons, templating work is often most effectively done in plain-text mode.
Include the following standard meta tags in your template header/preamble, so that ExSite can make use of them if requested:
<title><!--$title--></title> <meta name="description" content="<!--$description-->"> <meta name="keywords" content="<!--$keywords-->">
The comment-like tags allow ExSite to substitute relevant page-specific data into the meta tags when the page is actually constructed. This is especially important if Search Engine Optimization is important to you.
You can simply hard-code your local links, eg.
<a href="index.html">Home</a>
But you'll gain a little more flexibility if you re-code them using the templating notation:
<a href="{{index.html}}">Home</a>
This notation allows you to change the settings of the target page (eg. static to dynamic, public to members-only, etc.) without having to update your template to modify the target URL appropriately.
Say you want to use a 2-column layout on some pages, but only a 1-column layout on others. You could set this up using two different templates, one for each layout; or you could just use a single template, with two main content areas (we call them body and rightsidebar in this example):
<table><tr><td valign="top"> <!--content(body)--> </td><td valign="top"> <!--content(rightsidebar)--> </td></tr></table>
If a given page defines a rightsidebar object, the layout will appear to be two-column. If not, then the right column is empty and gets squashed by the main body, causing the layout to appear one-column.
If you have a template that defaults to two-column layout by defining content for the rightsidebar, then to revert to a single-column layout, all you need to do is define a rightsidebar object in the page, but leave it empty/blank. Your local copy will be used, causing the default rightsidebar to disappear.
Similar methods can be used for a variety of other optional layout objects, such as banners, footers, mastheads, and so on.
Automatic menu building is very handy when you add and remove pages on a regular basis. The examples below refer to the SimpleMenu plug-in, but similar results can be achieved using alternative menu plug-ins.
Insert a vertically-formatted (eg. side bar) menu:
<!--&SimpleMenu(vertical)-->
Insert a horizontally-formatted (eg. top bar) menu:
<!--&SimpleMenu(horizontal)-->
The default formatting is quite plain, but SimpleMenu allows you to dress up your menus with arbitrary HTML wrappers and spacers. To dress up your vertical menus, define the following content objects in your templates:
You can also dress up your horizontal menus by using the same content object names, but with "H" appended (ie. SimpleMenuTopH, SimpleMenuMidH, SimpleMenuBotH).
These HTML snippets can contain full CMS mark-up as well, which allows you to insert graphics into your menu layout.
"Dynamic" is slow for page rendering, but can sometimes be handy if you are tinkering with your templates or stylesheets on-line and don't want to have to republish everything after each minor change.
"Static" is much faster, and is highly recommended for production templates.
Use your favourite HTML editor, web design package, or hand-code your HTML and images, until you are happy with the results. This will generally be more efficient for repeated tinkering than the slower, high-latency network connections on the Web.
When your design is ready, use the "Import Template" function to load it up into ExSite.
Many dynamic content plug-ins produce simple, generic HTML and rely on stylesheets to dress it up. You can implement these special CSS classes in your web design to spiff up your dynamically-generated content.
You can also use the generic ExSite stylesheets as a short cut, since they predefine some styles that may be adequate for your purposes. For example:
<link REL="stylesheet" TYPE="text/css" HREF="/_ExSite/css/ExSite.css">
Some plug-ins have their own generic stylesheets that you can also utilize in a similar way, eg.:
<link REL="stylesheet" TYPE="text/css" HREF="/_Modules/Zine/zine.css">
Alternatively, you could import such files into your template, and modify them appropriately.