Schritt 2 - Vorlage > Anpassen > Struktur der Vorlage

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/eigene Vorlage anzupassen 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.

Um eine responsive Website, muss Folgendes aktiviert werden: Option Responsive Website zulassen im Fenster Auflösungen und responsives Design.

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 Headers und der Fußzeile, 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 Menütyp definieren, also festlegen, wo und wie das Navigationsmenü auf den Seiten der Website positioniert werden soll. Folgende Alternativen stehen zur Verfügung:

	Horizontal - Menü über dem Header
	Horizontal - Menü unter dem Header
	Horizontal - Menü im Header
	Vertikal - linksbündiges Menü
	Vertikal - rechtsbündiges Menü

In der Desktop-Auflösung wird das horizontale Menü vollständig angezeigt. Alle Einträge sind sichtbar und werden präsentiert, wie sie mit den Optionen im Fenster Stil des Hauptmenüs eingestellt wurden. Wenn Sie eine responsive Website erstellen, mit geringer werdenden Auflösungen werden die Breite der Menüschaltflächen und die Zahl der angezeigten Menüoptionen reduziert. Wenn die Auflösung so gering ist, dass nicht mehr alle Einträge angezeigt werden können, wird das Menü durch einen Hamburger Button ersetzt.

Solange die Menüeinträge der ersten Ebene sichtbar bleiben, verändert sich auch das Dropdown-Menü im Verhältnis zur Desktop-Ansicht nicht. Bei einem Hamburger Button hingegen werden die Einträge des Dropdown-Menüs mit einem Schieber angezeigt, der beim Öffnen eingeblendet wird. Auch in diesem Fall behält das Dropdown-Menü die Farben und den Texthintergrund, wie sie im Fenster Stil des Drop-down-Menüs eingestellt wurden.

Auch vertikale Menüs werden analog durch einen Hamburger Button ersetzt, sobald der verfügbare Platz nicht mehr ausreicht, um alle Optionen anzuzeigen.

Nach der Auswahl des Menütyps 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, Service-Menüs mit Links, beispielsweise zur Sitemap oder die Sprachauswahl.
	Menü: Dies ist der feste Navigationsbereich mit den Menüpunkten der ersten Ebene, die auf jeder Seite unverändert angezeigt werden müssen. Die Position dieses Bereichs variiert natürlich je nach dem gewählten Menütyp.
	Seiteninhalt: Dieser Bereich enthält den eigentlichen Inhalt der Seiten und eventuell ein Untermenü 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.

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 der 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.

▪	Abstand X / Abstand Y: verfügbar nur für den Bereich Menü, wenn als Menütyp Horizontal - Menü im Header gewählt wurde. Definieren jeweils, um wie viele Pixel das Menü im Verhältnis zum Header nach rechts/links und nach oben/unten verschoben sein soll.

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, Menü 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 die Bereiche Seitenhintergrund und Menü ist außerdem folgende Option verfügbar:

▪	Ausrichtung: Definiert beim Seitenhintergrund, wie er zum Browserfenster ausgerichtet werden soll, und beim Menü, wie die Menüeinträge zur Seite ausgerichtet werden sollen.

Praktische Anwendung:

-	Die Arbeit mit Vorlagen
-	Wo finde ich neue Vorlagen für WebSite X5?
-	Erstellen einer responsiven Website in WebSite X5 \| Die Arbeit mit Vorlagen