Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
CSS-Formatvorlagen erstellen und zuweisen
#1
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:

Code:
<style="background-color: rgb(175,186,203); padding: 6px;">

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

Code:
<class="zelle_blau">

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):


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


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


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



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


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:


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



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


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":


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


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


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


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.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#2
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



Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#3
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



Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  NOF-HTML-Einfuegen-Include-Funktion scrollbare Textfelder erstellen barbara0701 0 2.451 01.01.2013, 12:33
Letzter Beitrag: barbara0701



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!