Slices

Dieses Tutorial soll Ihnen erklären, was Slices sind, wo sie angewendet werden und wie man sie mit einfachen Mitteln selber herstellen kann.
Jeder, der ab und zu im Internet surft, ist meist unbewusst schon auf Slices gestossen. Das sind diejenigen Bilder, die sich nach und nach aus Kacheln zu einem Ganzen zusammenfügen. Slices sind demnach nichts anderes als kleine Mosaiksteinchen.
Jetzt fragen Sie sich natürlich: wozu das Ganze. Man kann das Bild ja schliesslich auch im Stück laden. Da haben Sie schon Recht. Aber Slices haben einige gravierende Vorteile.
1) Mehrere kleine Dateien werden schneller geladen als eine Grosse. Das liegt in erster Linie einmal daran, daß die Datenpakete, weil weniger, schneller zusammengesetzt werden können. Aber auch der Verlust an Paketen und das dadurch entstehende Rückfragen des Browsers wird reduziert.
2) Mit Slices können auf einem Bild mehrere Links gesetzt werden. Das geht natürlich auch mit einer Imagemap, aber die ist nun erst recht wieder eine grosse Datei.
3) Da die Mutter des Slice eine HTML-Tabelle ist, kann ein Bild aus Vorder- und Hintergrundkacheln zusammengesetzt werden. Sie können also auf einen Bildausschnitt einen Link setzen, und über einen anderen einen normalen HTML-Text legen, welcher dann mit allen Möglichkeiten des HTML und CSS formatiert werden kann, ohne die Ursprungsgrafik berühren zu müssen.
Der Nachteil: Sie sollten, wenn Sie Slices per Hand anfertigen, in der Erstellung von HTML-Tabellen sattelfest sein oder zumindest einen Wysiwyg-Editor benutzen.
Doch nun genug der Theorie, ab in die Praxis.

Bild 1: Wir wollen Pebbles ein wenig zerschnipseln. Dazu öffnen wir eine neue Ebene über der Ersten und ziehen mit 1px dicken Buntstift-Strichen einen Raster, so wie das Slice nachher aussehen soll. Verwenden Sie für jeden Strich eine eigene Ebene. So müssen Sie bei Änderungen nicht den gesamten Raster neu aufbauen.
Bild 2: Entspricht der Raster Ihren Vorstellungen, so können Sie beginnen, die einzelnen Kacheln auszuschneiden. Wir aktivieren dazu das Beschneide-Werkzeug und schneiden entlang der Rasterlinien. Ganz penible arbeiten dabei von "innen nach aussen".
Das heisst, es wird immer auf der gleichen Seite der Rasterlinie geschnitten. So wird sichergestellt, daß sich das Bild nachher auch wirklich wieder pixelgenau zusammenfügt.
Stimmt der Beschnitt, wird nun die Kachel freigestellt, die Rasterebene gelöscht und das Bildchen als gif oder jpeg abgespeichert. Am Besten verwenden Sie dazu einen einheitlichen Namen und einen Index hintendran, inetwa in dieser Form: bild_01.gif. Um sich nachher lästige Sucharbeit zu ersparen notieren wir uns jetzt gleich die Bildgrösse in Pixel. Jedes Bildbearbeitungsprogramm besitzt (meist unter dem Menüpunkt "Bild" oder "Image") ein Informations-Untermenü, aus welchem diese Daten abzulesen sind. Gehen Sie jetzt wieder in das Originalbild (welches Sie hoffentlich nicht beim Abspeichern der Kachel überschrieben haben) und verfahren mit allen anderen Teilbildern genauso.
Jetzt ist es an der Zeit, die Tabelle zum Slice zu programmieren. An dieser Stelle setze ich voraus, daß HTML-Kenntnisse vorhanden sind und gehe auch nicht weiter darauf ein. Nur einige beachtenswerte Hinweise:
1) Verwenden Sie für jede Kachel eine eigene Zelle und setzen Sie border, cellpadding und cellspacing auf 0.
2) Programmieren Sie sauberen Code. IE möge Fehler verzeihen, andere Browser nicht. Hier kann schlampiger Code zu entsetzlichen Ergebnissen führen.
3) Verwenden Sie nach Möglichkeit reines HTML, das jeder Browser versteht. Es gibt nichts schlimmeres für einen Webmaster, als wegen einer zerfetzten Grafik als Amateur abgestempelt zu werden.
4) Verzichten Sie nicht auf die Grössenangaben der Tabellen-Zellen. Auch eine beim Ladevorgang nervös hin- und herrutschende Webseite macht keinen guten Eindruck.
Bild 3: Das Slice ist jetzt fertig. Nun können Sie Lust und Laune einzelne Kacheln immer wieder neu bearbeiten ohne das Gesamtbild berühren zu müssen. das ist vor allem dann interessant, wenn sich grafische Textpassagen oft ändern oder Links öfter neu gesetzt werden. Wenn Sie sich intensiver mit dem Thema Slicing auseinandersetzen werden Ihnen wahrscheinlich noch viel mehr Vorteile auffallen.
Bis jetzt haben wir (absichtlich, um Ihnen die Arbeitsweise des Slice vor Augen zu führen) alles mit der Hand erstellt. Das ist natürlich mühsam und unwirtschaftlich. Gott sei Dank kann Ihnen Software diese Arbeit abnehmen.
Für die dünne Brieftasche gibt es einiges an Free- und Shareware. Zum Beispiel
"Split-Image" http://www.thecastle.com/software.html
und noch viele mehr. Diese Tools nehmen Ihnen das Zerschneiden ab, speichern die Einzelbilder automatisch und erstellen auch gleich den nötigen HTML-Code, den Sie dann nur noch einfügen brauchen. Das wird wohl in vielen Fällen genügen. Erwarten Sie sich aber keine "grafischen Kopfstände" von diesen Tools. Um Rollover-Effekte oder überlappendes Slicing ausführen zu können, müssen Sie schon zu High-End-Software greifen.
Wie immer an dieser Stelle wünschen Pebbles und ich Ihnen gutes Gelingen. Sollten Sie noch Frage zu diesem Thema haben, so scheuen Sie sich nicht, unser Forum in Anspruch zu nehmen.