Um die grafische Gestaltung der Website zu definieren, ermöglicht WebSite X5 Die Verwendung einer vordefinierten Vorlage oder einer leeren Vorlage. Unabhängig von der getroffenen Wahl, können die im Fenster verfügbaren Optionen verwendet werden Struktur der Vorlage Um die ausgewählte vordefinierte Vorlage oder im Fall einer leeren Vorlage, um diese von Grund auf neu zu erstellen. Sie können nicht nur die Struktur der Vorlage für die Desktop-Anzeige definieren, sondern auch festlegen, wie die Vorlage bei Erstellung einer responsiven Website in den Ansichten der verschiedenen Umbruchpunkte dargestellt werden soll.
|
Der Header und die Fußzeile können mit Inhalten wie Texten, Bildern, Animationen, Galerien, Suchfeldern und Links vervollständigt werden. Die entsprechenden Funktionen finden Sie im Fenster Inhalt des Templates, das Sie auch mit der Schaltfläche Weiter öffnen können.
|
Zur Erleichterung der Arbeit finden Sie im Fenster Struktur der Vorlage eine Vorschau mit einer schematischen Darstellung der Seite.
Wenn Sie eine responsive Website erstellen, enthält das Fenster auch die Responsiv-Leiste, identisch mit der im Fenster Auflösungen und responsives Design.
Die Responsiv-Leiste enthält alle eingestellten Umbruchpunkte, die die Intervalle bestimmen. Klicken Sie in ein Intervall, um es zu markieren und gestalten Sie die Vorlage für die entsprechende Ansicht.
Sie können die Ansicht, die Sie bearbeiten möchten, aus der Liste auswählen oder in der Vorschau direkt auf die jeweiligen Bereiche der Seitenstruktur klicken, um sie auszuwählen und mit den verfügbaren Befehlen zu bearbeiten.
Es wird empfohlen, bei der Bearbeitung mit der Desktop-Ansicht zu beginnen und dann für die geringeren Auflösungen festzulegen, wie sich die Darstellung Vorlage nach und nach bis zur Smartphone-Ansicht ändern soll.
Wenn Sie ein eigenes Template erstellen wollen, müssen Sie zunächst den Strukturtyp definieren, also festlegen, ob nur ein Header und eine Fußzeile, oder auch eine Seitenleiste definiert werden sollen. Folgende Alternativen stehen zur Verfügung:
|
Header und Fußzeile
|
|
Header, Fußzeile und Seitenleiste links
|
|
Header, Fußzeile und Seitenleiste rechts
|
|
Nach der Auswahl des Strukturtyps wählen Sie den Seitenbereich, den Sie bearbeiten möchten. Eine Seite ist folgendermaßen gegliedert:
|
Seitenhintergrund: Dieser externe Bereich ist sichtbar, wenn das Fenster vom Browser größere Abmessungen hat als die Auflösung der Website selbst erlaubt.
|
|
Header-Hintergrund: Bestandteil vom Seitenhintergrund hinter dem Header.
|
|
Header: Der Header ist ein vorwiegend grafisch gestalteter Bereich, ideal für Elemente wie Überschriften, Untertitel, ein Firmenlogo, Suchfelder, das Haupt-Navigationsmenü oder Service-Menüs mit Links, beispielsweise zur Sitemap oder die Sprachauswahl.
|
|
Seiteninhalt: Dieser Bereich enthält den eigentlichen Inhalt der Seiten und eventuell die Menüs und Submenüs für die Navigation.
|
|
Fußzeile: Die Fußzeile ist ein ebenfalls vorwiegend grafisch gestalteter Bereich, der visuell die Seite abschließt. Im Allgemeinen enthält dieser Bereich Elemente wie Hinweise, Disclaimer, Informationen zum Urheberrecht, Steuernummer, E-Mail-Adressen usw.
|
|
Hintergrund der Fußzeile: Bestandteil vom Seitenhintergrund hinter der Fußzeile.
|
|
Seitenleiste: Nur verfügbar wenn eine Struktur gewählt wurde, die eine Seitenleiste vorsieht. Sie ist eine Spalte rechts oder links von den Inhalten, die verwendet werden kann, um Navigationsmenüs zu erstellen.
|
|
Wird der Header-Hintergrund oder der Hintergrund der Fußzeile Transparent eingestellt, erscheinen diese Bereiche wie der Seitenhintergrund und sehen identisch aus. Andernfalls erscheinen der Header und/oder die Fußzeile als Streifen, die über die gesamte Breite des Browserfensters verlaufen.
|
|
|
Für alle Seitenbereiche können die folgenden Grafische Eigenschaften festgelegt werden:
| ▪ | Farbe: Hier kann die Farbe für den Hintergrund auswählt werden. |
| ▪ | Bilddatei: Wählen Sie hier das Bild für den Hintergrund der Zelle aus. Sie können Dateien in den Formaten JPG, GIF und PNG verwenden. Das Bild kann entweder aus der Online-Bibliothek, die mit der Schaltfläche  geöffnet wird, oder mit der Schaltfläche  Datei auswählen in einem lokalen Verzeichnis gewählt werden. |
| ▪ | Anordnung: Hier können Sie festlegen, ob das ausgewählte Hintergrundbild wiederholt werden soll. Das Bild kann nur horizontal, nur vertikal oder in beide Richtungen wiederholt werden, bis es den zur Verfügung stehenden Platz ausfüllt. Nur im Seitenhintergrund kann ein eingefügtes Bild so angepasst werden, dass es den gesamten Hintergrund ausfüllt. In diesem Fall können jedoch möglicherweise die ursprünglichen Proportionen nicht eingehalten werden. |
| ▪ | Ausrichtung: Legen Sie hier fest, wie das Bild zur Seite ausgerichtet werden soll. |
Nur für den Seitenhintergrund steht folgende Option zur Verfügung:
| ▪ | Im Hintergrund fixiert: Bei Aktivierung dieser Option wird das Hintergrundbild fixiert, auch wenn der Seiteninhalt mit der Bildlaufleiste verschoben wird. |
|
Für einige Seitenbereiche kann auch die Größe festgelegt werden.
Je nach markiertem Seitenbereich können folgende Optionen verfügbar sein:
| ▪ | Breite: Einstellung der Breite des Bereichs in der ausgewählten Seite, angegeben in Pixeln. Für den Seiteninhalt kann dieser Wert nicht manuell eingestellt werden, sondern wird automatisch aus den Einstellungen im Fenster Auflösungen und responsives Design übernommen, mit der Option Auflösung der Website bei Desktop-Websites oder Desktop-Ansicht bei responsiven Websites. |
| ▪ | Höhe: Einstellung der Höhe des ausgewählten Seitenbereichs in Pixeln. |
| ▪ | Mindesthöhe: nur verfügbar für den Bereich Seiteninhalt, Einstellung der Mindesthöhe in Pixeln, die der Bereich auf der Seite, in den die Inhalte eingefügt werden sollen, haben muss, unabhängig von der Höhe der effektiv enthaltenen Inhalte. |
| ▪ | Auf die Breite des Browserfensters erweitern: nur in den Bereichen Header und Fußzeile verfügbar. Bewirkt, dass die Konfiguration nicht nur auf die Breite der Seiteninhalte angewendet wird, sondern sich über die gesamte Breite des Browserfensters erstreckt. |
|
Dank der verfügbaren Optionen gibt es praktisch keine Einschränkung im Hinblick auf die Festlegung der Größe und Position des horizontalen Menüs, das in die Kopfzeile (Header) eingefügt wird, und so erhält man jeweils kreative Ergebnisse.
|
|
Für einige Seitenbereiche können auch Eigenschaften der Inhalte festgelegt werden.
Für die Bereiche Seitenhintergrund und Seiteninhalt steht folgende Option zur Verfügung:
| ▪ | Ränder: Geben Sie die Breite der Ränder in Pixeln ein. Dieser Abstand ist der Freiraum zwischen dem Rand eines Bereichs und seinem Inhalt. |
Nur für den Bereich Seitenhintergrund ist außerdem folgende Option verfügbar:
| ▪ | Ausrichtung: Definiert beim Seitenhintergrund, wie er zum Browserfenster ausgerichtet werden soll. |
Nur für den Bereich Seitenleiste ist folgende Option verfügbar:
| ▪ | Objekte beim Scrollen der Seite sichtbar halten: Bewirkt, dass beim Scrollen der Seite die Inhalte der Seitenleiste (eingefügt im Fenster Inhalt des Templates) mit verschoben werden uns somit immer sichtbar bleiben. |
|
Praktische Anwendung:
