Über dieses Tutorial Objekte Positionierung von Objekten Objekttypen Labels Links Formulare Navigation Objektstile Textformatierungen Ränder Runde Ecken Bilder Farben Effekte Sonstige Stile Wiederverwendung von Stilen Stile und Zustände PHP Webseite veröffentlichen DFM2HTML-Ressourcen austauschen
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:
Außenabstand: ist transparent
Rahmen: verschiedene Formen/Farben möglich
Innenabstand: definiert den Abstand zum eigentlichen Inhalt
Text oder Kindobjekte werden hier dargestellt
<-------------------------------------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:
gekachelt in x/y-Richtung
gekachelt in y-Richtung, zentriert
Dehnen
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 um 45° rotierte Schaltfläche
Ein interaktiver Link:
Ein schattenwerfendes Objekt
Eine Reihe weiterer, meist text-spezifischer, Stile lassen sich im    Mehr    -Tab einstellen. Diese werden nachfolgend an Beispielen demonstriert:
Schriftvariante:
Text formatiert mit Schriftvariante=Kapitälchen
Texttransformation:
Text formatiert mit Texttransformation=Kapitalisieren
Zeilenumbruch:
In mit white-space=pre formatiertem Text bleiben Leerzeichen erhalten.
Schreibrichtung:
Horz. Ausrichtung:
Für diesen Text wurde Horz. Ausrichtung = Blocksatz gesetzt.
Mauszeiger:
Bestimmt das Bild für den Mauszeiger. Wenn du die Maus über diesen Text bewegst, erscheint ein Fragezeichen.
Z-Achse:
dhAnchor113
dhAnchor112
dhAnchor114
dhAnchor116
dhAnchor115
Wenn der Z-Achsen-Wert eines Objekts größer als der eines anderen Objekts ist, erscheint es vor diesem auf dem Bildschirm. Bei gleichen Z-Achsen-Werten zweier Objekte bestimmt die Dokumentreihenfolge, welches vor dem anderen erscheint. Diese kann über Nach vorne bringen und Nach hinten stellen im Kontextmenü eines Objekts geändert werden.
Wenn du die Maus über einen der folgenden Objekte bewegst, erscheint es vor den anderen Objekten, da es dann den Z-Achsen-Wert 1 hat, während die anderen Objekte im normalen Zustand nur den Z-Achsen-Wert 0 haben (mehr zum Thema Zustände) und dadurch hinter diesem erscheinen:
dhAnchor117
text-indent:
In diesem Beispiel ist die erste Zeile um 15px eingerückt.
In diesem Beispiel ist die erste Zeile um -15px eingerückt. Außerdem wurde ein linker padding-Wert von 15px definiert, damit der Anfang der ersten Zeile nicht verschwindet.
Vert. Ausrichtung:
Diese Eigenschaft kann für Bilder verwendet werden, die in Text eingebettet werden sollen. Sie bestimmt dann nämlich die vertikale Positionierung innerhalb einer Textzeile. Einige Beispiele:
baseline (ist auch der Defaultwert): , middle: , 5px:
Ein Link ist immer in genau einem von 4 möglichem Zuständen, für die separat Stile definiert werden können: 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: Ist einer dieser Stile auf <Automatisch> gesetzt, wird der Stilwert des Verwende Stile von-Objekts bzw. ein Defaultwert verwendet.
(Der Scrollbereich dieses Seitenobjekts ist gerade so weit um alle Kindobjekte anzeigen zu können. Dieses hier ist das tiefstgelegende.)
zusätzliche CSS-Eigenschaften:
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:
Innerer Schatten, inneres Glühen und äußerer Schatten kombiniert:
Bewege die Maus über diesen Link
Über dieses Tutorial
Dieses Tutorial zeigt dir wie man Webseiten mit DFM2HTML erstellen kann.
Über Datei | Neu kannst du ein neues Dokument öffnen.
Objekte
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.
Positionierung von Objekten
Objekttypen
Objekttypen sind: Da fast allen Objekttypen ein Hintergrundbild im     Bild     -Tab zugewiesen werden kann, existiert kein eigener Bild-Objekt-Typ.
Formulare
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:
Vorname:
Nachname:
Geschlecht:
Besonderheiten:
Nächste Großstadt:
Kommentar:
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).
Navigation
Ein Seitenverwaltungsobjekt kann mehrere Seiten verwalten, die durch Link-Objekte referenziert werden können:
Textformatierungen
Ränder
Bilder
Effekte
Sonstige Stile
Wiederverwendung von Stilen
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.
Stile und Zustände
Labels
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.
Links
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:
google
google
Verweis zu Seite 1 Verweis zu Seite 2 Verweis zu Seite 3
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: 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).
Objektstile
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.
Runde Ecken
Ü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   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.
Farben
Eine Farbe kann im Farbdialog, der über eine Schaltfläche der Form erreichbar ist, genau definiert werden. Diese Schaltflächen bieten auch ein Kontextmenü, über das der Farbwert in die Zwischenablage kopiert oder aus der Zwischenablage geholt werden kann. Dafür wird das textuelle HTML-Farbformat der Form #RRGGBB benutzt. Über den Color Picker-Dialog kann der Farbwert eines beliebigen Pixels auf dem Bildschirm kopiert werden.
Zeilenhöhe:
Bestimmt die Höhe einzelner Textzeilen:
In diesem Beispiel ist die Zeilenhöhe auf 200% der aktuellen Schriftgröße gesetzt.
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 | SeiteneigenschaftenLokaler 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 | SeiteneigenschaftenFTP-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 | SeiteneigenschaftenHTTP 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 | OptionenPublizierenBenutze 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.
DFM2HTML-Ressourcen austauschen
20 Pixel
Bild
Vierteln
PHP
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.
Webseite veröffentlichen
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.