Um ein Objekt zu positionieren, selektiere es und verschiebe es mit der Maus zur gewünschten Position. Das Objekt wird standardmäßig an einem Gitter ausgerichtet. Dies kannst du dadurch verhindern, indem du gleichzeitig die ALT-Taste drückst.

Im     Pos.   -Tab können ausgefeilte Positionierungsparameter eingestellt werden. In der Maße-Sektion kannst du die Koordinaten eines Objektes (Links- und Oben-Werte) eingeben.

Per Voreinstellung wird die Distanz eines Objekts zum linken und oberen Rand des Elternobjekts konstant gehalten. Ändert sich z.B. die Breite des Elternobjekts, so bleibt der Abstand des Kindobjekts zum linken Rand des Elternobjekts konstant, während sich der Abstand zum rechten Rand kleiner oder größer wird. In der Abstand konstant halten zu-Sektion kann bestimmt werden, zu welchen Rändern des Elternobjektes der Abstand in solchen Situationen konstant gehalten werden soll. Ein besonderere Fall ergibt sich, wenn weder zum linken noch zum rechten Elternrand der Abstand konstant gehalten werden soll (Linke Begrenzung und Rechte Begrenzung sind nicht markiert): In diesem Fall wird das Objekt horizontal zentriert.

Ein Objekt kann in der Ausrichtung-Sektion automatisch positioniert werden. Während Ausfüllend das Kindobjekt den gesamten Platz des Elternobjekts ausfüllen läßt, wird für die Einstellung Nach oben das Kindobjekt zusammen mit anderen Kindobjekten mit der gleichen Ausrichtung vom oberen Rand des Elternobjekts aus nach unten gestapelt. Dieser Wert entspricht in HTML der natürlichen Organisation von Kindobjekten, DFM2HTML gestattet eine solche Organisation auch in die anderen drei Richtungen (Nach Rechts, Nach Unten und Nach Links).

In der Maße-Sektion können die Breite und Höhe in Pixeln angegeben werden. Über die Optionen Auto. Breite und Auto. Höhe kann für die meisten Objekttypen die Breite und die Höhe automatisch berechnet werden.

Im   Schrift   -Tab können die Schriftart und die Schrift-/Hintergrundfarbe eingestellt werden.
Schrift-spezifische Stile vererben sich auf alle Kindobjekte eines Objekts, d.h. auch wenn ein Objekt selber kein Text darstellt, kann es Sinn machen, Stile für die Textdarstellung zu verändern.
Beispiele für Schrift-Stile:

Für diese Beispiele wurde Kantenglättung eingesetzt (Antialiasing). Dieses Feature kann im   Effekt   -Tab aktiviert werden.

Im    Rand   -Tab können der Außenabstand (margin), der Rahmen (border) und der Innenabstand (padding) eines Objekts eingestellt werden. Die folgende Illustration zeigt die Aufteilung des Randes in diese Bereiche:

<-------------------------------------Breite einstellbar im   Pos.   -Tab---------------------------------------->

Für die meisten Objekte kann ein Hintergrundbild im     Bild     -Tab gesetzt werden. Das Bild erscheint hinter möglichem Text oder Kindobjekten des Objekts. Das Bild kann gekachelt werden (Typ=Kacheln), gedehnt werden (Typ=Dehnen), im Mittelpunkt geviertelt werden (Typ=Vierteln) oder das Bild bestimmt selber die Breite/Höhe des Objekts (Typ=Bild). Für den Typ Kacheln kann außerdem bestimmt werden, von wo aus die Kachelung startet und in welcher Dimension sich diese fortsetzt (x-, y- oder x- und y-Achse). Beispiele:

Wenn Effekte im   Effekt   -Tab aktiviert sind, wird das Objekt als ein Bild in die Webseite generiert. Verschiedene Effekte stehen nun zur Verfügung: Rotation, Skalierung, Durchsichtigkeit, verschiedene Verwischeffekte. Hier einige Beispiele:

Eine Reihe weiterer, meist text-spezifischer, Stile lassen sich im    Mehr    -Tab einstellen. Diese werden nachfolgend an Beispielen demonstriert:

Ein Link ist immer in genau einem von 4 möglichem Zuständen, für die separat Stile definiert werden können:

• der Normalzustand (der "Ruhezustand" eines Objekts)
• der Über-Zustand, wenn sich die Maus über dem Objekt befindet
• der Gedrückt-Zustand, wenn die Maustaste gedrückt ist; es können auch andere Bedingungen für diesen Zustand im    Link    -Tab eingestellt werden
• der Über/Gedrückt-Zustand, wenn die Bedingungen sowohl für den Über-Zustand als auch für den Gedrückt-Zustand erfüllt sind

