Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Formatvorlagen, CSS in NOF anwenden

Formatvorlagen in NetObjects Fusion - Was ist das?

(1/1)

nettesekel:
Fast jeder von Euch wird schon irgendwann mal etwas über CSS gelesen haben.
Die so genannten CSS-Klassen nennen sich in NOF "Formatvorlagen".

Wenn ihr mal einen Blick in den Quelltext einer NOF-Seite werft, werdet ihr immer auf diese zwei markierten Zeilen stoßen. Das sind Links zu den CSS-Dateien für unser Projekt.
Der erste Link führt zur „style.css”. In diese CSS-Datei werden alle Formatierungen aus dem SiteStyle ausgelagert. Also all die Einstellungen, die wir in der Design-Ansicht vornehmen.
Der zweite Link führt zur „site.css”. In diese CSS-Datei werden alle Formatvorlagen ausgelagert, die wir aus der Arbeitsansicht heraus anlegen.

nettesekel:
Was hat es mit diesen CSS-Dateien auf sich und wozu dienen sie?

Es gibt zwei grundlegende Möglichkeiten,  die Texte, Bilder, Abstände etc. unserer Website zu formatieren.

Die erste Variante ist das Formatieren über die Eigenschaften-Palette. Hierbei markiert man in der Arbeitsansicht einen Text, eine Tabellenzelle oder was auch immer und wählt in der Eigenschaftenpalette aus, wie diese später auf der Website dargestellt werden sollen.

Die zweite Variante ist die Formatierung mit Hilfe von CSS. Hierbei legt man verschiedene Formatierungen zentral fest. Das heißt, die verschiedenen Formatangaben werden unter verschiedenen Namen zusammengefasstund in externe Dateien geschrieben. In der Website weist man einem Text, einer Tabellenzelle etc. dann nicht mehr jedes Format einzeln zu, sondern nur den Namen der Formatvorlage.
Über die Links im unteren Screen werden diese Formatierungen dann aus den externen Dateien ausgelesen und umgesetzt.

Anhand eines kleinen Beispiels möchte ich erläutern, welche Vorteile es bringt, die zweite Variante zu nutzen.

Ich formatiere eine Tabellenzelle so, dass die Hintergrundfarbe der Zelle gelb ist, die Schrift möchte ich in Arial, fett und grau haben. Oben und unten in der Zelle möchte ich einen Abstand von je 5 px haben und links und rechts einen Abstand von je 10 px. Diese Art von Formatierung nehme ich auf allen meinen Seiten immer wieder vor, damit das Gesamtbild der Seite einheitlich erscheint.

Der Quelltext einer so formatierten Zelle sieht wie folgt aus:



--- Code: HTML5 ---<td width="107"> <p style="font-family: Arial,Helvetica,Geneva,Sans-serif;  color: rgb(128,128,128); font-weight: bold;  background-color: rgb(255,255,0); padding: 5px 10px;  margin-bottom: 0px;">&nbsp;</p></td>

Ich lege ich eine Formatvorlage mit exakt denselben Formatierungen an und weise sie der Zelle zu. Die Zelle wird identisch aussehen, aber der Quelltext einer solchen Zelle sieht dann so aus:


--- Code: HTML5 ---<td width="107" class="ZelleGelb"> <p style="margin-bottom: 0px;">&nbsp;</p></td>

Das heißt, der Quelltext unserer Seiten wird durch die Verwendung von CSS-Klassen deutlich schlanker. Der viel größere Vorteil der CSS-Klassen (oder auch Formatvorlagen) besteht jedoch darin, dass mit einer Änderung der Klasse diese Änderung automatisch im ganzen Projekt umgesetzt wird.

nettesekel:
Im Klartext bedeutet das: Sollen die von Hand gelb formatierten Zellen doch lieber grün sein, dann muss ich mich durch alle Seiten meines Projektes klicken, jede Zelle mit dieser Formatierung anklicken, um ihre Hintergrundfarbe über die Eigenschaftenpalette von gelb in grün zu ändern. Will ich diese Änderung online umsetzen, muss ich all diese Seiten auch noch erneut publizieren.
Bei den CSS formatierten gelben Zellen, ändere ich die Hintergrundfarbe der Formatvorlage einmalig und publiziere nur eine einzige Seite. Damit habe ich aber im ganzen Projekt jede Zelle mit der Klasse „ZelleGelb” in eine grüne Zelle verwandelt.

Navigation

[0] Themen-Index