DFM2HTML Tutorials: From First Install to Published Site

This is the tutorial hub for DFM2HTML, the Windows HTML and web site designer. Whether you opened the editor for the first time ten minutes ago or you have been building sites with it for years and want a reference on a specific workflow, the guides here are organized into clear paths that match what you are actually trying to do. I have structured this material around five learning tracks: a beginner path for your first site, a layout path for template and column work, a JavaScript menu path for navigation scripting, a publishing path for getting files onto a server, and a troubleshooting path for the issues that come up in real editing sessions. Each path builds on practical, step by step instruction drawn from years of working with the tool and helping others learn it. You will also find links to the main tutorial, the JavaScript menu reference, the template library, and the download page so you can move between learning and building without losing your place.

Beginner Path: Your First Site in DFM2HTML

If you have never used DFM2HTML before, start here. This path covers everything from installation through to your first exported page. The goal is to get you comfortable with the editor's interface, the basic editing workflow, and the mental model behind template-driven site building.

The first step is to download and install the editor. The installer runs on any supported Windows system and does not require administrator privileges for a per-user install. Once the editor opens, you will see the workspace: a canvas area where your page takes shape, a properties panel on the side, and a toolbar at the top for common actions.

Start by selecting a template. For your first project, I recommend browsing the template library and choosing a single column layout. It has the fewest structural decisions to manage, which lets you focus on learning the editor rather than wrestling with layout complexity. Open the template, and you will see the page skeleton appear on the canvas with placeholder regions for your header, content, and footer.

From here the workflow follows a consistent loop: select an element on the canvas, modify its properties in the inspector panel, and preview the result. Text blocks accept direct typing. Image elements open a file picker when you double-click them. Navigation links are edited through a properties dialog that lets you set the target URL and display text. Every element on the canvas follows this select, edit, preview pattern.

The main tutorial walks through a complete first-site build from start to finish. It covers each step in order with screenshots and notes on common mistakes. If you prefer to learn by doing rather than reading, open the editor alongside the tutorial and follow along page by page.

A few beginner tips that will save you time. Save your project frequently using the file menu or keyboard shortcut. Use the built-in preview before every export to catch spacing issues that are hard to spot on the editing canvas. And do not worry about getting the design perfect on your first attempt. The editor makes it easy to go back and adjust any element after the fact.

Layout Path: Templates, Columns, and Page Structure

Once you are comfortable with the basic editing workflow, the layout path teaches you how to make structural decisions that affect your entire site. This material covers template selection in depth, column configuration, header and footer zone editing, and the techniques for maintaining visual consistency across multiple pages.

The core concept is that every page in DFM2HTML is built on a template skeleton. The template library shows all available structures, from single column layouts through to frame-based navigation shells. Choosing the right template for your project is the single most impactful design decision you will make, because it sets the column count, navigation placement, and content flow for every page that follows.

For sites with fewer than ten pages, a single column layout keeps things clean and manageable. For documentation or reference sites, a two column structure with sidebar navigation helps visitors orient themselves. For internal tools or intranet sites where persistent navigation is important, frame-based templates keep the menu visible at all times.

The layout path also covers how to work within the container model. DFM2HTML organizes page content into structured containers rather than allowing free-form absolute positioning. Each container has defined boundaries, padding, and alignment rules. You place content blocks inside these containers, and the container manages the spacing and flow. This constraint is what keeps your pages looking consistent across different screen sizes and browser configurations.

Practical layout exercises include: setting up a two column page with sidebar navigation, configuring a header zone with logo and menu links, adjusting container widths for different content types, and building a footer with contact information and secondary navigation. Each exercise follows the same hands-on format as the beginner path, with explicit steps and expected results at each stage.

JavaScript Menu Path: Navigation That Works

Static HTML pages still need functional navigation, and for anything beyond a flat list of links, that means JavaScript. DFM2HTML includes support for JavaScript-driven menus that handle dropdowns, hover states, active page highlighting, and keyboard accessibility. The JavaScript menu reference covers the full API surface, but this tutorial path walks you through the practical setup process one decision at a time.

The starting point is understanding what the menu script does. It attaches to the HTML navigation structure that the editor produces, adds event listeners for hover and click interactions, manages the open and close timing for dropdown panels, and handles keyboard focus so that visitors using Tab navigation can reach every link. The script is self-contained. It does not require jQuery, React, or any external library. It runs directly in the browser without a build step.

