Warum Layout mit Tabellen dumm ist:

Probleme definiert, Lösungen angeboten

Tabellen haben in HTML immer nur zu einem Zweck existiert: Um tabellarische Daten darzustellen. Dann kam eine Zeit, wo es für die Designer durch border="0" auf einmal möglich war, ein Raster über ihre Seiten zu legen, um daran Grafiken und Text auszurichten. Obwohl es immer noch die meistgebrauchte Methode ist, um optisch gutaussehende Websites zu erschaffen, widerspricht die Nutzung von Tabellen zu Layoutzwecken den Bemühungen, ein besseres, leichter benutzbares, flexibles und funktionelles WWW zu schaffen. Finden Sie heraus, woher die Probleme kommen, und lernen Sie Methoden für die Übergangsphase und schließlich für ein komplett tabellenfreies Layout.

Holen Sie Ihren Chef

Sind Ihre Vorgesetzten hier bei Seybold, in einem anderen Seminar? Holen Sie sie. Sie sind es, die wissen müssen, wie Web Standards ihrer Firma Kosten ersparen können.

Übersicht: Was springt für mich dabei raus?

Wir werden Ihnen eine Einführung in eine Arbeitsweise geben, die

• Ihre Seiten schneller laden lässt
• Ihre Hosting-Kosten senkt
• Ihre Redesigns effizienter und billiger macht
• Ihnen hilft, eine optische Konsistenz in allen Seiten zu erhalten
• Ihnen bessere Suchmachinenergebnisse liefert
• Ihre Sites besser nutzbar für alle Besucher und Clients macht
• und Ihnen einen Vorsprung gegenüber Konkurrenten schafft (und Ihren Job sichert), weil immer mehr dazu übergehen, Web Standards zu verwenden.

Wir werden außerdem darüber sprechen, warum Layouts mit Cascading Style Sheets (CSS) eine andere Denkweise bei der Erstellung des Inhalts und der Verwendung des Markups erfordern, als Sie es gewohnt sind.

Killer Web Sites: Verschachtelte Tabellen und Spacer GIFs

Anfangs war das Internet nur ein Medium zum Informationsaustausch für Akademiker, Forscher und das Militär. Es dauerte aber nicht lang, bis unternehmerische Visionäre erkannten, dass dieses neue Medium ideal war, um alles mögliche zu verkaufen, von Lebensmitteln und Hundefutter bis hin zu Gebrauchtwagen und Sportübertragungen.

Aber wie es mit jedem Medium in seinen Anfängen ist, war das Internet ästhetisch gesehen "hässlich" (und nicht wirklich sehr verlockend für potenzielle Kunden), bis David Siegel um 1997 seine "Bibel" veröffentlichte, in dem er einige brilliante Hilfskonstruktionen für die bis dahin existierenden Browser und W3C Spezifikationen beschrieb. (Wir reden hier von Netscape 2 und 3, Leute.)

Diese Konstruktionen waren so brilliant, dass sie noch immer die vorherrschende Methode darstellen, ein Layout für Webseiten zu erschaffen.

Das Problem beim Benutzen von Tabellen:

• vermischt das Layout mit dem Inhalt.
  • Die Dateigröße Ihrer Seiten wird dadurch unnötig groß, und Ihre Besucher müssen die Layout-Daten bei jeder Seite, die sie besuchen, mit laden.
  • Bandbreite ist nicht kostenlos.
• Das macht Neudesigns existierender Seiten und Inhalte extrem arbeitsintensiv (und teuer).
• Es ist sehr schwer (und teuer) ein gleiches Aussehen aller Seiten der ganzen Site beizubehalten.
• Seiten mit Tabellen-Layout sind außerdem viel schlechter nutzbar von behinderten Personen und Leuten, die mit PDAs das Web besuchen.

Rettung ist in Sicht

Moderne Browser können Web Standards viel besser darstellen und wir brauchen diese veralteten Methoden nicht mehr zu verwenden.

Anstatt Tabellen zu verschachteln und leere Zellen mit Space GIFs zu füllen, können wir viel einfacheres Markup benutzen und CSS dafür verwenden, schöne Sites zu layouten, die schneller geladen werden, einfacher zu ändern sind, und die für jedermann besser zu benutzen sind.

Die Lösung: CSS und strukturelles Markup

Dadurch, dass wir strukturelles Markup in unseren HTML-Dokumenten verwenden, und unser Layout mit Cascading Style Sheets machen, können wir den tatsächlichen Inhalt unserer Seiten davon trennen, wie sie präsentiert werden.

