Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht
Diese Übung als PDF abrufen

Übung 5: Tabellen als Layouthilfsmittel

Es sei hier als Einleitung nochmals gesagt, was in Übung 4 am Schluss erwähnt wurde: Wir arbeiten hier noch auf einer sehr rudimentären Stufe. Profis gestalten ihre Websites mit CSS - wir wissen aber an dieser Stelle noch nicht einmal, was das ist.

Auch eine Person, die "Basic Webpublishing" betreibt, muss aber gemäss der (nicht unumstrittenen) Meinung des Kursleiters jederzeit in der Lage sein, Tabellen "für den Notfall" ohne CSS als Layoutmittel einsetzen zu können, wie das jahrelang praktiziert wurde. Dies ist ausserdem nützlich, da viele Content-Management-Systeme immer noch mit Tabellenlayouts arbeiten - wer nie ein solches gemacht hat, wir also so ein Konstrukt niemals verstehen.

Zu einem echten Dreamweaverkurs gehört es daher, komplexe Tabellen programmieren zu können.

Layouten mit CSS 2.0 ist sicher der neuste Stand und "wie man es heute machen sollte". Es kann aber nichts schaden, auch die Tabellentechnik noch zu beherrschen.

Wichtig zu wissen bei Tabellen ist:

• Tabellen zu Layoutzwecken haben in der Regel Cellpadding, Cellspacing und Border (Zellauffüllung, Zellraum, Zellrahmen) auf NULL Pixel gesetzt.
• Man kann mehrere Tabellen ineinander verschachteln, sollte das aber nicht mit ZU vielen tun. Ich würde die Obergrenze bei 5 setzen.
• Ich empfehle, zumindest am Anfang Tabellenwerte in Pixeln statt Prozenten festzulegen. Das heisst, am Anfang steht immer die Entscheidung: Für welche minimale Bildschirmbreite optimiere ich meine Page? In der Regel darf die äusserste Tabelle 760 Pixel breit sein, dies wurde hier schon erklärt.
• Der Inhalt muss in der Regel am oberen Rand der Tabellenzelle plaziert sein - die vertikale Ausrichtung des Zelleninhaltes darf daher nicht auf Standard / Default gesetzt sein, sondern auf Top / Oben.
• Tabellen sind widerspenstig. Selbst wenn man Breite und/oder Höhe einer Zelle definiert, machen viele Tabellen, was sie wollen - sowieso, wenn man Inhalte reinpflanzt. Im Browser sehen sowieso alle nochmals anders aus. Daher empfiehlt es sich dringend, mit einem SHIM zu arbeiten. Dies ist ein unsichtbares, 1x1 Pixel grosses Bild, das man in Tabellen einfügt und dehnt - wie der Bierdeckel, den man unter das Tischbein legt, damit der Tisch nicht wackelt - Shims bewirken, dass die Tabelle auch nicht mehr wackelt.
• In den Seiteneigenschaften (Ctrl+J oder "Modifizieren / Seiteneigenschaften") sollen alle 4 Werte für die Seitenränder auf Null gesetzt sein (leeres Feld reicht nicht), sodass der Seiteninhalt tatsächlich auch ganz oben und ganz links beginnt und kein hässlicher Weissraum entsteht - siehe hier:
  
  
  
  (oben: Screen aus MX 2004 / unten: CS3)
  
  

Wie geht das nun aber von A bis Z? - Wie erwähnt lohnt es sich, Tabellen zunächst von Hand zu zeichnen. Das sieht dann zum Beispiel so aus, wenn für 640x480 optimiert, also eine 600 Pixel breite Tabelle gewählt wird:

Beachten Sie hierbei: Rot markiert sind Shims, wie Sie z.B. gesetzt werden könnten. Dazu aber später. Die hier eingeführten Räume zwischen den Tabellen sind natürlich später nicht sichtbar, da sie gleich null sind - sie sind nur zur besseren Anschauung so gezeichnet.

