Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

Ein eigenes Design mit NOF - CSS-Formate und Zuweisung

CSS-Formatierungen in NetObjects Fusion: Inhaltsverzeichnis

Was ist CSS - Vorteile der Verwendung von CSS-Klassen?

Kurz und bündig: CSS (vom englischen CSS - Cascading Style Sheets) sind Formate, die das Aussehen der Website regeln. Die CSS-Formate werden in CSS-Dateien festgelegt.

Sobald Formate (z.B. Schriften, Hintergründe, Farben, Rahmen, Einstellungen, Ausrichtungen) in einer CSS-Datei hinterlegt werden, und die HTML-Datei eine Klassendefinition für bestimmte Elemente findet, ist das Format für ein Element festgelegt.

Die wesentlichen Vorteile:

  • Schlanker Quelltext, da keine Formate im HTML-Quelltext der Seite enthalten sind
  • Schnelle Design-Anpassung - Veränderungen werden zentral in der CSS-Class eingestellt, sie gelten ja für alle Elemente der Website, die mit dieser Class definiert sind.


Die Zuweisung der CSS-Class erfolgt ganz einfach mit dem Befehl: class= “name-der-class” im Tag im HTML-Feld des Eigenschaftsfensters.

Zu schwierig? Nein, mit NOF geht es zum Glück ganz einfach. Das werde ich nachfolgend erklären.

Zusatzwissen

Implementing CSS in NetObjects Fusion
CSS-Formatvorlagen erstellen und zuweisen
 

Wie erstelle ich CSS-Klassen (CCS-Regeln) in NetObjects Fusion?

NetObjects Fusion lässt die Verwendung von externen CSS-Klassen zu.

Im Programm NetObjects heißen diese CSS-Klassen “CSS-Formatvorlagen” oder CSS-Regel. Sie werden i.d.R. in einem einfachen Menü eingestellt und einfach im Eigenschaftsfenster dem Text oder der Zelle zugewiesen. Im Quelltext werden diese Einstellungen mit dem Code class=”name-der-class” vom Programm umgesetzt.

CSS-Formatvorlagen auf Design-Ansicht - Globale Format-Einstellungen:

Wir haben schon im Abschnitt “Design” beschrieben, wie man die Formatvorlagen für globale Hintergründe, Schriften, Link-Formate und Listen erstellt. Diese Formatvorlagen werden automatisch vom Programm  in der Datei “Style.css” geschrieben, die von NOF bei jedem Publizieren hochgeladen wird.

Auf Design-Ansicht können erfahrene Anwender mit Hilfe der Selektoren weitere CSS-Regeln erstellen:

33-Selektoren

CSS-Klassen können aber auch von erfahrenen Anwendern direkt im CSS-Code geschrieben werden:

34-CSS-Code

Hier erstellte Formatvorlagen werden in der Datei Style.css geschrieben.

Benutzerdefinierte CSS-Formatvorlagen auf Seitenansicht erstellen

Für alle Anwender  - auch Anfänger -  ist die Verwendung dieser Formatvorlagen problemlos umzusetzen. Diese werden in einer zweiten CSS-Datei: site.css festgehalten. Diese Formateinstellungen (Seitenansicht)  haben Vorrang über CSS-Einstellungen in der Style.css (Design-Ansicht). Die Methode wird im nächsten Abschnitt ausführlich beschrieben.

Ein Beispiel:

  • Textformat im in der Vorlage <p> (Design-Ansicht): Verdana 14 px, grau. (hier beschrieben)
  • Formatvorlage auf Seitenansicht, “text-rot”; Verdana 14 px, rot (nachfolgend beschrieben)

Wenn der Text markiert und mit der benutzerdefinierten Formatvorlage “text-rot” formatiert wird, gilt diese Formatvorlage. Die globale Einstellung für Textformate wird überschrieben.

Und so wird es gemacht:
 

Benutzerdefinierte CSS-Formatvorlagen in NetObjects erstellen

Wir befinden uns auf Seitenansicht:

0-NOF-Seitenansicht

Wir klicken im der Menüleiste auf “Text” > “Formatvorlage verwalten”:

18-NOF-CSS-Formatvorlage

Mit Klick auf “Formatvorlage verwalten” öffnet sich ein Eingabefenster:

19-NOF-CSS-Formatvorlage

Ich nenne die Formatvorlage “textbox”. Bitte keine Zahlen und keine Sonderzeichen in der Formatvorlage verwenden. Alle CSS-Formatvorlagen in NOF sollen “Site-übergreifend” sein. Seitenspezifische Vorlagen sind fehlerhaft, denn sie lassen sich nicht löschen,  und können zu Publizierungsproblemen führen

Meine Formatvorlage “textbox” wird die Anzeigeeinstellungen meiner Infobox auf Startseite des “Mondo”-Templates enthalten. Für diese Demo habe ich lediglich die Hintergrundfarbe, die Randfarbe, und die Textabstände zu den Rand eingestellt.

191-NOF-CSS-Formatvorlage

In der Definition (oben grün angezeigt) wird die Syntax der CSS-Class im Klartext angezeigt. Mit dem Erstellen dieser Formatvorlage wird von NOF vollautomatisch der Eintrag in die CSS-Datei (style.css) erledigt.

CSS-Formatvorlage einem Textfeld zuweisen

Ich ziehe an gewünschter Stelle im Layout ein Textfeld auf und kann auch schon Text eintragen. Ist das Textfeld aktiv, kann ich im Eigenschaftsfenster (abrufen mit F3 Taste) das Format zuweisen:

35-NOF-css-text-zuweisen

Nun sieht mein formatiertes Textkästchen wie folgt aus:

36-NOF-Anzeige-CSS-Einstellungen

CSS-Formatvorlage einer Tabellenzelle zuweisen:

Wir zeichnen eine Tabelle in gewünschter Breite und Höhe, stellen den Rahmen auf NULL. Nun klicken wir auf die Zelle, und weisen die CSS-Formatvorlage zu:

37-NOF-CSS-Tabellenzelle

Das Ergebnis:

38-NOF-CSS-Tabellenzelle

Zusatzwissen:

Tabellen sollten in den HTML-Ausgaben XHTML und HTML5 restriktiv verwendet werden. Sie können jedoch für die Darstellung von tabellarischen Inhalten oder für den Bedarf nach Zellen, die per CSS-Formatiert sind, punktuell verwendet werden.

CSS-Formatvorlagen Tabellen, Bildern, Layoutbereichen zuweisen

Für Elemente, die in im Eigenschaftsfenster keine Möglichkeit der Zuweisung einer Benutzerdefinierten Formatvorlage anbieten, bleibt die Möglichkeit, die Zuweisung im HTML-Code vorzunehmen.

CSS-Formatvorlage einer Tabelle zuweisen

Hier am Beispiel einer ganzen Tabelle:

Tabelle anklicken, es öffnet sich das Eigenschaftsfenster “Tabelleneigenschaften”.

Dort auf “HTML” klicken, im mittleren Reiter des HTML-Editors folgendes eintragen:

class=“textbox”
,

wobei “textbox” der Name der Formatvorlage ist, die ich weiter oben erstellt habe.

39-NOF-CSS-Tabelle

Ebenso wird eine benutzerdefinierte Formatvorlage für Bilder oder Layoutbereiche erstellt.

CSS-Formatvorlage einem Layoutbereich in NOF 2015 zuweisen


Wichtig ab NOF 2015:

Die CSS-Klasse kann jetzt bequem im Reiter Texteigenschaften eingetragen werden. Dazu im Menü “Ansicht” > “Rasteranalyse” aktivieren. In der Eigenschaftspalette des Layoutbereichs  Text-Eigenschaften > HTML - CSS im dafür vorgesehenen Feld die CSS-Klasse einfügen (class):

css-class-layout.

Überschriftsformate zuweisen

Überschriften werden in Design-Ansicht wie hier beschrieben erstellt.

Zugewiesen werden die Überschriftsformate wie folgt:

Titel markieren, im Texteigenschaftsfenster die Formatvorlage H1 bis H6 zuweisen:

41-NOF-Ueberschrifstformate zuweisen

Die Eingabe von Formaten direkt im Eigenschaftsfenster ist TABU!

Individuelle Textformatierungen, die nicht als Formatvorlage sondern einzeln zugewiesen sind, schaden dem Projekt. Beispiel:

Eine Textzeile wird im Eigenschaftsfenster in einem Grünton formatiert.  Es werden auf siebzig Seiten die Titel identisch formatiert. Im Nachhinein ändert sich das Farbschema  oder die Schrift der Überschriften.

Der Anwender muss sämtliche alte Formate einzeln entfernen und die Titelzeilen einzeln formatieren. Das geht gar nicht!

Mit der Benutzung von benutzerdefinierten Formatvorlagen kann es nicht passieren. Man passt die Schrift und die Farbe in der Formatvorlage an, alle l mit dem Format definierte Titel verändern sich entsprechend. So lässt sich eine korrekt erstellte Website mit einem neuen Design sehr schnell umformatieren.

Des Weiteren werden alle Einstellungen im Eigenschaftsfenster (und im CSS-Code-Editor) direkt im Quelltext der Seite geschrieben und blähen diese unnötig auf:

40-NOF-Formate



Nächste SeiteDemo-Vorlage - Mondo - Vorschau

Seite drucken