ExSite Manual: Templates

How to Template an Existing Website

  1. Make a copy of a representative page, including images.

    This is easily done using your browser's "save as complete webpage" function. This will save your webpage as an HTML file, and save all the auxiliary files, such as stylesheets and graphics, in a subfolder.

  2. Create the template in ExSite

    Go to your website in ExSite (the page that shows all your web pages as icons), and from the menu, select Website → New Template. Provide some basic info about your website, including a publication directory name (for example "Green_Template").

    You may be prompted to select a parent template. Ignore this step (select nothing) if you are working with a brand new template.

  3. Open your new template

    Go back to the website view (use the path box beside the typewriter icon), and select the icon for your new template. (Templates have an icon showing drafting tools.) It will open up, but be empty of content.

  4. Create the "page" object

    The first thing to do is create the framework for the entire page. From the menu, select Page → New Content Item. The name of this content item must be "page". The category should be "design", and the allowed mime-types should be "HTML". (Different choices are possible, but not normal in this case.) Press the "Next" button.

    Using the file browse field, select the representative page (typically an HTML file) that you saved in step 1. Press the "Next" button when you are done.

    Lastly, you will need to include a short comment explaining this update. Enter "import" or something like that. Press the "FINISH" button. You will be taken back to the template view, where you will see the "page" object you just created.

  5. Update your "page" object

    You imported a regular page, but now you must convert it to a template by modifying the HTML to use ExSite content management tags, instead of regular HTML tags. From the page menu, select Update &rarr update page.

    ExSite will render the page in its WYSIWYG editor. There may be lots of holes, because we haven't loaded the images yet, but ignore that for now. We need to work directly with the HTML tags, so change the update method to "Edit using a simple text editor". This will change the WYSIWYG editor to one that shows the raw HTML.

  6. Modify all external content URLs

    External content URLs are tags that point to images, stylesheets, scripts, and other items that are stored in separate files. For example:

    An external stylesheet:

    <link href="solutions_files/exware.css" rel="stylesheet" type="text/css">
    

    An image:

    <img src="solutions_files/ex-logo.gif" width="42" height="42" alt="">
    

    A javascript argument referring to an image file:

    onmouseover="MM_swapImage('solutions','','images/solutions_alt.gif',1)"
    

    Replace all external file names with a simple name enclosed in double-square brackets. The simple name can be any unique name that you will use to reference that file, but it's often easiest just to re-use the original file name. Do not include any directories or other URL data that was included in the original URL. For example, the above 3 tags could be converted to this:

    <link href="[[exware.css]]" rel="stylesheet" type="text/css">
    
    <img src="[[ex-logo.gif]]" width="42" height="42" alt="">
    
    onmouseover="MM_swapImage('solutions','','[[solutions_alt.gif]]',1)"
    

    This new notation tells ExSite that you want those files to be managed by the content management system.

    Make a note of each file that you reference this way, as they will have to be imported into the content management system later (step 11).

  7. Modify internal links

    An internal link is a link to a page in the same website. For example:

    <a href="index.html">Home</a>
    

    You can replace all internal links with file names enclosed in double-braces, for example:

    <a href="{{index.html}}">Home</a>
    

    This notation allows the content manager to make the correct link to the file, regardless of whether the page is published to an HTML file, is not published yet (and only exists in the database), is never published (due to security or dynamic content requirements), or changes its status at some time in the future. It also allows webmasters to navigate through the site with various content management features enabled on each page.

    You do not have to change your internal links to use this notation, but if you do not, then the links will not work until the pages are published. Once published, however, they should work fine for normal site users.

    External links (to other sites) should not be changed.

  8. Define your main content areas

    Identify the main body of your page, and replace it all with a single tag:

    <!--&content(body)-->
    

    This tells the content management system to substitute the body into that position. It also keeps the body separate from the template itself.

    If your page has a complex structure, with more than one content area that can be edited, you can repeat this step for each such area. Give each new area its own name (eg. "sidebar", "footnote", ...).

    If you have sections of content that you want to appear on every page, then leave them in place as part of the template.

  9. Edit your meta-data

    Meta-data is additional information hidden inside the page, such as titles, descriptions, and so on.

    Titles look like this:

    <title>Solutions in action</title>
    

    Titles can be templated like this:

    <title><!--$title--></title>
    

    Descriptions look like this:

    <meta name="description" content="description of this webpage">
    

    Descriptions can be templated like this:

    <meta name="description" content="<!--$description-->">
    

    Similarly, you can substitute meta-data anywhere into your page, using the <!--$meta--> tags. $meta can be one of:

  10. Save your updated page object

    After making your changes, click "Next" and then enter a comment such as "added templating tags", for auditing purposes.

    You can always return to updating the page object to refine, fix, or add new templating instructions. To do this, repeat steps 5-9.

  11. Import your external files

    For each external content file templated in step 6, you must import the file into the content management system:

