Creating a web page template can be as easy as creating a normal HTML file. But before we do that we need to understand where files go inside a template folder so that 93 Photo Street knows what to do with them.
The "static" directory is where you should place all files that should not be run through the template engine. This includes all images that are part of the template and any other files that don't need to be dynamically rewritten in the final web site (e.g. javascript or CSS files).
Every other file in your template directory and its subdirectories will be evaluated by the Velocity template engine. That means that you can name your file "something.xml", "whatsit.html", or "flapdoodle.js" and it will be treated like a velocity template file.
On the "Build Site" window there is a button labeled "View Index" which, when pressed, will attempt to open a file called "index.html" from the files which were built by 93 Photo Street using your template. Go ahead and build your photo map with your new template and then press the "View Index" button.
Nothing happened, right? That is because there is no file named "index.html" in your template directory. Let's fix this by opening up your favorite text editor and save listing 1 as "index.html". You may have to right-mouse-click or control-click the link in order to save it to your new template directory.
Now build your photo map and then press the "View Index" button to see your newly created page displayed in your default browser. The "index.html" in your template directory was read by the template engine, evaluated for any velocity commands, and then the results were written into your new site directory.
That is a lot of work for a file with no velocity commands in it, so we'll add our first bit of programming to the page by replacing everything between the body tags with:
#set( $aVariable = "Flapdoodle and the Noodle" )
We set a variable to: ${aVariable}
The new index file is available in listing 2 and should be overwritten over the "index.html" from listing 1.
Now build and reload your new index.html page to see the resulting, dynamically generated page. Making photo map templates consists mostly of setting variables and mixing them in interesting ways, so we're half way there. Now we can go onto step three, where we actually produce a map.