Rheinwerk Design

10.2 Adobe ImageReady  downtop

Das Programm ImageReady schaut Photoshop auf den ersten Blick sehr ähnlich. Vor allem das Consumer Interface ist großteils gleich. Ursprünglich warfare ImageReady als »Mini-Photoshop« für Webdesigner und als Ausgabe-Werkzeug für Photoshop-Dateien in Richtung Internet gedacht. In der Anfangszeit haben es viele Photoshop-Consumer lediglich benutzt, weil es kleinere JPEGs bei besserer Qualität produzieren konnte als Photoshop selbst. Nur wenige haben ImageReady benutzt, um komplettes Webdesign darin zu entwickeln. In dieser Hinsicht hat das Konkurrenzprodukt von Macromedia, Fireworks, dem Adobe-Programm den Rang abgelaufen. Macromedia hat bereits frühzeitig große Teile der Vektorzeichen-Engine von FreeHand in Fireworks integriert und als vollwertige Webdesign-Applikation mit gleichberechtigter Pixelbild- und Vektorbearbeitung in einem Programm positioniert. Zudem kann Fireworks Photoshop-Dateien genauso für das Internet aufbereiten wie ImageReady, bisher jedoch meist mit einem Kompatibilitätsunterschied von mindestens einer Model. Da ist natürlich die Integration Photoshop – ImageReady viel besser. Die Frage der Konkurrenz ImageReady – Fireworks hat sich inzwischen durch die unmittelbar bevorstehende Übernahme von Macromedia durch Adobe auf Advertising-Spekulationen reduziert. Ohnehin ist ein großer Teil der ImageReady-Options im Laufe der Zeit in Photoshop integriert worden, seien es die Slice-Funktionen, der Befehl Für Internet Speichern oder auch (neu hinzugekommen mit Photoshop CS2) die Animations-Funktion, sodass die Daseinsberechtigung für ImageReady immer schwächer wird. Man darf gespannt sein.

Rheinwerk Design

10.2.1 Slices und Rollover  downtop

Die wichtigste Aufgabe für ImageReady ist die Aufbereitung von Screendesigns für das Internet. Das beinhaltet im Wesentlichen das so genannte Slicing (Zerschneiden) des Designs in eine Reihe von Einzelbildern, die webtauglich komprimiert und per HTML-Code für die Darstellung im Browser wieder zusammengebaut werden. Das geschieht entweder auf der Foundation eines Format-Gerüsts mit HTML-Tabellen oder mit einzelnen Rahmen (Layers) nach dem CSS-Commonplace. Es geht additionally um eine reine Ausgabe-Funktion. Gestalterisch passiert hier dann kaum noch etwas.

Daten auf der DVD

Sie finden die Datei zu diesem Workshop auf der Buch-DVD unter Workshops/10_Screendesign/10_Webdesign_IR.psd.

Schritt für Schritt: Slicing und Rollovers in ImageReady

Das Slicing wurde früher ausschließlich in ImageReady erledigt. Mittlerweile kann man das auch bereits in Photoshop mit dem Slice-Werkzeug () machen.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.35   Slice- und Slice-Auswahl- Werkzeug

Slices zeichnen in Photoshop

Mit dem Slice-Werkzeug zeichnet man im Bild Bereiche, die dann später als Einzelbild exportiert werden. Die Linien, die beim Slicing entstehen, kennzeichnen gleichzeitig die Zeilen und Spalten der später generierten HTML-Tabelle oder die CSS-Layer-Boxen. Die Slices werden im Bild mit gelben Linien markiert (Abbildung 10.36). Wählt man eines mit dem Slice-Auswahl-Werkzeug aus, so ist es blau. Durch gleichzeitiges Drücken der / – Style wechselt das Slice-Werkzeug jederzeit zum Slice-Auswahl-Werkzeug. Die erstellten Slices werden durchnummeriert, was an den kleinen blauen Etiketten in der linken oberen Ecke eines Slices zu sehen ist. Grau gekennzeichnete Slices werden für die Restflächen vergeben. Diese so genannten »Auto Slices« haben einen gestrichelten Rand. Beim Zeichnen kann man sich oft an jene Hilfslinien halten, die man zur Gestaltung des Screendesigns verwendet hat.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.36   Im Bild gekennzeichnete Slices