After you have imported your external files, try previewing your template. From the page menu, select View → preview. Your template should display like a normal web page, except with no core content. If you see that some images or other items are missing or misformatted, you can return to any of the above steps to correct those problems.

Example

Here is an example of creating a template from a real web page. The example web page includes many embedded images, a stylesheet, and inlined Javascript, so it is a fairly representative example of a modern web design. You can see the live page at www.exware.com. This template reproduces the header graphics and menus at the top, while defining everything below that as the body. For pages with more complex structures, a derived template can be created that imports this header template, and adds its own extra structures (such as footers or sidebars).

The sections that were altered in the templating process are color-coded, so match up the colored sections to see how various elements of the page were templated.

Example PageTemplate
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Exware Solutions in Action</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="exware_files/exware.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body leftmargin="0" topmargin="3" marginwidth="0" marginheight="0" onload="MM_preloadImages('images/home_alt.gif','images/prodserv_alt.gif','images/solutions_alt.gif','images/news_alt.gif', 'images/partners_alt.gif','images/careers_alt.gif','images/about_alt.gif','images/contact_alt.gif')">
<!-- Begin NavBar Slices -->
<table width="660" border="0" cellpadding="0" cellspacing="0" align="center">

<tbody><tr>
<td colspan="4" align="left" valign="top">
<img src="exware_files/topbluebar.gif" width="218" height="42" alt=""></td>
<td colspan="3" align="left" valign="top">
<img src="exware_files/exwarelogo.gif" width="170" height="42" alt=""></td>
<td colspan="2" align="left" valign="top">
<img src="exware_files/ex-logo.gif" width="42" height="42" alt=""></td>
<td colspan="4" align="left" valign="top">
<img src="exware_files/topgoldbar.gif" width="230" height="42" alt=""></td>
</tr>
<tr>
<td colspan="13" align="left" valign="top">
<img src="exware_files/whitespace.gif" width="660" height="10" alt=""></td>
</tr>
<tr>

<td align="left" valign="top"> <img src="exware_files/leftgold.gif" alt="" width="18" height="15" border="0"></td>

<td align="left" valign="top"> <a href="http://www.exware.com/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_alt.gif',1)"><img src="exware_files/home.gif" alt="Home" name="home" width="36" height="15" border="0"></a></td>

<td align="left" valign="top"> <a href="http://www.exware.com/prod&serv.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prodserv','','images/prodserv_alt.gif',1)"><img src="exware_files/prodserv.gif" alt="Products & Services" name="prodserv" width="130" height="15" border="0"></a></td>

<td colspan="2" align="left" valign="top"> <a href="http://www.exware.com/solutions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('solutions','','images/solutions_alt.gif',1)"><img src="exware_files/solutions_alt.gif" alt="Solutions in Action" name="solutions" width="122" height="15" border="0"></a></td>

