About this tutorial Objects Positioning of objects Object types Labels Links Forms Navigation Object styles Formatting text Edges Rounded Corners Images Colors Effects Miscellaneous styles Reusing styles Dealing with styles and states PHP Publish your project Sharing DFM2HTML ressources
To position an object, select it with the mouse and drag it around to the desired position. The object is aligned to a grid by default. This can be prevented by holding down the ALT key.

In the     Pos.    tab, you can set sophisticated position parameters. In the Bounds section, you can set the X/Y coordinates of the object (left and top values).

By default, the distance of an object to the top and left edge of the parent object is fixed. So e.g. if the width of the parent object is increased, the distance of the child object to the left parent edge is not changing, while the distance to the right parent edge is increasing accordingly. In the Keep distance constant to section, you can set to which parent edges the distance is hold constant. A special case is when you define that neither to the right nor to the left parent edge the distance is fixed. In this case, the object is horizontally centered.

You can align an object to a parent edge or to the full parent area in the Alignment section. The default is value None, which means that the object is absolute positioned (positioned by coordinates). In contrast, all child objects with a value of Top are stacked up, starting from the top parent edge downwards. In HTML, this corresponds to the normal flow of block elements. However in DFM2HTML, you can also stack up child objects starting from the left, right or bottom parent edge.

In the Bounds section, you can set the width and the height of an object. Some objects can adjust their size to the content, so you do not have to set suitable values for the width and height of the object. Control automatic sizing with the options auto width and auto height.
In the    Font     tab you can format text with a font and you can choose a background color.
If you edit the font of an object, the children of the object inherit the font settings (if they not define their own font).
Examples for different fonts:
Note that these examples are anti-aliased. This feature can be enabled in the   Effect    tab.
In the    Edge    tab you can set margin, border and padding values for all edges and for the left/top/bottom/right edge individually. The following graphic displays where the margin, border and padding area of an object is located (the margin box includes the border box, the border box includes the padding box and the padding box includes the content box):
margin: is transparent to the user
border: each edge can have a different border style
padding: background-color/image are displayed in this box
content area: text or child objects are rendered here
<-------------------------------------------width, see    Pos.     page------------------------------------------->
You can define an image to any visual object in the   Image   tab. The image appears behind any text content or child objects. You can tile the image (type=tile), stretch the image (type=stretch), split the image (type=split) or the image determines the object's size (type=image). If you set the type to tile, you can define from where to start tiling and in what directions to tile. Examples:
tiled in x/y direction
tiled in y direction, centered
If you enabled effects in the   Effect    tab, the object is rasterized and saved as one image in the HTML file. Now you can apply various effects like rotate/scale/opacity/blur, just try them out. Some effects:
A button, rotated by 45°
A container with a border, dropping a shadow:
A link, saying "hello" when clicked:
There are many different styles available in the    Misc     tab, most related to text formatting. For each one is given a little example:
Some text formatted with font-variant=small-caps
Some text formatted with text-transform=capitalize
In text formatted with white-space=pre whitespaces do not collapse.
Some text formatted with the text-align property set to "justify".
A question mark appears if you move the mouse over this text.
If the mouse is over one of these objects, it is displayed in front of all other objects, since then z-index is set to 1 while all other panels have the default value of 0:
In this example, the first line is indented by 15px. All following lines are not affected.
This example uses a negative indentation of -15px. To be not out of bounds, a left padding of 15px was defined, too.
This property is very useful for images which are included in text. Some example values:
baseline (the default): , middle: , 5px:
A link can be exactly in one of four different object states, for which you can define styles separately: The state for which you want to modify the styles can be set in the tool bar.

The styles which are active for a given state are listed next (the given order shows the precedence if the same style is defined for more than one state of the same object):
"normal" styles in the "normal" state
"down" styles → "normal" styles in the "down" state
"over" styles → "normal" styles in the "over" state
"over/down" styles → "down" styles → "over" styles → "normal" styles in the "over/down" state

If you have checked Prefer Over styles to Down styles in the   Object   tab, the last line changes to:
"over/down" styles → "over" styles → "down" styles → "normal" styles in the "over/down" state
This option can only be set if no Use object is defined for the current object.

