Rahmen mit Hintergrundbildern
in NOF erstellen

zwei unterschiedliche Methoden für Wechselbilder

Cadfael

by Cadfael

Vorwort

Es gibt bereits einige NOF-TUTs im Internet, wie man Rahmen mit gerundeten Ecken erstellt. Dazu wird meist eine Tabelle mit drei Spalten und drei Zeilen benutzt. Die Zellen an den Ecken enthalten dabei Bilder mit Rundungen; in der mittleren Zelle kann man den Text bzw. die Inhalte platzieren.
Diese Methode war mir aber zu “kompliziert” - besonders, wenn mehrere Tabellen nebeneinander in einer Reihe stehen sollen, die auch bei reiner Textvergrößerung die gleiche Länge haben sollen.
 
Viele unerfahrene Webdesigner setzen der Einfachheit halber Hintergrundrahmen aus einem einzigen BIld ein. Das geht aber schief, da FireFox die alleinige Vergrößerung des Textes zulässt - was solch eine Design-Mehtode total zerschießt!
 

 

Also suchte ich nach einem einfacheren Weg, solche gerundeten Rahmen einfacher und dennoch flexibel und dynamisch zu realisieren.
Das Ergebnis waren zwei Verfahren, bei denen der Rahmen nicht aus neuen, sondern lediglich aus zwei bzw. drei Tabellenzeilen besteht. Zumindest bei meiner “Drei-Zeilen-Methode” darf der Text unendlich lang werden, ohne dass es Darstellungsprobleme gibt. Wer allerdings ca. 20% “Spielraum” lässt, ist auch mit der “Zwei-Zeilen-Methode” auf der sicheren Seite!
 
Rahmen mit CSS zu erstellen geht auch! Allerdings werden sie nicht in allen (gebräuchlichen) Browsern korrekt dargestellt. Daher hat die Methode mit Hintergrundbildern ihre Berechtigung.
 


Problem

Größtes Problem für die meisten Amateur-Webdesigner dürfte die Grafikbearbeitung sein. Die ganzen Hintergründe müssen ja erstmal erstellt und “zurechtgeschnitten” werden.
Eigentlich bräuchte man hierfür ein separates TUT, das sich dann aber auch an mehreren Grafikprogrammen ausrichten muss ...

Clearpix-40

Erste Überlegungen

Meistens braucht man für ein Projekt nur ein, zwei oder drei verschiedene Rahmenbreiten. Das herkömmliche “Neun-Zellen-Rahmenmodell” ist zwar extrem flexibel (da jede gewünschte Breite erzielt werden kann), aber auch “kompliziert” mit den vielen Spalten und Spaltenbreiten.
 
Also habe ich mit einem Grafikprogramm einen Rahmen erstellt, der lediglich aus einem Ober- und Unterteil besteht. So brauche ich (zumindest pro eingesetzter Spaltenbreite) nur zwei Bilder und eine Tabelle mit zwei Zellen bzw. Zeilen.
 

ScreenShot Bild von Beispiel 1

NOF ScreenShot, Beispiel 1

Beispiel 1

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Clearpix-40

Reale HTML-Ansicht

Da jeder Browser seine eigenen Gesetze in der Darstellung hat und FireFox sogar das alleinige Zoomen des Textes zulässt, ist es sehr wichtig, den Hintergrund / die Tabelle dynamisch zu gestalten.
 

Hintergründe

Am besten ist es, seinen Hintergrund im PNG-Format mit transparentem Hintergrund zu gestalten; besonders, wenn man Schatten beim Rahmen einsetzt. Ich verwende hier allerdings Bilder im GIF-Format - ebenfalls mit transparentem Hintergrund.
Die Bilder sollten dabei immer breiter sein, als der tatsächliche Rahmen! So wiederholen sich die Hintergrundbilder nicht sofort.
 

Oberer Hintergrund

