Layout-Regeln & Layout-Abstände

poweruser

Funktionalitäten der Layout-Regeln und -Abstände

• Artikel gestalten

• Richtig Layouten

• Leichteres Arbeiten mit PRINT NGEN

• Besseres Verständnis von Bibliotheken

Inhaltsverzeichnis

Video-Tutorial

Im folgenden Video wird gezeigt, wie Layout-Regeln und -Abstände im Vorlagenbau definiert werden können.

Allgemeine Beschreibung

Im folgenden Video wird ein Einblick in Layout-Regeln und -Abstände gegeben und erklärt, wofür diese benötigt werden und welche Vorteile sie haben:

Über die Definition von Layout-Regeln und -Abständen kann erreicht werden, dass die Elemente der Vorlagen automatisch bestimmten, vordefinierten Verhaltensweisen folgen. 

Fünf typische Beispiele für den Einsatz von Layout-Regeln und -Abständen sind:

• Der Titel soll sich immer über die volle Breite des Containers ausdehnen. 

• Der Vorspann soll sich in seiner Höhe an seinen Textinhalt anpassen.

• Zwischen Titel und Grundtext soll eine Zeile Abstand sein.

• Die Bildunterschrift soll immer an der Unterkante des Bildes kleben und auch genauso breit sein wie das Bild.

• Artikelcontainer sollen zueinander immer zwei Zeilen Abstand haben.

Die Arbeit mit Layout-Regeln und -Abständen bietet folgende Vorteile: 

• Automatismus: Bei der Verwendung und Modifizierung (z. B. Skalieren) einer Vorlage hat der oder die Anwender:in keinen Anpassungsaufwand, da die Verhaltensregeln der Elemente zueinander bereits festgelegt sind. 

• Die Anzahl der benötigten Vorlagen wird stark reduziert, da die gleiche Vorlage ohne  Anpassungsaufwand auf der Seite modifiziert werden kann. 

• Hohe Flexibilität beim Hinzufügen oder Entfernen von Elementen (z. B. Unterzeile wird im Artikel  hinzugefügt), da deren Verhalten vordefiniert ist. 

Vergabe von Layout-Regeln und -Abständen

Die Vergabe von Regeln und Abständen erfolgt am jeweiligen Bereich. Die beiden Dialoge können auf zwei unterschiedliche Arten geöffnet werden: 

• Über die Dialog-Buttons neben den Zeilen “Layout-Regeln” und “Layout-Abstände” in der Eigenschaftsliste 

Open

Layout-Regeln und Layout-Abstände

• Über das Kontext-Menü des selektierten Bereichs

Open

Kontext-Menü

Geöffnet wird dadurch der Layout-Regel- bzw. Layout-Abstands-Dialog: 

Automatische Anwendung von Layout-Regeln und -Abständen

Wann immer ein Artikelcontainer skaliert wird, werden innerhalb des Containers die Elemente gemäß ihrer Regeln und Abstände neu umbrochen, also neu ausgerichtet. 

Um den Umbruch zu forcieren (weil beispielsweise gerade eine Vorlage getestet und die Layout-Regeln überprüft werden), stehen zwei verschiedene Varianten zur Verfügung: 

• Layout-Umbruch (F2): Durch Betätigen der F2-Taste erfolgt ein reiner Layout-Umbruch innerhalb des Artikels ohne Anpassung der Gesamthöhe. Alternativ kann der Layout-Umbruch auch über den Kontextmenüpunkt “Layout-Umbruch” ausgeführt werden.

• Layout-Umbruch und Artikelhöhe anpassen (Strg + F2): Durch Betätigen der Strg + F2-Taste erfolgt ein Layout-Umbruch mit Anpassen der Gesamthöhe des Artikels. Dieser ist alternativ über den Kontextmenüpunkt “Artikel Höhe Anpassen” erreichbar.

Layout-Regeln allgemein

Einspringen oben/unten/rechts/links:

Dies bezieht sich auf das Raster des umfassenden Containers, also des Artikel- oder Seitencontainers. Das Einspringen “Links/Rechts” wird bei Textbeinen durch die Resthöhe aufgehoben, ist daher dort nicht nötig. “Oben/unten” ist insbesondere für Titel/Unterzeile/Dachzeile oder Vorspann relevant, wo ein Element ganz bewusst außerhalb des Zeilenrasters beginnt oder endet. Auch “positiver oder negativer Versatz” ist möglich. Das Element wird mit der Funktion “innerhalb des Spaltenrasters/Zeilenrasters” gezwungen, in seinem definierten Raster zu bleiben – das ist entweder das Raster der Seite oder das eigene Raster des Artikels, zum Beispiel eines Kastenartikels.

Die Bereichshöhe bestimmt sich durch die verbleibende Resthöhe unter Berücksichtigung der Abstände der anderen Bereiche:

Die Angabe “Bereichshöhe immer ein Vielfaches vom Vorschub” bewirkt, dass das Textbein ausgehend von der Containerunterkante von unten nach oben aufgebaut wird, sodass seine Höhe immer einer Vielzahl des Vorschubs entspricht (unter Berücksichtigung von VOK und Versatz 1. Schriftlinie).  

An der Oberkante des Textbereiches ergeben sich dadurch variable Abstände zum darüber liegenden Bereich, wie z. B. Titel, Vorspann etc.

Nähere Informationen zur Option “Bereichshöhe immer ein Vielfaches vom Vorschub” gibt folgendes Video:

Die Option “Alle Bereiche mit gleicher Breite erstellen” im Resthöhe-Dialog wird ausgewählt, wenn mit dem inhomogenen Spaltenraster gearbeitet wird und in einem Artikel für die Textbeine unten stehender Effekt erreicht werden möchte: 

Textbeine werden nur für die Türkis hinterlegten, breiten Spalten generiert. In den orange hinterlegten, schmalen Spalten werden keine Textbeine generiert, denn diese sollen explizit frei belieben, um für andere Bereiche wie Bildunterschriften, Zitate oder ähnliches genutzt zu werden.

Nähere Informationen zur Option “Alle Bereiche mit gleicher Breite erstellen” gibt folgendes Video:

Layout-Regel “BU-Positionierung”

Diese Layout-Regel sorgt dafür, dass die Bildunterschrift (ein- oder mehrzeilig) unten nicht aus dem Artikel-Container herausragt. 

Sie wird direkt und ausschließlich am Artikel-Container vergeben.

Wenn sich der Artikel-Container an den Inhalt des Textbereichs anpasst und die Bildunterschrift in dem Fall unten aus dem Container hinausragt, wird die Höhe des Bildes verringert, so dass die Bildunterschrift innerhalb des Artikel-Containers bleibt.

Dabei wird für die Mindesthöhe die Eigenschaft “MinHoehe” am Bildbereich herangezogen. Ist diese nicht gesetzt, wird “LRMinimaleHoehe” verwendet. Ist keine von beiden gesetzt, wird die Höhe einer Zeile angenommen.

Wichtig: Vergrößert sich der Artikel-Container wieder, wird die Bildhöhe nicht automatisch vergrößert. In diesem Fall muss der Bildbereich manuell vergrößert werden. 

Beispiel:

• Artikel-Container ohne “BU-Positionierung”.

Wird Text aus dem Textbereich entfernt und mittels Strg+F2 umbrochen, ragt die Bildunterschrift über den Artikel-Container hinaus.

• Artikel-Container mit “BU-Positionierung”.

Ist die LayoutRegel “BU-Positionierung” am Artikel-Container angegeben, wird die Höhe des Bildes unter Beachtung der Mindesthöhe verringert. 

Wird Text aus dem Textbereich entfernt und mittels Strg+F2 umbrochen, bleibt die Bildunterschrift innerhalb des Artikel-Containers.

Priorisierung der Layout-Regeln & Layout-Abstände

Die Layout-Regeln und Abstände werden anhand ihrer Bereichs-ID nacheinander ausgeführt. Je höher die ID, desto später werden die Regeln ausgeführt. Elemente mit einem höheren Wert setzen sich also durch. Sollte es dazu kommen, dass ein Element sich nicht wie gewünscht verhält, kann es helfen, es aus dem Artikel-Container zu entfernen und auf der Seite zu platzieren. Wird das Element anschließend wieder in den Container platziert, erhält es die höchste Bereichs-ID und setzt sich somit durch.