Beim Zeichnen der Slices kann man bereits sehr früh etwas für eine schlanke Struktur und größere Übersichtlichkeit der künftigen HTML-Datei tun. Bei der Ausgabe wird ImageReady später eine mehr oder weniger komplexe HTML-Tabelle generieren, wobei sowohl vertikal als auch horizontal jede einzelne Linie für eine Tabellenzeile und -spalte steht. Man kann die Anzahl der Tabellenzellen, die ja immer eine bestimmte Menge an Code bedeutet, sehr stark reduzieren, wenn man sauber und überlegt arbeitet. So sollte man immer schauen, dass Slices sich an längeren Linienfluchten orientieren (blaue Pfeile in Abbildung 10.36), auch, wenn dadurch vielleicht der eine oder andere Button ein wenig größer wird. Die Summe der Bild-Dateigrößen bleibt ohnehin immer etwa gleich, unabhängig von Anzahl und Lage der Slices. Sorgt man dafür, dass möglichst viel horizontale und vertikale Slice-Grenzen in einer Linie fluchten, kommt man mit wesentlich weniger Tabellenzellen aus. Das betrifft vor allem die Slices, die Photoshop automatisch anlegt. Diese bekommen zusätzlich auch oft noch lange Dateinamen, was im Code unangenehm ins Gewicht fällt. Ein weiterer großer Vorteil liegt in der größeren Übersichtlichkeit des Codes. Viele Photoshop-Consumer oder deren Webdesign-Kollegen, die ein solches Screendesign auf Slice-Foundation geliefert bekommen, müssen das dann meist in Internet-Editoren wie Dreamweaver, GoLive oder per Hand Coding weiterbearbeiten. Wenn man sich dann durch unnütze Tabellenzellen wühlen muss, steigert das nicht gerade die Produktivität. Auch für den Betrachter ist es viel netter, wenn eine Seite durch weniger Code schneller lädt. Es lohnt sich additionally, hier wirklich pixelgenau zu arbeiten (Abbildung 10.37 und 10.38).

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.37   Korrektes Slicing

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.38   Unsauberkeiten produzieren unnötige Tabellenzellen!

Nach dem Zeichnen sollte man noch die selbst erstellten Slices sinnvoll benennen. Das kann man zwar auch später noch in ImageReady nachholen, allerdings ist es besser, das bereits in Photoshop zu erledigen, weil dann später die Internet-Inhalt-Palette in ImageReady, in der alle Slices gelistet werden, gleich von Anfang an wesentlich übersichtlicher ist.

See also  10 Aplikasi Al Quran Terbaik untuk PC dan Laptop

Mit einen Doppelklick auf ein selbst erstelltes Slice öffnet sich der Dialog Slice-Optionen (Abbildung 10.39). Mit dem Slice-Typ kann man alternativ zu Bild auch Kein Bild auswählen. Dann erhält man an dieser Stelle eine »leere« Tabellenzelle. Das ist dann von Vorteil, wenn das Screendesign hier glatt einfarbig ist. Das kann man nämlich auch per HTML in der Tabelle über das Einfärben des Zellenhintergrundes erledigen. Man kann hier bereits einige Code-relevante Dinge eintragen, wie Hyperlink-Adresse (URL) und non-obligatory Ziel (Goal für Web sites mit »Frames«). Auch der Alt-Tag (Textual content für die »Tooltips«) kann hier bereits ebenso angegeben werden wie Textual content für die Statusleiste des Browsers (Meldungstext). Wichtig ist hier aber in erster Linie der Title. Bei URL sollte man zunächst eine Raute eintragen. Damit ist der Hyperlink zwar schon da, aber er tut noch nichts. Wichtig ist, dass er sich friedlich verhält und während der weiteren Bearbeitung und bei Assessments keine Fehlermeldungen auswirft. Oft weiß man in diesem Stadium eines Projekts auch noch gar nicht, was dort hinkommen wird.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.39   Slice-Optionen

