Creating Multiple Page Template with HTML-Kit Tools
Okay, so you have a bunch of the same files that you use all the time when you are creating a web site. Wouldn't you love to just type a few keys and everything would be done for you? I wanted that, too, and I figured out how to do it with the excellent program HTML-Kit Tools.
For those of you who would like a translation in Dutch, there is a Creating Multiple Page Template with HTML-Kit Tools in Dutch by Gerard Schaefers.
Organization is Key!
So, first thing you do is organize your work. Make sure if these files are in different folders in different versions that you make one folder that has the latest stable version of each file in it. One folder to rule them all! (Yes, I watched Lord of the Rings too many times.) In my case, I have a folder called local, and under that folder is a folder called common-files. That common-files folder also has folders that other pages may need. There is also a folder called doc_types which holds icons for various document types.
I have a one file that has all the company information in it that other files use. This makes templating much easier. Instead of having to type Acme Widget Company I just have to type $company and the server will put it in for me. Some files already have that information, for example the accessibility statement is the same except for the name of the company, so that file uses the $company variable.
What to Do? What to Do?
Now that you are organized and you have the files you need, you can start making your new template. First, you are going to Choose File -> New -> Edit and Manage Templates.
When you do that, take a look at the template called HTML 4.01 Frameset. This template creates the frameset document, plus three other documents that are contained within the frameset document. We all know that frames are evil, unless they are in a Intranet or other tightly controlled application. This template will give you an idea of what Tools can do for you. You just have to supply the documents.
The great thing about templates with Tools is that you can have Tools prompt you for field information, so you only have to fill out the form once. You may have more than one page that will need to prompted for field names, be aware that the fields are prompted in alphabetical order, not the order that you might have put them in.
Easier to Copy
As in the tutorial Edit Colorizer Styles you will want to duplicate an existing template. Name your template something meaningful, and leave the checkmarks for update date and hkp-uid fields.
Take Note
You will notice a few things when looking at my template.
[ movecursor=1 ]- this tells the program to move the cursor to the appropriate place. When you use a|in only one spot, the program will jump to that place in the markup and you can continue from there. It will not do it with multiple vertical bars.{{field}}- Anything in double curly brackets is a field that will be prompted for you at run time. You can put these in manually, or you can use the Fields button.
Using the Field Button
To make entering prompting fields easier, you can use the Field button at the bottom of the window.
- Field Name
- Required - this is the name of the field. Make it something that makes sense to you.
- Field Label
- You can put something here that will remind you of what the field is for.
- Default Value
- If the field has a default value, enter it here.
- Field Type
- There is a choice of text or memo. The default is text, which is one line. Memo is multiple line, rather like a textbox form control.
A little note from Chami about ordering fields:
Display order of fields: There's a sort field that specify the display order but it might clutter up the nice
{{fields}}. So I help Tools sort fields by prefixing field names...{{Field01_SiteName}},{{Field05_URL}}and so on. Optionally, you can hide these field names by adding a display label...{{Field01_SiteName|Site Name}}{{Field05_URL|Website Address}}. I skip numbers (Field01 to Field05) in case I need to insert a new field later on. "Field##_" is just an example. You can use F101_, A_, B_, or whatever that works for you as long as they start with A-Z and only contain A-Z, 0-9 and underscore.
Adding Files to the Template
At the bottom of the window, next to the Fields button is the Files button. The default type of file is a text file - by text meaning anything that is not binary or xml. If you click on the down arrow, you will see the list of choices.
- Choose Insert text section from file to insert text.
Choose the text file you want to include. This could be an HTML file, a PHP file, an ASP file, etc.- Once the file is included, you can add fields to it. Note that the fields will be prompted in alphabetical order, not in document order.
- Keep on adding necessary files. Please note that the more files you add, the longer the template takes to run. If you have a fast system, you might not notice it, but a slower system may make you think that your Tools is on the Fritz.
Let's Get Graphic About It
So now that you have added the necessary files, wouldn't it be nice to have an icon on the menu so that you can see your wonderful template easily? Not a problem. You need two images, one that resizes nicely to 16x16 pixels and one that resizes nicely to 48x48 pixels.
Click on the down arrow on the files button to bring up the menu.- If you are putting in an icon, you will choose Insert icon section from file. You will be prompted for the file name, and you can browse for the file on your system.
- The system will put a new section into your template that starts with
#@begin-binary "hkp-icon". You will not see the icon until you have saved your template, but wait - add an image, too! - Follow the same steps above, but this time, you will want to use the larger image. The new section in your template will be
#@begin-binary "hkp-image"
Putting it All Together
Would you like your template to be in another section? No problem. At the top of the template, look for #@section . It might already be in the HTML section, but you could put it into another section, or even create a new section. I have my templates under the PHP section (yes, I added PHP as a section), because mostly everything I do is in PHP. Here is what my Kit looks like when I want to create new document, and want to use a template:
Final Thoughts
I hope this little tutorial helps you make better use of your Tools. If you use PHP a lot, and would like to use my icons, you are welcome to grab 'em right here.
Good luck and happy coding!