The Bitwise site, as it happens, uses just such a CMS. It is a French program called SPIP and it defines pages in the form of HTML templates into which special SPIP tags are placed. These tags provide input to the SPIP ‘preprocessing engine’. They tell it to find data stored in a database and format that data or do calculations upon it as necessary. By the time the final web pages appear in your browser, the tags themselves have been replaced by perfectly standard HTML. So the web browser never needs to know that the SPIP tags ever existed. However, the web design software (in this case, Dreamweaver) does need to know.

Dreamweaver works well with non-standard tags when you set it up specifically to do so. If you don’t set it up appropriately, however, all hell can break loose. And that’s exactly what happened to me today.

I recently installed the latest Adobe version of ‘Dreamweaver CS3’ on a new PC and moved the local of my web site from another computer (on which I’d been using the previous version, Macromedia Dreamweaver 8). All went smoothly until, this morning, I decided to make a minor change to the template which defines the standard layout of pages on this site.

Dreamweaver templates are made up of a mixture of editable and non-editable blocks of HTML code. The non-editable blocks will appear, unchanged, on all pages using the template (so these pages will all share the same basic layout, menus, graphics and so on). It is only the editable areas into which the unique content of each separate page (a specific article, say) can be placed. When you change a template, Dreamweaver automatically copies your changes to the non-editable areas over all the files based upon that template.

When I changed the template earlier on today, an error messages popped up, informing me that there were errors in the files based on my template – specifically:

InstanceBeginEditable tag inside editable region

InstanceBeginEditable is a special Dreamweaver tag which is placed inside a comment. It is paired with another tag, InstanceEndEditable. These tags mark the start and end points of an editable region.

The error message baffled me. I stared at my template and I stared at the files which were based on that template but, for the life of me, I couldn’t find any InstanceBeginEditable tags in the wrong places. What I did notice, however was that the formatting of my files as displayed in the Dreamweaver visual editor was a bit screwy. Columns and rows weren’t aligning correctly and some areas were highlighted to show ‘incorrect’ HTML. I assumed that this must be some new and exotic bug which the Adobe programmers had wilfully introduced into the software and so I just continued with my search for erroneous InstanceBeginEditable tags.

When, after a couple of hours of searching, I had still failed to find them, I decided to copy the web site back onto my old PC, load it up into the old version of Dreamweaver and try again. When I did this, all my problems went away – the visual formatting looked fine and I wasn’t getting any error messages.

Only then did the penny drop. That error message had been sending me on a wild goose chase. There was nothing wrong with the InstanceBeginEditable tags. But, from Dreamweaver’s perspective, there was something wrong with some of the other tags.

It was at this point that I remembered that I had, a year or so ago, tinkered about with Dreamweaver’s configuration in order to get it to recognize the special tags used by my CMS. The main SPIP CMS tag is the ‘loop’ or, this being French software, the ‘boucle’. For example, here are a pair of BOUCLE tags that delimit a menu which displays titles of eight random (par hazard) articles in the current section (rubrique)...

It turns out that you can specifically instruct Dreamweaver to treat non-standard tags such as these as though they were valid HTML. To do this, you need to create an XML file (I’ve called mine SPIP.XML) in which the tags are defined. Here, for example, I define an opening tag (which I’ve called Boucle_1) to be a piece of text that starts with <BOUCLE_ and ends with > (so the tag may also include other parameters between the start and end parts as in the code above). It also has an icon called spip.gif. The closing tag (Boucle_0) is similar except it begins with </BOUCLE_ (i.e. with a “/” after the opening < angle bracket...

In this case, I’ve used the same icon for both the opening and closing tags. You could use different ones if you prefer. You have to create the specified icons (just plain gif graphics) and place these along with your XML configuration file into the Dreamweaver configuration ‘third party tags’ directory. On my PC that happens to be: C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\ThirdPartyTags

This was how Dreamweaver showed part of a web page before I’d added my custom configuration...

...and this is how the same bit of the same web page appears after I’ve configured Dreamweaver to recognize the SPIP tags...

Now, when I restart Dreamweaver, the InstanceBeginEditable errors go away, the visual designer shows a better approximation of my web page and I even have little custom graphics to show where the non-standard SIP tags begin and end. Great stuff. This is a valuable feature of Dreamweaver that should be more widely known. Essentially, you can add whatever tags you wish by using the tagspec tag (as in my code above), saving this into an XML file and creating a graphic to act as an icon. Put the XML file and the icon(s) into the Configuration/ThirdParty folder and Bob’s your uncle...