Kompatibilität:

WebSite X5 Evo und Pro

Beim Erstellen eines gut strukturierten Layouts, müssen Sie die Ausrichtung jedes Elements überlegen. Das Einfügen vieler Elemente könnte zu einem chaotischen Ergebnis führen, eine Seite, wo es für den Besucher schwierig ist, die gewünschte Information zu finden und zu genießen. In diesem Fall sollten Sie die Möglichkeit überlegen, Leerzeichen anzuwenden.


Um den Raum auf der Seite und zwischen den Inhalten besser zu verwalten, können Sie die Ränder der Objekte anwenden.


Sie sollen so vorgehen:

  • Gehen Sie auf Schritt 4- Erstellen der Seite, markieren Sie das gewünschte Objekt und klicken Sie auf Ränder.
  • Im Fenster Rand und Ausrichtung können Sie an den folgenden Elementen arbeiten:
    • Außenrand;
    • Innenabstand;
    • Horizontale/Vertikale Ausrichtung im Verhältnis zum Layout der Seite.


Das Box-Modell in WebSite X5

In WebSite X5 werden die Seiten mithilfe eines Raster erstellt und Sie können das Layout optimieren, indem Sie die Ränder der Objekte innerhalb der Zellen einstellen. Die Optionen für diese Einstellungen finden Sie im Fenster Rand und Ausrichtung, das sich über die Schaltfläche Ränder in der Werkzeugleiste in Schritt 4 - Erstellen der Seiten öffnet.


Um den Begriff Rand besser zu verstehen und das Layout der Inhalte präzise umzusetzen, müssen Sie mit dem verwendeten Box-Modell vertraut sein.


Beim Schreiben des Codes einer Website wird jedes HTML-Element als Block (Box) bezeichnet, während die Gesamtheit der Regeln, die die grafischen Merkmale dieser Block-Elemente Box-Modell genannt wird. Jede Box enthält eine bestimmte Anzahl Basiskomponenten, die mit Hilfe der CSS-Eigenschaften wie Außenabstand, Rahmen, Innenabstand und Inhalt geändert werden können.


Die nachstehende Abbildung veranschaulicht die Bestandteile des Box-Modells:



Das Layout-Schema in WebSite X5 besteht aus Zellen, in die verschiedene Objekte eingefügt werden können. Genauer gesagt, wird jedes Objekt in eine Art Behälter eingefügt, der seinerseits in einer Zelle des Layout-Schemas positioniert wird. Auf jede dieser Zellen wird das dargestellte Box-Modell angewendet.


Die Elemente sind die Folgenden:

  • Inhalt (grüner Bereich): Inhalt, der durch Ziehen eines der verfügbaren Objekte wird.
  • Innenabstand (rosa Bereich): Abstand zwischen dem eingefügten Objekt und dem Rahmen seines Behälters.
  • Rahmen: Rahmen des Objektbehälters. Das Aussehen dieses Rahmens kann mit den Optionen im Dialogfenster Objektstil definiert werden.
  • Außenabstand (gelber Bereich): Abstand zwischen dem Rahmen des Objektbehälters und den Layout-Schemas.


Ausgehend von diesen Definitionen ist der Raum zwischen zwei Objekten (horizontal oder vertikal) die Summe der Außenabstände, die für die jeweiligen Zellen festgelegt wurden.