Der Zustand, für den du Stile verändern möchtest, kannst du in der Toolbar anklicken.

Folgende Stile sind in den verschiedenen Zuständen eines Objekts aktiv (die angegebene Reihenfolge gibt den Vorrang an, wenn für verschiedene Zustände eines Objekts der gleiche Stil definiert wurde):
Normal-Stile im Normalzustand
Gedrückt-Stile → Normal-Stile im Gedrückt-Zustand
Über-Stile → Normal-Stile im Über-Zustand
Über/Gedrückt-Stile → Gedrückt-Stile → Über-Stile → Normal-Stile im Über/Gedrückt-Zustand

Wenn allerdings Über-Stile überlagern Gedrückt-Stile im   Objekt  -Tab markiert ist, gilt für den Über/Gedrückt-Zustand:
Über/Gedrückt-Stile → Über-Stile → Gedrückt-Stile → Normal-Stile im Über/Gedrückt-Zustand
(Diese Option kann nur verändert werden, wenn das Verwende Stile von-Feld nicht gesetzt ist.)

Einige Objekttyp-spezifische Stile lassen sich nicht zustandsspezifisch einstellen:

• Für ein Link kann ein Basis-Layout bestimmt werden: Text-, Schaltflächen- oder Link-Layout stehen zur Auswahl.
• Für ein Link kann die Bedingung für den Gedrückt-Zustand verändert werden.
• Für Objekte, für die bei der HTML-Erzeugung eine Bilddatei generiert wird, kann das Grafikformat im   Objekt  -Tab ausgewählt werden

Ist einer dieser Stile auf <Automatisch> gesetzt, wird der Stilwert des Verwende Stile von-Objekts bzw. ein Defaultwert verwendet.

Wenn du direkt CSS-Stile angeben möchtest, kannst du dieses Eingabefeld benutzen. Sie werden ungeparst in die HTML-Datei geschrieben. Das folgende Beispiel setzt einen IE-Filter ein, welches nur vom Internet Explorer ausgewertet wird:

Dieses Tutorial zeigt dir wie man Webseiten mit DFM2HTML erstellen kann.
Über Datei | Neu kannst du ein neues Dokument öffnen.

Du kannst Objekte in der Werkzeugleiste selektieren und auf das Dokument plazieren. Über verschiedene Tabs können die Eigenschaften der Objekte editiert werden. Z.B. kann der Name eines Objekts im   Objekt  -Tab verändert werden. Objekte müssen Dokument-weit eindeutige Namen haben. Jedes Objekt (außer das äußerste) hat ein Elternobjekt. Wenn du ein Objekt selektiert hast und die ESC-Taste drückst, wird das Elternobjekt selektiert.

Objekttypen sind:

• Label: Zur Darstellung von Text, der formatiert werden kann
• Link (Verweis): Wie ein Label, kann jedoch auf ein Ziel verweisen. Ein Link befindet sich immer in einem von vier möglichen Zuständen.
• Panel: Ein Panel kann weitere Objekte enthalten
• Seite: Ein erweitertes Panel-Objekt: Wenn die Seite nicht als alternative Seite genutzt wird, kann sie über Scrollbalken verfügen.
• Formular: Formulare können Eingabeobjekte beeinhalten, deren Inhalt durch einen Webserver ausgewertet werden können.
• Seitenverwaltung: Ein Seitenverwaltungsobjekt verwaltet mehrere Seiten, von denen immer nur eine zu einem Zeitpunkt sichtbar ist (alternative Seiten).
• Stylesheet (Stilvorlage): Ein Stylesheet-Objekt dient als Behälter für Objekte, deren Design von anderen Objekten wiederverwendet werden kann.
• Direct HTML: Kann HTML/Javascript-Code aufnehmen, der dann direkt und unverändert in das generierte HTML-Dokument eingefügt wird.
• Datei-Objekte: Mit Hilfe von Datei-Objekten können externe Dateien referenziert oder eingebettet werden und beim Publizieren mit auf einen Server hochgeladen werden. Der generierte Dateiname setzt sich aus der Objekt-ID + . + Dateinamenserweiterung der gewählten Datei zusammen.
• Menü-Objekte: Mit Menü-Objekten lassen sich DHTML-Popup-Menüs erzeugen. Menü-Objekte werden in einem separaten Tutorial (Werkzeuge | Menü-Tutorial) erläutert.