Das hat einige Vorteile gegenüber Tabellen...

Redesigns sind leichter und billiger

Wenn Sie Präsentations-Markup aus Ihren Seiten entfernen, wird das Ändern des gesamten Designs und des Inhalts deutlich weniger arbeitsintensiv (und viel billiger). Um das Layout der ganzen Site zu ändern, müssen Sie nur die Style Sheets ändern; Sie brauchen keine einzige der eigentlichen Seiten zu bearbeiten.

Schauen Sie sich beispielsweise den CSS Zen Garden, oder den Style-Wechsler auf Eric Meyers Site an. Lesen Sie auch Alternative Style von Paul Sowden.

Bandbreite ist nicht kostenlos

Wenn Sie Web Standards benutzen, werden sich Ihre Dateigrößen verringern, weil Ihre Besucher nicht bei jeder Seite die Layout-Informationen mit laden müssen. Die Style Sheets, die für das Layout zuständig sind, werden vom Browser des Betrachters in den Cache gestellt, und somit nur einmal geladen.

Geringere Dateigrößen bedeuten schnellere Ladezeiten und geringere Kosten fr das Hosting.

Hey, die Seiten sehen ja alle gleich aus!

Web Standards machen es außerdem extrem einfach, ein gleiches Erscheinungsbild zu wahren, das sich durch die gesamte Site zieht. Alle Seiten sind gleich formatiert, weil sie alle ein und die selbe CSS Datei fr das Layout verwenden.

Das stärkt Ihre Corporate Identity und vereinfacht die Nutzbarkeit Ihrer Site.

Einmal schreiben, überall benutzen, für jedermann

Web Standards sorgen dafür, dass sich die Nutzbarkeit verbessert, vor allem für Besucher mit Behinderungen und für Nutzer, die mit Handys und PDAs das Web benutzen.

Besucher, die Vorlesebrowser benutzen (sowie auch solche mit langsamen Verbindungen) müssen sich nicht durch endlos viele Tabellenzellen kämpfen, um an den tatsächlichen Inhalt der Seiten zu gelangen.

In anderen Worten, die Trennung von Inhalt und Layout macht die Site Browser-unabhängig.

Google ist blind

Wo wir gerade von Nutzbarkeit reden, wenn Sie Ihr Markup minimieren und Meta-Tags richtig anwenden, wird das auch dazu beitragen, dass Ihr Suchmaschinen-Ranking verbessert wird.

Reduzieren Sie das Verhältnis von Code zu Inhalt, benutzen Sie Stichworte in Ihren Meta-Tags und ersetzen Sie Grafiken mit Überschriften durch echten Text, und Sie werden mit besseren Suchergebnissen belohnt.

Sie können weiterhin Tabellen benutzen, wenn Sie müssen, aber nicht zu viele

Auf die Weise bekommen Browser (und Chefs) die gezwungen sind, bis zu ihrem Tode Browser der Version 4 zu benutzen, eine akzeptierbare Vorstellung, was der Rest der Welt zu sehen bekommt.

Eine gutaussehende Tabelle

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Werfen Sie einen Blick hinter die Kulissen.

		Das könnte wirklich viel einfacher gemacht werden.				Raten Sie, wieviel Markup in dieser kleinen Tabelle ist! 13.7k. Sie hat 17 Zeilen und 9 Spalten. Und habe ich die ganzen Spacer GIFs erwähnt?
		Es sind definitiv zu viele Tabellenzellen und Platzhalter.				Und die ganzen gepunkteten Rahmenlinien werden mit dem background Attribut in Zellen gemacht, was nicht valide ist. • Eine verschachtelte Tabelle? Wozu? • Um eine Liste zu machen? Das ist ein Witz, oder?
		Das alles könnte mit 8 Tabellenzellen und 4 CSS Regeln gemacht werden.				Wirklich! 8 Zellen und 4 CSS Regeln, mehr ist nicht nötig. • Oh nein, noch eine Tabelle, die sich als Liste ausgibt. • Schreiben Sie Ihre Liste als Liste und lassen Sie CSS den Rest übernehmen.
		Sie brauchen eine Regel für <table>, eine für <td>, eine für <ul> und eine für <li>.				Das ist alles. • Das ist besser als noch 8 Tabellenzellen zu benutzen um eine Liste vorzutäuschen, die dann nichtmal barrierefrei ist. • Exzellent! Die letzte geschummelte Liste.

Der Code für die Tabellenstruktur:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

