Dr. O. Hoffmann
Vergessen du mußt,
was früher du gelernt!
(Yoda, Star Wars)
Das von vielen einschließlich mir einst, im letzten Jahrtausend
bevorzugte Tabellendesign/layout hat neben den
offensichtlichen Vorteilen, mit geringem Aufwand eine
gute Raumaufteilung eines Projektes zu erreichen, doch
auch einige Nachteile.
Nach der reinen Lehre sollte die Formatierung vom
Inhalt getrennt sein, das ist natürlich nicht
gegeben, wenn Tabellenelemente für die Anordnung
der Elemente der Gesamtseite zuständig sind.
Ein weiteres Argument ist, daß XHTML eine Textauszeichnungssprache
ist, was bedeutet, daß ein Element eine Information darüber
gibt, wie sein Inhalt zu verstehen und von der Bedeutung her eingeordnet
ist. Tabellen sind speziell dazu da, eine Korrelation von zwei Mengen
sinnvoll darzustellen, nicht um irgendwelchen Inhalt relativ zueinander
anzuordnen. Ein Autor, der Tabellen zu Layoutzwecken einsetzt, zeigt damit
ganz offenbar, daß er (X)HTML nicht verstanden hat.
Neben diesen formalen, philosophischen und inhaltlichen Fehlern
bietet ein Tabellendesign jedoch auch Probleme für
Textdarstellungsprogramme, oder generell, wenn ein barrierefreies, allgemein
zugängliches Projekt angestrebt werden soll.
Zudem scheinen Darstellungsprogramme wie Opera und microsoft internet explorer (msie)
Probleme damit zu haben, die Kombination von Tabellendesign und
Formatierung mit Stilvorlagen (style-sheet,
CSS) korrekt darzustellen.
Diese Unterschiede können jedoch auch an den Toleranzen liegen,
die dem Darstellungsprogramm von XHTML bei der Darstellung von Tabellen
ohnehin eingeräumt werden, um tabellenartigen Inhalt optimal darzustellen
und die dann auch ein präzises Layout mit Tabellen unmöglich machen.
Ein weiterer Nachteil von Tabellendesign liegt ferner in der
starren Form und dem großen Arbeitsaufwand, wenn das Layout
geändert werden soll.
Ziel der ersten Schritte ist es daher, ein schlichtes
XHTML-Projekt mittels derartiger Stilvorlagen oder
style-sheet zu erstellen, gemäß dem
aktuellen CSS-Standard.
Ich werde einzelne XHTML- und CSS-Anweisungen
nicht genau erklären, die genaue Syntax sollte
entweder bei W3C nachgelesen werden oder
bei Stefan Münzens selfhtml-Projekt.
Hier geht es mehr um einfache Beispiele für die Praxis, die
zeigen sollen, wie leistungsfähig moderne Darstellungsprogramme
derzeit sind, aber auch, welche Anzeigefehler bei
älteren Programmen auftreten.
Der geneigte Leser sollte also im Idealfall mehrere
Programme parat haben, um die Darstellung der verschiedenen
Layouts beurteilen zu können.
Eine gute Auswahl für moderne Darstellungsprogramme der fünften
Generation sind ab etwa September 2003 Mozilla
(alternativ Iceape, Iceweasel, SeaMonkey, firefox, firebird, netscape 6 oder 7, Galeon, Epiphany und
andere mit einer Gecko-Maschine) und Opera 7, 8, 9, 10, 11, 12 soweit
verfügbar auch Konqueror 2 (mit Abstrichen bei CSS)
und Konqueror 3 oder 4 oder Safari.
Der typische Vertreter eines alten Darstellungsprogrammes der vierten
Generation ist Netscape4 - weitere sind Opera 4/5/6
und soweit verfügbar auch msie 5/6.
Als typische Textdarstellungsprogramme seien lynx und elinks genannt, aber
auch das Darstellungsprogramm Amaya von W3C hat eine Text-Ansicht.
Dessen CSS-Interpretation ist allerdings meist ein
Abenteuer - aber es handelt sich ja auch um ein
experimentelles Darstellungsprogramm, dessen Stärken anderswo
liegen (SVG, MathML etc). Das Darstellungsprogramm Dillo etwa zeigt
zwar Bilder, aber kein CSS an, ähnlich wie alte
Programme wie Netscape 3.
Als Alternative ist bei meinen Beispielen auch mit jedem
Programm das Layout 'Kein CSS' anwählbar,
mit dem die Anzeige ähnlich wie bei einem
Textdarstellungsprogramm ist beziehungsweise einem ohne CSS-Interpretation
- eine entsprechende Option kann ich
auch nur für eigene Projekte empfehlen, da dieses
keine Mehrarbeit bedeutet, aber eine Anzeige wirklich
mit jeglichem Darstellungsprogramm sicherstellt, das wenigstens
XHTML beherrscht.
Unter dem Menüpunkt browser gehe ich kurz auf
die Problematik verschiedener browser-Generationen und
verschiedener gängiger einzelner Darstellungsprogramme ein.
Unter Kochrezept wird eine kurze Anleitung gegeben,
wie ein Projekt mit CSS-Layout effektiv erstellt werden
kann.
Das Entstehen eines Layouts eines einfachen Einzeldokumentes kann
vom Leser Schritt für Schritt mit dem Artikel erstes CSS
nachvollzogen werden.
Unter Übung kann dann erprobt werden,
wie Elemente mittels Stilvorlagen angeordnet werden
können und wie sich bestimmte CSS-Attribute konkret
auswirken.
Der Verweis Beispiele führt zu
einem in verschiedenen Varianten umgesetzten Projekt
einer zugänglichen, barrierefreien Seite.
CSS und PHP zeigt ein Beispiel, wie CSS-Layout
mit PHP noch flexibler gemacht werden kann.
Mit einer browser-Weiche wird man sich beschäftigen
wollen, wenn ein Layout auch noch für ältere
browser angepaßt werden soll. Der Abschnitt
CSS-Weiche gibt eine Einführung mit prinzipiellen
Ideen zum Vorgehen.
Ein paar weitere Diskussionsbeiträge zu spezielleren Themen
sind ebenfalls beigefügt.