Wie Sie sehen, gibt es nicht einfach eine grosse Tabelle, die in mehrere Spalten und Zeilen aufgeteilt wurde, sondern mehrere ineinander verschachtelte Tabellen oder Tabellen übereinander. Dies liegt in der Eigenart der Tabellen bzw. an der Art, wie sich die Parameter bestimmter Zellen gegenseitig beeinflussen: Eine einzige komplexe Tabelle für eine grosse Website würde mit der Zeit chaotisch werden - wenn man oben links was verändert, stimmt plötzlich der Inhalt unten rechts nicht mehr... deshalb wählt man mit Bedacht für bestimmte Zwecke eine bestimmte Anzahl Tabellen.

• Tabelle 1: Seitenkopf, z.B. Firmenlogo (separat, da dies auf jeder Seite gleich ist und unabhängig vom restlichen Inhalt "leben" kann)
• Tabelle 2: "Gesamtcontainer", umschliesst alles, definiert Breite der Navigationsleiste links (130 Pixel) sowie Breite des eigentlichen Inhaltes (rechts, 600 minus 130 = 470 Pixel)
• Tabelle 3: "Inhaltstabelle", definiert Abstand zwischen Navigation und Inhalt (10 Pixel), Inhalt (360 Pixel) und Zusatznavigation (100 Pixel)
• Tabelle 4: "Aufzählung" - eine optionale Tabelle für Aufzählungen mit einem GIF als Aufzählungszeichen (Breite 15 Pixel), einem definierten Leerraum (Breite 10 Pixel) und dem Inhalt (360 minus 15 minus 10 = 335 Pixel)
• Als zusätzliche Tabellen - hier wegen der Übersichtlichkeit nicht eingezeichnet - würden die wohl Navigationsbuttons in eine eigene Tabelle in der 130er-Spalte von Tabelle 2 verpackt, dazu käme die "Zusatznavigation" in der 100er-Spalte von Tabelle 3 ebenfalls in eine eigene Tabelle.

  Merke dazu: Es ist möglich, Tabellen untereinander zu setzen (ev. mit einem BR dazwischen, also einem Shift+Enter) - ohne Hilfe einer weiteren Tabelle ist es aber unmöglich, Tabellen sauber nebeneinander zu setzen.

Es braucht recht viel Übung, bis man "in Tabellen denken" kann und den Inhalt einer Website intuitiv vor dem geistigen Auge in Spalten und Zeilen einbetten kann. Daher: Möglichst häufig üben!

Der Trick mit dem Shim und HTML-Einblicke

Ich empfehle, in Tabellen immer in jeder Spalte ein unsichtbares Shim (oder 1x1-Pixel-GIF) zu haben. Sie werden merken: Wenn eine Tabelle in jeder (!) Spalte ein Shim mit einer bestimmten Höhe enthält, passt sich die Zeilenhöhe automatisch dem Shim an. Fazit: Eine ganze Zeile voller Shims wird also praktisch unsichtbar, wenn man sie auf die Höhe 1 setzt. So kommen sich Shims und Inhalt sicher nie in die Quere.

Als Alternative bietet sich immer Shim + BR an, also eine Zeilenschaltung (Shift+Enter) nach dem Shim.

Was ist aber ein Shim genau? Wir wir später lernen werden, gibt es zwei verbreitete Bildformate im Web, JPG und GIF. Letztere haben den Vorteil, dass Sie transparent sein können. Wenn Sie also ein GIF als transparente Datei speichern, das nur 1x1 Pixel gross ist, haben Sie eine Datei von minimaler Grösse (einige Bytes), die Sie beliebig aufpumpen können - das Shim ist ja unsichtbar und ist daher das einzige Bild, das Sie ohne schlechtes Gewissen auf die gewünschten Ausmasse vergrössern und verzerren können.

Die folgenden Shims haben zur Veranschaulichung das Attribut Border=1 bekommen - es handelt sich aber immer um die genau gleiche Datei!