Da fast allen Objekttypen ein Hintergrundbild im     Bild     -Tab zugewiesen werden kann, existiert kein eigener Bild-Objekt-Typ.

HTML Formulare ermöglichen eine Auswertung von Benutzereingaben durch einen Webserver (z.B. mittels PHP). Dazu müssen sich alle Eingabefelder, wie z.B. ein Radiobutton , innerhalb eines Formularobjekts befinden:

Das Formular kann durch ein Link-Objekt, für das die Absenden-Option markiert ist, durch den Benutzer abgeschickt werden. Die Benutzereingaben werden bei der Übermittlung an die Namen der Eingabefelder (siehe   Objekt  -Tab, ID-Feld) gebunden. Die Formulardaten werden an die URL gesendet, die im URL-Feld des    Form.   -Tabs spezifiziert ist. Alternativ kann die URL auch durch den Absenden-Link in dessen URL-Feld or durch das Verlinkte Seite-Feld bestimmt werden. Im    Form.   -Tab kann noch die Art der Datenübermittlung gewählt werden: entweder durch Anhängen an die Ziel-URL (Get-Option) oder aber transparent durch das HTTP-Protokol (Post-Option).

Ein Seitenverwaltungsobjekt kann mehrere Seiten verwalten, die durch Link-Objekte referenziert werden können:

Um definierte Stile wiederverwenden zu können, können Stylesheet-Objekte verwendet werden. Erzeuge einfach ein solches auf deinem Dokument und füge ihm Objekte hinzu. Nun können andere Objekte über das Verwende Stile von-Feld im   Objekt  -Tab deren Stile benutzen.

Ein Label ist ein einfaches Objekt mit textuellem Inhalt. Text kann im    Text    -Tab eingegeben werden oder über den Texteditor-Dialog, der eine Formatierung des Textes gestattet: entweder über übliche HTML-Tags oder über Stile, die in Stylesheet-Objekten definiert wurden. Der Texteditor kann über das Kontextmenu des Objekts geöffnet werden oder aber indem du auf das Objekt klickst während du die ALT-Taste gedrückt hältst.In diesem Fall wird der Cursor im Editor auf die Position gesetzt, die mit der Maus anvisiert wurde.

Die Formatierung eines Textteils wird durch ein Starttag der Form <X> eingeleitet und durch ein Endtag der Form </X> abgeschlossen. (Im Gegensatz zu HTML sind keine Attribute gestattet.) Ein Tag-Paar kann über die UNTAG-Schaltfläche entfernt werden.

Beliebige Unicode-Zeichen, die aber von der gewählten Schriftart unterstützt werden müssen, können über die UNICODE-Schaltfläche eingefügt werden. Da z.B. die Zeichen < und > schon zum Markieren von Start- und Endtags genutzt werden, können die speziellen Zeichen <, >, " and & in selektiertem Text über die MASK-Schaltfläche maskiert werden. Ein Zeilenumbruch kann über die BR-Schaltfläche eingefügt werden.

Link-Objekte ermöglichen eine Benutzer-Navigation. Ein Link kann auf ein externes Ziel verweisen (URL), wie z.B. auf http://www.google.com, oder auf ein Seitenobjekt (Verlinkte Seite) (siehe Beispiel). Durch ein Doppelklick auf ein Link kannst du im Editiermodus schnell zum Verweisziel innerhalb des Dokuments navigieren.

Ein Link kann in der generierten HTML-Seite als Hyperlink, als anklickbarer Text oder als Schaltfläche realisiert werden:

Ein Seitenverwaltungsobjekt zeigt immer nur eine Seite aus der Menge seiner verwalteteten Seiten an, die anderen Seiten sind dann ausgeblendet. Sie bilden daher eine Gruppe alternativer Seiten.
Es gibt mehrere Möglichkeiten, einer Seitenverwaltung eine Seite hinzufügen:

• über das Kontextmenü
• über Neue Seite im   Seiten  -Tab
• man kann eine neue Seite von der Toolbar auf die Seitenverwaltung platzieren
• indem man ein Seite aus der Zwischenablage in die Seitenverwaltung einfügt (Bearbeiten | Einfügen).

Für alternative Seiten werden per Standardeinstellung separate HTML-Seiten generiert. Wenn Eine HTML-Seite pro Seite im   Seiten  -Tab nicht markiert ist, werden die alternativen Seiten in nur eine HTML-Seite generiert. Beim Navigieren zwischen solchen Seiten ist daher kein Server-Kontakt und kein Neuaufbau der Webseite notwendig. Nachteilig ist dann aber, daß alle alternativen Seiten auf einmal vom Webserver geladen werden, d.h. der initiale Webseitenaufbau dauert länger, insbesondere, wenn die alternativen Seiten Bilder enthalten.

