Someone recently emailed me with questions about making a website with Tinderbox and wondered out loud how I might be able to help. Here is what I wrote back:

I would be quite happy to provide advice on either a professional consulting basis or a more informal basis. As a paying client, you would have quicker access to me; I could also put time into training you or making templates for you. However, I'm also very content to give you some tips on an informal, unpaid basis. In fact, I'll include some suggestions right now.

If you want to make a site in Tinderbox, and you don't have a lot of experience, here is my suggestion.

1. Download a full copy of Mozilla. You will use this to edit the templates.
2. Find a site layout you like, perhaps on Open Source Web Design, and download it. For example, I really like Autumn 05, by Dave Reeder.
3. Get Tinderbox, of course.

Next, spend some time thinking about the sorts of things which you might like to put in your website. This site isn't going to be a blog. My making it pretty simple, I'll be able to make it very flexible. I just want a menu, a title, and some text on each page.

Before you begin, make sure you understand the Tinderbox concepts of Prototypes, Hierarchy, and Attribtues.

So, it's time to begin!

Basic Setup

First, it's time to make my Tinderbox file. This one's going to be simple. I'll start out by making a single page out of a single note. For sample text, I'll just copy something from the Elsewhere's Postmodern Generator.

My first page isn't going to need many fancy things. Just a title and some text. Thanks to the Postmodern Generator, I have a title: The cultural paradigm of narrative and the postconstructive paradigm of consensus. I also have some text...

So, I create a note, give it a title, and put some text in it. Note: be careful if you're pasting text into Tinderbox. Tinderbox tries to preserve formatting, which can result in weird things. You may have to reduce the font size.

Next, save your Tinderbox file in its own folder. Your web page will probably include a lot of files, so this can help keep things organized.

Now that I have a note with a title and some text, I need to create a template to tell Tinderbox how to export that note to the web. The template system is very powerful. I've personally used it to export Tinderbox information into vector graphics files, databases, source code, and yes, web pages. Fortunately, with the right tools, it's pretty easy to come up with a good template.

1. Run the Mozilla Web Browser. Sorry, Firefox or Netscape Navigator won't do.
2. Select file->new->Composer Page. You will be presented with a very handy web-page composing tool. We will use Composer to create pages which Tinderbox will fill with information.
3. Save the Composer page. Mozilla will ask you for a title. Enter "^title^" into the box. Then save the file in your new file. Call it something other than ^title^.html though. I'll call mine "template.html"
4. Next, we edit the template. For now, just create a page with the title at the top, and the contents below it, as shown here:

Later, Tinderbox will replace the template codes with information from the note.

1. Now, create a new folder for the yet-to-be-completed website. That's the place where Tinderbox can put the page after it processes the template. I put my directory, usually called "export," inside the one where the Tinderbox file is found.
2. Next, I tell Tinderbox to use my new template to export the note I created earlier. In order to export HTML, Tinderbox needs to know a default template for my notes. To set this, I select edit->document preferences from the menu. In the new dialog, I click on the "HTML" tab. Then, if I click on the HTML Template button, I will be able to select my new template from the list.
3. All notes automatically get this default template, unless another is specified for the individual note in question. To set an individual note's template, you can
   1. Select the note
   2. Select views->HTML View from the menu. Then, select the template dropdown. If you click on "select template" from the list, you will be able to browse for a new template file.
4. To export, just select file->export to HTML from the menu. Tinderbox will ask for a directory to which it can export your HTML. Select the folder you previously created, and Tinderbox will export your new web-page to that folder.
5. Open the web-page created, and you will see a Tinderbox note exported using the Tinderbox template you created

If you want to use the same template for multiple files, you need to use a Tinderbox prototype. Your previous note will do nicely. Just select the note, then select note->rename from the menu. In the new dialog, check the "can be a prototype" box. You will now be able to make new notes that share the same settings as your first note. To test this,

• Create a second note
• Use the Prototype dropdown to set your first note as the prototype of your second one. Note how all of the settings, including the text of the prototype note, are automatically carried into new notes.
• Enter some text.
• Export the Tinderbox file

You will now see two pages exported using the same settings. This will become quite important in the next phase, which involves using a more complicated template.

Making it look good

Well, so far, we have covered the basics of templates, but we need pages that look a little better. So now, you need to modify the template you previously downloaded to work with Tinderbox. It's actually quite simple.

1. First, look at the folder for the template you downloaded. It might only have one html file, but it probably has some other files, and maybe even a folder. Copy these files into the folder where Tinderbox is exporting your web pages. This is very important. It is also essential that you keep a copy of all the template information in a separate place from the export folder. Edit the templates from that separate location. Otherwise, Tinderbox may overwrite your template.
2. Open the main template file (it will have .html at the end of the name) in Mozilla Composer. Edit the page to make it look like how you want it, and take out most of the text. In its place, put in the export codes we used earlier. Don't forget to select format->page title to set the page title to ^title^.

1. Save your template file.
2. Set your Tinderbox Document's default template to the new html file.
3. Export
4. Enjoy! You can now upload the contents of that "export" folder to any webserver, and it should work.

If you want to put special links in the menus and such, the easiest way is to use the Mozilla editor to change the template. But perhaps at a later time, I'll describe a way to do this within Tinderbox.