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 Kontrolle ... 30
1.3 ... Webseiten sehen bei jedem Benutzer anders aus ... 32
1.4 ... Übersicht: Eine kurze Geschichte des Weblayouts ... 35
2. HTML und CSS im Schnelldurchlauf ... 39
2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 39
2.2 ... HTML ist der Maurer, der rechteckige Kästchen erstellt ... 40
2.3 ... CSS ist der Stylist, der die rechteckigen Kästchen gestaltet ... 43
2.4 ... Entwickler-Tools -- HTML und CSS analysieren ... 46
2.5 ... Auf einen Blick ... 47
Teil II. HTML-Crashkurs -- Kästchen erstellen ... 49
3. Das HTML-Grundgerüst ... 51
3.1 ... HTML -- Hyperlinks erstellen und »Etiketten kleben« ... 51
3.2 ... Das HTML-Grundgerüst ist das Skelett einer Webseite ... 53
3.3 ... Die Dokumenttyp-Definition -- <!DOCTYPE html> ... 55
3.4 ... Das Stammelement <html> ... 55
3.5 ... Informationen über die Webseite -- <head> ... 56
3.6 ... Der Inhalt der Webseite -- <body> ... 59
3.7 ... HTML-Elemente im Quelltext -- Anfangs-Tag, Inhalt und EndeTag ... 59
3.8 ... Auf einen Blick ... 60
4. HTML-Elemente für Überschriften, Text und Listen ... 61
4.1 ... Das Grundgerüst für die Startseite erstellen ... 62
4.2 ... Die Seite in Bereiche einteilen: »header«, »nav«, »main«, »footer« und »div« ... 63
4.3 ... Überschriften -- »h1« bis »h6« ... 66
4.4 ... Fließtext -- Absätze und Hervorhebungen ... 68
4.5 ... Über Block- und Inline-Elemente ... 70
4.6 ... Listenkisten -- Aufzählungen und Nummerierungen ... 72
4.7 ... Verschachtelte Listen ... 74
4.8 ... Jeder Browser hat ein eingebautes Stylesheet ... 76
4.9 ... Auf einen Blick ... 77
5. HTML-Elemente für Links, Bilder und mehr ... 79
5.1 ... Hyperlinks -- das Besondere am World Wide Web ... 79
5.2 ... Die Wegbeschreibung zur Grafik -- »img« ... 83
5.3 ... Weitere HTML-Elemente zur Auszeichnung von Text ... 86
5.4 ... Know-how -- Zeichensätze und Sonderzeichen ... 89
5.5 ... Auf einen Blick ... 93
6. Von der Beispielseite zur Beispielsite ... 95
6.1 ... Stimmt die Statik? Der HTML-Validator ... 95
6.2 ... CSS zum Ausprobieren -- die W3C Core Styles ... 98
6.3 ... Die Kontaktseite -- von der Seite zur Site ... 100
6.4 ... Auf einen Blick ... 101
Teil III. CSS Grundlagen -- Kästchen gestalten ... 103
7. CSS kennenlernen -- Schriften, Farben und Hyperlinks ... 105
7.1 ... Ein Stylesheet ist eine Sammlung von Formatvorlagen ... 105
7.2 ... Überblick: CSS und das Gestalten der HTML-Kästchen ... 106
7.3 ... Das erste eigene Stylesheet ... 107
7.4 ... Farben für Hintergrund und Schrift definieren ... 109
7.5 ... Schriftgestaltung mit »font-family« und »font-size« ... 113
7.6 ... Textgestaltung: Die Kontaktadresse im Fußbereich ... 115
7.7 ... Hyperlinks gestalten ... 116
7.8 ... Styles können an drei verschiedenen Stellen definiert werden ... 121
7.9 ... Auf einen Blick ... 123
8. Selektoren, Einheiten und Farben in CSS ... 125
8.1 ... Style -- der Aufbau einer CSS-Regel ... 125
8.2 ... Ein Selektor wählt das zu gestaltende Kästchen aus ... 126
8.3 ... Überblick: Die HTML-Elemente im DOM-Baum ... 128
8.4 ... Selektoren kombinieren -- Nachfahren auswählen ... 130
8.5 ... Eigene Namen vergeben -- »id« und »class« ... 132
8.6 ... Spezifität -- das Punktesystem für Selektoren ... 136
8.7 ... Werte und Maße in CSS -- die Qual der Wahl ... 139
8.8 ... Farben definieren -- hexadezimal, RGB und Namen ... 141
8.9 ... Auf einen Blick ... 143
9. Das Box-Modell ... 145
9.1 ... Zunächst in modernen Browsern testen ... 145
9.2 ... Das Box-Modell in der Übersicht ... 146
9.3 ... Kalibrierung -- Abstände per Reset vereinheitlichen ... 152
9.4 ... Webseite zentrieren mit »width« und »margin« ... 155
9.5 ... Rahmenlinien erstellen -- »border« ... 158
9.6 ... Ein bisschen Abstand drumherum -- »padding« ... 159
9.7 ... Das Box-Modell und die farbliche Gestaltung ... 162
9.8 ... Hintergrundgrafiken per CSS ... 164
9.9 ... Vertikale Abstände kollabieren -- »collapsing margins« ... 170
9.10 ... Auf einen Blick ... 175
10. Ordnung halten und aufräumen ... 177
10.1 ... Der Kommentar am Anfang ... 177
10.2 ... Das Stylesheet in Abschnitte unterteilen ... 178
10.3 ... Verschiedene Schreibweisen für Styles ... 180
10.4 ... Die Reihenfolge der Deklarationen im Style ... 182
10.5 ... Effektiv -- Kurzschreibweisen für »padding« und »margin« ... 183
10.6 ... Mehrere Stylesheets erstellen und zentral einbinden ... 186
10.7 ... Styles aufräumen: Die einzelnen Stylesheets ... 189
10.8 ... Dateien in Unterordnern organisieren ... 194
10.9 ... Der CSS-Validator ... 199
10.10 ... Auf einen Blick ... 201
11. Eine einfache horizontale Navigation ... 203
11.1 ... Einfache horizontale Navigation mit »display: inline« ... 203
11.2 ... Punktsieg -- Spezifität in der Praxis ... 209
11.3 ... Von Elementen und Boxen ... 210
11.4 ... Tabbed Navigation -- Navigation mit Registern ... 212
11.5 ... Know-how -- das Box-Modell für Inliner ... 220
11.6 ... Exkurs: Whitespace -- der Leerstellenpakt ... 223
11.7 ... Auf einen Blick ... 227
12. Ein Kontaktformular erstellen und gestalten ... 229
12.1 ... Schritt 1: Das HTML für das Kontaktformular ... 229
12.2 ... Schritt 2: Das Formular per CSS gestalten ... 235
12.3 ... Schritt 3: Das Formular aktivieren und testen ... 240
12.4 ... Exkurs: Ein mehrspaltiges Kontaktformular ... 242
12.5 ... Auf einen Blick ... 244
13. Webfonts, Fließtext und Druckversion ... 247
13.1 ... Webfonts -- die Schriftart gleich mitliefern ... 247
13.2 ... Fließtext gestalten ... 253
13.3 ... Eine Druckversion für die Beispielseiten ... 258
13.4 ... Favicon -- das Minilogo für Ihre Seiten ... 264
13.5 ... Auf einen Blick ... 265
14. HTML-Tabellen erstellen und gestalten ... 267
14.1 ... Das HTML für Tabellen ... 267
14.2 ... Tabellen gestalten per CSS -- ein Beispiel ... 272
14.3 ... Übersichtliche Tabellen -- Hover und Zebrastreifen ... 276
14.4 ... Auf einen Blick ... 279
15. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 281
15.1 ... Überblick: DOM-Baum und Kaskade ... 281
15.2 ... Kaskade -- Stufe 1: Sammle alle relevanten Deklarationen ... 284
15.3 ... Kaskade -- Stufe 2: Sortiere nach Wichtigkeit ... 287
15.4 ... Kaskade -- Stufe 3: Sortiere nach Spezifität ... 290
15.5 ... Kaskade -- Stufe 4: Sortiere nach Reihenfolge ... 291
15.6 ... Die Vererbung (inheritance) ... 292
15.7 ... Der Standardwert (initial value) ... 295
15.8 ... Auf einen Blick ... 295
Teil IV. CSS-Positionierung -- Kästchen verschieben ... 297
16. Kästchen verschieben mit »position« ... 299
16.1 ... »Flow« -- die Seite ist ein langer, ruhiger Fluss ... 300
16.2 ... Versetzt weiterfließen -- »position: relative« ... 303
16.3 ... Raus aus dem Fluss -- »position: absolute« ... 304
16.4 ... Absolute Positionierung auf der Beispielsite ... 306
16.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 311
16.6 ... Positionierte Boxen und der »z-index« ... 313
16.7 ... Auf einen Blick ... 316
17. Kästchen verschieben mit »float« und »clear« ... 317
17.1 ... Text um Bilder fließen lassen ... 317
17.2 ... Praktisch -- CSS-Klassen zum Floaten ... 321
17.3 ... Floats beenden mit »clear« ... 323
17.4 ... Floats mit mehreren Boxen ... 326
17.5 ... Zusammenfassung: Besonderheiten beim Floaten ... 331
17.6 ... Auf einen Blick ... 332
18. Containing Floats -- gefloatete Elemente umschließen ... 333
18.1 ... Die Beispielseite zum Umschließen von Floats ... 333
18.2 ... Das Problem: Gefloatete Elemente ragen nach unten heraus ... 336
18.3 ... Mehrere Methoden zum Umschließen von Floats ... 338
18.4 ... Methode 1: Zusätzliches HTML-Element und »clear« ... 339
18.5 ... Methode 2: Set a float to fix a float ... 340
18.6 ... Methode 3: Ohne »float« und »clear« -- »overflow: hidden« ... 342
18.7 ... Methode 4: Auch ohne »float« und »clear« -- »display:table« ... 344
18.8 ... Methode 5: Der Micro Clearfix Hack ... 345
18.9 ... Die Galerieseite in die Beispielsite einbauen ... 346
18.10 ... Auf einen Blick ... 350
19. Eine floatbasierte horizontale Navigation ... 353
19.1 ... Vorbereitungen für die floatbasierte Navigation ... 354
19.2 ... Schritt 1: Den Navigationsbereich gestalten ... 355
19.3 ... Schritt 2: Die Links in der Navigation gestalten ... 357
19.4 ... Schritt 3: Linkzustände gestalten ... 358
19.5 ... Know-how: Lineare Farbverläufe per CSS3 ... 360
19.6 ... Auf einen Blick ... 363
Teil V. Mehrspaltige Layouts mit CSS ... 365
20. Media Queries -- eine mobile Version erstellen ... 367
20.1 ... Bestandsaufname: Die Beispielseiten auf einem Smartphone ... 367
20.2 ... Schritt 1: Die feste Layoutbreite entfernen ... 369
20.3 ... Schritt 2: Die Anweisung »meta viewport« hinzufügen ... 370
20.4 ... Schritt 3: Den Slogan neu positionieren ... 372
20.5 ... Schritt 4: Eine Media Query für breite Browserfenster ... 373
20.6 ... Schritt 5: Das Kontaktformular anpassen ... 379
20.7 ... Know-how: Bilder für hochauflösende Bildschirme ... 381
20.8 ... Auf einen Blick ... 385
21. Zweispaltiges Layout mit »float« und »margin« ... 387
21.1 ... Methoden zum Layouten per CSS im Überblick ... 387
21.2 ... Layout mit fester Breite per »float« und »margin« ... 390
21.3 ... Flexibles Layout mit fester Navigationsspalte ... 400
21.4 ... Flexible Layouts und das Border-Box-Modell ... 403
21.5 ... Know-how: Die globale Wirkung von »clear« und der BFC ... 407
21.6 ... Auf einen Blick ... 412
22. Mehrspaltige Layouts mit »Content First« ... 413
22.1 ... Die HTML-Elemente »aside« und »section« ... 413
22.2 ... Zweispaltige Layouts: beide Bereiche mit »float« ... 415
22.3 ... Dreispaltige Layouts: »float« und negativer Margin ... 423
22.4 ... »Bäumchen wechsel dich« für die Layoutbereiche ... 428
22.5 ... Auf einen Blick ... 431
23. Suchfunktion, Dropdown-Menü und mobile Navigation ... 433
23.1 ... Eine Suchfunktion für Ihre Site ... 433
23.2 ... Dropdown -- horizontale Navigation zum Ausklappen ... 440
23.3 ... Eine mobile Navigation nur mit CSS ... 449
23.4 ... Auf einen Blick ... 459
24. Layouten mit der Flexbox: »display:flex« ... 461
24.1 ... Flexbox: Das »CSS Flexible Box Layout Module« ... 461
24.2 ... Der erste Schritt: Flexbox definieren mit »display:flex« ... 464
24.3 ... Die Ausdehnung der Flex-Items bestimmen mit »flex« ... 467
24.4 ... »flex« ist kurz für »flex-grow«, »flex-shrink« und »flex-basis« ... 470
24.5 ... Das Box-Modell der Flexbox: Haupt- und Nebenachsen ... 473
24.6 ... Beispiel: Flexibles Kontaktformular ohne Media Query ... 477
24.7 ... Flexbox: Eigenschaften und Werte in der Übersicht ... 484
24.8 ... Auf einen Blick ... 487
Teil VI. Patches, Werkzeuge und nützliche Websites ... 489
25. Patchwork -- Flicken im CSS ... 491
25.1 ... IE und CSS -- zwei Welten begegnen sich ... 491
25.2 ... Der Internet-Explorer-Countdown: 11, 10, 9 ... ... 493
25.3 ... Die Beispielseiten im Internet Explorer 8 ... 496
25.4 ... Die Browserpräfixe: »-webkit-« und Co ... 501
25.5 ... Ein Fundament für Ihr CSS: »normalize.css« ... 502
25.6 ... Auf einen Blick ... 503
26. Werkzeuge und nützliche Websites ... 505
26.1 ... Die Browser bestimmen, was geht ... 505
26.2 ... Browserzubehör -- praktische Add-ons ... 507
26.3 ... Editoren für HTML und CSS ... 509
26.4 ... Editoren zum Bearbeiten von Grafiken ... 511
26.5 ... FTP -- Veröffentlichen von Webseiten ... 511
26.6 ... Referenzen und Websites zu HTML und CSS ... 512
Index ... 517
