Vorwort. 23
Teil I Die Einleitung. 27
1. Das Web ist nicht aus Papier. 29
1.1. Papierdenken, Webseiten und enttäuschte Erwartungen. 29
1.2. Der Autor einer Webseite hat keine vollständige Kontrolle über deren Aussehen. 30
1.3. Webseiten sehen bei jedem Benutzer anders aus. 32
1.4. Jenseits von Papier. 35
1.5. Zurück in die Zukunft -- die Browser bestimmen. 37
2. HTML und CSS im Schnelldurchlauf. 41
2.1. Webseiten bestehen aus rechteckigen Kästchen. 41
2.2. HTML ist der Maurer -- rechteckige Kästchen erstellen. 42
2.3. CSS ist der Stylist -- rechteckige Kästchen gestalten. 45
2.4. Entwickler-Tools -- HTML und CSS analysieren. 48
2.5. Auf einen Blick. 49
Teil II HTML-Crashkurs -- Kästchen erstellen. 51
3. Das HTML-Grundgerüst. 53
3.1. HTML -- Hyperlinks erstellen und 'Etiketten kleben'. 53
3.2. Das HTML-Grundgerüst ist das Skelett einer Webseite. 55
3.3. Die Dokumenttyp-Definition -- . 57
3.4. Das Stammelement . 58
3.5. Informationen über die Webseite -- . 58
3.6. Der Inhalt der Webseite -- . 61
3.7. HTML-Elemente im Quelltext -- Anfangs-Tag, Inhalt und Ende-Tag. 61
3.8. Auf einen Blick. 62
4. HTML-Elemente für Überschriften, Text und Listen. 63
4.1. Das Grundgerüst für die Startseite erstellen. 64
4.2. Die Seite in Layoutbereiche einteilen -- 'div'. 65
4.3. Überschriften -- 'h1' bis 'h6'. 68
4.4. Fließtext -- Absätze und Hervorhebungen. 70
4.5. Über Block- und Inline-Elemente. 72
4.6. Listen -- Aufzählungen und Nummerierungen. 74
4.7. Verschachtelte Listen. 76
4.8. Jeder Browser hat ein eingebautes Stylesheet. 78
4.9. Auf einen Blick. 79
5. HTML-Elemente für Links, Bilder und mehr. 81
5.1. Hyperlinks -- das Besondere am World Wide Web. 81
5.2. Die Wegbeschreibung zur Grafik -- 'img'. 87
5.3. Weitere nützliche HTML-Elemente. 89
5.4. Character Entities -- allgemeine Sonderzeichen. 93
5.5. Know-how -- Wissenswertes über Zeichensätze. 95
5.6. Auf einen Blick. 98
6. Das HTML für die Beispielseiten. 99
6.1. Stimmt die Statik? Der HTML-Validator. 99
6.2. CSS zum Ausprobieren -- die W3C Core Styles. 102
6.3. Die Kontaktseite -- von der Seite zur Site. 103
6.4. Der Quelltext der Webseiten im Überblick. 105
6.5. Auf einen Blick. 108
Teil III CSS Grundlagen -- Kästchen gestalten. 109
7. CSS kennenlernen -- Schriften, Farben und Hyperlinks. 111
7.1. Ein Stylesheet ist eine Sammlung von Formatvorlagen. 111
7.2. Überblick: CSS und das Gestalten der HTML-Kästchen. 112
7.3. Das erste eigene Stylesheet. 112
7.4. Hintergrund- und Schriftfarben definieren. 114
7.5. Schriftart und -größe gestalten. 119
7.6. Die Kontaktadresse im Fußbereich gestalten. 121
7.7. Hyperlinks gestalten. 123
7.8. Styles können an drei verschiedenen Stellen definiert werden. 128
7.9. Das Stylesheet im Überblick. 130
7.10. Auf einen Blick. 131
8. Selektoren, Einheiten und Farben. 133
8.1. Style -- der Aufbau einer CSS-Regel. 133
8.2. Ein Selektor wählt das zu gestaltende Kästchen aus. 134
8.3. Überblick: Die HTML-Elemente im DOM-Baum. 136
8.4. Selektoren kombinieren -- Nachfahren auswählen. 138
8.5. Eigene Namen vergeben -- 'id' und 'class'. 141
8.6. Spezifität -- das Punktesystem für Selektoren. 145
8.7. Werte und Maße in CSS -- die Qual der Wahl. 147
8.8. Farben definieren -- hexadezimal, dezimal und Namen. 150
8.9. Auf einen Blick. 152
9. Das Box-Modell. 153
9.1. Zuerst in modernen Browsern testen. 153
9.2. Das Box-Modell in der Übersicht. 154
9.3. Kalibrierung -- Abstände auf null setzen. 159
9.4. Webseite zentrieren mit 'width' und 'margin'. 162
9.5. Rahmenlinien erstellen -- 'border'. 164
9.6. Ein bisschen Abstand drumherum -- 'padding'. 165
9.7. Das Box-Modell und die farbliche Gestaltung. 168
9.8. Hintergrundgrafiken per CSS. 171
9.9. Vertikale Außenabstände kollabieren -- 'collapsing margins'. 178
9.10. Das Stylesheet im Überblick. 183
9.11. Auf einen Blick. 185
10. Ordnung halten in den Stylesheets. 187
10.1. Der Kommentar am Anfang. 187
10.2. Das Stylesheet in Abschnitte unterteilen. 188
10.3. Verschiedene Schreibweisen für Styles. 190
10.4. Die Reihenfolge der Deklarationen im Style. 192
10.5. Effektiv -- Kurzschreibweisen für 'padding' und 'margin'. 193
10.6. Mehrere Stylesheets erstellen und zentral einbinden. 196
10.7. Die Stylesheets für die Beispielsite im Überblick. 199
10.8. Der CSS-Validator. 204
10.9. Auf einen Blick. 206
11. Eine horizontale Navigation per 'display:inline'. 207
11.1. Einfache horizontale Navigation mit 'display: inline'. 207
11.2. Punktsieg -- Spezifität in der Praxis. 212
11.3. Von Elementen und Boxen. 214
11.4. Tabbed Navigation -- Navigation mit Registern. 215
11.5. Know-how -- das Box-Modell für Inliner. 223
11.6. Exkurs: Whitespace -- der Leerstellenpakt. 226
11.7. Auf einen Blick. 230
12. Ein Kontaktformular erstellen. 231
12.1. Schritt 1: Das HTML für das Kontaktformular. 231
12.2. Schritt 2: Das Formular per CSS gestalten. 237
12.3. Schritt 3: Das Formular aktivieren und testen. 241
12.4. Exkurs: Ein mehrspaltiges Kontaktformular. 243
12.5. Auf einen Blick. 245
13. HTML-Tabellen erstellen und gestalten. 247
13.1. Das HTML für Tabellen. 247
13.2. Tabellen gestalten per CSS -- ein Beispiel. 252
13.3. Übersichtliche Tabellen -- Hover und Zebrastreifen. 256
13.4. Auf einen Blick. 258
14. Fließtext, Webfonts und Druckversion. 259
14.1. Fließtext besser lesbar machen. 259
14.2. Webfonts -- die Schriftart gleich mitliefern. 265
14.3. Eine Druckversion für die Beispielseiten. 269
14.4. Favicon -- das Minilogo für Ihre Seiten. 277
14.5. Auf einen Blick. 278
15. Kaskade, Vererbung oder Standardwert. 279
15.1. Überblick: DOM-Baum und Kaskade. 279
15.2. Der Anfang: Sammle alle relevanten Deklarationen. 283
15.3. Stufe 1: Sortiere nach Wichtigkeit (importance). 286
15.4. Stufe 2: Sortiere nach Spezifität (specificity). 289
15.5. Stufe 3: Sortiere nach Reihenfolge (order). 290
15.6. Die Vererbung (inheritance). 291
15.7. Der Standardwert (initial value). 293
15.8. Auf einen Blick. 294
Teil IV CSS-Positionierung -- Kästchen verschieben. 295
16. Kästchen verschieben mit 'position'. 297
16.1. Überblick: CSS und Positionierung. 297
16.2. 'Flow' -- die Seite ist ein langer, ruhiger Fluss. 298
16.3. Versetzt weiterfließen -- 'position: relative'. 301
16.4. Raus aus dem Fluss -- 'position: absolute'. 302
16.5. Absolute Positionierung auf der Beispielsite. 304
16.6. Wie ein Fels in der Brandung -- 'position: fixed'. 309
16.7. Positionierte Boxen und der 'z-index'. 311
16.8. Auf einen Blick. 314
17. Kästchen verschieben mit 'float' und 'clear'. 315
17.1. Text um Bilder fließen lassen. 315
17.2. Praktisch -- CSS-Klassen zum Floaten. 319
17.3. Floats beenden mit 'clear'. 321
17.4. Floats mit mehreren Boxen. 324
17.5. Zusammenfassung: Besonderheiten beim Floaten. 329
17.6. Auf einen Blick. 330
18. Containing Floats -- gefloatete Elemente umschließen. 331
18.1. Die Beispielseite zum Umschließen von Floats. 331
18.2. Das Problem: Gefloatete Elemente ragen nach unten heraus. 334
18.3. Fünf Methoden zum Umschließen von Floats. 336
18.4. Methode 1: Float einschließen mit 'clear'. 337
18.5. Methode 2: Set a float to fix a float. 338
18.6. Methode 3: Ohne 'float' und 'clear' -- 'overflow: hidden'. 340
18.7. Methode 4: Auch ohne 'float' und 'clear' -- 'display:table'. 341
18.8. Methode 5: Easy Clearing -- die Sache mit dem Punkt. 342
18.9. Die Galerieseite in die Beispielsite einbauen. 346
18.10. Auf einen Blick. 350
19. Eine floatbasierte horizontale Navigation. 351
19.1. Vorbereitungen für die floatbasierte Navigation. 352
19.2. Schritt 1: Den Navigationsbereich gestalten. 353
19.3. Schritt 2: Die Links in der Navigation gestalten. 355
19.4. Schritt 3: Aktive Links hervorheben und Hover-Effekt erstellen. 356
19.5. Schritt 4: CSS-Sprites -- mehrere Grafiken in einer. 357
19.6. Das komplette CSS für die Navigation im Überblick. 360
19.7. Auf einen Blick. 362
Teil V Mehrspaltige Layouts mit CSS. 363
20. Media Queries -- eine mobile Version erstellen. 365
20.1. Bestandsaufname: Die Beispielseiten auf einem Smartphone. 365
20.2. Schritt 1: Die feste Layoutbreite entfernen. 367
20.3. Schritt 2: Die Anweisung 'meta viewport' hinzufügen. 369
20.4. Schritt 3: Optimierung von Kopfbereich und Formular. 370
20.5. Schritt 4: Media Query für große Bildschirme. 373
20.6. Auf einen Blick. 379
21. Zweispaltiges Layout mit 'float' und 'margin'. 381
21.1. Mehrspaltigkeit ist in CSS 2 eigentlich eine Illusion. 382
21.2. Festes Layout mit 'float' und 'margin'. 385
21.3. Flexibles Layout mit fester Navigationsspalte. 395
21.4. Flexibles Layout mit flexibler Navigationsspalte. 399
21.5. Exkurs: Die globale Wirkung von 'clear' und der BFC. 404
21.6. Auf einen Blick. 408
22. Weitere mehrspaltige Layoutmethoden. 409
22.1. Der Infobereich -- ein zusätzlicher Layoutbereich. 409
22.2. Das feste Layout flexibilisieren. 415
22.3. Ein dreispaltiges Layout mit vertikaler Navigation. 417
22.4. 'Bäumchen wechsel dich' für die Layoutbereiche. 424
22.5. Ein dreispaltiges Layout mit negativem Margin. 427
22.6. Auf einen Blick. 434
23. Patchwork -- Flicken im CSS. 437
23.1. Patches und Hacks. 437
23.2. Der Internet Explorer. 438
23.3. Conditional Comments in Aktion. 441
23.4. Die Beispielseiten im IE 7 und IE8. 443
23.5. Auf einen Blick. 445
Teil VI Tipps und Tricks. 447
24. Suchfunktion, Dropdown und HTML5. 449
24.1. Eine Suchfunktion für Ihre Site. 449
24.2. Dropdown -- horizontale Navigation zum Rausklappen. 457
24.3. Die neuen HTML5-Elemente für die Layoutbereiche. 464
24.4. Auf einen Blick. 468
25. Nützliche Programme und Websites. 469
25.1. Die Browser. 469
25.2. Browserzubehör -- praktische Add-ons. 471
25.3. Editoren für HTML und CSS. 475
25.4. FTP -- Veröffentlichen von Webseiten. 477
25.5. Editoren zum Bearbeiten von Grafiken. 477
25.6. Referenzen und Online-Quellen. 478
Index. 481
