Die Arbeit am Zeilenstil

Praktische Anwendung > Schritt 4 - Seiten >

Die Arbeit am Zeilenstil

Previous pageReturn to chapter overviewNext page
Versteckten Text zeigen/verstecken

Beim Erstellen der Seiten kann, nachdem mindestens ein Objekt in eine Zelle des Layout-Schemas eingefügt wurde, das Layout der Zeile definiert werden, zu der die entsprechende Zelle gehört. Markieren Sie hierzu die entsprechende Zeile und klicken Sie auf die Schaltfläche , um das Fenster Zeilenstil zu öffnen.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Verbinden von Zeilen, um sie identisch zu formatieren

Eine Zeile kann wie ein horizontaler Streifen auf einer Seite verstanden werden. Dieser Streifen kann so breit sein wie die Seite (deren Breite von der verwendeten Vorlage abhängt) oder wie das gesamte Browserfenster. Die Höhe des Streifens hingegen wird vom höchsten der Objekte bestimmt, die sich in den Zellen der jeweiligen Zeile befinden.

Sie können die Formatierung automatisch auch auf mehrere aneinander grenzende Zeilen anwenden, indem Sie diese verbinden:

Fügen Sie im Fenster Erstellen der Seiten die Objekte mit dem gewünschten Layout in das Raster ein.
Mit Klick auf die Schaltfläche öffnen Sie das Fenster Zeilenstil. In dem hier angezeigten Raster sehen Sie neben allen Zeilen einen ausgefüllten Punkt oder einen leeren Kreis, je nachdem, ob die betreffende Zeile bereits konfiguriert wurde oder nicht.
Status vor dem Verbinden der Zeilen

Status vor dem Verbinden der Zeilen

Positionieren Sie den Mauszeiger in der Mitte der imaginären Verbindungslinie zwischen den beiden Punkte der Zeilen, es wird ein Vorhängeschloss-Symbol angezeigt.
Mauszeiger auf der Linie

Mauszeiger auf der Linie

Klicken Sie auf das Vorhängeschloss: die beiden Zeilen werden verbunden und das Symbol ändert sich.
Klick auf das Vorhängeschloss zum Verbinden der Zeilen

Klick auf das Vorhängeschloss zum Verbinden der Zeilen

Die Zeilen sind nun verbunden, dies wird durch die Linie angezeigt, die die beiden Punkte neben den Zeilen verbindet. Alle Einstellungen für den Stil der ersten Zeile werden auch auf die zweite Zeile angewendet.
Status nach dem Verbinden der Zeilen

Status nach dem Verbinden der Zeilen

Dieses Verfahren kann wiederholt werden, um alle gewünschten Zeilen zu verbinden.
Klicken Sie um zu erweitern/minimierenVorgehensweise: Trennen verbundener Zeilen

Ebenso, wie Sie Zeilen verbinden, um sie identisch zu formatieren, können Sie sie auch wieder trennen.

Führen Sie den Mauszeiger auf der Linie zwischen den beiden Punkten neben den betreffenden Zeilen über das Vorhängeschloss.
Klicken Sie auf das Vorhängeschloss, die beiden Zeilen werden getrennt.

Wurden zum Beispiel die Zeilen 1 und 2 verbunden und auf beide eine bestimmte Formatierung angewendet, kehrt die Formatierung von Zeile 2 nach dem Trennen wieder in ihre ursprüngliche Form zurück.

Wurden mehr als zwei Zeilen verbunden, erfolgt die Trennung an dem Punkt, an dem auf das Vorhängeschloss-Symbol geklickt wird. Wurden zum Beispiel die Zeilen 1, 2, 3 und 4 verbunden und Sie klicken auf das Vorhängeschloss zwischen Zeile 2 und Zeile 3, bleibt Zeile 1 mit Zeile 2 und Zeile 3 mit Zeile 4 verbunden.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Bedingungen, unter denen verbundene Zeilen nicht getrennt werden können

Je nachdem, wie die Objekte im Raster positioniert bzw. bei responsiven Websites für die verschiedenen Ansichten angeordnet werden, können Situationen eintreten, in denen mehrere Zeilen automatisch verbunden werden und nicht getrennt werden können.

Fall 1. Layout

Wird ein Objekt in das Raster eingefügt, das mehrere Zellen verschiedener Zeilen belegt, werden alle betroffenen Zeilen automatisch verbunden. Das Vorhängeschloss auf der Verbindungslinie zwischen den Punkten wird grau (anstatt blau) dargestellt, was anzeigt, dass es nicht entsperrt werden kann. In diesem Fall muss zwingend das Layout der Objekte verändert werden, um die Verbindung zu lösen.

Beispiel


Das Objekt in Spalte 1 belegt die Zeilen 4, 5 und 6. Diese werden automatisch verbunden und können nicht getrennt werden.

Das Objekt in Spalte 1 belegt die Zeilen 4, 5 und 6. Diese werden automatisch verbunden und können nicht getrennt werden.

Wird für Zeile 1 und Zeile 2 zuvor ein unterschiedlicher Stil eingestellt, aber dann ein Objekt eingefügt, das beide belegt, werden die beiden Zeilen automatisch verbunden und Zeile 2 wird an den Stil von Zeile 1 angeglichen. Auch in diesem Fall können die Zeilen erst dann manuell getrennt werden, wenn zuvor das Layout der Objekte verändert wurde.  

