Basic Hitop.

11. Useful Things With Procedures

After spending much time building our navigation systems, let's look at some other usefull things we can do with Hitop.

If you look around my main site Planet Bods, one of the things that you may notice is that I use a variety of screen furniture. Throughout my site you may find the following:

images
images with captions beneath
related links boxes
pull out quote boxes

You should notice that between pages they all look pretty much the same. One of the biggest benefits of Hitop is that you can seperate the content from the design, so what I have done is define several little tags to ensure I always use the same code to do each one.

For example, many pages have a box of related links at the bottom which is made using a set of functions called RELATEDHEAD, RELATEDURL and RELATEDTEXT, which, when used in the right way, would build my related links box.

Your own site may have it's own types of screen furniture, but the principle remains the same - by defining a standard procedure, you can keep a good level of constant behaviour throughout your site. It also means that should you wish to change the design, you just change the original function, and it filters though - no editing of every page it is on!

Putting It Into Practise

On our radio site, we may want to use quote boxes. We can do this by having two 'wrapper' tags around the text, ie <QUOTEBOX>Radio One is the nation's favourite</QUOTEBOX>. As such we'd need to define two procedures: QUOTEBOX and /QUOTEBOX.

We define these two functions in the normal way, using @DEF. We're going to use a HTML table to build our quote box. Personally I always use CSS for these things, but everyone knows tables so we'll use them here. Our functions are defined as follows:

<@DEF NAME="QUOTEBOX"> <table cellpadding="3" cellspacing="0" border="5" width="150" align="right"> <tr><td width="150"><b> </@DEF> <@DEF NAME="/QUOTEBOX"> </b></td></tr></table> </@DEF>

Two simple functions. QUOTEBOX opens a 150 wide table, aligned right, whilst /QUOTEBOX closes it.

So where do we put these two procedures? We could put them in our page source file, but then every time we wanted to use these procedures in a page, we'd have to copy the procedure. We could put them in our template file, but it could get very clutterd if we had a lot of defined procedures.

The best place to put such things is in a seperate file. Traditionally this is called defs.hitop (although could be called whatever you like). We can then call this from any file using <@FILE SRC=".."> in the same way that we call our templates.

You could call your defs.hitop file from your template file. If you do this, using ${RELPATH} in your <@FILE SRC=".."> won't actually work. You'll have to put any ../'s needed yourself.

There is one other point to notice about calling your defs.hitop from your template file - you can't redefine your procedures on another page. Normally you can define one procedure to be one thng in the defs file, and then, should you wish, change it in your source file.

To get round this, the best thing to do is to put your <@FILE SRC=".."> code in your source files. I find the best place is at the top. This does mean adding it to the top of every file, but offers greater flexibility over the functions you have defined.

Makefile Changes.

HitopLive

Only using Hitoplive? You can skip this section quite happily and skip to 'Using Our Procedures' below.

As mentioned in part 6, our Makefile has a line called TEMPLATES. This line lists all the files for which we don't want Hitop to run on. As defs.hitop is a hitop file, when we run Make, Hitop will try to compile a page called defs.html which we don't want. So we need to add the file to our templates list:

TEMPLATES = template.hitop radio.nav defs.hitop

Using Our Procedures.

And with that done, we can start to use our standard style quote box. In contents.hitop I've added some dummy text, and at the top, have put:

<quotebox>You won't find anything interesting at all.</quotebox>

contents.html is the compiled version with our fully made quotebox.

Procedures Can Do A Lot More.

There's a lot we can do with procedures - we don't just have to use them to do screen furniture. They can also be used anywhere where you repeat the same bit of code. For example, I often use a procedure called td2 which is just <td colspan="2">. Obviously this saves me some typing when I'm coding a page. But they are at there most useful, I believe, in making pages look consistent throughout your site.

In our next section, we'll learn how to pass attributes through to procedures - and make them even more useful!

Example files are here

<back | top^ | next>

This work is licensed under a Creative Commons License.