In “Beispiel 1” (oben) ist der obere Hintergrund 140px hoch. Sein Hintergrundbild ist aber 750px hoch! Der Rest des Hintergrundes wird nicht mehr dargestellt, da der Hintergrund der Zelle und nicht der gesamten Tabelle zugeordnet ist
 
Die Breite meines “sichtbaren Rahmens” beträgt hier 200px, der Schatten ist weitere 7px breit. Die Breite der Tabelle muss also mindestens 207px betragen.
In “Beispiel 1” beträgt die Tabellenbreite 210px. Da das Hintergrundbild 250px breit ist, dürfte die Tabelle maximal 250px breit sein, bevor sich der Hintergrund wiederholt.
 
In die obere Zelle ist ein Layout-Bereich gelegt, der 200px breit ist. Durch den aufgelegten Layout-Bereich kann man Texte Bilder, Tabellen etc. frei innerhalb des Rahmens positionieren  und ist auf keine Ausrichtung in einem Textfeld angewiesen.
 

Unterer Hintergrund

Auch das untere Hintergrundbild ist 250px breit. Der “sichtbare Teil der Rahmenhöhe” bestimmt, welchen Abstand Texte und Bilder zur unteren Kante des Rahmen “automatisch” haben. Hier muss man bei eigenen Entwürfen experimentieren ...
 
Auch hier ist die Höhe des Hintergrundbildes nicht 40px, sondern in Wirklichkeit 100px. Damit die Höhe aber immer fest ist, habe ich ein Clearpixel 40 x 40px als Abstandshalter gelegt.
 

Die hier von mir eingesetzten Hintergründe dürfen gerne für eigene Projekte genutzt und / oder verändert werden!
Da ich sie selbst mit CorelDraw erstellt habe, sind sie (meines Wissens) nicht urheberrechtlich geschützt. An die Hintergrundbilder kommt man, indem man mit der rechten Maustaste in den jeweiligen Hintergrundbereich klickt.

 


SCS-0105

Tabelle(nspalte)-Eigenschaften

Aktion

Webdesign

ScreenShot Bild von Beispiel 1

Reaktion

Ärger mit der Darstellung

Auch dieser “komplexe Rahmen” besteht aus einer zweizeiligen Tabelle mit einem oberen und einem unteren Hintergrundbild.
 
Damit sich die Tabelle bei verschiedenen Browsern und Einstellungen nicht zickig verhält ist es wichtig, dass sowohl in den Tabellen-Eigenschaften als auch den Tabellenspalten-Eigenschaften der beiden Zellen die Höhe auf “Automatisch” steht!
Die vertikale Ausrichtung sollte “Oben” sein, damit es nicht zu Versatz kommt!
 
Das (“Erweitert”) Feld “Umbruchgeschützte Leerzeichen generieren” sollte man unbedingt weg klicken, da es anderenfalls zu Darstellungsproblemen kommen kann.
Dies sollte man aber erst tun, nachdem man einen Layout-Bereich in der oberen Zelle und das Clearpixel in der unteren Zelle platziert hat.

Clearpix-40


Mehrere Rahmen mit gleicher Höhe nebeneinander

Eine gemeinsame Tabelle für mehrere Rahmen hat den Effekt, dass alle horizontalen Zellen gleich in der Höhe mitwachsen, sobald eine Zelle wegen der Browser-Darstellung länger wird.
 
Mit der herkömmlichen “Neun-Zellen-Methode” ist es fast unmöglich, solch eine komplexe Tabelle mit dutzenden von Zellen herzustellen.
 

Mit meiner Methode ist es hingegen kinderleicht!
Selbst vier Rahmen nebeneinander und drei untereinander würden nur 24 Zellen und drei Clearpixel bedeuten - das hat man in Windeseile bewerkstelligt!
Hier mal das Beispiel einer Tabelle mit drei Rahmen nebeneinander und zwei untereinander. Oben der NOF-Screenshot, der den Aufbau verdeutlicht, darunter die fertige html-Darstellung.