So kommen Sie übrigens auch am einfachsten zum eigenen Shim - klicken Sie jetzt mit der rechten Maustaste auf eines der Shims oberhalb dieses Abschnitts und speichern Sie es sich mittels "Bild speichern unter" / "Save Image As" in Ihren images-Ordner oder an einen anderen Ort innerhalt Ihrer Site.

Shims eignen sich natürlich auch vorzüglich dafür, z.B. zwischen zwei Textblöcken einen ganz bestimmten pixelgenauen Abstand zu haben - zwischen diesem und dem nächsten Abschnitt liegt ein

24 Pixel hohes und 395 Pixel breits Shim. Die Zeilensprünge sind mit einem BR gelöst (Shift+Enter).

Wie geht das also genau mit dem Einfügen? Genau gleich wie wenn Sie ein Bild einfügen - ein Shim ist nichts anderes als ein Bild (eine Grafik, ein Foto). Kontrollfrage: Haben Sie das Shim vorhin via Rechtsklick gespeichert? Wenn nicht, tun Sie es jetzt.

Fügen Sie nun eine Tabelle ein - z.B. einmal mit 2 Zeilen und 3 Spalten, Breite 600 Pixel. Nicht vergessen, Randstärke, Zellauffüllung und Zellrand auf Null zu setzen!

Jetzt gehts los mit den Shims, um die Tabelle zu "stützen". In der soeben eingefügten Tabelle kommt in der untersten Zeile in jede Spalte ein Shim. Wählen Sie nun die Zelle aus, in die Sie ein Shim einfügen wollen (z.B. linke untere Zelle), und wählen Sie "Einfügen / Bild" (Ctrl+Alt+I).

Tip: Wenn Sie ein Shim einfügen, ist es immer 1x1 Pixel gross. Ändern Sie die Werte unmittelbar nach dem Einfügen des Shims im Eigenschaften-Fenster, sonst suchen Sie es später womöglich stundenlang...

Am einfachsten ist es, wenn Sie jede Spalte der Tabelle mit einem Shim ausstatten - z.B. in der untersten Zeile, sodass sich die Tabelle in der Breite sicher nicht selbständig macht. Die Höhe einer Tabelle müssen Sie nicht definieren - dies ergibt sich ja durch deren Inhalt (Text, Bilder).

Vergessen Sie nicht, in den Seiteneigenschaften alle 4 Werte für die Seitenränder auf Null zu setzen (siehe hier). Auch die Was zudem oft schiefgeht: Die vertikale Ausrichtung des Inhaltes in der Zelle muss bei Layouttabellen in der Regel auf "oben" gesetzt sein:

Dies muss für jede Zelle so angegeben werden! Und: Wenn Sie ein Shim eingefügt haben (im folgenden Bild symbolisch rot eingezeichnet), ziehen Sie die Spalte auf die selbe Breite - indem Sie mit der Maus auf die Spaltenbegrenzung klicken und die nach links ziehen, "soviel wie's geht":

Das bewirkt dasselbe, wie wenn Sie dafür sorgen, dass für die Spaltenbreite in den Tabelleneigenschaften die Breite des Shims in Pixeln eingetragen wird:

Auf jeden Fall haben Sie nach dem Einfügen der Shims in jede Spalte eine saubere Tabelle, die allen Belastungen standhält - in jeder Spalte ein Shim (hier symbolisch dargestellt, in Wahrheit unsichtbar):

Dasselbe müssen Sie natürlich mit jeder Tabelle machen, wenn Sie Tabellen verschachteln!

Und nochmals: Vergessen Sie nicht, in den Seiteneigenschaften alle 4 Werte für die Seitenränder auf Null zu setzen (siehe hier). Die vertikale Ausrichtung des Inhaltes in der Zelle muss bei Layouttabellen in der Regel auf "oben" gesetzt sein.

HTML-Code

Sie werden schnell sehen, dass Sie ein Shim - wenn es mal einen Pixel hoch ist - kaum mehr mit der Maus packen können. Hier setzen KennerInnen ihre HTML-Code-Kenntnisse ein. Mit den Buttons