There are some styles which are specific to object classes: If one such style is set to <Automatic>, the style from the Use object (if defined) is taken instead.
(The page is as high as needed to show all components, this is the deepest one)
additional CSS:
If you are familiar with CSS styles, you can define own styles, which are inserted unparsed into the HTML file. The following example uses an IE filter which applies only to the Internet Explorer:
Applying inner shadow, inner glow and outer shadow:
Move the mouse over this link
About this tutorial
This tutorial will show you how to create a web page with DFM2HTML.
To start a new document, click File | New.
Click and drop objects from the tool bar onto the document. Edit properties of objects in the property tabs you see below. For example, change an object's name in the   Object   tab. Objects must have a unique name. Every object except the outer most object has a parent object. If you select the object and press the ESCAPE key once, the object's parent is selected.
Positioning of objects
Object types
Object types are: Note that an image can be assigned to any visual object type in the   Image   tab, so there is no image object for its own.
When you build HTML forms, you must place all input objects, like a radio button , within a Form object :
First name:
Sure name:
Next large city:
Note that the input objects' names (definable in the   Object   tab) are used when the form data is transmitted. When a form is submitted by the user, the form data is send to the URL specified in the URL field in the    Form    tab of the Form object. Alternatively, the URL can be specified directly by the Submit button, using its URL field or the Link to page field. The form data is appended to the destination URL if the Get method is chosen, otherwise it is transmitted in the background (method Post).
A page control object can manage several pages, which can be referenced by link objects:
Formatting text
Miscellaneous styles
Reusing styles
In previous sections you have seen that many visual styles can be applied to an object.
To share styles between objects, you can put a stylesheet object onto the document and add objects to it.
Now other objects can use styles defined by these objects by the Use property in the   Object   tab.
Dealing with styles and states
Links are the objects which determine the navigation structure of your page. A link can link to an external location, like http://www.google.com, or to a Page object (see here).
By double clicking the link in design mode, you can navigate to the destination.
A link can have three different layouts:
Link to Page 1 Link to Page 2 Link to Page 3
Object styles
Visual objects can be assigned various styles demonstrated in the following sections. An object can re-use the styles of another object by choosing that object into the Use field in the   Object   tab.
A label is a simple object with text content. Text can be edited in the    Text     tab or with the text editor dialog which allows you to format selected text with standard HTML tags or with styles you defined on your own in stylesheet objects. You can open this dialog with the context menu or by clicking the object while holding down the ALT key, which opens the editor and goes to that text position which you clicked with the mouse. A formatted text section begins with a start tag of the form <X> and ends with a end tag for the form </X>. In contrast to real HTML tags, no attributes are allowed. You can remove a pair of tags with the UNTAG button.

You can insert any Unicode character supported by the current font with the UNICODE button. Since e.g. the < and > characters are used to mark tags, press the MASK button to escape the special characters <, >, " and & within selected text. A line break can be inserted with the BR button.
Only one page from a page control object can show up at the same time. They are called alternative pages.
You can add a page to a page control object Alternative pages are by default put into different HTML pages. By unchecking One HTML page per Page object in the   Pages   tab, the pages are contained within one HTML page. This has the advantage that no new HTML page has to be loaded into the browser when the user activates another alternative page by a link, so the new page is immediately shown. The disadvantage is that all pages are contained in one HTML file. For many pages with many pictures this can increase the loading time from the server.

You can define various parameters for a page object, which is implemented in a separate HTML page, in the Page Properties dialog (reachable from the context menu). There you can define e.g. a title or keywords for the HTML page. The name of the final HTML file consists of the name of the page object and the extension ".html".

Independent pages

A page object does not need to be controlled by a page control object. Independent page objects can be created by dropping a page object from the tool bar onto an object not being a page control object. Independent pages can have scrollbars. Every DFM2HTML document has at least one independent page object, namely the outermost parent object (named "index" by default).