So ist es viel besser

Und hier ist der CSS Code, den Sie brauchen, um das überflüssige Markup loszuwerden:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Neugestaltung der Übergangsdesigns

Benutzen Sie margin und padding anstelle von Extra-Zellen und Spacer GIFs.

Benutzen Sie link und @import um Ihre Stylesheets einzubinden. Ersteres für ältere Browser, letzteres für moderne Browser.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Beispiele:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

Aber moment, es gibt noch mehr:

Für mehr Informationen zu Übergangsdesigns, lesen Sie das erste Kapitel von Eric Meyer on CSS und das meiste von Jeffrey Zeldmans Designing with Web Standards.

CSS Layouts: Hier ist die Zukunft

Die Browser, die die große Mehrheit der Besucher heute benutzt, können gut mit CSS umgehen. Sie haben alle ihre Problemchen, aber sobald Sie sich an sie gewöhnt haben, können Sie sie umgehen.

CSS Stylesheets schreiben ist einfach. Selbst für jemanden wie mich, der der Meinung ist, dass JavaScript aussieht wie eine Aneinanderreihung von Flüchen.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Jede CSS Regel hat einen Selektor und eine Deklaration. Die Deklaration besteht aus einer Eigenschaft und einem Wert. Eigenschaften, die sich anhören wie mehrere Wörter, werden mit Bindestrich geschrieben.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Semantisches Markup: Schreibe, was Du meinst, und meine, was Du schreibst.

Während das eigentliche Schreiben von CSS einfach ist, benötigt das Entwerfen von Layouts mit CSS eine leicht andere Denkweise als die, mit denen die meisten von uns vertraut sind.

Anstelle zu denken, dass "das hierhin muss, und das dort positioniert wird", müssen wir die eigentlichen Inhalte in unserer Seite und die Struktur dieser Informationen bedenken.

Der wichtigsten Überschrift geben wir ein <h1>-Tag; untergeordnete Überschriften bekommen <h2>-Tags, usw.; Absätze werden als Paragraph markiert.

Das ist als "strukturelles" oder "semantisches" Markup bekannt.

Anstatt dass Sie Ihren Inhalt in Tabellen und Zellen stellen, verpacken Sie ihn in div Elemente. Geben Sie Ihren div Elementen eine ID oder eine Klasse, die den Inhalt oder die Funktion des Bereichs beschreibt und nicht sein Aussehen.

Vermeiden Sie <b>ed und <br>eakfast Markup

Denken Sie daran, warum Sie wollen, dass etwas in einer bestimmten Form erscheint; was bedeutet es? Ihr Markup kann und soll die Bedeutung vermitteln, selbst für jemanden, der Ihre Site nicht sehen kann. Semantisches Markup macht Ihre Seiten zugänglicher, Suchmaschinen eingeschlossen.

Wenn Sie etwas kursiv schreiben, tun Sie das, weil sie es betonen wollen (<em>), oder weil es der Titel eines Buches ist (<cite>)?

Wenn etwas fett ist, sollte es möglicherweise mit <strong> geschrieben werden.

Wenn Sie einen Zeilenumbruch nach etwas wollen, stehen die Chancen gut, dass es eine Überschrift darstellen soll. Wenn es keine Überschrift ist, ist es vielleicht Teil einer Klasse die durch die gesamte Site vorkommt? Wenn das der Fall ist, benutzen Sie CSS anstelle von <br>.

.foo {display:block}

Für mehr zu diesem Thema, lesen Sie Bed and BReakfast markup (B&BR) von Tantek elik.

Was sind Navigationsmenüs?

Denken Sie nach: Ihre Navigation ist eigentlich eine ungeordnete Liste von Links.

Nutzen Sie dafür das <ul>-Tag.

• Link1
• Link2
• Link3
• Link4
• Link5

Horizontale Navigationsmenüs

Wir können CSS dazu benutzen, festzulegen, wie diese Listen auf unseren Seiten aussehen sollen.

Indem wir display:inline benutzen, können wir horizontale Navigationsmenüs machen.

Hier ist der Code für dieses Menü:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Vertikale Navigationsmenüs

Hier ist der Code für dieses Menü:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Für mehr Information lesen Sie den Artikel von Mark Newhouse, Taming lists, bei "A List Apart", und "Styling lists" beim "CSS-Discuss Wiki".

Dinge, die mit Tabellen besser klappen als mit CSS

Es gibt gewisse Dinge, die CSS nicht so gut kann, wie Layout mit Tabellen.