<td align="left" valign="top"> <a href="http://www.exware.com/news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news_alt.gif',1)"><img src="exware_files/news.gif" alt="News" name="news" width="45" height="15" border="0"></a></td>

<td colspan="2" align="left" valign="top"> <a href="http://www.exware.com/partners.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('partners','','images/partners_alt.gif',1)"><img src="exware_files/partners.gif" alt="Partners" name="partners" width="67" height="15" border="0"></a></td>

<td colspan="2" align="left" valign="top"> <a href="http://www.exware.com/careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('careers','','images/careers_alt.gif',1)"><img src="exware_files/careers.gif" alt="Careers" name="careers" width="61" height="15" border="0"></a></td>

<td align="left" valign="top"> <a href="http://www.exware.com/about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','images/about_alt.gif',1)"><img src="exware_files/about.gif" alt="About us" name="aboutus" width="93" height="15" border="0"></a></td>

<td align="left" valign="top"> <a href="http://www.exware.com/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_alt.gif',1)"><img src="exware_files/contact.gif" alt="Contact Us" name="contact" width="71" height="15" border="0"></a></td>
<td align="left" valign="top">
<img src="exware_files/rightgold.gif" width="17" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="exware_files/spacer.gif" width="18" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="36" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="130" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="34" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="88" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="45" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="37" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="30" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="12" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="49" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="71" height="10" alt=""></td>
<td>
<img src="exware_files/spacer.gif" width="17" height="10" alt=""></td>
</tr>
</tbody></table>
<!-- End NavBar Slices -->
<!-- Begin Yellow Sidebar -->
<img src="exware_files/spacer.gif" width="660" height="20" border="0"><table width="660" align="center">
<tbody><tr colspan="2"></tr>
<tr valign="top">
<td width="200" bgcolor="#ffffec">
<img src="exware_files/newsheader.gif" alt="news">
<p class="exware">Exware builds on event management & registration
success.[<a href="http://www.exware.com/event-pr1.html" target="_blank"><em>read more</em></a>]</p>

<p class="exware">New website will cut Your Office Vancouver’s current
costs by 30%! [<a href="http://www.exware.com/YOV-pr1.html" target="_blank"><em>read more</em></a>]</p>

<p class="exware">Exware launches Connex - The answer to PGI
Canada’s email concerns.[<a href="http://www.exware.com/connex-pr1.html" target="_blank"><em>read more</em></a>]</p>



<p class="exware"><a href="http://www.exware.com/archives.html" target="_parent">
Click here</a> to view Archives.</p>

<p><img src="exware_files/articles.gif" alt="Articles"> <img src="exware_files/spacer.gif" width="200" height="10">
<a href="http://www.exware.com/nextnet.html" target="_parent"><img src="exware_files/nextnet200.gif" alt="Nextnet" width="200" height="35" border="0"></a>
</p><p class="exware">Read <strong><a href="http://www.exware.com/nextnet.html" target="_parent">NexTNET</a></strong>,
a newsletter that tracks the latest developments in Internet functionality.</p>


<!-- End Yellow Sidebar -->
<!-- Begin Main Column -->
</td>
<td width="10"></td>
<td width="450">

<p class="header">Member Management</p>
<div align="left"><a href="http://www.icord.org/" target="_blank"><img src="exware_files/icordlogo_small.jpg" alt="ICORD logo" width="150" height="56" border="0" align="left"></a>
</div>
<p class="exware">A
‘self managing’ website that allows ICORD members to log onto the site
and manage their own bios, photos, documents, publications, and web
directories over the web, without the intervention of a webmaster. The
website includes an email notification module that allows ICORD to
manage different email groups, streamlining internal and external
communications. The ICORD Web Administrator (a non technical employee)
can now easily maintain and manage email lists for distribution of
news, announcements, and reminders to members, media, and the general
public. Exware will soon add Grant application and CV building tools to
the ICORD website.</p>
<p class="exware">ICORD is Canada’s premier spinal cord injury research
centre.</p>

