the ultimate online exercise system!

I’ve been meaning to write about this little wonder for a while now. DFM2HTML is a very unusual web editor. Yes, it’s WYSIWYG (sort of), but it’s much, much more powerful than most WYSIWYG editors. Why? Because the concept of “nesting” is used throughout – every aspect of the program is governed by this CSS/XML concept, which makes it both exceptionally flexible and (occasionally) irritatingly quirky. But the flexibility vastly outweighs the quirks, especially in the latest version, 3.5.

DFM2HTML is a freeware product designed and maintained by software engineer Jörg Kiegeland in Berlin. It’s been around for a few years now, but you rarely (if ever) seen any mention of it in conventional IT journals. I suspect most people play with it for a bit, then put it to one side, baffled by the whole idea.

Nesting attributes and functions

But there is a small minority who persist with DFM2HTML, usually because – like me – they are fascinated by the immensely flexible way it handles images and layers. The program can be used as a fairly powerful image editor – you can apply colours, gradients and edges to any image, including panels created in the program itself. You can round corners (along both x and y axes, which gives you many more options than conventional WYSIWYG editors). You can specify images as backgrounds and foregrounds – tiled, stretched or at 100%. And finally, you can make any object up to 100% transparent if you wish!

And best of all, you can embed stuff. The program is fundamentally object-oriented, so to design a website, you first create an object. The background of the website itself is effectively a base layer (a kind of canvas object), on which you then build up new layers in the form of panels, pages, labels, links, images, menus, forms and even raw HTML (or PHP or CSS) code. As well as files and embedded multimedia.

But here’s the good bit: It also allows you to create embedded stylesheets that – when you finally publish the website – the program can either convert to page-specific CSS code, or externalise to a separate CSS file, depending on your preferences. You can create a new style out of any object you like, simply by cutting/copying and pasting that object into a stylesheet. And then, when you create a new object, you can tell DFM2HTML to use any of the styles in any of your embedded stylesheets in your new object. Very, very cool.

For serious embedding freaks…

Actually, it’s even cooler than that. Because you can base a style (once it’s in a stylesheet, an object automatically becomes a style) on another style. And that style can be based on a third style, which in turn can be based on a fourth style… in such a way that a change to the underlying style can affect every single object in the chain.

This could be a recipe for serious confusion, but fortunately Jörg has left some useful safeguards in place. The program has a single property dialog box, which can be left free-floating, but usually appears in the form of a sidebar (or can also be placed at the bottom/top of the window – did I mention that DFM2HTML is an MDI program, i.e. supports multiple windows which can be tiled, cascaded etc. in a single parent window?). The simple properties bar has a number of tabs, which vary depending on the object you focus on, but which usually include e.g. “Font”, “Edge”, “Image”, “Effect”, “Misc[ellaneous]”, “Text”, “Link” and so on. Even the most basic object (such as e.g. a Page Control, which is effectively a holder for multiple pages) has an “Object” and a “Pos[ition]” tab, which define the object’s basic attributes and position on the page.

Using these Properties tabs, you can custom-edit any object, even if it’s already based on an existing style (or series of nested styles). As soon as you custom-edit an object, the labels on the various tabs that define the object’s properties change from normal text to emboldened text, to indicate that a specific setting has been changed for that individual object. Such a simple idea, but so ingenious. If you decide you don’t want to deviate from the underlying style, you can press a “Reset” button on any tab to return the object to its style-based original form. Better still, you can decide to make the object into a style of its own and copy and paste it into a stylesheet – whereupon any object you create that’s based on this new style will look and behave exactly the same.

The other great new feature that helps you organise all this nested goodness is a tree-form Object Explorer, which you can use to flip quickly from one object to another (even if the objects you’re inspecting are hidden, or concealed behind other objects). This recent addition to the program has turned it from an interesting but mildly amateurish application to an extremely powerful tool, capable of managing extremely complex websites. The Object Explorer can be switched on and off at will – and Jörg has sensibly made it modeless, so you can drag it right away from the editing screen.

Underlying XML is also editable

Yup – that’s the other feature that makes this into much more than just another nice but quirky WYSIWYG editor. The files produced by DFM2HTML are effectively XML files, albeit customised ones. They can be edited in any text editor, which means you can clean them up if you need to.

This is useful in part because the program – stable and reliable though it is – is not entirely free of bugs. For example, if you create several overlapping panels and simply specify a colour background (rather than, say, a tiled image), you can sometimes find – the circumstances are still rather baffling – that in Internet Explorer (but not in Firefox, Chrome or Safari) the panels suddenly jump into a peculiar gradient mode, shading into each other rather than working as separate but overlaid objects. Very odd. It’s a phenomenon that’s easy to avoid, however, and best of all, Jörg himself is immensely approachable and takes any bug very seriously.

His website is written in English and German, and includes a useful tutorial (written, of course, in DFM2HTML). Unfortunately the website is not a great example of what you can do with this program, but the various linked websites on the Users page give you a fairly clear idea of the possibilities. Our own website at The Word Gym was designed using DFM2HTML!

Nice little touches?

I could say more – for example, I’ve been experimenting on the design of WordPress templates using DFM2HTML, which in principle should be fairly straightforward. In practice, my own inadequacies as a WordPress programmer are hampering my efforts. But the best way to experience DFM2HTML is to dive in and experiment – you can generate previews very easily from the “Publish” menu, and once you decide to publish, the application has a very powerful FTP feature that uploads files quickly and neatly, generating a log in the process, and from then on only uploads files that have actually changed. What’s more, this feature actually works, unlike similar features in a number of competitors! It’s a perfect solution for the tinkering web designer who likes to make frequent small (or large) changes.

The only weak point? The text editor, which is at best basic, and certainly not WYSIWYG. Text is entered either into a “Quick Edit” field in the tabbed Properties bar, or into a separate (modeless) text editor, which has a few simple buttons for e.g. bold/italics/hard spaces/line breaks, for inserting Unicode characters (the application uses Unicode by default, thank goodness), and also accessing a list of styles. Once you save your text, you can see the results immediately in the main window, which is WYSIWYG (and has a “Test” mode which offers an instant preview of your changes using Windows’ embedded IE viewer). But this rather elementary feature is easy to forgive, because it’s so easy to build something very, very good-looking in a very short time – the program runs very fast on the simplest of platforms.

In short…

I have used many different web editors over the years, including DreamWeaver, NetObjects Fusion, Kompozer and a raft of other now forgotten goodies (Trellix, anyone?). But my admiration for the speed and relative simplicity of DFM2HTML has grown steadily over the years, and I’ve found myself coming back to it more and more often as it has matured. Once you’ve wrapped your head round the concept of nesting, you can do more or less anything in this remarkable little program. Give it a whirl. It might just be your thing…

11 Responses to “Web design with DFM2HTML”