Abstände zwischen Artikel-Containern

Das folgende Video zeigt, wie Abstände zwischen Containern und Artikeln vergeben werden können:

Verkettung einzelner Bereiche eines Artikels

Einzelne Bereiche eines Artikels lassen sich miteinander verketten. Dies ist aus mehreren Gründen sinnvoll:

• Damit alle Bereiche – Titel, Vorspann, Text etc. – Bestandteil eines einzigen Artikels sind (andernfalls müsste jeder einzelne Artikel für jeden einzelnen Bereich angelegt werden) sind.

•  Das sinnvolle Verketten erleichtert den Anwender:innen das Navigieren durch die einzelnen Bereiche mit den Pfeiltasten. 

• Wenn ein Artikel mehrere Textbeine hat, soll der Text, wenn das erste Textbein vollgeschrieben ist, automatisch in das zweite Textbein weiterfließen etc.

• Saubere Verkettung gewährleistet ein sauberes XML: Jeder Artikelbereich (Titel, Vorspann, Text etc.) hat ein eigenes Bereichstag. Im XML werden diese Bereichstags in der Reihenfolge geschrieben, in der sie im Artikel verkettet wurden. 

Einen Einblick in die Verkettung einzelner Bereiche eines Artikels gibt das folgende Video:

Entfernen von Verkettungen 

Um Verkettungen zu entfernen, muss das “Verkettungswerkzeug” gewählt und der Cursor im letzten verketteten Bereich positioniert werden. Der Cursor muss entgegen der Pfeilrichtung der Verkettung in den nächsten verketteten Bereich gezogen werden. Der Cursor ändert sich in ein „Entkettungs“-Symbol, die Maus kann nun losgelassen werden. 

Es kann auch vom letzten verketteten Bereich gleich die Entkettung auf den allerersten, also den Startbereich der Verkettung, durchgeführt werden. Dadurch wird die Verkettung komplett aufgehoben. 

Verkettung unterschiedlicher Bereiche

Um zwei Bereiche ohne automatisch fortlaufenden Textfluss miteinander zu verketten, wird das “Verkettungswerkzeug” verwendet und im Artikel die Verkettung vom gewünschten Startbereich (z. B. dem Titel) zum gewünschten nächsten Bereich der Verkettung (z. B. der Unterzeile) gezogen.

Die entstandene Verkettung wird durch eine gestrichelte Linie, standardmäßig in rot oder magentafarben, angezeigt: 

Verkettung von Bereichen für fortlaufenden Textfluss (Textfluss-Verkettung)

Ist eine fortlaufende Textverkettung – wie es fast immer bei den einzelnen Textbeinen eines Artikels benötigt wird – gewünscht, so kann während der Verkettung zusätzlich noch die Strg-Taste gedrückt werden. Die Textfluss-Verkettung ist durch eine durchgehende Linie, in der Regel blau, gekennzeichnet.

Verkettung über mehrere Seiten

Im folgenden Video wird gezeigt, wie ein Artikel über mehrere Seiten hinweg verkettet werden kann:

Erstellen einer neuen Vorlagen-Bibliothek 

Im folgenden Video wird gezeigt, wie eine neue Vorlagenbibliothek erstellt und im Benutzerkontext angegeben werden kann:

Das Erstellen einer neuen Vorlagen-Bibliothek geht am schnellsten über das Drop-Down-Menü neben dem “Text-Anlegen-Button”. Dort wird der Menüpunkt „Bibliothek’“ ausgewählt und im folgenden Dialog die Angaben (siehe Bild) abgebildet. 

Anschließend wird die neue Bibliothek im Benutzerkontext angegeben. 

Per Drag & Drop mit gedrückter Strg-Taste und Fallenlassen auf den Namen der Bibliothek kann die neue Artikelvorlage in die neue Bibliothek übernommen werden.

Artikel in der Vorlagen-Bibliothek

• Basisformatbibliothek angeben: Wie in der Vorlagenbibliothek kann die gleiche Basisformatbibliotheksangabe, die auch für die Seite gilt, erstellt werden. Hierzu wird das neue Element selektiert und die Angabe in der “Eigenschaftsliste” vorgenommen.