Wechseln zu ImageReady

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.40   Schneller Wechsel zu ImageReady

Mit / + + oder dem Button am Fuß der Werkzeugleiste kann man nach dem Zeichnen der Slices zu ImageReady wechseln, um die Arbeit fortzusetzen. Hier lauert manchmal ein Fehlerdialog (Abbildung 10.41), der davor warnt, dass nun einige Good Objects rausgeworfen werden, weil sie nicht erkannt wurden. Um welche Artwork es sich dabei handelt, wird nicht verraten. Man muss additionally nach dem Wechseln selbst kontrollieren, ob Ebenen fehlen. In der Hilfe-Datei zu beiden Programmen ist nichts dazu zu finden. Nachdem aber zum Thema Platzieren bei ImageReady im Kleingedruckten vermerkt ist, dass dort im Gegensatz zu Photoshop keine PDFs platziert werden können, geht der Verdacht in diese Richtung.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.41   Warnung bei bestimmten Typen von Good Objects

Eine weitere Unregelmäßigkeit ist ebenfalls zu beachten. Fallweise weichen Ebeneneffekte in beiden Programmen bei exakt gleichen Einstellungen visuell voneinander ab (Abbildung 10.42). Die Kante des Buttons ist viel schärfer als in Photoshop. Erst eine Erhöhung mancher Werte auf das Doppelte bringt in etwa eine Entsprechung.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.42   Ebeneneffekt in Photoshop (hyperlinks) und identischer Effekt in ImageReady

Offensichtlich ist die Integration von Photoshop und ImageReady noch immer nicht optimum und es ist wirklich wünschenswert, dass ImageReady eines Tages komplett in Photoshop aufgeht.

Nach dem Wechseln zu ImageReady erscheinen die in Photoshop erstellten Slices in der Internet-Inhalt-Palette (Abbildung 10.43). Hier macht sich jetzt die Benennung bezahlt, denn gerade bei Buttons schauen die kleinen Thumbnails in der Platte alle gleich aus. Hat man viele Slices, empfiehlt sich der Gebrauch von Ordnern, den Slice-Units, die man mit dem mittleren Button am Palettenfuß erstellen kann.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.43   Internet-Inhalt-Palette

In der Slice-Palette (Abbildung 10.44) finden wir die gleichen Eintragungen wieder, die in Photoshop in den Optionen des Slice-Werkzeugs zu sehen waren. In ImageReady gibt es einige Einstellmöglichkeiten mehr. Wählt man unter Typ Kein Bild aus, so kann man hier das Aussehen (Zellausrichtung und Hintergrund) und den Inhalt (Textual content) der Tabellenzelle bestimmen.

Die Textbox akzeptiert normalen Textual content (der dann in HTML »übersetzt« wird) oder direkte Code-Eingabe. Die Abbildung 10.46 zeigt das Resultat.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.44   Slice als Tabellenzelle mit HTML-Textual content gefüllt

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.45   Slice-Palette

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.46   Slice-Palette mit Slice-Typ Kein Bild

Rollover-Effekt für Buttons erstellen

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.47   Neuen Rollover-Effekt erzeugen

Interaktive Effekte wie Rollover bereits in grafischen Umgebungen wie Photoshop, ImageReady oder Fireworks anzubieten, ist Teil der Erfolgsstory dieser Programme. In ImageReady ist dieses Function noch dazu recht einfach und Consumer-freundlich gelöst. Am Fuß der der Internet-Inhalt-Palette findet man den Button Rollover-Standing erstellen . Alternativ dazu kann man auch das Palettenmenü bemühen. Wir fügen den Standing Over hinzu. Eine Unterebene zum Slice entsteht (Abbildung 10.48, hyperlinks), die so benannt ist. Nun wird in der Ebenen-Palette (Mitte) zunächst das visuelle Erscheinungsbild dieses Zustandes mit Aus- und Einblenden der entsprechenden Ebenen hergestellt. Diese spezifische Kombination der Ebenen wird mit dem jeweiligen Standing des Slices verknüpft. Das Prinzip ist der Ebenenkomposition sehr ähnlich, nur dass das hier auf bestimmte lokale Abschnitte beschränkt ist. In Abbildung 10.48 und 10.49 sind die beiden Zustände eines Buttons in beiden relevanten Paletten dargestellt.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.48   »regular«-Zustand eines Buttons in der Internet-Inhalt-Palette, der Ebenen-Palette und im Bild

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.49   »Rollover«-Zustand eines Buttons in der Internet-Inhalt-Palette, der Ebenen-Palette und im Bild

