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):

<-------------------------------------------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:

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:

There are many different styles available in the    Misc     tab, most related to text formatting. For each one is given a little example:

A link can be exactly in one of four different object states, for which you can define styles separately:

• the "normal" state (the normal state of an object)
• the "over" state (when the mouse is over the object)
• the "down" state (when the mouse is pressed, or at other conditions configurable in the    Link     tab)
• the "over/down" state (when the mouse is over the object and the mouse is pressed)

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:

• For links, you can set if they shall have a text, button or link layout.
• For links, you can define in more detail, when the "down" state shall be active (as mentioned above)
• For any visual object, you can define the image format when the objects needs to be rastered in the   Object   tab

If one such style is set to <Automatic>, the style from the Use object (if defined) is taken instead.

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:

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.

Object types are:

• Labels: they display static text
• Links: they are like labels, but can be linked to some destination; they can be in four different states
• Panels: They can be used as parent for other objects
• Page: Like a panel. If it not belongs to a page control object, it can show scrollbars.
• Form objects: you need form objects to build HTML forms, which can be evaluated by a web server
• Page control: a page control is an object with which you can manage several page objects. Only one of those pages is displayed at the same time. They can be linked by link objects.
• Stylesheet: a stylesheet object is just a container for objects which define visual styles for being used by other objects.
• Direct HTML: to insert HTML/Javascript code directly into the generated HTML document
• File objects: Link or embed external files. When publishing, they get uploaded, too. The generated file name consists of the object id + . + file extension of the chosen file.
• Menu objects: You can build DHTML popup menus with menu objects. They are explained in a separate tutorial (Tools | Menu Tutorial).

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 :

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:

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.

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:

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

• by the context menu
• by Create new page in the   Pages   tab
• by dropping a page object from the tool bar onto the page control object
• by pasting a page object from the clipboard into the page control object (Edit | Paste).

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.

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 File.. 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.  Color            ). 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.

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 Properties → Local 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 Properties → FTP 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 Properties → HTTP 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 | Options → Publish → Use 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).

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.

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.