Im folgenden Video wird gezeigt, wie beim Übernehmen von Elementen in Vorlagenbibliotheken eine Basisformat-Bibliothek angegeben werden kann:

• Dem Artikel ein Spaltenraster geben: Anschließend wird der Artikelcontainer selektiert und ein eigenes Spaltenraster vergeben – hierzu müssen einfach die aktuelle Spaltenanzahl und Abstände “oben/unten/rechts/links” auf null gesetzt setzen. 

Im folgenden Video wird gezeigt, wie bei der Übernahme von Elementen in die Vorlagenbibliothek ein Spaltenraster vergeben werden kann:

Spaltigkeit übernehmen

Soll das vergebene Spaltenraster – z. B. beim Ziehen einer Vorlage auf eine Seite oder einem Formatwechsel – in eine Vorlage übernommen oder die Spaltigkeit einer Seite angenommen werden, muss bei selektiertem Artikelcontainer im Dialog die Eigenschaft “Artikelraster-Übernehmen” ausgewählt werden. 

Das folgende Video gibt einen Einblick in die Funktion:

Geometrie übernehmen

Soll die Höhe und Breite eines Artikels beim Formatwechsel an die aktuelle Vorlage angepasst werden (=Verwendung der Breite und Höhe der Vorlage), muss bei selektiertem Artikelcontainer im Dialog die Eigenschaft “GeometrieÜbernehmen” ausgewählt werden. Soll nur die Breite oder nur die Höhe der Vorlage bei Formatwechsel übernommen werden, kann in der Zeile “GeometrieAnpassung” auch der gewünschte Wert eingegeben werden. 

Das folgende Video gibt einen Einblick in die Funktion:

Die Layout-Regel “Spaltigkeit” 

Die dynamische Layout-Regel “Spaltigkeit” ist zum Beispiel dann sinnvoll, wenn ein Artikel eine eigene Spaltigkeit besitzt und z. B. ein zweispaltiges Bild enthält – wird der Artikelcontainer breiter gezogen, bleibt das Bild zweispaltig. Wird der Container schmäler gezogen, wird auch das Bild automatisch schmäler.

Manuelle Änderungen an der Bereichsbreite verändern die Wirkungsweise der Spaltigkeit. Die Layout-Regel “Spaltigkeit” wird nur so lange dynamisch aufgezeigt, bis die Anwender:innen händisch die Breite des Bildes verändern.

Einen Einblick in die Layout-Regel “Spaltigkeit” gibt das folgende Video. Dabei wird auch auf sich widersprechende Layout-Regeln eingegangen.

Umfließen-Einstellungen für Rechtecke und Formen

Im folgenden Video werden die Umfließen-Einstellungen für Rechtecke und Formen vorgestellt:

Rechteck 

Für rechteckige Bereiche, die umflossen werden sollen, müssen in der Eigenschaftsgruppe die Schalter “umfließen” gesetzt werden:

• Umfließen = “ja” 

• UmfließenForm= “nein” 

• AbstandOben = beliebiger Wert 

• AbstandUnten = beliebiger Wert 

• AbstandRechts = beliebiger Wert 

• AbstandLinks = beliebiger Wert 

Der oben abgebildete Effekt kann mit der Layout-Regeln “Zentriert” erzeugt werden. Diese wird im folgenden Video vorgestellt.

Freie Form 

Da es bei freien Formen keine Möglichkeit gibt, oben, unten, rechts und links zu definieren, wird ein einziger Abstandswert vergeben, der auf die anderen Abstände automatisch vererbt wird. (Voraussetzung: UmfließenForm=”ja”)

• Umfließen = “ja”

• UmfließenForm= “ja” 

• AbstandOben = beliebiger Wert 

• AbstandUnten = erbt Wert von AbstandOben 

• AbstandRechts = erbt Wert von AbstandOben 

• AbstandLinks = erbt Wert von AbstandOben 

Umfließen für einen Textbereich ausschalten

Damit der BU-Bereich die Umfließen-Einstellungen des Bildes ignoriert, muss für den BU-Bereich in der Eigenschaftsgruppe „Typographie“ bei “TextUmfluss” der Wert von „Maximum“ auf „Aus“ umgestellt werden.