Für den Wechsel im Erscheinungsbild mittels Rollover-Effekten kommen neben der Sichtbarkeit einer Ebene auch deren Place und alle Parameter infrage, die unter Ebenen-Stil zusammengefasst sind, additionally auch Deckkraft oder die Stärke eines Schlagschattens. Das eröffnet vielfältige visuelle Möglichkeiten, vor allem, wenn man weitere Zustände wie Down, Up, Out, Click on and so forth. mit einbeziehen möchte. Die Kombination aller mit einem Rollover-Standing verbundenen Änderungen lassen sich in der Stile-Palette für die spätere Wiederverwendung abspeichern. Rollover-Stile sind gegenüber den normalen Ebenen-Stilen mit einem schwarzen Dreieck gekennzeichnet .

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.50   Gespeicherter Rollover-Stil

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.51   Vorschau im Browser

Nach dieser Arbeit ist ein erster Verify in einem oder mehreren Browsern angezeigt. Die hyperlinks von Vorschau im Browser ( / + / + ) befindliche Dokument-Vorschau ist nicht zu empfehlen. Sie ist viel langsamer und zudem eher unrealistisch im Vergleich zu einem echten Browser, wo man auch gleich kontrollieren kann, ob der Code (HTML und JavaScript) passt. Im Browser wird bereits nahezu das Endergebnis dargestellt. Der JavaScript-Code, der sowohl für Effekte selbst als auch für das Vorausladen (Preloading) der für den späteren Tausch nötigen Bilder gebraucht wird, ist speziell bei Adobe-Produkten nicht immer einwandfrei gewesen. Bei ImageReady CS2 scheint in dieser Hinsicht alles okay zu sein. Der Code ist sauber, übersichtlich und verständlich, was vor allem für spätere Nachbearbeitung sowie Anpassungen wichtig ist.

Distant-Rollover-Effekt für die Landkarte erstellen

Da bei JavaScript, mit dem diese Rollover-Effekte realisiert werden, alle Bilder auf einer Webseite gleichberechtigte Objekte sind, gleich, ob es sich um Hyperlinks handelt oder nicht, können Buttons nicht nur ihre eigenen Bilder tauschen, sondern auch andere »fernsteuern«. Man nennt diesen Effekt »Distant Rollover«. Er ist mit ImageReady leicht zu erstellen. Unabhängig davon, ob der Button für sich selbst bereits einen Rollover-Effekt hat, kann man dem Over-Standing Änderungen in einem anderen Slice zuweisen. Bei unserem Landkarten-Beispiel werden zunächst die einfachen Rollovers für die vier Pins erledigt. Das funktioniert genauso wie bei den Buttons für das Menü. Hier wird einfach für den Over-Standing die Ebene mit den gelben Pins sichtbar gemacht.

Bevor man beginnt, Distant Slices, wie sie bei ImageReady genannt werden, einzurichten, sollte man alles auf einen definierten Normalzustand setzen. In unserem Fall heißt das, die vier Ebenen mit Städtebild, Adressfeld sowie den beiden Rahmenboxen mit den Ebeneneffekten abzudrehen. Sie sollen unsichtbar sein, wenn die Maus nicht über einem der Pins auf der Karte ist.

