Einrichten einer Seite mit dem Layout-Schema

Praktische Anwendung > Schritt 4 - Seiten >

Einrichten einer Seite mit dem Layout-Schema

Previous pageReturn to chapter overviewNext page
Versteckten Text zeigen/verstecken

WebSite X5 bietet ein einzigartiges Layout-System, mit dem die Seiten komplett im visuellen Modus erstellt werden können.

Hierzu wird die Seite als Raster dargestellt, dessen Zeilen- und Spaltenzahl festgelegt werden kann, um die Zellen für die einzelnen Inhalte zu definieren.

Anschließend können die verfügbaren Objekte per Drag&Drop in diese Zellen gezogen werden, um die effektiven Inhalte einzufügen.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Konfiguration des Layout-Schemas

In seiner Standardkonfiguration hat das Layout-Schema zwei Zeilen und zwei Spalten. Diesen können Sie je nach gewünschtem Seitenlayout weitere hinzufügen und anschließend die jeweiligen Objekte in den Zellen positionieren.

Um dem Layout-Schema Zeilen und Spalten hinzuzufügen, verwenden Sie die entsprechenden Schaltflächen in der Werkzeugleiste. Auf diese Weise können Raster mit bis zu 64 Zeilen und 12 Spalten erstellt werden.

Standardmäßig haben alle Zeilen bzw. Spalten des Layout-Schemas die gleiche Breite bzw. Höhe.

Die Standardbreite der Rasterspalten ergibt sich durch Division der Seitenbreite (abhängig von der verwendeten Vorlage) durch die Anzahl der eingefügten Spalten. Mit den Cursors am unteren Rand des Schemas können Sie dann die Breite der Spalten einstellen:

Durch Ziehen eines Pfeils wird die Begrenzungslinie der Spalte verschoben. Während Sie den Cursor in eine andere Position ziehen, wird eine Infobox mit dem jeweiligen Pixelwert und Prozentsatz angezeigt, den die Spaltenbegrenzung jeweils annimmt. Wenn Sie beim Ziehen des Cursors gleichzeitig die Taste Strg gedrückt halten, wird der Cursor pixelweise verschoben. Andernfalls verschiebt er sich in Schritten von einem Zehntel des verfügbaren Raums.

Klicken Sie um zu erweitern/minimieren

Mit Rechtsklick auf den Cursor wird ein Kontextmenü eingeblendet. Wählen Sie hier die Option Spaltenbreite festlegen, um die Spaltenbreite direkt in Pixeln einzugeben.

Klicken Sie um zu erweitern/minimieren

Wählen Sie hingegen die Option Spalten auf gleiche Breite bringen, um für alle Spalten die gleiche Breite einzustellen.

Die Höhe der Zeilen hingegen wird durch die jeweils eingefügten Objekte bestimmt und kann nicht manuell geändert werden.

Die grafische Gestaltung der Zeilen kann mit den Einstellungen im Fenster Zeilenstil bearbeitet werden, das sich mit Klick auf die Schaltfläche öffnet.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Einfügen von Inhalten in das Layout-Schema

Um ein Objekt in eine Seite einzufügen, wählen Sie im Bereich Verfügbare Objekte ein Objekt aus und ziehen es in die gewünschte Zelle.

Jede Zelle des Schemas kann nur ein Objekt enthalten, umgekehrt kann ein Objekt aber sowohl horizontal als auch vertikal mehrere nebeneinander liegende Zellen belegen.

Ziehen Sie hierzu das jeweilige Objektsymbol in die gewünschte Richtung über die Ränder der Zellen hinaus, sodass das Feld den Platz der entsprechenden Zellen belegt. Das Objekt kann auch an seinen Ankerpunkten über mehrere Zellen gezogen werden.

Nachdem die Anzahl der Zellen festgelegt wurde, die ein Objekt belegen soll, wird diese - vorbehaltlich der Kompatibilität mit der Position anderer Objekte - beibehalten, auch wenn es an andere Stellen des Schemas verschoben wird. Alternativ können Sie sich innerhalb des Schemas auch mit den Pfeiltasten Ihrer Tastatur bewegen:

Pfeiltasten: Verschieben der Auswahl innerhalb des Schemas von einer Zelle in eine andere.
Strg + Pfeiltasten: Verschieben eines markierten Objekts (unter Beibehaltung seiner Abmessungen) in eine andere Zelle des Schemas.
UMSCHALT + Pfeiltasten: Ändern der Abmessungen eines markierten Objekts (vorbehaltlich Kompatibilität mit eventuellen weiteren Objekten), um es auf eine andere Zellenzahl im Layout-Schema zu vergrößern oder zu verkleinern.

Mit Rechtsklick auf das Objektsymbol wird ein Kontextmenü mit Funktionen für die Bearbeitung des Objekts: Ausschneiden, Kopieren, Einfügen, Entfernen, Objektstil, Effekt.

Über diese Befehle können Sie zum Beispiel eine Kopie eines Objekts erstellen, um diese dann in eine andere Zelle oder eine andere Seite einzufügen, oder ein Objekt löschen. Ein eingefügtes Objekt kann auch von der Seite entfernt werden, indem Sie es in einen Bereich außerhalb des Layout-Schemas ziehen oder die Taste Entf drücken. Wird ein neues Objekt in einer Zelle positioniert, die bereits von einem anderen belegt ist, wird dieses von dem neuen ersetzt. Wird hingegen ein bereits positioniertes Objekt auf eine belegte Zelle gezogen, tauschen die beiden Objekte ihre Position.

Mit den Optionen Objektstil | Kopieren und Objektstil | Einfügen im Untermenü der Option Objektstil können Sie ein Objekt in einer Zelle automatisch in eine andere Zelle kopieren.

Analog können Sie mit den Befehlen Effekt | Kopieren und Effekt | Einfügen einen Effekt, der auf ein Objekt angewendet wurde, auf ein zweites Objekt übertragen.

Und mit den Befehlen Objektstil | Bearbeiten... und Effekt | Bearbeiten... können Sie schließlich das Fenster Objektstil und das Fenster Anzeigeeffektöffnen.

Nachdem Sie ein Objekt in das Schema eingefügt haben, können Sie per Doppelklick auf die jeweilige Zelle des Layout-Schemas oder durch Markieren des Objekts und Anklicken der Schaltfläche Objektinhalt definieren den jeweiligen Inhalt festlegen.

Es müssen nicht alle Zellen des Layout-Schemas ausgefüllt werden. Berücksichtigen Sie hierbei bitte jedoch, dass:

eine leere Zelle einem leeren Platz auf der Seite entspricht;
leere Zeilen nicht formatiert werden können;
leere Zellen und Zeilen die Möglichkeiten der Anordnung von Objekten einschränken, wenn Sie eine responsive Website erstellen.

Die Zusammensetzung der Seite kann jederzeit geändert und aktualisiert werden.

Wenn die Erstellung einer responsiven Website aktiviert wurde (durch die Option Responsive Website zulassen im Fenster Auflösungen und responsives Design), muss bei Änderungen am Inhalt einer Seite berücksichtigt werden, wie diese sich in den verschiedenen Ansichten, die von den aktivierten Umbruchpunkten bestimmt werden, verhalten soll.

Um die Layout-Möglichkeiten optimal zu nutzen, beachten Sie, dass die Software nach folgenden Regeln arbeitet:

Die Seitenbreite wird vom jeweiligen Template bestimmt.
Die Spaltenbreite des Layout-Schemas ist der Quotient aus der Seitenbreite und der Anzahl der eingefügten Spalten. Standardmäßig haben alle Spalten die gleiche Breite, dieser Parameter kann jedoch manuell geändert werden.
Alle auf der gleichen Zeile angeordneten Zellen der Tabelle haben die gleiche Höhe: Standardmäßig wird dieser Wert durch das höchste der in den Zellen enthaltenen Objekte bestimmt.
Die eingefügten Objekte werden automatisch der Zellengröße im Layout-Schema angepasst.

 


Zusatzinformationen:

-

Das Box-Modell in WebSite X5