<p class="header">Association Management</p>
<p class="exware">A turnkey web solution for
Associations and Non-Profits that incorporates the latest web
productivity tools: content management, email & list
management, event management, calendar & scheduling tools,
member management, and much more! <br><br>

</p><p class="exware"> This solution allows IFMA BC to:
</p><ul class="exware">
<li>attract & manage members </li>
<li>streamline internal & external communications</li>
<li>manage, promote & schedule events</li>
<li>maintain & update their website (without having to know HTML!)</li>
</ul>
<div align="left"><a href="http://www.ifmabc.org/" target="_blank"><img src="exware_files/IFMA_BC-jks.gif" alt="IFMA logo" width="150" height="56" border="0" align="left"></a>
</div><p class="exware">

</p><p class="exware">The local chapter of the International
Facility Management Association.</p><br>
<p class="header">Email Management</p>
<div align="right"><img src="exware_files/connex-logo.gif" alt="Connex Logo" width="136" height="145" align="right">
</div>
<p class="exware"><strong>Connex™</strong> -  A multi-purpose Email Management system for
multiple users in multiple domains - perfect for ISPs! Connex™ allows
a single web administrator to easily manage each web account, add new
domains, new POP mail accounts, etc. With Connex™, users can manage their
own email accounts, adding new email aliases, and multiple auto responders.
They can easily turn their auto responders on and off, and customize them
for their own use.</p>

<p class="exware"><img src="exware_files/image9IV.gif" alt="PGI logo" width="66" height="63" border="0" align="left"><em>"This
system enables our clients to manage and operate their own email accounts,
saving them time and money in web maintenance. We have received nothing
but positive response to the system's ease of use and functionality."</em></p>

<p class="exware">Kirstie Wilds, Director of Interactive Operations, PGI
Canada Interactive</p>

<p class="header">Event Management</p>
<img src="exware_files/logo_CEM.gif" alt="powersCEM" align="right">
<p class="exware">An online event management system that offers charities,
associations, and corporations a web presence for their events. The system
supports online administration, registration, reporting, and ongoing communication
with registrants, sponsors and event staff. This system allows event managers
to run their events more efficiently, economically, and profitably!</p>
<p class="exware"><em>"Exware helped us develop the most complete and comprehensive
Event Management Software available in the marketplace today."</em></p>
<p class="exware">Wendell Minnick, Chairman, CFO, and co-founder, Vantage
Leisure, Inc. dba Powers Golf</p>
<p class="header">Online Exam Preparation</p>
<div align="left"><img src="exware_files/exambotlogo.gif" alt="Exambot logo" width="175" height="59" border="0" align="left">
</div>
<p class="exware">A web-based, interactive exam preparation system that
allows students to rapidly identify their weak topics and attack them
vigorously. Subjects currently supported and in development include: 
math, physics, economics, Canadian Securities, and more.</p>
<p class="exware"><em>"It was a very good experience."</em> A. Shairam, student</p>
<p class="exware"><em>"I think the site is great!"</em> E. Choo, student</p>
<p class="exware"><em>"I really like the way specific courses at SFU are listed
and relevant problems are available to work on, I think that type of customization
should definitely continue."</em> Anonymous, SFU student</p>
<p class="exware">Need more information? <br>
Contact us today at <strong>604-684-9440</strong>
or <a href="mailto:info@exware.com"><em>info@exware.com</em></a>.</p>

<p class="exware"><a href="#top">top</a></p>
<p class="exware"></p>
</td>
</tr>
</tbody></table>


</body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><!--$title--></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=[[exware.css]] rel="stylesheet" type="text/css">
<!--&content(rollover-script)-->
</head>

<body leftmargin="0" topmargin="3" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('[[home_alt.gif]]','[[prodserv_alt.gif]]','[[solutions_alt.gif]]','[[news_alt.gif]]','[[partners_alt.gif]]','[[careers_alt.gif]]','[[about_alt.gif]]','[[contact_alt.gif]]')">
<!-- Begin NavBar Slices -->
<table WIDTH=660 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">


