Ein eigenes Design in NOF - Netobjects Fusion

Tabellenzelle individuell gestalten und css-Formate einstellen

Ich wechsle wieder von der Vorschau zur Seitengestaltung und aktiviere mit Doppelklick die zweite Zeile meiner Tabelle.

Da ich jede Tabellen-Zelle mit automatischen Formaten versehen kann, die ich dann in einem Klick für alle Zellen verändern kann, mache ich mich allerdings zu diesem Zeitpunkt mit den Formatvorlagen vertraut. Bevor ich mit der Eingabe eines textes fortfahre, gebe einen Hintergrund und einen Rahmen für die Tabellenzelle als Formatvorlage ein.

Ich klicke auf der Seiten-Ansicht im oberen Menü auf Text > Formatvorlagen verwalten > Neu

Ich gebe im benutzerdefinierten Feld  einen Namen ein z.B. zelle_rahmen,  und aktiviere „Site-Übergreifend“
 

Nachfolgend sehen wir die fertigen Formatierungen mit der css-Definition im oberen rechten Bereich des Menü Formatvorlagen:

Jetzt möchte ich dieses Format für die Zelle unter dem Bild übernehmen:

Ich aktiviere die Zelle (dunkle Umrandung erscheint), öffne den zweiten Reiter der Zelleneigenschaften und suche in der Auswahl das zelle_rahmen Format.

Das wähle ich wie folgt aus:

Wunderbar, die Zelle erscheint  jetzt hellgrün mit grünem Rand. Um es ordentlich zu machen, muss ich auch die Zelle hinter dem Bild auf diese Weise formatieren, damit auch das Bild die grüne Umrandung zugewiesen bekommt. Da die Zelle vom Bild vollständig verdeckt ist, wähle ich sie mit rechtem Mausklick im Kontext-Menü aus (ZelleNr….)

Mit diesem System kann man beliebige Layout-Ideen umsetzen. Auf dieser Weise können schöne grafisch aufbereitet Banner mit Logo eingefügt, Schriftkreationen oder Wechselbilder. Der Phantasie sind keine Grenzen gesetzt.

Ich mache aber mit meinem Konzept weiter und plaziere eine vertikale Tabelle im Masterrahmen links für die vertikale Navigation  sowie eine Tabelle für meine Inhalte im Layoutbereich.  Sollten Dieser Bereiche andere Hintergründe haben, so wird dafür eine neue Formatvorlage erstellt. Ich vergebe an jede Zelle das Format zelle_rahmen, wie oben beschrieben.

So sieht das Erstergebnis meiner Bemühungen aus:

Doppelte Ränder lassen sich  mit der Eingabe verschiedener Formate für einzelne Zellen vermeiden. Man kann solche Gestaltungsprobleme mit der beliebigen Erstellung von Formatvorlagen lösen. Das passende Format steht so immer zur Verfügung.

Ein weiteres Tutorial zu CSS-Formatvorlagen findet Ihr hier:

http://www.nof-schule.de/forum/t-css-formatvorlagen-erstellen-und-zuweisen


Hier geht es geht weiter: Einfügung einer Navigationsleiste im Masterrahmen!


Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.


Nach oben

 

 

 

NetoojectsFusion XII