Alle Formate, die durch CSS-Formatvorlagen erstellt und mehreren Tabellenzellen zugewiesen werden, können mit wenigen Klicks zentral geändert werden. Dazu gehören Textformate, Hintergründe, Abstände, Rahmen etc.. Ist die Website mit CSS-Formatvorlagen erstellt, kann das Aussehen kinderleicht geändert werden.

Noch ein großer Vorteil: Beim Verwenden der Formatvorlagen werden keine unnötige Formatangaben im HTML-Code der Seiten geschrieben werden. Als Beispiel:

a) HTML-Code für eine Tabellenzelle mit blauem Hintergrund und 6 px Abständen:


b) HTML-Code für die gleiche Zelle mit Formatvorlage:


Die Angabe Class="zelle_blau" ersetzt alle Formatierungen. Wenn die Seite zwanzig gleiche Zellen hat, wiederholt sich der Code bei manueller Zellenformatierung zwanzig mal, statt ein einziges Mal in der Formatvorlage enthalten zu sein (Verwendung von externen CSS-Style sheets).

Es geht los:

Wir befinden uns in der Seitenansicht. Wir klicken auf "Text", dann auf "Formatvorlagen verwalten" (Screenshots sind mit der Version NOF10 gemacht):



 CSS-Formatvorlage_2.jpg (Größe: 22,1 KB / Downloads: 220)


Wir klicken auf "neu", tragen einen Namen für unsere Formatvorlage ein und wähle immer "siteübergreifend:



 CSS-Formatvorlage_3.jpg (Größe: 66,73 KB / Downloads: 206)




 CSS-Formatvorlage_4.jpg (Größe: 70,88 KB / Downloads: 168)


Wir stellen die Einstellungen für die Zelle ein. Ich möchte hier nur einen Textabstand zu den Rändern und einen blauen Hintergrund bewirken:



 CSS-Formatvorlage_5.jpg (Größe: 65,65 KB / Downloads: 189)




 CSS-Formatvorlage_6.jpg (Größe: 63,65 KB / Downloads: 114)


Im Vorschaufenster sehen wir sofort den Abstand sowie die Hintergrundfarbe. Wir bestätigen die Angaben.

Jetzt zeichnen wir eine Tabelle und wählen eine Zelle. Im Zelleneigenschaftsfenster weisen wir die Formatvorlage zu. Gleichzeitig stellen wir routinemäßig die Zelle auf "vertikal" > "oben":



 CSS-Formatvorlage_7.jpg (Größe: 58,68 KB / Downloads: 162)


Wenn wir einen Text in die Zelle eintragen, sind die Abstände sichtbar. So sieht die fertige Zelle aus:



 CSS-Formatvorlage_8.jpg (Größe: 47,05 KB / Downloads: 170)


CSS-Formatvorlagen können auch nur für Texte, statt für Zellen verwendet werden. In dem Fall wählt man die Formatvorlage aus dem Karteireiter "Text" im Eigenschaftsfenster der Zelle.

Möchte man zum Beispiel ein Wort innerhalb des Textes hervorheben, so wählt man nur für dieses Wort im Textformat die Formatvorlage "text_fett". Es wird nur das gewählte Wort hervorgehoben.

Die CSS-Formatvorlagen greifen nur, wenn keine manuell eingetragene Formate in den Zellen enthalten sind. Wie man solche Formate löscht, ist hier erklärt.

Bei der Bennennung von Formatvorlagen sollte man folgende Regeln beachten:

• Keine Leerzeichen, Sonderzeichen etc. verwenden
• Formatvorlagen nie mit einer Zahl beginnen
• Keine Grossbuchstaben verwenden (relevant bei XHTML)
• Leerzeichen evtl. durch Unterstrich ersetzen oder Bindestrich (Minuszeichen) verwenden
  

Ergänzend zu diesem Thema ist mir heute dieses gute Tutorial von Got Fusion für NOF12 aufgefallen:

Text CSS-Format (style.css) definieren > Design-Ansicht

Individuelle CSS-Formatvorlagen (site.css) einrichten > Seitenansicht