Layout, Dialogfeld "Stil-Generator"

Artikel
09/03/2008

Aktualisiert: November 2007

Auf der Seite Layout des Dialogfelds Stil-Generator können Sie Seitenlayoutattribute für Cascading Stylesheets (CSS) definieren. Attribute für das Seitenlayout bestimmen die Art, in der Elemente im Fluss des HTML-Streams positioniert werden. Sie können diese Attribute entweder direkt HTML-Elementen zuweisen oder zu den CSS-Formatierungsregeln hinzufügen.

So wenden Sie Layoutattribute direkt auf HTML-Elemente auf der Seite an

Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designers, und wählen Sie über das Fenster Dokumentgliederung ein zu formatierendes Element aus.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Format auf die Option Stil.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Layout.

Das Dialogfeld Layout, Stil-Generator wird im rechten Bereich angezeigt.

Wenn Sie Formate den in der Entwurfsansicht ausgewählten Elementen zuweisen, werden CSS-Formatattribute inline in das HTML-Markup für diese Elemente eingefügt. Wechseln Sie zur HTML-Ansicht, um die neu eingefügten Formatattribute zu überprüfen.

So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Layoutattribute hinzu

Öffnen Sie ein vorhandenes externes Stylesheet, und platzieren Sie die Einfügemarke zwischen die geschweiften Klammern ({ }) hinter der Auswahl für die gewünschte Stilregel.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Stile auf die Option Stil erstellen.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Layout.

Das Dialogfeld Layout, Stil-Generator wird im rechten Bereich angezeigt.

Hinweis:
Das Menü Stile wird angezeigt, wenn Sie ein externes CSS-Stylesheet zum Bearbeiten öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für eine Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt.

Eine in einem externen Stylesheet definierte CSS-Stilklasse kann auf ein Element im <BODY>-Element einer Webseite (in diesem Fall auch auf das <BODY>-Element selbst) angewendet werden, indem Sie die CSS-Stilauswahl als CLASS-Eigenschaft für das Element zuweisen.

Die folgenden Optionen sind auf der Seite Layout im Dialogfeld Stil-Generator verfügbar.

Aufgaben

UI-Elemente

Flusssteuerung

Diese Gruppe von Attributen steuert den Fluss von Elementen im HTML-Dokument. Die Vorschaubereiche neben der Auswahl unter Flusssteuerung werden den ausgewählten Optionen entsprechend aktualisiert. Die folgenden Attribute können sich sowohl auf die Darstellung als auch auf die Leistung auswirken, wenn Seiten in einem Browser angezeigt werden.

Sichtbarkeit
Setzt entweder den Wert Ausgeblendet (nicht sichtbar) oder Sichtbar der Sichtbarkeit-Eigenschaft. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Ausgeblendet oder Sichtbar aus. Wenn Sie z. B. Ausgeblendet auswählen, wird das folgende CSS-Markup eingefügt:

VISIBILITY:hidden

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Anzeige
Legt die DISPLAY-Attributwerte für ein Element fest. Sie können angeben, ob ein Element angezeigt werden soll und ob ein angezeigtes Element als Blockelement oder im linearen Fluss angezeigt werden soll. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Nicht anzeigen, Als Blockelement oder Als Einflusselement aus. Ein Blockelement beginnt i. d. R. mit einer neuen Zeile und kann nicht größer sein als sein übergeordneter Container. Ein formatiertes <H1>-Element in einem <BODY>-Element kann z. B. nicht größer sein als das <BODY>-Element, das dieses enthält. Ein Inlineelement beginnt i. d. R. nicht mit einer neuen Zeile, und die Größe wird von der Höhe und Breite des eigenen Inhalts bestimmt. Wenn Sie z. B. Als Blockelement auswählen, wird das folgende CSS-Markup eingefügt:

DISPLAY:block

Hinweis:
Wenn der Wert des Attributs <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Hinweis:
Die Visibility-Eigenschaft und die Display-Eigenschaft stehen miteinander in Beziehung, sind jedoch nicht identisch. Das Ausblenden eines Elements verringert nicht die Zeit, die ein Browser zum Anzeigen einer Seite benötigt. Elemente, die nicht angezeigt werden, werden hingegen vom Browser ignoriert. Deshalb zeigt ein Browser eine Seite schneller an, die nicht angezeigte Elemente anstelle von lediglich ausgeblendeten Elementen enthält. Wenn der Textfluss um ausgeblendete Elemente festgelegt ist, entsteht zudem der Eindruck, dass der Text um einen leeren Bereich umbrochen wird. Berücksichtigen Sie diese Faktoren bei der Auswahl der Layouteigenschaften.