Wenn für eine alternative Seite eine separate HTML-Seite erzeugt wird, können diverse Eigenschaften für diese HTML-Seite im Seiteneigenschaften-Dialog über das Kontextmenu der Seite gesetzt werden. U.a. können der Titel und Schlüsselwörter für die HTML-Seite bestimmt werden. Solche Informationen werden häufig von Suchmaschinen ausgewertet. Der Name einer HTML-Seite besteht aus dem Namen des Seitenobjekts und der Dateierweiterung ".html" oder ".php".

Unabhängige Seiten

Unabhängige Seiten werden durch keine Seitenverwaltung verwaltet. Sie können von der Toolbar in ein beliebiges Objekt (wenn es nicht gerade eine Seitenverwaltung ist) platziert werden. Unabhängige Seiten können im Gegensatz zu alternativen Seiten Scrollbalken besitzen. Jedes DFM2HTML-Dokument hat zumindest eine unabhängige Seite, nämlich das äußerste Seitenobjekt, welches jedes andere Objekt des Dokuments enthält. Neu erstellte Dokumente enthalten eine Seite mit dem initialen Namen "index".

Standardmäßig wird für eine unabhängige Seite keine separate HTML-Seite erzeugt, wenn es sich nicht um das äußerste Seitenobjekt handelt. Wenn allerdings <iframe> im    Seite   -Tab markiert ist, wird der Inhalt des Seitenobjekts in eine separate HTML-Seite, die von einem HTML-IFRAME-Element eingebettet wird, generiert. Wenn nun dieses Seitenobjekt alternative Seiten (samt Seitenverwaltung) enthält, so werden beim Navigieren zwischen diesen Seiten nur HTML-Seiten im IFRAME-Element ausgetauscht, es muss also nicht die gesamte äußerste HTML-Seite neugeladen werden. Andererseits können dann aber diese alternativen Seiten nicht sinnvoll von aussen referenziert bzw. von Suchmaschinen erfaßt werden (die bekannte HTML-FRAME-Problematik).

Für die meisten Objekte können verschiedene visuelle Stile angepaßt werden, diese werden in den nachfolgenden Abschnitten an Beispielen erläutert. Die visuellen Stile eines Objekts können durch andere Objekten durch eine Referenz auf dieses Objekt im Verwende Stile von-Feld des   Objekt  -Tabs wiederbenutzt werden.

Über Ecken Runden.. im    Rand   -Tab kann ein Rundungsradius für die Ecken des Objekts bestimmt werden. Die Rundung wird durch einen vertikalen und einen horizontalen Radius bestimmt. Das folgende Beispiel verwendet für beide Radii einen Wert von 20 Pixel:

Über  Lade von Datei.. kann ein Bild aus dem lokalen Dateisystem geladen werden.
Außerdem können Bilder aus einem Ordner oder einem Webbrowserfenster in den Bild-Vorschau-Bereich des     Bild     -Tabs oder direkt auf ein Objekt gezogen werden. Über spezielle Dialoge können Bilder erzeugt werden, die eine semitransparente Farbe oder einem Gradienten darstellen. Mit einem rechten Klick auf den Bild-Vorschau-Kasten öffnet sich ein Kontextmenü, über das u.a. ein Dialog zum Ändern farblicher Parameter erreichbar ist.

Im Dokument selber werden nur die Verweise zu Bilddateien gespeichert. Da in früheren Versionen von DFM2HTML die Bilder direkt im Dokument gespeichert wurden, kann man über Werkzeuge | Bilder externalisieren Bilder aus dem Dokument in ein Verzeichnis auslagern. Über den gleichen Befehl lassen sich schon verlinkte Bilddateien in ein anderes Verzeichnis verschieben. Über Stile | Definierte Stile anzeigen kann man sich den Speicherort eines Bildes anzeigen lassen.

Bevor du deine Webseite im Internet veröffentlichst, solltest du die HTML-Seiten lokal begutachten via Publizieren | Vorschau. In diesem Schritt werden eine Reihe von HTML-Seiten und Bilddateien in ein lokales Verzeichnis (Publizieren | Seiteneigenschaften → Lokaler Ordner) generiert und anschließend wird die Startseite in einem Webbrowser (Werkzeuge | Optionen | Ausgabe) angezeigt. Eine relative Pfadangabe für Lokaler Ordner wird relativ zum temporären Verzeichnis interpretiert.