<tr>

<td COLSPAN=4 ALIGN=left VALIGN=top> <img SRC="[[topbluebar.gif]]" ALT="" WIDTH=218 HEIGHT=42 border="0"></td>

<td COLSPAN=3 ALIGN=left VALIGN=top> <img SRC="[[exwarelogo.gif]]" ALT="" WIDTH=170 HEIGHT=42 border="0"></td>

<td COLSPAN=2 ALIGN=left VALIGN=top> <img SRC="[[ex-logo.gif]]" ALT="" WIDTH=42 HEIGHT=42 border="0"></td>

<td COLSPAN=4 ALIGN=left VALIGN=top> <img SRC="[[topgoldbar.gif]]" ALT="grid graphic" WIDTH=230 HEIGHT=42 border="0"></td>
</tr>
<tr>

<td COLSPAN=13 ALIGN=left VALIGN=top>
<img SRC="[[whitespace.gif]]" WIDTH=660 HEIGHT=10 ALT=""></td>
</tr>
<tr>

<td ALIGN=left VALIGN=top> <img SRC="[[leftgold.gif]]" ALT="" WIDTH=18 HEIGHT=15 border="0"></td>

<td ALIGN=left VALIGN=top> <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','[[home_alt.gif]]',1)"><img src="[[home.gif]]" alt="Home" name="home" width="36" height="15" border="0"></a></td>

<td ALIGN=left VALIGN=top> <a href="prod_serv.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('prodserv','','[[prodserv_alt.gif]]',1)"><img src="[[prodserv.gif]]" alt="Products & Services" name="prodserv" width="130" height="15" border="0"></a></td>


<td COLSPAN=2 ALIGN=left VALIGN=top> <a href="solutions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('solutions','','[[solutions_alt.gif]]',1)"><img src="[[solutions.gif]]" alt="Solutions in Action" name="solutions" width="122" height="15" border="0"></a></td>

<td ALIGN=left VALIGN=top> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','[[news_alt.gif]]',1)"><img src="[[news.gif]]" alt="News" name="news" width="45" height="15" border="0"></a></td>

<td COLSPAN=2 ALIGN=left VALIGN=top> <a href="partners.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('partners','','[[partners_alt.gif]]',1)"><img src="[[partners.gif]]" alt="Partners" name="partners" width="67" height="15" border="0"></a></td>

<td COLSPAN=2 ALIGN=left VALIGN=top> <a href="careers.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('careers','','[[careers_alt.gif]]',1)"><img src="[[careers.gif]]" alt="Careers" name="careers" width="61" height="15" border="0"></a></td>

<td ALIGN=left VALIGN=top> <a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','[[about_alt.gif]]',1)"><img src="[[about.gif]]" alt="About us" name="aboutus" width="93" height="15" border="0"></a></td>

<td ALIGN=left VALIGN=top> <a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','[[contact_alt.gif]]',1)"><img src="[[contact.gif]]" alt="Contact Us" name="contact" width="71" height="15" border="0"></a></td>

<td ALIGN=left VALIGN=top>
<img SRC="[[rightgold.gif]]" WIDTH=17 HEIGHT=15 ALT=""></td>
</tr>
<tr>
<td>
<img SRC="[[spacer.gif]]" WIDTH=18 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=36 HEIGHT=10 ALT=""></td>
<td>

<img SRC="[[spacer.gif]]" WIDTH=130 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=34 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=88 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=45 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=37 HEIGHT=10 ALT=""></td>

<td>
<img SRC="[[spacer.gif]]" WIDTH=30 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=12 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=49 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=93 HEIGHT=1 ALT=""></td>
<td>