Sagen wir beispielsweise, Sie haben ein schwarzes Navigationsmenü auf der Seite, das sich nach unten genauso weit erstrecken soll, wie der Inhalt. Mit einem Tabellenlayout ist das einfach: Geben Sie dem <td> einen schwarzen Hintergrund.

Wir können das auch mit CSS machen, aber es erfordert eine andere Denkweise.

Wenn wir unserem Navigations-div einen schwarzen Hintergrund geben, wird der Hintergrund sich nur soweit erstrecken, wie die Navigation hoch ist. Auf den meisten Seiten ist der Inhalt aber länger als die Navigation, deswegen ist das keine gute Idee.

Stattdessen könnten wir ein schwarzes GIF in unser Inhalts-div setzen, und diesem div genug padding auf der linken Seite geben, aber wenn unsere Navigation länger ist als der Inhalt, würde das auch nicht funktionieren.

Ein anderer Weg zur Lösung ist, das schwarze GIF als Hintergrundbild zum <body> einzufügen, was ganz gut klappt, solange Sie nicht ein anderes Hintergrundbild für Ihren <body> benutzen wollen.

Oder, wir könnten ein div um unseren Inhalt stellen und das Bild in diesen div als Hintergrund stellen. Nur leider sorgt das für viel nicht semantischen Kram in unserem Markup.

Und, natürlich werden Hintergrundbilder nichts bringen, wenn sich die Breite Ihrer Seite der Browserbreite anpassen soll.

Wie gesagt, es gibt Dinge, die mit Tabellen leichter funktionieren, als mit CSS. Am Ende müssen Sie sich selbst fragen, ob der ganze überschüssige Code, der bei Tabellenlayout zwangsläufig dabei ist, die Sache wert ist.

Der Umstieg von Tabellen-Hacks auf Web Standards

Als erstes brauchen Sie eine Migrations-Strategie. Werden Sie die gesamte Site auf einmal umsetzen, oder werden Sie es Abschnitt für Abschnitt tun?

Suchen Sie als erstes die Seiten heraus, die von der Migration am meisten profitieren. Startseiten, neue Produktankündigungen und ähnliche Seiten sind die klassischen Seiten, mit denen man anfängt.

Bestimmen Sie, welche Inhalte/Informationen in Ihrer Site als Ganze existieren

• Produktinformationen
• Preise
• Informationen über die Firma
• Portfolio
• Dienstleistungen
• Informationen für Investoren
• Warenkorb
• Benutzerforen
• und so weiter

Komplette Neugestaltung Ihrer Seiten

Sobald Sie einen Überblick über die Inhalte auf Ihrer Site haben, wird es Zeit, eine logische Aufteilung für Ihre existierenden Seiten zu finden.

• Hauptnavigation
• Unternavigation
• Überschriften und Fußnoten
• Inhalt
• Verwandte Informationen
• Sonstiges

Untersuchen Sie Ihre Tabellenstruktur auf verschachtelte Tabellen und leere Platzhalter- und Rahmen-Zellen. (Wir wollen diese durch div-Tags oder eine deutlich einfachere Tabellenstruktur ersetzen.)

Schauen Sie Ihr Markup an

Sobald Sie die Struktur Ihrer Seiten analysiert haben, ist es Zeit, einen Blick unter die Oberfläche zu werfen und den HTML-Code nach Dingen abzusuchen, die eigentlich ins Layout gehören, um diese durch strukturelles Markup zu ersetzen.

• Aus Liebe zu allem, was rein und gut ist, schmeißen Sie alle <font>-Tags und Spacer GIFs raus!
• Genauso, lösen Sie sich von <b> und <br>.
• Weg mit den Layout-Attributen für Tabellen (bgcolor, background, usw.).
• Ersetzen Sie CSS, das rein dem Layout dient (Dinge wie <span class="header">) durch geeignetes strukturelles Markup. (Tantek elik geht in seinem Artikel, A Touch of Class, ins Detail.)

Ersetzen Sie Layout-Tags durch strukturelles Markup