Über "http://" addressierte Webseiten im Internet können oft über FTP verwaltet werden. DFM2HTML kann die HTML-Dateien auf Wunsch auf einen FTP-Server hochladen. Dazu müssen zunächst die nötigen FTP-Daten in Publizieren | Seiteneigenschaften → FTP-Verzeichnis eingegeben werden. Die FTP-Daten können Sie von Ihrem Webhoster erfahren. Danach kann über Publizieren | Publizieren der Upload-Prozess gestartet werden. Es kann noch zusätzlich eine HTTP-Adresse in Publizieren | Seiteneigenschaften → HTTP URL angegeben werden, die über Publizieren | Webseite online besuchen abgerufen werden kann, um die Webseite online zu betrachten.

Ein Geschwindigskeitsvorteil des integrierten FTP-Upload-Tools gegenüber dem manuellem Upload ist, daß nur Dateien hochgeladen werden, die sich seit dem letzten Upload-Prozess verändert haben (dieses Feature kann über Werkzeuge | Optionen → Publizieren → Benutze intelligentes Hochladen deaktiviert werden). Alternativ können die für eine Vorschau generierten HTML-Dateien (Publizieren | Vorschauordner öffnen) auch mit herkömmlichen FTP-Programmen auf ein FTP-Server übertragen werden oder sie können z.B. auf eine CD gebrannt werden.

PHP-Tags können in textuellem Inhalt oder in DirectHTML-Objekten eingesetzt werden.

Ein beispielhaftes PHP-Tag, das den Text hallo generiert:
<?php echo "hallo"; ?>

PHP-Tags werden durch den Server verarbeitet, also im Gegensatz zu JavaScript nicht durch den Webbrowser. Mit PHP läßt sich z.B. ein Besucherzähler oder ein Kontaktformular, das die Formulardaten an eine Emailadresse weiterleitet, realisieren. Diese beiden Beispiele werden mit DFM2HTML auch mitgeliefert (Werkzeuge | Baukasten | PHP). Um zu sehen, ob dein Server PHP ausreichend unterstützt, kannst du z.B. den Besucherzähler "Visitor Counter" ausprobieren. Wenn im Browserfenster dann eine Zahl erscheint, wird PHP unterstützt. Beachte, daß PHP normalerweise nicht funktioniert, wenn du die Webseite lokal anschaust (d.h. nicht vom Server anforderst).

Wenn PHP-Tags verwendet werden, wird der generierten HTML-Seite die Endung .php gegeben. Ansonsten werden PHP-Tags von DFM2HTML nicht weiter ausgewertet, außer daß für sie ein Fragezeichen angezeigt wird. Beachte, daß dadurch deine Startseite statt z.B. index.html nun index.php heißen kann.

Beachte weiterhin, daß PHP-Tags in Dokument-Reihenfolge, d.h. in der Reihenfolge wie sie im HTML-Dokument auftreten, vom Server ausgeführt werden. Für Kindobjekte mit einem Nach Oben-Ausrichtung (siehe Positionierung) ist die visuelle von-oben-nach-unten-Reihenfolge mit der Dokumentreihenfolge identisch, was in einigen mitgelieferten PHP-Beispielen ausgenutzt wurde.

Ein DFM2HTML-Dokument wird in einer Datei mit der Endung .dfm abgespeichert. Wenn du von einem Ordner aus eine DFM2HTML-Datei in den DFM2HTML-Editor ziehst, wird sie im Editor automatisch geöffnet. Dies funktioniert auch mit Webseiten, die DFM2HTML-Dateien verlinken: Ein Ziehen des Links auf den DFM2HTML-Editor läd das DFM2HTML-Dokument automatisch runter und öffnet es.

Bearbeiten | Kopieren kopiert selektierte Objekte als Text in die Zwischenablage. Aus dieser können die Objekte wieder über Bearbeiten | Einfügen woanders eingefügt werden. Man könnte den Text aber z.B. auch in einer Email versenden oder auf einer Webseite bereitstellen, um mit anderen DFM2HTML-Benutzern Ressourcen auszutauschen. Über Bearbeiten | Vollständiges Kopieren werden nicht nur die selektierten Objekte kopiert, sondern auch alle von ihnen benutzten Stylesheet-Objekte, so daß dieser Befehl verwendet werden sollte, wenn man die selektierten Objekte in ein anderes DFM2HTML-Dokument einfügen will.