Die Visibility-Eigenschaft und die Display-Eigenschaft stehen miteinander in Beziehung, sind jedoch nicht identisch. Das Ausblenden eines Elements verringert nicht die Zeit, die ein Browser zum Anzeigen einer Seite benötigt. Elemente, die nicht angezeigt werden, werden hingegen vom Browser ignoriert. Deshalb zeigt ein Browser eine Seite schneller an, die nicht angezeigte Elemente anstelle von lediglich ausgeblendeten Elementen enthält. Wenn der Textfluss um ausgeblendete Elemente festgelegt ist, entsteht zudem der Eindruck, dass der Text um einen leeren Bereich umbrochen wird. Berücksichtigen Sie diese Faktoren bei der Auswahl der Layouteigenschaften.

Textfluss zulassen
Legt Attribute fest, die den Textfluss um ein Element bestimmen. Wählen Sie entweder <Nicht festgelegt> (keine Option ausgewählt), Text nicht auf jeder Seite zulassen, Nach rechts oder Nach links aus. Wenn Sie z. B. Nach rechts auswählen, wird das folgende CSS-Markup eingefügt:

FLOAT:left

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.
Unverankerte Objekte zulassen
Legt Attribute fest, durch die gesteuert wird, an welcher Stelle einer Seite unverankerte Elemente zulässig sind. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Auf jeder Seite (unverankerte Objekte links oder rechts auf der Seite zulässig), Nur rechts (unverankerte Objekte nur rechts auf der Seite zulässig), Nur links (unverankerte Objekte nur links auf der Seite zulässig) oder Nicht zulassen (keine unverankerten Objekte auf der Seite zulässig) aus. Wenn Sie z. B. Nur rechts auswählen, wird das folgende CSS-Markup eingefügt:

CLEAR:left

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Inhalt

Überlauf
Legt Attribute fest, durch die das Verhalten von Elementen bestimmt wird, deren Inhalt die definierte Höhe und Breite des Elements überschreitet. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Bildlaufleisten verwenden, falls nötig (Bildlaufleisten werden angezeigt, wenn der Inhalt die definierte Elementgröße überschreitet), Bildlaufleisten immer verwenden (Bildlaufleisten werden immer angezeigt), Inhalt ist nicht abgeschnitten (Element wird dem Inhalt entsprechend erweitert) oder Inhalt ist abgeschnitten (Inhalt, der die Elementgröße überschreitet, wird nicht angezeigt) aus. Wenn Sie z. B. Inhalt ist nicht abgeschnitten auswählen, wird das folgende CSS-Markup eingefügt:

OVERFLOW:visible

Hinweis:

Wenn der Wert des Attributs <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Ausschneiden

Legt Attribute fest, durch die gesteuert wird, welcher rechteckige Teil eines Elements angezeigt wird. Sie können z. B. nur die obere rechte Ecke eines Elements anzeigen lassen. Geben Sie in mindestens einem der Felder (Oben, Unten, Links oder Rechts) einen Wert ein, und wählen Sie eine Maßeinheit aus: px (Standard), pt, pc, mm, cm, in, em, ex oder %.

Es können nur absolut positionierte Elemente abgeschnitten werden. Die angegebenen Werte beziehen sich auf die Elementbegrenzungen. Wenn Sie z. B. für Top einen Zuschnittswert von 40px festlegen, ist der Teil des Elements zwischen 0px (oberer Rand des Elements) und 40px nicht sichtbar. Wenn Sie entsprechend in den Feldern Oben und Unten den Wert 50 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

CLIP: rect(50px auto 50px auto)

Hinweis:
Wenn Sie nicht in allen vier Feldern Zuschnittswerte eingeben, wird den übrigen Feldern der Wert auto zugewiesen, und die nicht zugewiesenen Begrenzungen werden nicht abgeschnitten.

Seitenumbrüche drucken

Mit den folgenden Attributen wird gesteuert, an welcher Stelle Seitenumbrüche in Elementen auftreten, die den Stil verwenden.

Vor
Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Automatisch oder Seitenwechsel erzwingen aus. Wenn Sie z. B. Seitenwechsel erzwingen auswählen, wird das folgende CSS-Markup eingefügt:

PAGE-BREAK-BEFORE:always
Nach
Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Automatisch oder Seitenwechsel erzwingen aus. Wenn Sie z. B. Seitenwechsel erzwingen auswählen, wird das folgende CSS-Markup eingefügt:

PAGE-BREAK-AFTER:always