Umfließen oder Layout-Abstände 

Alternativ zu Layout-Abständen kann auch ausschließlich mit Umfließen-Abständen gearbeitet werden, sodass dadurch der Textbereich verdrängt wird (Ausnahme: Arbeit mit Vertikalem Keil).

In der Regel wird mit einer Kombination aus Layout-Abständen von Bild zu Text und “Umfließen” gearbeitet. Dies ist zum Beispiel dann nötig, wenn ein Bild ein wenig in eine andere Spalte hineinragt. Denn dann gilt in den Spalten, wo das Bild über die volle Spaltbreite läuft, die Layout-Abstands-Definition. In Spalten, in denen nur ein Teil des Bildes liegt, gilt die Umfließen-Einstellung am Bild:

Wird mit halbspaltigen Bildern gearbeitet, muss auf gleiche Abstandswerte bei Layout-Abständen und bei “Umfließen” geachtet werden. 

Einen Einblick in die Fragestellung gibt das folgende Video:

Sinnvolles Zerschneiden der Textbeine über die Layout-Regeln

Wird mit halbspaltigen Bildern und unter Verwendung des vertikalen Keils gearbeitet, sollte die Layoutregel “Resthöhe” durch Aktivierung des Häkchens „Leere Spalten…“ erfolgen. Der Vertikale Keil sollte zudem die Einstellungen „VKBeiUmfließen“ und „MitVerkettung“ auf “ja” gesetzt haben. 

Hierfür wird über den Button „Layout-Modus“ in der Layoutwerkzeugleiste in den so genannten Layout-Modus gewechselt. Hier können nur Bereiche, Verkettungen und Bereichsinformationen gesehen werden. Gerade beim Arbeiten mit komplexen Layouts und Vorlagen kann es hilfreich und übersichtlich sein, in den Layoutmodus umzuschalten.

Einen Einblick in die Funktion gibt das folgende Video:

Im folgenden Video wird gezeigt, welche Einstellungen beim Arbeiten mit Vertikalem Keil erforderlich sind:

Anwendungsbeispiele/Übungen für Layout-Regeln und -Abstände

Aufbau eines Einspalters

In den folgenden Videos wird gezeigt, wie ein Einspalter mit einem Text- und Titel-Bereich unter der Verwendung von Layout-Regeln und -Abständen aufgebaut werden kann:

Modifikation eines Einspalters

Im folgenden Video wird erklärt, wie einem Einspalter eine Unterzeile unter der Verwendung von Layout-Regeln und -Abständen hinzugefügt werden kann:

Spaltenraster vergeben

Wie für einen Artikel ein Spaltenraster mithilfe des Spaltenraster-Dialogs vergeben werden kann, wird im folgenden Video gezeigt:

Nähere Informationen zu Spaltenrastern: https://peiq.atlassian.net/wiki/spaces/PPSD/pages/830210050.

Spaltenraster ändern und Linie vergeben

Im folgenden Video wird gezeigt, wie ein Einspalter in seinen Container eingerückt sowie eine Linie für ihn definiert werden kann:

Nähere Informationen zu Linien: https://peiq.atlassian.net/wiki/spaces/PPSD/pages/962134215.

Artikel-Vorlagen kopieren, Typographische Einstellungen, Füllungsdialog, Silbentrennung

Der Einspalter soll einen farbig hinterlegten Titel erhalten und seine Typographie soll bearbeitet werden. Wie dies erreicht werden kann, wird im folgenden Video gezeigt:

Eigenschaften auf Default-Werte zurüsetzen

Die Einstellungen für den erstellen Artikel sollen zurückgesetzt werden. Wie dies funktioniert, wird im folgenden Video gezeigt:

Artikel mit Vorspann-Bereich ergänzen

Im folgenden Beispiel soll in einem Artikel ein Vorspann-Bereich ergänzt werden. Wie dies funktioniert, wird in diesem Video gezeigt. Dabei wird auch auf das Thema “Spaltigkeit” eingegangen.

Artikel mit Bild-Bereich ergänzen