Sie können Suchen&Ersetzen (und Reguläre Ausdrücke benutzen, aber der einfachste Weg, das Ersetzen durchzuführen, ist wahrscheinlich, die alte Seite in einem Browser anzusehen und den Text von dort in Ihren HTML-Editor zu kopieren.

Denken Sie an die Struktur Ihres Dokuments! Bloß <b>-Tags durch <strong>-Tags zu ersetzen, ist nicht genug.

Was ist die wichtigste Überschrift? Markieren Sie diese mit einem <h1>-Tag. Benutzen Sie <h2>-Tags usw. für die untergeordneten Überschriften. Für Absätze verwenden Sie <p>-Tags. Aus Navigationsmenüs machen Sie ungeordnete Listen.

Suchen Sie sich einen DOCTYPE aus und benutzen Sie ihn. (Wir empfehlen XHTML Transitional, es sei denn, Sie sind Hardcore HTML-Coder, in diesem Fall benutzen Sie XHTML Strict.)

Teilen Sie Ihre Seite in logische divs auf

Stecken Sie Ihre Hauptnavigation in ein div mit einer id mit Namen "hauptnav"; für Ihre Unternavigation verwenden Sie ein div mit einer id oder class mit Namen "unternav", Die Fußzeile kriegt ein <div id="fusszeile">, und der Inhalt kommt in ein <div id="inhalt">.

Es sieht bisher nach nichts aus, aber sobald Sie anfangen, CSS Regeln zu erstellen, wird es ganz anders aussehen.

Es ist Zeit, das Stylesheet zu schreiben

Zunächst geben Sie jedem div einen Rahmen (border), beispielsweise div {border:1px dotted gray; padding:.5em} Das wird Ihnen helfen, zu sehen, wo diese beginnen und enden, und ob Sie irgendwelche Bereiche verschachtelt haben oder nicht.

Schreiben Sie zuerst Ihr CSS für Element-Selektoren (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, usw.)

Nutzen Sie sinngemäße oder Nachfahrenselektoren so oft wie möglich. Das wird Ihr Markup sehr viel sauberer halten. Beispiel: #unternav li{border:1px solid black; padding:.5em; display: inline} betrifft nur Listenelemente, die innerhalb ihres div namens "unternav" stehen.

Testen Sie Ihre Seiten in so vielen Browsern wie möglich, und lassen Sie Ihre Freunde die Seiten in ihren Browsern testen.

Beispielseiten, deren Layout mit CSS gemacht wurde

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Lesen Sie alles über CSS

Es ist ganz klar, dass wir nicht alles, was Sie über CSS wissen müssen in eine Stunde packen können, aber diese Bücher hier können Ihnen helfen, Web Standards zu nutzen, um Ihre Seiten schlanker, sauberer und schneller zu machen.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, und Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee und Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Papier? Wir brauchen kein doofes Papier: Online Ressourcen

CSS-Discuss

• Mailing List: Sehr aktiv, sehr hilfreich.
• Wiki: "Unter anderem dient Wiki als ein gemeinsames Langzeitgedächtnis für alle Teilnehmer der Mailing List." Möchten Sie dem Internet Explorer für Windows etwas geben, das er versteht, aber den wirklich modernen Browsern 'echtes' CSS verpassen? Hier werden Sie das und mehr herausfinden.
• Archive: Sie haben ein CSS Problem, an dem Sie festhängen? Keine Sorge, jemand anders hatte dieses Problem auch schon (und hat Hilfe dazu bekommen). Finden Sie hier die Antworten.

zeldman.com The Daily Report: Verständlich, mit Denkanstößen, und gut geschriebener Inhalt und Links die regelmäßig auf neustem Stand gehalten werden.

A List Apart Für Leute, die Websites gestalten

• Taming lists, Mark Newhouse. Unentbehrliche Informationen, um Ihre Navigation semantisch richtig zu erstellen.
• CSS: Going to Print, Eric Meyer. Sie brauchen nie wieder eine 'druckerfreundliche' Version zu schaffen.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Lassen Sie Ihre Besucher entscheiden, wie sie die Site ansehen wollen.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Strukturelles Markup wird Ihnen sogar helfen, bessere Suchmaschinenrankings zu erlangen.

The Web Standards project Hoch leben diese Leute.

CSS: A guide for the unglued Eine großartige Seite mit Links

CSS Layout Techniques: for Fun and Profit Layouts, die Sie für Ihre Projekte benutzen können, von Eric Costello. Dazu Quellen und Tutorials.

Real World Style CSS Layouts, Tipps, Tricks, und Techniken, von Mark Newhouse.

The Business Benefits of Web Standards Gute Nachrichten für moderne Chefs. Web Standards präsentiert in einer Form, die auch ein Betriebswirt zu schätzen weiß.

SelfHTML - HTML-Dateien selbst erstellen DIE deutsche Quelle für HTML, CSS und JavaScript schlechthin.

Danke. Irgendwelche Fragen?