<img SRC="[[spacer.gif]]" WIDTH=71 HEIGHT=10 ALT=""></td>
<td>
<img SRC="[[spacer.gif]]" WIDTH=17 HEIGHT=10 ALT=""></td>
</tr>
</table>
<!-- End NavBar Slices -->

<table WIDTH=660 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
<tr><td>

<!--&content(body)-->

</td></tr>
</table>

</body>
</html>

Creating Web Pages Using Your Template

To create a real web page, go to the "New Page" function of your site, and walk yourself through the Page Wizard. The page type in this case will be "page" instead of "template". On screen 3, you will be presented with a selection of templates to choose from. Select the template you created, and proceed.

(Experts: if you uncheck the "Skip Customize Layout step" box, you will import a copy of the page element of the template into your web page, with the option to edit it. This allows you to customize or tweak the design/layout for this page only. If you want to have an altered layout that is re-useable, you need to create a derived template that can be shared. If the default layout of the template is acceptable, leave this box checked.)

You also have the option of using pre-defined body templates that are installed in the system. This will pre-load a page body for you, which can shorten the page setup process, or ease the task of implementing standard but complex web application pages. If you do not select a pre-defined body, then you will have to manually create the body element, as you did for the original template. Then you can update the body to add/edit the body content.

If your page has a more complex structure, it will have other elements that also have to be created and populated with data. The details will depend on the specifics of your design.

More on Templating

This section includes more detailed information on templating, to help you template more effectively, and use more advanced templating features.

Analyzing Page Structure

The vast majority of pages consist of the overall page (which incorporates the site design), which contains a body area that holds the primary content. The page is sometimes called a "wrapper" since it wraps around the body.

While the body is often just a block of simple HTML, the wrapper typically contains other distinct content items, such as logos, banners, menus, and so on:

Some content items do not result in visual "objects" on the page. Examples include stylesheets and scripts that are included in your page:

Some pages do not have a simple wrapper+body structure. Such pages may contain multiple areas that can all contain their own unique content. A simple example is multi-column layout where auxiliary content is included in a sidebar area:

Many page elements are obviously distinct content objects. Images, for instance, are stored in separate files, so it makes perfect sense to treat them as separate content elements. Stylesheets and scripts are often kept in separate files as well.

Many content elements are not so clearly separated, however. The body is the most obvious example, since it is normally written right into the same HTML file that holds the design framework of the page. You will need to identify exactly where the body begins and ends, in order make it "swappable". Other swappable page elements will have to be handled in the same way, at your discretion. Stylesheets and Javascript are often written right into the page itself, rather than being stored in separate files. It is a matter of personal judgement whether you want to leave these as an integral part of the page element, or if you want to extract them so that they can be managed separately (which allows them to be shared with other templates, or managed/updated by other groups of people).

Determine which content areas should independently managed, and who they should be managed by.

Design and editorial content should be clearly separated, to protect the integrity of your site designs. In the simple case, the body is the area that editors have full access to, while the page (or wrapper) is the area that the designers have access to. If there are additional objects included in the page, you will have to make a judgement call as to whether each is a design element or editorial content.

Let's say your page structure is as follows:

This shows that you have four separate content items to manage:

* but not necessarily. For instance, if you want the logo to be customizable on each page, it would make sense to give editors some control over it. If the logo is a fixed image that should stay the same everywhere, then it is probably design content.

More details on URL substitutions...

CMS tags of the form [[xyz]] can be used anywhere you have a SRC= attribute in your HTML, especially IMG tags:

<img src=[[logo]] height=50 width=50 border=0 align=left>

This type of substitution also works for linked stylesheets, and externals scripts (note the quoting, which is optional in many cases):

<link rel="stylesheet" type="text/css" href="[[stylesheet]]">
<script type='text/javascript' src='[[my_script]]'>

It can also be used inside javascript, as in this example of a rollover-image function call that uses image "home0" for the normal image, and "home1" for the rollover image:

