FreestyleCreator

So sieht eine mit dem FreestyleCreator erzeugte Seite aus. Der hier dargestellte Hintergrund und die Buttons liegen dem Programmpaket bei. Die Buttons können farblich individuell angepasst werden. Auch die Texte sind frei veränderbar.
Nachfolgend wird gezeigt, wie diese Seite erstellt wurde. Auf den anderen Seiten erfahren Sie, wie Sie die Farbe und die Texte der Grafikbuttons für Ihre Bedürfnisse anpassen können.

Die Programmparameter

Programmstart

Starten Sie das Programm mit der gewünschten Option

Der Programmstart

Geben Sie die gewünschte Anzahl der Seiten ein, die Sie erstellen möchten. Sie finden in Ihrem späteren Zielordner genau die gleiche Anzahl von html-Dateien. Zudem hat jede Seite die eingegebene Anzahl von Buttons.

Der Seitenzahl-Dialog

Dateiweite Einstellungen

Wählen Sie eine Hintergrundfarbe für Ihre Seiten (z.B. weiß)

Der Farbendialog

Wählen Sie Schriftart und Schriftfarbe für Ihre Seiten (z.B. Comic Sans MS, Standard, 18px, schwarz) und fixieren Sie, wenn Sie wünschen, die Menüleiste, indem Sie die enstprechende Option abhaken.

Der Schriftdialog

Wählen Sie, wenn Sie wünschen, ein Hintergrundbild oder eine Textur für Ihre Seiten (z.B. die in diesem Softwarepaket enthaltene "verlauf_turkis"-Textur).
Bestimmen Sie durch entsprechende Auswahl, ob das Bild gekachelt werden soll oder nur in Seitenmitte dargestellt wird. Sie können auch festlegen, ob das Hintergrundbild fixiert wird oder bei verschieben der Scrollleiste mitscrollt.
In diesem Beispiel wird das Bild gekachelt und fixiert.

Der Hintergrunddialog

Zuletzt wählen Sie noch einen Banner aus und hinterlegen diesen mit einem Alternativtext und einem Tooltip.

Der Bannerdialog

Die Programmoberfläche sollte jetzt etwa fogendermassen aussehen:

Dateiweite Einstellungen

Beim Anklicken des Weiter-Buttons gelangen Sie zur Bearbeitung der Verweise (Links)
Sie haben hier die Möglichkeit, für die Verweise Hintergrundfarbe und Schrift einzustellen. Diese Eintellung ist nur erforderlich, wenn Sie Grafikbuttons ohne Beschriftung benutzen wollen. Die hierfür zuständigen Dialoge entsprechen den Dialogen für die dateiweiten Einstellungen.
Das Schriftbild können Sie in der Buttonvorschau kontrollieren. Dabei wird die Hintergrundfarbe jedoch nicht dargestellt.

Wählen Sie aus, ob sie eine Grafik für alle Buttons verwenden wollen. Dieser Modus ist dann sinnvoll, wenn Sie einen Button ohne Beschriftung verwenden.

Für jede Seite kann mit dem Laden-Button eine Grafik für den Verweis hochgeladen werden. Wenn Sie die Option "eine Grafik für alle Buttons" gewählt haben, reicht es aus, wenn nur beim ersten Laden-Button eine Grafik geladen wird.

Der Buttondialog

Tragen Sie jetzt in die linken Felder mit der Beschriftung "Link-Verweis" gültige Dateinamen ein. Unter diesen Dateinamen werden die Seiten dann gespeichert. Bitte geben Sie keinesfalls Ordnerstrukturen in dieses Feld ein. Vermeiden Sie auch unbedingt doppelte Namen. Damit Sie die Dateien später im Browser öffnen können, sollte der Dateiname mit ".html" enden.

Wenn Sie unbeschriftete Buttongrafiken benutzen, füllen Sie die Spalte "Link-Text" mit entsprechenden Texten aus. Die Vorschau des ersten Buttons sehen Sie oben rechts auf dem Anwendungsdialog.
Bei beschrifteten Buttons lassen Sie diese Felder einfach frei.

In der rechten Spalte können Sie noch Tooltips für die Buttons eintragen.

Ihr Dialogfenster würde bei diesem Beispiel so aussehen:

Die Linkeinstellungen

Beim Anklicken des Weiter-Buttons gelangen Sie zur Code-Seite. Hier sind keine weiteren Eingaben erforderlich. In zwei bzw. drei Fenstern können Sie rein informativ den erzeugten Code ansehen.
Klicken Sie auf den Testen-Button, um die Dateien zu erzeugen und in Ihrem Browser zu betrachten.
Mit einem Dialog werden Sie aufgefordert, einen Speicherort für Ihre Dokumente anzugeben. Es wird empfohlen, einen neuen Ordner anzulegen.
Danach öffnet sich Ihr Browser, um die Startseite darzustellen. Die Verweise zu den anderen Seiten funktionieren in dieser Voransicht noch nicht.
Bei dem hier vorgestellten Design sieht der Hintergrund in der Vorschau unschön aus. Dies wird in einem kleinen Eingriff am Ende behoben.

Sollten Sie mit dem Ergebnis unzufrieden sein, können Sie die Einstellungen für Ihre Seite noch verändern.
Wenn dann alles So eingerichtet ist, wie Sie das wünschen, können Sie auf den Button "Speichern + Schließen" klicken.
Alle für Ihre Homepage erforderlichen Dateien werden in einem Unterordner "Neu" abgelegt. Sie können diese Seite jetzt ansehen und manuell weiterbearbeiten.

Um den unschönen Hintergrund zu beheben öffnen Sie im Unterordner Neu -> css die Datei formate.css.
Ersetzen Sie dort den Eintrag background-repeat: repeat; im Element "body" durch background-repeat: repeat-x; background-position: bottom;