ScreenShot Bild von Beispiel 2

 
Hier die Ansicht als echte Tabelle mit Layout-Bereichen.
Wer in Firefox nur den Text vergrößert, wird sehen, dass dieser Rahmen nicht so schnell zerschossen wird.
 

Beispiel 2A

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Beispiel 2B

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Beispiel 2C

Cadfael

Dies ist ein Versuchstext.
Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Clearpix-40

Beispiel 2D

Cadfael

Dies ist ein Versuchstext.
Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Beispiel 2E

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Beispiel 2F

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Clearpix-40


ScreenShot Bild von Beispiel 3

NOF ScreenShot, Beispiel 3

Beispiel 3

Dies ist ein Versuchstext. Es ist ein dummer, nichts sagender Text. Lassen wir ihm sein Leben, denn auch er hat seine Berechtigung!

Clearpix-40

Reale HTML-Ansicht

ACHTUNG!

Wegen der dynamischen Einstellung muss der obere Layout-Bereich bei dieser Lösung ebenfalls das Hintergrundbild der oberen Tabellenzeile bekommen!
Ansonsten hat der Layout-Bereich keine feste Höhe (hier 50px), sondern “rutscht hoch” bis zum nächsten Element - und das gesamte Layout wird zerschossen.

Clearpix-40

Unendliche Weiten

Bei diesem Rahmen nutze ich drei statt zwei Hintergrundbilder. Vorteil ist, dass der Mittelteil unendlich lang werden darf.
 
Das mittlere Hintergrundbild ist nur 20px hoch (0,26KB groß) und wiederholt sich immer wieder.
Als oberes Hintergrundbild habe ich das obere Hintergrund aus den anderen Beispielen genommen - damit nur eine Datei geladen werden muss. 750px wäre normalerweise aber viel zu lang. Es werden ja nur 50px Höhe genutzt. Auch das untere Hintergrundbild wurde vom ersten Beispiel übernommen.
 
Man kann also auch beide Methoden auf einer Seite bzw. Website einsetzen und braucht insgesamt nur drei Bilder pro Breite. Das spart Ladezeit für den Besucher und erleichtert die Asset-Verwaltung. Bleibt die innere Rahmenfarbe gleich und nutzt man nur andersfarbige Header, kann man zumindest das untere Bild mehrfach nutzen.
 
Auch hier gilt wieder:
Die “umbruchgestützten Leerzeichen generieren” wegklicken (nachdem beide Layoutbereiche und Clearpixel positioniert sind) und alle Höhen von Tabelle und Zellen auf “Automatisch” setzen.
 


Hintergrundbild

Nutzbare Maße (BxH)

Größe

BGR1-200-O.gif

200 x 750px

4,09 KB

BGR1-325-O.gif

325 x 750 px

4,64 KB

BGR1-550-O.gif

200+315 x 1000px

8,81 KB

BGR1-200-M.gif

200 x 20px (unendlich)

0,26 KB

BGR1-325-M.gif

325 x 20px (unendlich)

0,30 KB

BGR1-200-U.gif

1,19 KB

BGR1-325-U.gif

1,34 KB

BGR1-550-U.gif

1,22 KB

Auch die Größe zählt

Was nutzt das schönste Design, wenn die Seite endlos zum laden braucht? Auf dieser Seite habe ich für die Rahmen insgesamt acht GIFs eingesetzt. Die Höhe ist ja weitgehend variabel.
Selbst Nutzer von 56k Modems dürften alle Rahmen blitzschnell laden können; ein Grund, warum ich mich beim Dateiformat für GIFs statt PNG entschieden habe. Für PNGs spricht allerdings, dass sie bei Schatten nicht von der Hintergrundfarbe abhängig sind.
 
Dieser gesamte Tipp hat eine Gesamtgröße von 217KB ...