<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','[[home1]]',1)">
<img src="[[home0]]" width="36" height="15" border="0">
</a>
For images, it is often convenient to give the content item the same name as the original file. For example, this raw HTML:

<img src="ourlogo.jpg" height="50" width="50" border="0" align="left">

can be templated with this:

<img src="[[ourlogo.jpg]]" height="50" width="50" border="0" align="left">

This allows you to very quickly run through your HTML file and convert all SRC= attributes by simply adding the square brackets. Designers who are accustomed to working directly with filenames may also find it more readable. If the original image name includes a path, the path should be removed from the content name to leave just the file name.

More details on regular content substitutions...

CMS tags of the form <!--&content(xyz)--> can be placed anywhere in your HTML file. This tag is always replaced with HTML. If the content being substituted is already in HTML format, then it is simply swapped into place.

If the content being substituted is NOT in HTML format, then it is automatically converted into HTML format by ExSite. For instance, although it would be normal for your body to be HTML, you could in principle upload a JPEG image as your body, instead. In this case, ExSite would take the <!--&content(body)--> tag, and replace it with the equivalent of:

<img src=[[body]]>

which would inline the image into the body area of the page.

This means that ExSite content is polymorphic. That is, you can arbitrarily change the type of content in the course of your updates, and ExSite automatically adapts and does its best to display something useful. Even if the content is not browser-renderable (such as a PDF or MS-Word document), ExSite will display something to allow you to download it and view it with some other tool.

If you know that a content element will always be an external object like an image, then the URL-substitution method, above, may be more practical, since it you can encode the explicit image tag and attributes into the wrapper. If a content item could be of any type (eg. a blurb or title, which might be plain HTML or an image, depending on the designer's whim), then the <!--&content(xyz)--> format is more flexible.

In cases where the content object is an image, ExSite allows you to define special attributes to include in the IMG tag. This allows you to update not just the image data, but also the image attributes (which you cannot do using URL-substitution, which only substitutes a pointer to the data).

Dummy content items

In your template, you may define areas of content (such as a body), which are to be filled in by a specific page, not the template itself. Nevertheless, you may want to view the template with some "dummy" body in place, to give you a better idea of what a real page would look like. Otherwise, the browser may scrunch the whole template up until it is hard to tell how a real page would be formatted.

To make a dummy body (or any other content item), simply create a new content item, just as you did for your images. Name the content item "body", and set it to be "editorial" content of type "HTML". When prompted to upload a new version, you can optionally reset the update method to "Edit using WYSIWYG HTML editor" to type in and format the content directly.

With your dummy body in place, template previews will give you a better idea of what a full page will look like. Specific pages will provide their own bodies, which will override your dummy.

Derived Templates

Once you have a template defined, you can easily derive new templates from them. Simply follow the above procedure, but when asked by the template wizard to choose a template for your new template, choose the base template you are basing your design on.

All of the content of the base template is inherited by your derived template. There is no need to re-import this content. You only need to import new content items unknown to the base template.

In the Template Wizard, when you choose the template to use as your base, you have an option at the bottom of the screen to "Skip Customize Layout step". If you uncheck this, ExSite will automatically import the "page" content from the parent template, and allow you to edit it. This is handy if the new template has a minor formatting change over the original, as you can make your minor changes on the fly without having to import a new "page" content element.

Your derived template can also override other definitions in the original template (such as by replacing logos with alternate images). The versions defined in your dervied template will take precedence over the originals, when you use the derived template.

Derived templates can be nested to any depth, so you can derive new templates from your derived templates, and so on.

Menus

ExSite has automatic menu tools, which will automatically generate menus, submenus, sitemaps, and site paths for any page in your site. This is a very handy tool if your site navigation is too complex to handle with a generic, static menu that is hard-coded into your template.

You can also modify the ExSite menu generators to create completely customized menuing systems, to suit any site.

For more information on automatic menus, see the SimpleMenu web applet.