Formatieren des Inhalts
StyleVision bietet eine flexible Methode zum Zuweisen von Stilen zu Formatierungskomponenten im Design auf Basis von CSS. Nachfolgend sind die wichtigsten Aspekte der Stildefinition und -zuweisung in StyleVision aufgelistet:
•CSS-Stilregeln können sowohl für Blockkomponenten als auch für Komponenten innerhalb von Zeilen definiert werden.
•Vordefinierte Formate sind Blockkomponenten, für die bereits Stile definiert sind und die als "Hülle" für eine Gruppe von Komponenten verwendet werden können, die als Block behandelt werden sollen. Die Stile dieser vordefinierten Formate können durch Stile außer Kraft gesetzt werden, die Sie lokal für jede einzelne Komponente definieren. Dies entspricht dem CSS-Prinzip kaskadierender Stile.
•Klassenattribute können für Komponenten im Design deklariert werden und die Klasse kann als Selektor für externe oder globale Stilregeln verwendet werden.
•Sie können auf drei Ebenen Stile definieren und zwar, nach Priorität gereiht: (i) Stilregeln in externen Stylesheets, (ii) globale Stilregeln und (iii) lokale Stilregeln.
In diesem Abschnitt lernen Sie Folgendes:
•Zuweisen vordefinierter Formate
•Zuweisen eines Klassenattributs zu einer Komponente
•Definieren von Stilen in einem externen CSS Stylesheet und Hinzufügen dieses Stylesheets zu den Globalen Stilen des SPS
•Definieren globaler Stilregeln
•Definieren lokaler Stile für eine Auswahl mehrerer Designkomponenten
•Definieren lokaler Stile für eine einzelne Komponente
Zuweisen vordefinierter Formate
Ein Grund für die Zuweisung eines vordefinierten Formats ist, einer Komponente die Stileigenschaften dieses vordefinierten Formats zu geben. Wählen Sie im Design das Element headline aus und wählen Sie anschließend den Befehl Einschließen in | Spezieller Absatz | Überschrift 3 (Ü3) (oder aber Sie verwenden die Auswahlliste der vordefinierten Formate in der Symbolleiste). Das Element headline wird innerhalb der Tags für das vordefinierte Format gesetzt (Abbildung unten).
Beachten Sie, dass sich die Schriftarteigenschaften des Inhalts ändern und dass oberhalb und unterhalb des vordefinierten Formats vertikale Abstände hinzugefügt werden. Diese Eigenschaftswerte sind in dem vordefinierten Format h3 bereits enthalten.
Eine weitere Verwendung vordefinierter Formate ist die Gruppierung von Design-Komponenten in Blöcken, sodass sie als Block formatiert werden können oder dass ihnen als Gruppe Eigenschaften innerhalb einer Zeile zugewiesen werden können. Die praktischste vordefinierte Eigenschaft für diesen Zweck ist das vordefinierte Format div, welches einen Block ohne Zeilenabstände oberhalb oder unterhalb davon erstellt. Weisen Sie in Ihrem Design den Nodes newsitem, dateline, synopsis und source separate div-Komponenten zu. Ihr Design sollte ungefähr wie in der unten gezeigten Abbildung aussehen. Beachten Sie, dass in der div-Komponente, die das Element source enthält, auch der statische Text "Source: " enthalten ist, und dass sich das gesamte newsitem-Element innerhalb einer div-Komponente befindet.
Sie haben Komponenten nun in verschiedenen div Blöcken gruppiert. Weiter hinten in diesem Abschnitt erfahren Sie, wie man solchen Blöcken gruppierter Komponenten Stile zuweist.
Zuweisen von Komponenten zu Klassenattributen
Sie können für eine Klasse von Komponenten eine Stilregel definieren. So können Sie allen Überschriften die gemeinsame Eigenschaften zuweisen (z.B. eine bestimmte Schriftartfamilie, Linienstärke und Farbe). Dazu sind zwei Schritte erforderlich: (i) Sie müssen die Komponenten, die gemeinsame Eigenschaften haben sollen, einer einzige Klasse zuweisen; (ii) Sie müssen die Stileigenschaften für diese Klasse definieren.
Wählen Sie in Ihrem Design den Tag h3 aus und wählen Sie in der Seitenleiste "Stil" 1 Absatz aus (um das vordefinierte Format auszuwählen) sowie die Eigenschaftsgruppe Allgemein. Erweitern Sie die Eigenschaftsgruppe Allgemein und doppelklicken Sie anschließend auf das Wertefeld der Eigenschaft class und geben Sie ein header.
Diese bestimmte Instanz des Formats h3 ist nun einer Klasse mit dem Namen header zugewiesen. Wenn Sie Stileigenschaften für die Klasse header definieren (Stile aus einem externen Stylesheet oder globale SPS Stile), werden diese Eigenschaften auf alle Komponenten im SPS angewendet, die die Klasse header haben.
Hinzufügen eines externen CSS Stylesheet zum Fenster Gobale Stile
Stilregeln in einem externen CSS Stylesheet können Komponenten im SPS Design zugewiesen werden. Zuerst müssen die externen Stylesheets jedoch zu den globalen Stilen hinzugefügt werden, damit die Regeln darin auf Komponenten angewendet werden können. Gehen Sie in der Seitenleiste "Gobale Stile" (in der Design-Ansicht) folgendermaßen vor:
1.Wählen Sie den Eintrag Extern.
2.Klicken Sie in der Symbolleiste der Seitenleiste "Globale Stile" auf die Schaltfläche Hinzufügen. Daraufhin wird das Dialogfeld "Öffnen" geöffnet..
3.Suchen Sie nach der Datei C:\Documents and Settings\<username>\My Documents\Altova\StyleVision2025\StyleVisionExamples\Tutorial\QuickStart\QuickStart.css, die sich im Verzeichnis (Eigene) Dateien befindet, und klicken Sie auf Öffnen.
Das Stylesheet wird zu den globalen Stilen hinzugefügt. Es enthält die folgenden Regeln, die zu diesem Zeitpunkt relevant sind:
.header {
font-family: "Arial", sans-serif;
font-weight: bold;
color: red;
}
h3 {
font-size: 12pt;
}
Die Stilregeln für die Klasse header und das Element h3 werden kombiniert und erzeugen für das Element headline die folgende HTML-Ausgabe.
Definieren globaler Stilregeln
Globale Stilregeln können mittels CSS-Selektoren für das gesamte SPS definiert werden. Die Regeln werden direkt in der Seitenleiste "Gobale Stile definiert. Erstellen Sie nun für die Klasse header eine globale Stilregel:
1.Wählen Sie bei aktiver Design-Ansicht in der Seitenleiste "Gobale Stile" den Eintrag "Global".
2.Klicken Sie in der Symbolleiste auf die Schaltfläche Hinzufügen. Daraufhin wird ein leerer Eintrag für den Platzhalter-Selektor (*) erstellt. Dieser Selektor wird markiert angezeigt.
3.Geben Sie den Text .header ein, um den Platzhalter-Selektor zu ersetzen.
4.Erweitern Sie die Eigenschaftsgruppe Farbe und wählen Sie aus der Dropdown-Liste der Eigenschaftswerte color den Wert green aus (Abbildung unten).
In Fällen, in denen die globale Stilregel eine Eigenschaft definiert, die auch im externen Stilesheet definiert ist (die Eigenschaft color), hat der Eigenschaftswert in der globalen Stilregel Vorrang. Daher wird der Inhalt der Überschrift in der HTML-Vorschau grün angezeigt. Andere Eigenschaftsdefinitionen aus dem externen Stylesheet (die nicht durch eine Eigenschaft in einer globalen Stilregel außer Kraft gesetzt werden) werden beibehalten (in diesem Fall, font-family und font-weight).
Definieren von lokalen Stilen für mehrere Komponenten auf einmal
Lokale Stile können gleichzeitig für mehrere Komponenten definiert werden. Um in Ihrem Design festzulegen, dass der gesamte Textinhalt einer Nachricht (newsitem) die Schriftart "Arial" haben soll, klicken Sie auf die div-Komponente, innerhalb der sich das Element newsitem befindet und wählen Sie in der Seitenleiste "Stil" in der Spalte "Stile für" 1 Absatz. Wählen Sie anschließend in der Eigenschaftsgruppe Schriftart als font-family die Schriftart Arial aus. Diese Eigenschaft wird auch für alle 5 untergeordneten vordefinierten Formate übernommen.
Wählen Sie nun im Design die drei div-Komponenten rund um die Nodes dateline, synopsis und source aus (Halten Sie dazu die Umschalttaste gedrückt, während Sie auf die einzelnen div-Komponenten klicken). Wählen Sie in der Seitenleiste "Stil" 3 Absätze aus, anschließend die Eigenschaftsgruppe Schriftart und setzen Sie font-size auf 10pt. (Die h3-Komponente wurde nicht ausgewählt, da sie bereits die gewünschte Schriftgröße von 12pt hat)
Wählen Sie nun zum Abschluss die div -Komponente rund um das Element dateline aus. Wählen Sie in der Seitenleiste "Stil" in der Spalte "Stile für" den Eintrag 1 Absatz aus. Setzen Sie in der Eigenschaftsgruppe Schriftart font-weight auf bold und font-style auf italic. Wählen Sie in der Eigenschaftsgruppe Farbe für color den Eintrag gray aus. Die Ausgabe für das Element "Dateline" sollte nun folgendermaßen aussehen:
Beachten Sie, dass die für die div-Komponente definierten Stileigenschaften auch auf den statischen Text innerhalb der div-Komponente (d.h. auf den Doppelpunkt und das Komma) angewendet wurden.
Definieren von lokalen Stilen für eine einzelne Komponente
Ein lokaler Stil, der für eine einzelne Komponente definiert ist, setzt alle anderen Stile, die für diese Komponente auf höheren Ebenen des SPS definiert wurden, außer Kraft. Wählen Sie im Design das Element headline aus und weisen Sie ihm die Farbe "navy" zu (Eigenschaft color in der Eigenschaftsgruppe Farbe der Stileigenschaften). Die lokal definierte Eigenschaft (color:navy) setzt den globalen Stil für die Klasse .header (color:green) außer Kraft.
Wählen Sie die div Komponente, innerhalb der sich das source Element befindet. Setzen Sie in der Seitenleiste "Stil", während in der Spalte "Stile für" der Eintrag 1 Absatz ausgewählt ist, die Eigenschaft color in der Eigenschaftsgruppe color der Stileigenschaften auf gray (Abbildung unten). Setzen Sie in der Eigenschaftsgruppe Schriftart der Stileigenschaften die Eigenschaft font-weight auf bold. Diese Werte werden auf den statischen Text angewendet. Erinnern Sie sich, dass der statische Text, dass wir im letzten Abschnitt dem statischen Text "Source: " einen font-style-Wert italic zugewiesen haben. Die neuen Eigenschaften (font-weight:bold und color:gray) kommen zusätzlich zur Eigenschaft font-style:italic hinzu.
Wählen Sie nun in der Design-Ansicht den Platzhalter (Inhalt) des Elements "Source" aus. Setzen Sie in der Spalte "Stile für", während 1 Inhalt ausgewählt ist, die Eigenschaft color (in der Eigenschaftsgruppe Farbe der Stileigenschaften) auf black. Wählen Sie in der Eigenschaftsgruppe Schriftart für font-weight den Wert normal aus. Die neuen Eigenschaften werden für den Platzhalter-Node Inhalt des Elements source gesetzt und setzen die für die div-Komponente definierten Eigenschaften außer Kraft (siehe Abbildung unten).
Fertigstellen der Formatierung
Um die Formatierung in diesem Abschnitt fertigzustellen, wählen Sie die div-Komponente des Elements synopsis aus und in der Symbolleiste in der Auswahlliste der Vordefinierten Formate den Eintrag Absatz (p). Daraufhin werden dem Block die vordefinierten Stile des HTML-Elements p zugewiesen. Die HTML-Vorschau sollte nun etwa folgendermaßen aussehen:
Wenn Sie damit fertig sind, speichern Sie die Datei.