Little Boxes: Webseiten gestalten mit CSS. Teil 1: Grundlagen

Buchcover......Page 1
Little Boxes: Webseiten gestalten mit CSS. Teil 1: Grundlagen......Page 4
Impressum......Page 5
Übersicht......Page 6
Inhaltsverzeichnis......Page 8
Die Idee zu diesem Buch......Page 20
Für wen ist das Buch?......Page 21
So ist das Buch aufgebaut......Page 22
Die Beispieldateien......Page 23
Teil I - Die Einleitung......Page 24
1.1 Papierdenken, Webseiten und enttäuschte Erwartungen......Page 26
Unterschied 1: Der Autor einer Webseite hat keine vollständige Kontrolle......Page 27
Unterschied 2: Webseiten sehen bei jedem Benutzer andersaus......Page 29
Die Zeitung: Papierseiten sind starr, Webseiten flexibel......Page 30
Webseiten haben Schichten......Page 31
Notwehr: Tabellen und ......Page 32
Zurück zum Papierdenken......Page 33
1.4 Tabellenfreie Layouts mit CSS......Page 34
Teil II - HTML – Kisten erstellen......Page 36
2.1 Webseiten bestehen aus rechteckigen Kästchen......Page 38
M wie Markup: Etiketten kleben......Page 39
XHTML: Die neueste Version von HTML......Page 40
2.4 ......Page 41
Ein Grundgerüst für die Webseite erstellen......Page 42
2. Das Stammelement: ......Page 44
3. Der Vorspann: ......Page 45
Alle HTML-Elemente haben einen Anfangs- und ein Ende-Tag......Page 47
Das Wichtigste zu Attributen......Page 48
Block- und Inline-Elemente verhalten sich unterschiedlich......Page 49
2.7 Auf einen Blick......Page 50
3.1 Die Seite in Bereiche einteilen: div......Page 52
Der Schutzumschlag: wrapper......Page 53
Die Bereiche erstellen mit div......Page 54
3.2 Überschriften: h1 bis h6......Page 55
Überschriftebene nicht aufgrund der Schriftgröße wählen......Page 56
3.3 Absätze: p wie paragraph......Page 57
3.5 HTML-Elemente verschachteln: Zuerstgeöffnet, zuletzt geschlossen......Page 58
3.6 Jeder Browser hat ein eingebautes Stylesheet......Page 59
Aufzählungen: Ungeordnete Listen mit ul und li......Page 60
Nummerierungen: Geordnete Listen mit ol und li......Page 61
Verschachtelte Listen......Page 62
3.8 Definitionslisten: dl, dt und dd......Page 63
Anatomie eines Hyperlinks......Page 64
Die Navigation: Eine ungeordnete Liste mit Hyperlinks......Page 65
Ein Skip-Link zum Überspringen der Navigation......Page 67
3.11 Die Wegbeschreibung zur Grafik: img......Page 68
Die Attribute zu img......Page 69
Ein Logo als Überschrift?......Page 70
Beginne eine neue Zeile: 
......Page 71
blockquote und cite für Zitate......Page 72
span ist ein neutrales Inline-Element......Page 73
Character Entities: Allgemeine Sonderzeichen......Page 74
Eine einfache Tabelle: table, tr und td......Page 76
Kopf, Fuß und Körper einer Tabelle......Page 77
3.14 Stimmt die Statik? HTML überprüfen mit dem Validator......Page 79
3.15 CSS zum Ausprobieren: Die W3C Core Styles......Page 80
3.16 Die Kontaktseite: Von der Seite zur Site.......Page 82
Der Quelltext der Startseite index.html......Page 83
Der Quelltext der Kontaktseite kontakt.html......Page 85
3.18 Auf einen Blick......Page 86
Teil III - CSS-Grundlagen – Kisten gestalten......Page 88
4.1 Ein Stylesheet ist eine Sammlung von Formatvorlagen......Page 90
Stylesheet erstellen und einen CSS-Kommentar schreiben......Page 91
Die Verbindung zwischen HTML und CSS: link......Page 92
Hintergrund- und Schriftfarbe für body und #wrapper......Page 94
Hintergrund- und Schriftfarben im Kopfbereich......Page 95
4.5 Schriftart und -größe: fontfamilyundfontsize......Page 97
4.7 Style: Der Aufbau einer CSS-Regel......Page 98
4.8 Die Adresse gestalten......Page 100
Besuchte und nicht besuchte Hyperlinks......Page 101
Wenn die Maus darüber schwebt: a:hover und Kollegen......Page 103
Den Skip-Link ausblenden......Page 105
2. Zwischen  und : Das Element style......Page 107
Vorfahrt: Welche Styles gewinnen?......Page 108
4.11 Das Stylesheet im Überblick......Page 109
4.12 Auf einen Blick......Page 110
5.1 Ein Selektor wählt das zu gestaltende Kästchen aus......Page 112
Mehrere Kästchen auf einmal: Selektoren mit Komma trennen......Page 113
Nur die Hyperlinks im Textbereich: #textbereich a......Page 114
Unterschiedliche Nummerierung bei geordneten Listen......Page 115
Es kann nur einen geben: ID, der Selektor mit der Raute......Page 116
Gruppenbildung: class, der Selektor mit dem Punkt......Page 117
ID- und Class-Namen sollten die Bedeutung des Elements beschreiben......Page 118
Einer wird gewinnen: So funktioniert Spezifität......Page 119
Ein paar Beispiele für die Punktewertung......Page 120
Grundregeln: Die Leerstelle, die Null und der Anführungsstrich......Page 121
Für den Bildschirm: Relative Einheiten......Page 122
Für den Drucker: Absolute Einheiten......Page 123
5.6 Farben definieren: Hexadezimal, Dezimal und Namen......Page 124
5.7 Auf einen Blick......Page 126
6.1 Potentielle Probleme beim Gestalten der Kästchen......Page 128
Alle Boxen sind gleich: Das Modell......Page 129
Der Inhaltsbereich: width (Breite) und height (Höhe)......Page 130
Der Rahmen: border (Rahmenlinien)......Page 131
Vertikale Außenabstände kollabieren: collapsing margins......Page 132
Wenig intuitiv: Die Gesamtbreite einer Box berechnen......Page 133
Die Abstände der eingebauten Browser Stylesheets annullieren......Page 134
Die Abstände für die wichtigsten Elemente neu definieren......Page 136
6.4 Die Breite eines Elements: width......Page 137
6.5 Die Seite zentrieren: margin:auto......Page 138
6.6 Eine Rahmenlinie erstellen: border......Page 139
6.7 Ein bisschen Abstand drum herum: padding......Page 140
6.8 Das Box-Modell und die farbliche Gestaltung......Page 143
Hintergrundgrafik einbinden: background-image......Page 144
Hintergrundgrafiken kacheln: background-repeat......Page 145
Hintergrundgrafik fixieren: background-attachment......Page 147
6.10 Das Stylesheet im Überblick......Page 148
6.11 Auf einen Blick......Page 150
7.1 Der Kommentar am Anfang......Page 152
7.2 Das Stylesheet in Abschnitte unterteilen......Page 153
Teil 2 – Styles für die Layoutbereiche......Page 154
Eine typische CSS-Regel......Page 155
7.4 Die Reihenfolge der Deklarationen im Style......Page 156
Alphabetisch sortiert......Page 157
Die Reihenfolge entscheidet: Nur eine Seite anders......Page 158
Unterschiedliche Werte für alle vier Seiten......Page 159
7.6 Das aufgeräumte Stylesheet im Überblick......Page 160
7.7 Der CSS-Validator......Page 162
7.8 Auf einen Blick......Page 164
8.1 Listenelemente nebeneinander: display:inline......Page 166
Der verschachtelte Selektor #navibereichli......Page 167
Feineinstellungen: Abstände und Hyperlinks anpassen......Page 168
margin-bottom für ul......Page 169
Feineinstellungen für die Hyperlinks......Page 170
Vorbereitende Maßnahmen für #navibereich......Page 171
Die Hyperlinks im Navigationsbereich ändern......Page 172
Einen Rollover-Effekt für die Hyperlinks definieren......Page 173
Sie sind hier: Aktuelle Seite hervorheben......Page 174
Standardkonform, barrierefrei und flexibel......Page 175
8.4 Die Styles zur Navigation im Überblick......Page 177
8.5 Auf einen Blick......Page 178
Stylesheet nur für die Anzeige am Bildschirm......Page 180
Ein zweites Stylesheet nur für den Ausdruck......Page 182
Grundlegende Schriftgestaltung......Page 183
Gestaltung der Überschriften......Page 184
URL der Hyperlinks sichtbar machen......Page 186
Schritt 1: Das Formular im HTML-Quelltext......Page 188
Schritt 2: Das Formular per CSS gestalten......Page 190
Schritt 3: Den Cursor in das erste Feld setzen......Page 192
Schritt 4: Das Reiseziel für das Formular festlegen......Page 193
Schritt 5: Dem Formular-Chef die E-Mail-Adresse mitteilen......Page 194
Schritt 6: Testen des fertigen Formulars......Page 196
9.3 Auf einen Blick......Page 197
10.1 Der Stammbaum: Die Struktur der Webseite......Page 198
Der Stammbaum für die Startseite......Page 199
Die Reihenfolge: Kaskade – Vererbung – Standardwert......Page 200
Stufe 1: Finde alle Deklarationen zu einem Element......Page 201
Stufe 2: Sortiere nach Ursprung und Wichtigkeit......Page 202
Stufe 3: Sortiere nach Spezifität des Selektors......Page 203
Stufe 4: Sortiere nach Reihenfolge des Auftretens......Page 204
Vererbung macht ein Stylesheet übersichtlicher......Page 205
10.5 Auf einen Blick......Page 206
Teil IV - CSS-Layout – Kisten verschieben......Page 208
11 Der Flow und die Positionierung......Page 210
Drei Boxen im Fluss......Page 211
Drei verkürzte Boxen im Fluss......Page 212
Versetzt weiterfließen: position:relative......Page 213
11.3 Die absolute Positionierung: RausausdemFluss......Page 215
1. position:absolute, relativ zum Stammelement......Page 216
2. position:absolute, relativ zum Kopfbereich......Page 218
Schriftgestaltung für den Slogan im Kopfbereich......Page 219
Wie ein Fels in der Brandung: position:fixed......Page 220
11.4 Auf einen Blick......Page 222
12.1 Text um Bilder fließen lassen......Page 224
Die Grafik einbinden......Page 225
Die Grafik floaten......Page 226
Praktisch: CSS-Klassen zum links und rechts floaten......Page 227
clear: Text unterhalb der Grafik beginnen lassen......Page 229
Das Beispiel: Drei Boxen ohne float......Page 231
Drei Kästchen nach links floaten......Page 233
Drei Kästchen nach rechts floaten......Page 234
Float und verschieden hohe Boxen......Page 235
12.3 Kleine Galerie: Gefloatete Elemente umschließen......Page 236
Der HTML Quelltext......Page 237
Der erste Versuch: Die Bilder floaten......Page 239
Lösung 1: HTML-Element mit clear......Page 240
Lösung 2: Set a float to fix a float......Page 241
Lösung 3: Ohne float und clear: overflow:hidden......Page 243
Floats umschließen: Die Übersicht......Page 244
12.4 Die Galerie in die Beispielsite einbauen......Page 245
Die Beispielseite galerie.html......Page 246
Das CSS im Überblick......Page 247
Die Seite im Internet Explorer 6......Page 248
12.5 Auf einen Blick......Page 249
13 Mehrspaltige Layouts mit position: absolute......Page 252
13.1 Ein einfaches zweispaltiges Layout......Page 253
13.2 Ein einfaches dreispaltiges Layout......Page 254
13.3 Ein dreispaltiges Layout mit Kopfbereich......Page 255
13.4 Das Problem: Ein durchgehender Fußbereich......Page 257
13.5 Auf einen Blick......Page 259
14.1 Zweispaltiges Layout mit float und margin......Page 260
Schritt 1: Den Navigationsbereich floaten......Page 261
Schritt 2: Den Textbereich mit einem großen Rand versehen......Page 263
Schritt 3: Die Listenelemente in der Navigation gestalten......Page 264
Schritt 4: Die Hyperlinks in der Navigation gestalten......Page 265
Schritt 5: Den aktuellen Navigationspunkt hervorheben......Page 266
Schritt 6: »Falsche Spalte« – Hintergrundfarbe für die Navigation......Page 267
Schritt 7: Den Fußbereich clearen......Page 269
Exkurs: Die globale Wirkung von clear......Page 270
14.2 Dreispaltiges Layout mit float und margin......Page 272
Die Anpassungen im CSS......Page 273
Eine andere Reihenfolge im HTML......Page 275
Das CSS anpassen......Page 276
Zwei zusätzliche Bereiche im HTML einfügen......Page 278
Die beiden neuen Spalten im CSS gestalten......Page 279
14.5 Auf einen Blick......Page 280
15 Layouts für Fortgeschrittene......Page 282
15.1 Liquid Layouts (mit Prozentangaben)......Page 283
15.2 Elastische Layouts (Angaben in em)......Page 286
15.3 Fertige CSS-Layouts......Page 289
15.4 YAML – Yet Another Multicolumn Layout......Page 291
15.5 Auf einen Blick......Page 292
Vor dem Einbau von Patches gründlich checken......Page 294
Inline-Patches: Sternchen & Co.......Page 295
@import – Styles vor alten Browsern verstecken......Page 296
Kurze Geschichte des Internet Explorer......Page 297
Der Internet Explorer und das »Layout«......Page 298
Das etwas andere Box-Modell des IE 5.x......Page 299
Conditional Comments: Styles nur für den IE......Page 300
Testen, ob Conditional Comments funktionieren......Page 301
Patches für den IE5.x......Page 302
Patches für IE5 und IE6......Page 303
16.4 Auf einen Blick......Page 304
Teil V - Wichtige Werkzeuge......Page 306
17.1 Browser......Page 308
17.2 TopStyle – der CSS-Editor......Page 309
TopStyle Lite downloaden......Page 310
Kurzes Tutorial zu TopStyle Lite......Page 311
Visual Source Chart – die Kästchen im Quelltext sichtbar machen......Page 315
Web Developer – Das Schweizer Offiziersmesser......Page 316
Firebug – Das Analysetool......Page 317
ColorZilla – Die Farbenwahl......Page 318
17.4 Hilfreiche Sites zu CSS......Page 319
17.5 Interessante Bücher......Page 320
Stichwortverzeichnis......Page 322