The tutorial walks through menu setup in four stages. First, you build the navigation HTML structure in the editor, creating a list of top-level links with nested sublists for dropdown items. Second, you attach the JavaScript file to your page using the script settings in the editor. Third, you configure the menu behavior by setting options for hover delay, animation style, and dropdown direction. Fourth, you test the menu in preview mode and in a real browser, checking hover timing, keyboard navigation, and mobile touch behavior.

Common mistakes in menu setup include setting the hover delay too short (causing menus to flicker), forgetting to add the script reference to every page that uses navigation, and nesting dropdown levels too deeply for the available screen width. The troubleshooting path below covers these and other menu-specific issues in more detail.

For sites with complex navigation requirements, the JavaScript menu path also covers how to style active states so the current page is visually highlighted in the menu, how to add icon indicators for items that have dropdown children, and how to disable menu items conditionally based on page context.

Publishing Path: From Editor to Live Server

Building a site in the editor is only half the job. The other half is getting the finished files onto a web server where visitors can reach them. The publishing path covers the export process, file organization, upload workflows, and the validation steps that catch problems before your visitors do.

DFM2HTML exports your site as a set of standard HTML files, images, scripts, and stylesheets. These files are completely portable. They run on any web server that serves static content: shared hosting, a VPS, a local file server, or a content delivery network. There is no runtime dependency, no database requirement, and no server-side processing needed. You upload the files, and the site works.

The export workflow starts in the editor's file menu. You choose an output directory, and the editor writes all project files into that folder with the correct directory structure and relative paths. Before uploading, open the exported files locally in a browser. Click every navigation link to verify targets. Check that images load at the expected sizes. Confirm that JavaScript menus open and close correctly. This local validation step catches the majority of issues that would otherwise surface after publishing.

For the actual upload, you can use any FTP client, SFTP tool, or hosting provider's file manager. The key rule is to preserve the directory structure exactly as the editor exported it. Do not rename folders, do not flatten the hierarchy, and do not change file extensions. The relative paths between HTML files, images, and scripts depend on that structure being intact.

After uploading, test the live site in at least two browsers. Chrome and Firefox cover the vast majority of visitor configurations. Check the home page, a subpage, an image-heavy page, and a page with JavaScript menus. If everything works locally but breaks on the server, the most common causes are incorrect file permissions, case sensitivity differences between Windows and Linux file systems, and missing files that were not included in the upload.

Troubleshooting Path: Fixing What Breaks

Every editing tool has failure modes, and DFM2HTML is no exception. The troubleshooting path collects the most common problems, their causes, and the steps to fix them. This material comes from years of real support questions and editing sessions, not from theoretical checklists.

The most frequently reported issues fall into five categories:

• Images not displaying after export. This almost always means the image path in the HTML does not match the actual file location. Check that the image files were exported into the correct subfolder and that the filename case matches exactly. Windows is case-insensitive, but most web servers running Linux are not.
• Navigation links pointing to wrong pages. This happens when link targets are set using absolute file paths from your local system instead of relative paths. Open the link properties in the editor and verify that each target uses a relative path starting from the page's own location.
• JavaScript menus not opening. Check that the script file is referenced in the page's head section and that the script file was included in the export. Then verify that the HTML structure of the navigation matches what the script expects: nested list items with the correct class names.
• Layout shifts between editor preview and browser. The editor preview uses a rendering engine that may handle spacing differently than a production browser. Always test in a real browser as the final validation step. If specific elements shift, check for fixed pixel widths that conflict with the container's responsive sizing.
• Frame-based pages loading outside the frameset. When a visitor lands directly on a content page that is designed to sit inside a frame, the navigation frame will be missing. The standard fix is to add a small frameset detection script to each content page that redirects the visitor to the full frameset URL when the page is loaded outside its frame context.

For issues not covered here, the FAQ collects answers to common questions about installation, licensing, browser behavior, and output format details. The support page provides direct contact paths for problems that need individual attention.

Choosing Your Path

You do not need to work through every path in order. If you already know how to use the editor and just need help with JavaScript menus, jump straight to that section. If your site is built and you are stuck on the upload process, start with the publishing path. The material is written to be entered at any point.

That said, if you are genuinely new to DFM2HTML, the beginner path is the right starting point. It gives you the vocabulary and the mental model that the other paths assume. Spending thirty minutes on the basics will save you hours of confusion later.

For a complete, start to finish walkthrough of building a site, the main tutorial remains the best single resource. It covers every phase of the process in one continuous narrative. The paths on this page break that narrative into focused modules that you can return to individually.

Ready to get started? Download DFM2HTML, pick a template, and work through the beginner path with the editor open beside you. That combination of reading and doing is the fastest way to get productive with the tool.