By default an independent page does not produce a separate HTML file (except the outermost page). If you check <IFRAME> in the    Page    tab, the content of the page object is put into a separate HTML page, which is embedded by an IFRAME element in the outer HTML page. The advantage is that only this inner HTML page is reloaded when a contained alternative page is activated. On the other hand this means that the URL (the internet address) of these alternative pages are not displayed in the browser address bar and the pages cannot be referenced by external web pages.
Round Corners
By pressing the Edit Border Radius button in the    Edge    tab you can round each corner individually or all four corners together by defining a rounding radius. The vertical and the horizontal radius can separately be adjusted. The following example has a rounding radius of 20 pixels for both:
With the  button, you can load an image from your local file system.
You can even drag&drop an image file from the file system or a web browser window onto the image box in the   Image   tab or onto some object directly. It is possible to create an image from a semi-transparent color or a gradient. Right-clicking on the image box, a context menu appears which allows you to change some color parameters, save the image to disk or make the color of the bottom-leftmost pixel (which hopely hits the background color of the image) transparent.

The DFM2HTML document only stores links to images. Since former versions of DFM2HTML stored images directly in the document, you can use the Tools | Externalize Images command to swap out images from your document to a folder. You can use the same command to move already linked images to another folder. You can view the location of an image via Styles | Show style information.
A color, like the font-color, background-color or border-color, can be edited with a color button (e.g. ). Each color button has a context menu, with which the color value can be copied to/extracted from the clipboard in the common HTML color format #RRGGBB. With the Color Picker dialog, you can pick up the color of a pixel from anywhere on the screen.
You can define the height of text lines:
In this example, the line-height is set to 200% of the current font size.
For a DFM2HTML project, a set of HTML pages and image files, which can be viewed in a browser, can be generated. Before you publish your project to the internet, you should preview the result on your local computer via Publish | Preview. A set of HTML pages are generated and stored in a directory of your local disk. The local directory can be changed at Publish | Page PropertiesLocal Directory. A relative path is interpreted relative to the directory where your DFM2HTML project file is stored.

HTML pages, which are accessed online using a HTTP address, are usually stored on a FTP server. DFM2HTML can automatically upload generated files to a FTP directory, which you can define at Publish | Page PropertiesFTP Directory (you have to find out about the FTP connection parameters at your hosting service). After filling out the FTP connection parameters, you can publish the project by Publish | Publish. To open the web browser from within DFM2HTML and browse the web site online, you can define the HTTP address at Publish | Page PropertiesHTTP URL and then choose Publish | Browse Remote.

The same HTML files are generated for both a preview and FTP publishing. Only files which have changed since the last upload are uploaded to the FTP server (this behavior can be deactivated in Tools | OptionsPublishUse Smart Publishing). Files which are generated for a preview can also be uploaded to a FTP server with external FTP programs or can in general be stored on any medium with a directory structure (like a CD-ROM).
Sharing DFM2HTML ressources
20 pixel
You can use PHP tags in textual content or e.g. in a DirectHTML object.

A sample PHP tag printing out hello is
<?php echo "hello"; ?>

PHP tags are processed by the server and are invisible to the clients. With PHP you can e.g. create a visitor counter or a contact form. These two examples are included in the PHP section of the Tools | Presets window. To see if your server supports PHP, you can add e.g. the visitor counter to your web page, publish it to your server and browse it. If the visitor counter shows a number, PHP is supported by your server. Note that PHP normally not works when you locally preview your web page.

DFM2HTML itself displays a question mark when encountering PHP tags. They are not evaluated by DFM2HTML any further, however, generated HTML files are given the extension .php if PHP tags are found. Note that this can change your start page from index.html to index.php.

Note that PHP tags are executed on the server in the order they appear in the HTML file. This implies that the PHP tags of a group of top-aligned objects are executed in the visual order from top to down.
Publish your project
You can drag and drop DFM2HTML files (*.dfm) linked within a browser window into DFM2HTML. That way DFM2HTML users can interchange DFM2HTML resources by linking them on their web pages.

The DFM2HTML format is based on simple ASCII text, so that objects can be copied to clipboard, stored into any text file (like a web page or email), and later pasted back into some other DFM2HTML document. Use Edit | Full Copy instead of Edit | Copy to copy not only the selected objects into the clipboard but also any used stylesheet objects.