Nun wählt man einfach für den ersten Pin in der Internet-Inhalt-Palette das zugehörige Slice und dort den Zustand Over aus (Abbildung 10.52). Dann zieht man mit der Maus vom »Kringel«-Image zu dem Slice, das sich ändern soll, hier zum Slice »stadtbild«. Danach trägt dieses Slice ein »Goal«-Image (Fadenkreuz ). Das »steuernde« Slice bekommt einen kleinen kreisförmigen Pfeil .

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.52   Verbindung zwischen Rollover-Slice und Distant-Slice herstellen

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.53   Wenn der Rollover-Standing aktiviert ist, erscheint das Distant-Slice mit »Goal«-Image

Die beiden Slices sind jetzt verbunden und man kann wie bei den einfachen Rollovers für die verschiedenen Zustände bestimmen, was wie aussehen soll. Abbildung 10.55 zeigt das für den Normalfall und für Over. Wichtig ist, dass dafür nicht das Distant-Slice ausgewählt wird, sondern das »steuernde« Slice mit seinen Zuständen!

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.54   Dieser Standing hat ein Distant Slice (Pfeil).

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.55   »Regular«-Zustand (oben) und Over-Zustand (unten) des Distant Slice in der Internet-Inhalt-Palette, der Ebenen-Palette und im Bild

Bild-Kompression: JPEG oder GIF?

Für eine möglichst niedrige Gesamtdateigröße der späteren Webseite ist es sehr vorteilhaft, dass man jedes Slice separat behandeln kann, was die Bild-Kompression angeht. Die Einstellungen hierzu finden Sie auf der Palette Optimierung (Abbildung 10.56). Die grundsätzliche Entscheidung zwischen den beiden gängigen Bild-Dateiformaten im Internet, JPEG und GIF, fällt in unserem Beispiel leicht: Feine Particulars fotografischen Ursprungs und viele sanfte Verläufe verlangen eindeutig nach dem JPEG-Format. Das GIF-Format kommt für glatte Farbflächen und klare grafische Formen infrage. Da das gesamte Sceendesign relativ gleichmäßig detailliert ist, braucht hier auch keine Unterscheidung getroffen zu werden zwischen fein strukturierten Bereichen, die eine geringe Kompression benötigen, und weichgezeichneten Flächen, die eine starke Kompression vertragen. Deshalb kann man sorglos alle Slices markieren, entweder mit dem Slice-Auswahl-Werkzeug oder in der Internet-Inhalt-Palette, und pauschal die Vorgabe mit dem Namen JPEG hoch auswählen, die mit 60 % Qualität komprimiert.

See also  How to speed up specific clips in Lightworks

Da die Bildkompression nicht nur die Slices in unserem Beispiel betrifft, sondern allgemein die Ausgabe von Bildern für das Internet sowohl in ImageReady als auch in Photoshop (bei Für Internet speichern), werden Particulars hierzu im Kapitel »Ausgabe für Internet« (siehe Seite 407) besprochen.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.56   Einstellungen der Bild-Kompression für ein Slice (Optimierung)

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.57   Vergleich von Authentic und optimierter Model im 2-fach-Fenster

Finale Ausgabe als HTML-Seite

Ein wesentlicher Sprung vorwärts im Webdesign warfare die Fähigkeit von Programmen wie ImageReady oder Fireworks, ganze Webseiten inklusive Bildmaterial repair und fertig auszugeben – ein paar Mausklicks statt endlosem Copy & Paste. Es ist aber genug zu tun und zu beachten übrig geblieben. Damit die automatische Generierung einer kompletten HTML-Seite auch wirklich klappt, muss einem der wichtigsten Dinge in ImageReady Aufmerksamkeit geschenkt werden. Unter Datei · Ausgabe-Einstellungen · HTML legt ein mehrseitiger Dialog fest, welcher Code um die Bild-Slices herum ausgegeben wird. Die drei wichtigsten Seiten dieser Einstellungen seien im Folgenden genauer beschrieben.

Auf der ersten Seite HTML werden Formatierung und Kodierung eingestellt. Die Formatierung sorgt für gute Lesbarkeit, vor allem das Einrücken (Einzug ).

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.58   Ausgabe-Einstellungen · HTML