Fall 2. Responsive Website

Wenn Sie eine responsive Website gestalten und die Objekte für die verschiedenen Ansichten gemäß den Umbruchpunkten anordnen, können Kombinationen auftraten, die zur automatischen Verbindung mehrerer Zeilen führen. Im Allgemeinen tritt dieser Fall ein, wie im nachstehenden Beispiel, wenn bei der Anordnung einem Objekt nicht das rechts angrenzende (das sich auf der gleichen Zeile befindet) folgt, sondern das Objekt direkt darunter (in einer anderen Zeile). Auf diese Weise werden Gruppen generiert, deren Objekte sich auf mehreren Zeilen befinden.

Schritt 1


Bei der Definition der Ansicht für einen Umbruchpunkt kann die Anordnung Gruppen generieren, deren Objekte auf verschiedenen Zeilen positioniert sind.

Bei der Definition der Ansicht für einen Umbruchpunkt kann die Anordnung Gruppen generieren, deren Objekte auf verschiedenen Zeilen positioniert sind.

Schritt 2


Ergebnis: Durch die festgelegte Anordnung wurden die Zeilen 1 und 2 verbunden und sind identisch formatiert.

Ergebnis: Durch die festgelegte Anordnung wurden die Zeilen 1 und 2 verbunden und sind identisch formatiert.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Formatierung einer Zeile

Das Formatieren von Zeilen ist sehr einfach. Gehen Sie bitte vor, wie nachstehend beschrieben:

Öffnen Sie das Fenster Zeilenstil und markieren Sie die Zeile oder Zeilengruppe, die Sie formatieren möchten.
Nehmen Sie mit den verfügbaren Optionen die gewünschten Einstellungen vor.

Bitte beachten Sie bei der Formatierung von Zeilen Folgendes:

Im Raster des Fensters Zeilenstil haben Zeilen, deren Stil noch nicht festgelegt wurde, einen weißen Hintergrund und das Bearbeitungssymbol daneben ist ein leerer Kreis;
Im Raster des Fensters Zeilenstil haben Zeilen, deren Stil definiert wurde, einen hellblauen Hintergrund und das Bearbeitungssymbol daneben ist ein ausgefüllter Punkt;
Mit Rechtsklick auf eine Zeile öffnet sich ein Kontextmenü mit Optionen zum Kopieren und Einfügen von Zellenformaten.
Klicken Sie um zu erweitern/minimierenVorgehensweise: Erstellen eines farbigen Streifens über die gesamte Breite des Browserfensters

Um einen farbigen Streifen zu erstellen, der sich nicht nur über die Seitenbreite, sondern über die gesamte Breite des Browserfensters erstreckt, gehen Sie bitte wie folgt vor:

Öffnen Sie das Fenster Zeilenstil und markieren Sie die Zeile oder Zeilengruppe, die Sie formatieren möchten.
Wählen Sie Farbig als Hintergrund und stellen Sie mit den verfügbaren Optionen die Farbe und die Deckkraft ein.
Aktivieren Sie die Option Auf die Breite des Browserfensters erweitern und öffnen Sie die Vorschau, um die grafische Darstellung des erstellten Streifens zu überprüfen.

Analog kann durch Auswahl einer anderen Option für Hintergrund ein Streifen mit einem Farbverlauf, einem Bild oder einem Video anstelle der Einheitsfarbe erstellt werden.

Klicken Sie um zu erweitern/minimierenVorgehensweise: Erstellen einer Website mit Parallaxe-Effekt

Der Parallaxe-Effekt wird häufig verwendet, um den Seiten Tiefe zu verleihen und sie für den Betrachter ansprechender zu gestalten. Der Effekt basiert auf folgendem Prinzip: Beim Scrollen der Seite bewegen sich das Hintergrundbild und die Bilder im Vordergrund mit unterschiedlicher Geschwindigkeit.

Zum Einstellen des Parallaxe-Effekts gehen Sie bitte vor, wie nachstehend beschrieben:

Öffnen Sie das Fenster Zeilenstil und markieren Sie die Zeile oder Zeilengruppe, die Sie formatieren möchten.
Wählen Sie Bild als Hintergrund und nutzen Sie die verfügbaren Optionen, um eine Bilddatei zu importieren und die Parameter wie Position und Ausrichtung festzulegen.
Aktivieren Sie die Option Parallaxe-Effekt aktivieren und öffnen Sie die Vorschau, um die grafische Darstellung des erstellten Streifens zu überprüfen.
Um den Parallaxe-Effekt zu verstärken, wird empfohlen, auch die Option Auf die Breite des Browserfensters erweitern zu aktivieren, sodass sich der Streifen über die gesamte Breite des Browserfensters erstreckt.

Für die Verwendung des Parallaxe-Effekts kann als Hintergrund der Zeile ein Farbverlauf, ein Bild oder ein Video aber kein einfarbiger Hintergrund gewählt werden.

 


Zusatzinformationen:

-

Das Box-Modell in WebSite X5