Gestaltung mit Hilfe von Layoutboxen

Allgemein

Wir verwenden das sogenannte "Grid-System" zur Positionierung des Inhaltes. Unsere Webseiten bestehen in der Regel aus 12 gleichgroßen Spalten (entspricht 12col).

Als Beispiel der Webauftritt der ":data factory GmbH"

Die leicht transparenten Linien unterteilen den gesamten Inhaltsbereich in 12 gleichgroße Abschnitte. So wird eine symmetrische Positionierung des Inhaltes gewährleistet.

Vorbereitung

Zunächst müssen Sie sich anmelden. Sie navigieren zu der gewünschten Stelle, wo Sie die Textänderungen vornehmen möchten.

Dort angekommen öffnen Sie den Editor mittels Klick auf das Edit-Icon (Stift).

Es sollte sich nun der Editor öffnen.

Sie sehen nun die Bearbeitungsmaske des Ordners. Im unteren Teil des Bildes ist der Editor, in welchem alle inhaltlichen Änderungen vorgenommen werden, zu sehen. Mit Hilfe dieses Editors, unseren Layoutboxen und der Anleitung können Sie Ihren Inhalt formatieren und positionieren.

Text-Formatierungen

Das oben beschriebene "Grid-System" wird auch von unseren Layoutboxen genutzt. So können Sie kinderleicht Texte positionieren bzw. formatieren.

Einfache Positionierung

Folgend wird beschrieben wie Sie einen Textblock erstellen, welcher nicht über die gesamte Breite der Seite geht, sondern nur über die Hälfte.

Dazu wählen Sie in der Toolleiste des Editors das <?>–Icon aus.

Es öffnet sich nun ein kleines Fenster. Dort wählen Sie den Eintrag "layoutbox".

Anschließend wechselt der Fensterinhalt und Sie sehen die Bearbeitungsmaske der Layoutbox. Sie müssen hier lediglich die zwei Punkte Ausrichten und Größe beachten.

Um nun eine Layoutbox, welche über die Hälfte der Seite geht, zu erstellen, wählen Sie bei Größe "6col" aus. Ausrichten können Sie in diesem Falle freilassen.

Im Editor erscheint nun ein Türkis hinterlegter Bereich. Dies ist die eben erstellte Layoutbox, in der Sie ihren gewünschten Text eingeben können.

Hinweis:Die Layoutbox beansprucht nur im Editor die gesamte Breite. Auf ihrer Internetseite wird nur die festgelegte Größe beansprucht.

Im folgenden Bild sehen Sie das Ergebnis der soeben erstellten 5col-Layoutbox mit einem Beispieltext:

Achtung:Zu beachten ist in diesem Falle, dass ein Menü von 2col auf der Beispielseite verfügbar ist. Das bedeutet, dass für den Inhalt lediglich 10col übrig sind. Die Größe der gezeigten Layoutbox beträgt hier deshalb nur 5col.

Zweispaltige Positionierung

Sie wollen auf ihrer Seite 2 Texte abbilden, welche sich tabellarisch gegenüberstehen.

Das Ergebnis könnte wie folgt aussehen:

Genutzt wurden 2 Layoutboxen mit jeweils 3col-Größe. Die obere wurde links- und die untere  rechtsbündig formatiert. Dies stellen Sie über das Ausrichten Menü der Bearbeitungsmaske der Layoutbox ein.

Dreispaltige Positionierung

Benötigen Sie 3 Spalten, können Sie das wie folgt realisieren:

Genutzt wurden 3 Layoutboxen mit jeweils 3col-Größe und einer linksbündigen Ausrichtung. Dies stellen Sie über das "Ausrichten" Menü der Bearbeitungsmaske der Layoutbox ein.

Text und Bild- Formatierungen

Text fließt an Bild entlang

Oftmals werden Bilder in Artikeln benötigt. Diese werden oft so eingefügt, dass der Text um das eingefügte Bild fließt. Soll der Text immer auf Höhe des Bildes bleiben, müssen Layoutboxen zu Hilfe genommen werden.

Um diese Ansicht zu realisieren, benötigen Sie 2 Layoutboxen:

  • Eine festgelegte Layoutbox für das Bild
  • Und eine nicht festgelegte Layoutbox für den Text

Festgelegt heißt in diesem Falle, dass Werte für Ausrichtung und die Größe vorhanden sind. In diesem Beispiel hat die Layoutbox mit dem Bild dieselbe Größe wie das Bild, 3col, und die Ausrichtung "links".

Die zweite Layoutbox für den Text benötigt keine Angaben.

Erläuterung:Falls eine Layoutbox ohne festgelegten Wert nach einer folgt, bei welcher die Ausrichtung sowie die Größe festgelegt wurde, rutscht die nicht-festgelegte Layoutbox automatisch hinter die Erste und füllt den restlichen Platz aus.

Zentrales Bild mit Textfluss

Möchten Sie im Mittelpunkt der Seite ein Bild einfügen, welches von Text umschlossen wird, benötigen Sie mehrere Layoutboxen.

Das Ergebnis könnte wie folgt aussehen:

In diesem Beispiel wurden 7 Layoutboxen verwendet (zur Orientierung bitte Farben des mittleren Screenshots beachten):

  • Blaue Layoutbox: Äußere Layoutbox – keine festgelegten Werte
  • Orange Layoutbox: Obere Layoutbox – keine Ausrichtung ; 10col (gesamte Breite) als Größe
  • Grüne Layoutbox: Mittlere Layoutbox – keine Ausrichtung ; 10col (gesamte Breite) als Größe
  • Pinke Layoutbox: Untere Layoutbox – keine Ausrichtung ; 10col (gesamte Breite) als Größe
  • Braune Layoutboxen: 3 möglichst gleichmäßig aufgeteilte Layoutboxen. 2 für Texte und 1 für das gewünschte Bild. In diesem Falle wurden den Layoutboxen für den Text jeweils 3col zugewiesen. Das vorhandene Bild wurde auf die restliche Größe von 4col angepasst.

Hier müssen Sie beachten, dass den braunen Layoutboxen Werte für die Ausrichtung gegeben werden muss.

  • Der ersten braunen Layoutbox mit Text muss eine Breite von 3col und eine linksbündige Ausrichtung zugewiesen werden.
  • Die Layoutbox mit dem Bild muss ebenfalls linksbündig formatiert werden. Die Größe für diese Layoutbox beträgt in diesem Beispiel 4 col, damit die Gesamtbreite von 10col erreicht wird (3col Text + 4col Bild + 3col Text).
  • Die letzte braune Layoutbox braucht keine Größe und Ausrichtung, da sich diese automatisch anpasst.