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

Abgerundete Felder mit Ecken und Schatten

Einleitung

Dieses Tutorial zeigt die Erstellung von Tabellen mit abgerundeten Ecken. NOF-Tabellen haben die Fähigkeit, zu expandieren und zurückzuziehen - Ihre Anwendung ist trotz der Verwendung von tabellenfreien Layouts noch immer für die Darstellung tabellarischer Inhalte vertrebar und sogar sinnvoll.

Diese Tabellen sind in einigen NOF-Templates enthalten, deshalb ist ein Verständnis der Funktionsweise sinnvoll.

Alternativ wird hier die modernere Variante “abgerundete Ecken mit CSS” erläutert.

 

In beiden Richtungen expandierenden Tabellen

Vorarbeit im Grafik-Programm

Als erstes entscheide ich mich für die Hintergrundfarbe meines NOF-Layouts.  Diese lautet bei mir #4069A7.

Mit meinem Grafikprogramm (Beispiel hier Photoimpact 12) öffne ich ein neues Bild mit der Hintergrundfarbe: #4069A7. Größe 250 x 250 px. Dabei spielt es keine Rolle, wie groß meine Tabelle später auf NOF sein wird, denn sie wird sich beliebig vertikal und horizontal verändern können.

Mit dem Pfadzeichenwerkzeug zeichne ich ein abgerundetes Rechteck auf die Arbeitsfläche. Farbe: #EAEAEA, Ausrichtung: Mitte. Schatten: Nach Wunsch erstellen. Eventuell Umrandung wählen.

Tab1

Die Rundung stelle ich in den Pfad-Werkzeugeinstellungen ein:

Tab2

Jetzt teile ich mit dem Trennen-Werkzeug das Arbeitsblatt in neun Teile auf:

Tab3

Das Arbeitsblatt wird unter: “Datei > Weitere Speicherungsoptionen > Für web speichern > als html”  gespeichert. Gleichzeitig wird ein Ordner „Images“ automatisch generiert, wo die einzelnen „Bild-Schnipsel“ wieder zu finden sein werden. In früheren PI-Versionen direkt unter: “Datei > für web speichern”.

Alternativ: In Photoshop wählt man das Slice-Werkzeug, zeichnet die Slices (Schneidelinien) und wählt im Datei-Menü “Für  Web und Geräte speichern”. Ein ordner “Bilder” wird automatisch erstellt, wo sich die einzelnen Slices befinden..


Da meine Hintergrund-Grafik einen Schatten enthält, speichere ich sie als .jpg. Wenn kein Schatten erhalten wäre, wäre die Speicherung als .gif empfehlenswert. Wenn die Hinterrgundfarbe nicht fest steht kann der Schnipsel auch als transparenten .png gespeichert werden. Der Schatten passt sich dann jedem Hintergrund an.

Das Arbeitsblatt speichere ich zusätzlich in Photoimpact als UFO.Datei, um eventuelle Veränderungen im Nachhinein vornehmen zu können (Photoshop: psd-Datei).
 

Bei der heutigen Internetgeschwindigkeit werden Grafiken zunehmend mit transparentem Hintergrund erstellt. Sollte eine transparente Leinwand ausgewählt werden, so werden die Grafiken als transparente .pngs gespeichert (png 24).

 

Einbau in NOF

Ich öffne nun im NOF-Programm meine Seiten-Ansicht,  zeichne eine neue Tabelle mit drei Zeilen und drei Spalten. Textabstand 2, Zellenabstand 0, Rahmen: 0.

Den äußeren Zellen füge ich die passende Hintergrundgrafik ein, die ich zuvor mit dem Grafikprogramm erstellt und gespeichert habe. Dies erledigen unerfahrene Benutzer in 

Zelleneigenschaften > Hintergrund > Bild einfügen.

Fortgeschrittene Benutzer verwenden dafür CSS- Formatvorlagen. Wie die funktionieren wird hier beschrieben.

 Die Tabelle sieht in NOF so aus:

Tab4

Für die mittlere Zelle wähle ich als Hintergrundfarbe das hellere grau mit Hexa-Nummer: #EAEAEA.

Mit der Maus verschiebe ich die Linien solange, bis die Randbreite mit den Hintergrundgrafiken passt. Man sollte vor allem darauf achten, dass der Schatten nicht abgeschnitten wird. Siehe nächste Grafik!


Tab5

Der Schatten ist abgeschnitten, die Zellenbegrenzungen verschieben sich immer wieder?

Die mittlere Zelle kann ich nun als Ablageplatz für eine weitere Tabelle verwenden, oder z.B. mit Text versehen.

Ein sicherer Trick, um die Ecken zu fixieren: Das Einfügen von transparenten gifs exakt in Eckengröße in die Ecken. Die Linien können sich nicht mehr verschieben, die Grafik ist geschützt:

gif_ecken

Das Schöne ist, dass man diese Tabelle beliebig vergrößern kann… denn die Hintergründe der oberen, unteren, rechten und linken Kanten wiederholen sich automatisch.

Einfache Version - Tabelle expandiert nur vertikal

Sollte die Breite der Tabelle immer gleich bleiben, wird die Sache um einiges einfacher. Wir brauchen nur noch drei Grafik-Schnipsel:

hg1

Diese fügen wir als Hintergrund der NOF-Zellen wie folgt ein:

hg2a

Die Einfügung der Hintergrundgrafiken erfolgt über die Eigenschaftspalette der Zelle oder am besten gleich als CSS-Formatvorlage. (Siehe oben). Der Hintergrund für die Inhaltszeilen  wird als zentriert und vertikal wiederholen definiert. Für die Titel- sowie die Footerzeile wird die automatische Wiederholung deaktiviert.

Ränder und Abstände werden ebenfalls in den CSS-Formatvorlage eingestellt.

Am Schluss sieht meine Tabelle wie folgt aus:

hg3

Abgerundete Ecken mit CSS


In Design-Ansicht > Selektoren bitte CSS-Code aufrufen und eine CSS-Regel wie auf Seite CSS-Formatvorlagen beschrieben erstellen.

Die Definitionen für Rand und Hintergrundfarbe werden hier vorgenommen:

css-felder-abgerundet

Gewünschte Farbe für den Hintergrund unter “Hintergrund” wählen.

Nun wollen wir die Ränder bearbeiten, hier die Erläuterung der verschiedenen Felder:

css-border

Rahmenfarbe und Breite definieren. Die abgerundete Ecke stellt man ein in dem man bei Radius ein Minuswert von z.B. -8px eingibt.

Nun Textfeld erstellen:

textfeld-mit-css-abrunden

Textfeld anklicken, in der Texteigenschaftspalette unter “Design” die gewünschte Formatvorlage zuweisen.

Schatten mit CSS

Die Schatten werden im Feld box-shadow definiert:

css-felder-schatten

Nächste Seite

Seite drucken