|
|
Flexibel wachsende Tabellen mit abgerundeten Ecken und Schatten
Mein Ziel: Eine Tabelle mit abgerundeten Ecken und Schatten in NetObjects-Fusion zu erstellen. Als erstes zeige ich die in beiden Richtungen flexibel wachsende Tabelle.
Erst am Schluss kommt als Belohnung die einfache Version, bei der die Tabellen-Breite nicht variabel ist.
|
Teil 1 - Vorarbeit im Grafik-Programm
Als erstes entscheide ich mich für die Hintergrundfarbe meines NOF-Layouts. Diese lautet bei mir #4069A7.
Mit meinem Grafikprogramm (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 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.
|
|
|
|
Die Rundung stelle ich in den Pfad-Werkzeugeinstellungen ein:
|
|
|
|
Jetzt teile ich mit dem Trennen-Werkzeug das Arbeitsblatt in neun Teile auf:
|
|
|
|
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.
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.
Das Arbeitsblatt speichere ich zusätzlich als UFO.Datei, um eventuelle Veränderungen im Nachhinein vornehmen zu können.
|
Teil 2 – 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:
|
|
|
|
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!
Die mittlere Zelle kann ich nun als Ablageplatz für eine weitere Tabelle verwenden, oder z.B. mit Text versehen.
|
|
|
|
Der Schatten ist abgeschnitten, die Zellenbegrenzungen verschieben sich immer wieder?
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:
|
|
|
|
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.
|
Und nun die einfachere Version - Tabellenbreite ist festgelegt
Sollte die Breite der Tabelle immer gleich bleiben, wird die Sache um einiges einfacher. Wir brauchen nur noch drei Grafik-Schnipsel:
|
|
|
|
Diese fügen wir als Hintergrund der NOF-Zellen wie folgt ein:
|
|
|
|
Die Einfügung der Hintergrundgrafiken erfolgt über das Eigenschaftsfenster 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:
|
|
|
|
Viel Spaß beim Tüfteln! :-))
Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Forum.
|
|
Nach oben
|
|
|