Im folgenden Beispiel soll ein Artikel mit einem Bild-Bereich ergänzt werden. Dabei werden im Video zudem die Themen “Fixierung” sowie die Layout-Regeln “Volle Höhe”, “Horizontal” und “Restbreite” behandelt. Zudem werden Layout-Abstände nach rechts und links berücksichtigt.

Dachzeile und Bild ergänzen

Im folgenden Video wird gezeigt, wie dem Artikel eine Dachzeile und ein neuer Bild-Bereich hinzugefügt werden kann:

Magnetische Hilfslinien

Im folgenden Video wird gezeigt, wie dem Artikel magnetische Hilfslinien hinzugefügt werden können:

Autobereiche

Autobereiche sind Zusatzbereiche, die mit dem eigentlichen Hauptbereich so verbunden sind, dass sie automatisch mitgeneriert werden und beim Skalieren oder Verschieben des Bereichs wie gewünscht wieder am Hauptbereich andocken. 

Klassische Anwendungsbeispiele für Autobereiche:  

• Bildunterschriften 

• Angaben von Bildquellen 

• Anzeigenhinweise 

Autobereiche angeben

Im folgenden Video wird erklärt, wofür man Autobereiche benötigt und wie sie angegeben werden:

Die Angabe eines Autobereichs erfolgt an seinem „Mutter“-Element. Beispielsweise kann dem Bildbereich gesagt werden, dass er einen Autobereich für die Bildunterschrift haben soll. Das erfolgt in der jeweiligen Eigenschaftsgruppe mit den Bereichseigenschaften in der Zeile „AutoBereiche“. Mehrere Autobereiche werden, wie auch im Screenshot abgebildet, kommasepariert hintereinander aufgelistet. 

Autobereiche verwalten 

Autobereiche sind Elemente in der für den Anwender geltenden Default-Layout-Bibliothek, also diejenige, die mit (=Default) gekennzeichnet ist. Welche Bibliothek die Default-Layout-Bibliothek eines/einer Nutzer:in ist, ergibt sich aus der entsprechenden Benutzerkontexteinstellung in der Gruppe Bibliotheken.  

Das folgende Video gibt einen Einblick in die Verwaltung von Autobereichen:

Eigene Bibliothek für Autobereiche 

Der Übersichtlichkeit halber kann es Sinn machen, Autobereiche in eine eigene Layout-Bibliothek auszulagern. Diese muss dann eine Unterbibliothek der geltenden Default-Layout-Bibliothek sein, damit die Autobereiche vom System gefunden werden können.

Autobereiche zu Bibliotheken hinzufügen

Um Autobereiche zu Bibliotheken hinzuzufügen muss der Bereich einfach auf der Seite selektiert und mit gedrückter Strg-Taste auf den Namen der Layoutbibliothek gezogen werden, in die der Bereich eingefügt werden soll. Zum Fallenlassen muss zuerst die Maustaste, dann die Strg-Taste losgelassen werden. Anschließend muss im Dialog ein Namen für den Bereich vergeben und ggf. vorhandene Textzuordnung am Bereich in der Layoutbibliothek aufgehoben werden.

Im folgenden Video wird gezeigt, wie Autobereiche zu Bibliotheken hinzugefügt werden können:

Anwendungsbeispiele/Übungen für Autobereiche

Autobereiche verwenden & Versatz bei der Bildunterkante

Im folgenden Video wird gezeigt, wie mithilfe einer Layout-Regel die Position unabhängig von den Abstandsregeln anderer Bereiche festgelegt werden kann. Zudem wird der Versatz bei der Bildunterkante thematisiert und die Verwendung von Autobereichen.

Layout-Regeln “Horizontal Ausrichten” und “Vertikal Ausrichten”

Im folgenden Übungsvideo werden Layout-Regeln, die für Autobereiche gelten, vorgestellt – in diesem Beispiel die Layout-Regeln “Horizontal Ausrichten” und “Vertikal Ausrichten”. Diese werden auf eine Bildunterschrift angewendet:

Bildunterschrift innerhalb des Bildes ausrichten

Im folgenden Übungsvideo wird gezeigt, wie eine BU innerhalb eines Bildes ausgerichtet werden kann:

Verwandte Seiten

^{Nur für PEIQ-Mitarbeiter:}

https://peiq.atlassian.net/wiki/spaces/CORE/pages/737378561