WebBuild Help - The Site Template

Lets take look at a simple site template file (the example below is provided in the "WebBuildEmpty" folder to get you started and is called "sitetemplate.html" and is located in the design folder).

If you open the "sitetemplate.html" file in a text editor you will see somthing like this:

<html> <head> <title>Site Title Here (change in design/sitetemplate.html) - ##PageName##</title> <link rel="stylesheet" type="text/css" href="##Root##design/css/templateformatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/nav1formatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/contentformatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/extracontentclasses.css" /> </head> <body> <div class="wholepage"> <table class="wholepage"><table-body> <tr> <td class="banner" colspan=2> <h2>Site Title Here </h2> (change in design/sitetemplate.html) </td> </tr> <tr> <td class="leftnavigation"> <div class="nav1"> ##nav:nav1## </div></td> <td class="content"> <div class="content"> ##Content## </div></td> </tr> <tr> <td class="footer" colspan=2> Footer text here (change in design/sitetemplate.html)</td> </tr> </div> </body> </html>

If this makes no sense to you, you may need to find out more about html and css (cascading style sheets) before you can make changes to the basic design.

Hopefully you'll notice that this is a normal html file - but with a few extra bits such as ##PageName## etc. It uses css (Cascading Style Sheets) to separate the formatting from the html (highly recommended - it makes the files easier to read and reduces page sizes see Tips and Tricks for tutorial links for html and css).

When WebBuild processes each .wfc file it uses this file as the basis for the html file it places in the "build" folder. The ## substitution markers are replaced by appropriate text thus:

##PageName## is replaced with the name of the .wfc file (excluding any priority prefix or the .wfc extension). In the case of the .wfc file being "default.wfc" the ##PageName## is taken from the parent folder name ("Home" in the case that "default.wfc" in the "content/pages" folder).

##Root## is replaced by a calculated sequence of "../" so that references to fixed location files can be made (the hierarchical structure of .wfc files and folders is reflected in the resulting "build" folder). Without ##Root## references to static file only work for built html files originating from .wfc files in the "contents/pages" folder the resulting html files from any .wfc files in subfolders would not reference the files correctly.

##nav:navigationname## is replaced with text based on the properties specified in the file "navigationname.properties" - see Navigation Properties page.

##Content## is replaced by the result of processing the .wfc file contents and is covered in more detail in the wfc to html Translation page.

It is your desision on how to create the siteTemplate file and supporting css files, images etc you may use the WebBuildEmpty folder as a starting point - or you can use html/css editors to create your own template page and css files (the only thing to remember is to use the ##Root## for locally referenced files).

Supporting files for your template should go in the "design/design" folder (this folder is copied to the "build" folder every time WebBuild is run. Supporting files would include all images and css files used in the template (we suggest they should go into folders "design/design/images" and "design/design/css").


Home Installing WebBuild Content Creation Designers Guide The Site Template Site Properties Navigation Properties wfc to html Translation Property File Syntax Tips and Tricks Download Licensing WebBuild	Up The Site Template Site Properties Navigation Properties wfc to html Translation Property File Syntax Tips and Tricks The Site Template Lets take look at a simple site template file (the example below is provided in the "WebBuildEmpty" folder to get you started and is called "sitetemplate.html" and is located in the design folder). If you open the "sitetemplate.html" file in a text editor you will see somthing like this: <html> <head> <title>Site Title Here (change in design/sitetemplate.html) - ##PageName##</title> <link rel="stylesheet" type="text/css" href="##Root##design/css/templateformatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/nav1formatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/contentformatting.css" /> <link rel="stylesheet" type="text/css" href="##Root##design/css/extracontentclasses.css" /> </head> <body> <div class="wholepage"> <table class="wholepage"><table-body> <tr> <td class="banner" colspan=2> <h2>Site Title Here </h2> (change in design/sitetemplate.html) </td> </tr> <tr> <td class="leftnavigation"> <div class="nav1"> ##nav:nav1## </div></td> <td class="content"> <div class="content"> ##Content## </div></td> </tr> <tr> <td class="footer" colspan=2> Footer text here (change in design/sitetemplate.html)</td> </tr> </div> </body> </html> If this makes no sense to you, you may need to find out more about html and css (cascading style sheets) before you can make changes to the basic design. Hopefully you'll notice that this is a normal html file - but with a few extra bits such as ##PageName## etc. It uses css (Cascading Style Sheets) to separate the formatting from the html (highly recommended - it makes the files easier to read and reduces page sizes see Tips and Tricks for tutorial links for html and css). When WebBuild processes each .wfc file it uses this file as the basis for the html file it places in the "build" folder. The ## substitution markers are replaced by appropriate text thus: ##PageName## is replaced with the name of the .wfc file (excluding any priority prefix or the .wfc extension). In the case of the .wfc file being "default.wfc" the ##PageName## is taken from the parent folder name ("Home" in the case that "default.wfc" in the "content/pages" folder). ##Root## is replaced by a calculated sequence of "../" so that references to fixed location files can be made (the hierarchical structure of .wfc files and folders is reflected in the resulting "build" folder). Without ##Root## references to static file only work for built html files originating from .wfc files in the "contents/pages" folder the resulting html files from any .wfc files in subfolders would not reference the files correctly. *##nav:navigationname##* is replaced with text based on the properties specified in the file "navigationname.properties" - see Navigation Properties page. ##Content## is replaced by the result of processing the .wfc file contents and is covered in more detail in the wfc to html Translation page. It is your desision on how to create the siteTemplate file and supporting css files, images etc you may use the WebBuildEmpty folder as a starting point - or you can use html/css editors to create your own template page and css files (the only thing to remember is to use the ##Root## for locally referenced files). Supporting files for your template should go in the "design/design" folder (this folder is copied to the "build" folder every time WebBuild is run. Supporting files would include all images and css files used in the template (we suggest they should go into folders "design/design/images" and "design/design/css").
is a application http://www.sandbox.ltd.uk