links oben in der Symbolleiste wechseln Sie zwischen Codeansicht (links), gemischter Ansicht (Mitte) und Layoutansicht (rechts) hin und her. Nehmen Sie sich dabei die Stärken von Dreamweaver zu Hilfe - wenn Sie etwas im Layoutmodus markieren und in die HTML-Code-Ansicht wechseln, ist der betroffene Code dort ebenfalls markiert! Diese beiden markierten Zeilen der Tabelle...

sehen also in der Code-Ansicht so aus - auf diese Art lassen sich versteckte Shims sehr leicht finden!

Wissen muss man hierfür fast nur, dass

• <table> eine Tabelle einleitet und </table> auflöst
• <tr> eine TabellenZEILE einleitet und </tr> auflöst
• <td> eine TabellenZELLE einleitet und </td> auflöst
• Bilder mit <IMG SRC="bild.gif" width=10 height=1> eingefügt sind, wobei
• width=Breite und height=Höhe ist - dies gilt auch für Tabellen.

Weitere (X)HTML-Codes finden sich in der schriftlichen Dokumentation.

Übung macht die Meisterin

Konstruieren Sie nun selbst ineinander verschachtelte Tabellen mir Shims, ähnlich wie die Beispieltabelle oben. Vergessen Sie nicht, in den Seiteneigenschaften (siehe Übung 3) die Seitenränder auf Null zu setzen.

Wenn Sie Mühe haben, einen Anfang zu finden, sehen Sie sich diese Seite an, die eine ähnliche Tabellenstruktur (mit etwas mehr Tricks) verwendet wie das obere Beispiel. Analysieren Sie die Seite, indem Sie sie in Ihre Site oder noch besser in eine neue Site speichern und mit Dreamweaver öffnen. Schauen Sie sich alle Tabellenattribute an (auch Farben), suchen Sie die Shims.

Vergessen Sie nicht, auch alle Bilder mitzuspeichern und die Ordner richtig zu benennen - mit Ihrem nun vorhandenen Wissen rund um HTML sollte das kein Problem sein! Und sonst: Nicht verzagen - Try And Error ist noch immer das beste Lernsystem. Falls alles versagt und Sie mit ZIP versiert sind - hier ist die ganze Chose gezippt.

Tipp: Wenn Sie von komprimierten Dateien wie ZIPs keine Ahnung haben - das sollte man schon wissen. Hier finden Sie mehr zum Thema!

Vorlagenverwaltung

Eine komplett fertige Seite kann als Vorlage abgespeichert werden - entweder ganz einfach, indem Sie die Seite als "vorlage.htm" speichern und später immer wieder diese Datei öffnen und mittels "Datei speichern unter" eine neue Datei herstellen - oder etwas komplexer mit der Dreamweaver-eigenen Vorlagenverwaltung, auf die im Kurs später (Übung 15) detailliert eingegangen wird oder die hier abrufbar sind - in einem ebenfalls guten Dreamweaver-Online-Tutorial.

Zum Nachlesen: KnowWare-Heft 12, Seite 63

Schlafen Sie lieber ein paar Mal darüber, wenn Sie denken, Sie haben eine Vorlage fertig erstellt - Sie nerven sich nur, wenn Sie einmal ab einer vermeintlich kompletten Vorlage mehrere weitere Seiten gemacht haben und dann grössere Mängel an der Vorlage entdecken (Navigationspunkt vergessen, falsche Farben usw.). Vorlagen kann man zwar immer ändern, substantielle Änderungen bergen aber stets neue Fehlerquellen.

Wenn Sie ohne die Vorlagenfunktion von Dreamweaver gearbeitet haben, hilft Ihnen der ausgeklügelte und mächtige Suchen/Ersetzen-Mechanismus des Programms weiter, das es Ihnen erlaubt, innerhalb der aktuellen Seite, eines Ordners oder einer gesamten Site bestimmte Wörter oder ganze Codes durch andere Teile zu ersetzen.

Hier gehts zurück zur Übungs-Übersicht