Bei den Zeilenenden kann auf die unterschiedlichen Gegebenheiten der drei wichtigsten Betriebssysteme (Mac, Home windows, Unix) Rücksicht genommen werden, was die Verwendung von CR (Carriage Return) und LF (Line Feed) angeht. Die Wahl Automatisch macht in der Regel keine Probleme. Auch die automatische Kodierung nach ISO-8859 – 1 ist okay. Unten in dieser Dialogseite sollten die Kommentare auf jeden Fall aktiviert werden. ImageReady fügt dann einige (unsichtbare) Kommentarzeilen ins HTML ein, die später die Orientierung im Code ein wenig erleichtern.

Die Ausgabe in XHTML ist gegenüber HTML vorzuziehen. XHTML ist eine stark an das formal rigorose XML (Prolonged Mark–up Language) angelehnte Variante von HTML. XML schreibt für alles, was es beschreibt, eine zwar einfache und klare, dafür aber auch ganz strikte Auszeichnung vor. Das macht seine Stärke aus, denn man kann Daten derart allgemein gültig beschreiben, dass sie überall verstanden werden. HTML hingegen hat immer darunter gelitten, dass es laufend proprietäre Tags (Sprach-Elemente) gegeben hat, eingeführt sowohl von Netscape in seinem Navigator als auch von Microsoft für den Web Explorer, denen das Standardisierungs-Konsortium W3C immer nur »hinterhergerannt« ist. Dieser lockere Umgang mit der Sprache HTML hat das Webdesign immer sehr erschwert, weil kaum eine Webseite mit allen Browsern gleich intestine funktioniert hat, vom Aussehen einmal ganz zu schweigen. Dieser Zustand hat sich durch die Einführung des wesentlich strengeren XHTML sehr gebessert. Mit der entsprechenden Einstellung kann man dem auch in ImageReady Rechnung tragen, was sehr zu empfehlen ist.

Die nächste Seite des Dialogs, Slices, legt die Vorgaben für die Struktur des HTML-Codes und die Benennungskonventionen für die Bilder in den einzelnen Slices fest. Hierbei kann man grundsätzlich zwischen dem Gebrauch einer (HTML-)Tabelle oder dem von CSS unterscheiden. Zusammen mit der Einstellung XHTML ist CSS wegen der Konformität mit aktuellen Requirements die bessere Wahl.

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung
Hier klicken, um das Bild zu vergrößern

Abbildung 10.59   Ausgabe-Einstellungen · Slices

Sollen trotzdem Tabellen verwendet werden, ist einiges zu beachten und einzustellen. Da eine Tabelle ja lediglich eine Hilfskonstruktion ist, um Format in HTML überhaupt möglich zu machen, muss/kann man hier entsprechend viel einstellen. Leere Zellen machen in einigen Browsern Ärger. Deshalb füllt man sie mit Dummy-Inhalten. Das ist in der Regel eine transparente 1×1-Pixel-GIF-Datei, die in Breite (W) und Höhe (H) per HTML skaliert wird. Die gezeigte Commonplace-Einstellung sollte man so lassen. Hinter dem Kürzel TD W&H verbirgt sich die Codierung für Breite und Höhe der einzelnen Tabellenzellen. Hier kann man Code sparen, indem man den Wert auf Nie setzt. Eine Tabellenzelle braucht nämlich keine Bemaßung, wenn sich ein Bild darin befindet, weil eine Zelle niemals kleiner werden kann als dieses Bild. Die Maße des Bildes, die sowieso ausgegeben werden, reichen aus. Bei den Abstandhalter-Zellen, der so genannten »Shim Row« (Shim = Unterlegscheibe), handelt es sich um eine unsichtbare, 1 Pixel hohe Tabellenzeile, die nur aus Einzelzellen besteht. Sie sollte immer eingefügt werden, weil ein Screendesign nach der Ausgabe als HTML quick immer aus Tabellenzellen besteht, die mit »Colspan« und »Rowspan« zusammengefasst wurden. Solche Gebilde können, je nach Browsertyp und -version des Betrachters, sehr instabil werden. Deshalb reiht man am Ende der Tabelle nochmals alle Spalten der Tabelle einzeln auf, um diese quasi »a

Leave a Reply

Your email address will not be published.