Elisabeth Wetsch
Einstieg in CSS
Elisabeth Wetsch
Einstieg in CSS
- Buch
- Merkliste
- Auf die Merkliste
- Bewerten Bewerten
- Teilen
- Produkt teilen
- Produkterinnerung
- Produkterinnerung
Nie war es anschaulicher CSS zu lernen! Elisabeth Wetsch bereitet Sie in leicht nachvollziehbaren Schritten auf den Innenausbau der Website mit Cascading Stylesheets vor. Auf der Tagesordnung stehen profesionnelle Layouts, universell einsetzbare und kreative Vorlagen sowie ein Referenzteil, damit man bei der täglichen Arbeit auch einmal nachschlagen kann.
Nie war es anschaulicher CSS zu lernen! Elisabeth Wetsch bereitet Sie in leicht nachvollziehbaren Schritten auf den Innenausbau der Website mit Cascading Stylesheets vor. Auf der Tagesordnung stehen profesionnelle Layouts, universell einsetzbare und kreative Vorlagen sowie ein Referenzteil, damit man bei der täglichen Arbeit auch einmal nachschlagen kann.
- Verlag: Galileo Press
- ISBN-13: 9783836211956
- Artikelnr.: 23446966
Elisabeth Wetsch arbeitet bereits seit 1995 als Webentwicklerin. Zudem ist sie Trainerin am Wifi Wien, wo sie Schulungen zu allen Bereichen der Webproduktion durchführt.
Vorwort 11
1 Auf die Plätze 15
1.1 Wozu CSS lernen 16
1.2 Wem nützt dieses Buch 17
1.3 Wie funktioniert dieses Buch 17
2 Was Sie wissen sollten 21
2.1 Was sind Webstandards 22
2.2 Was ist das W3C 22
2.3 Was ist eine Webseite 23
2.4 Was ist HTML 23
2.5 Was ist XHTML 24
2.6 Was ist CSS 25
2.7 Was bedeutet Browserkompatibilität 27
2.8 Was versteht man unter Usability 27
2.9 Wie sorgt man für Accessibility 28
2.10 Wozu tabellenfreies Design 29
3 Was Sie können sollten 31
3.1 HTML-Grundlagen 32
3.2 Upload von Dateien - FTP 32
3.3 Grundkenntnisse in Englisch 33
4 Was Sie verwenden sollten 35
4.1 XHTML-Editor Amaya 36
4.2 Browser-Erweiterungen 36
4.3 Foren 38
5 Was Sie verstehen sollten 39
5.1 Der Aufbau einer XHTML-Datei 40
5.2 Die wichtigsten Regeln für XHTML 43
5.3 HTML-Elemente 45
5.4 Schreibweisen in (X)HTML 46
5.5 Der Aufbau einer CSS-Datei 46
5.6 Die wichtigsten Regeln für CSS 47
5.7 CSS-Selektoren 48
5.8 Schreibweisen in CSS 48
5.9 Verkürzte Schreibweise von Eigenschaften 50
5.10 XHTML und CSS miteinander verbinden 54
6 Der erste Entwurf 59
6.1 Die XHTML-Datei - Struktur und Inhalt der Webseite 60
6.2 Die CSS-Datei - Formen und Farben der Webseite 65
6.3 Browsercheck - ganz schnell 68
6.4 Lorem ipsum - provisorischer Inhalt 70
7 Die drei Säulen von CSS: 1. Die Selektoren 73
7.1 Der Universal-Selektor 74
7.2 Typ-Selektoren (Element-Typ-Selektoren 75
7.3 ID-Selektoren 76
7.4 Klassen-Selektoren 77
7.5 Pseudoklassen 80
7.6 Pseudoelemente 82
7.7 Attribut-Selektoren 82
7.8 Kombinatoren 83
7.9 Gruppieren von Deklarationen 84
7.10 Gruppieren von Selektoren 84
7.11 Namen von Selektoren 85
7.12 Spanitis, Divitis, Klassitis - gefürchtete Seuchen 86
8 Die drei Säulen von CSS: 2. Das Boxmodell 89
8.1 Das IE 5-Boxmodell 93
8.2 display - Element-Anzeige ändern 96
9 Die drei Säulen von CSS: 3. Positionierung 99
9.1 position: static 100
9.2 Normal Flow 101
9.3 top, right, bottom, left 102
9.4 position: relative 103
9.5 position: absolute 104
9.6 position: fixed 106
9.7 float und clear 106
9.8 z-index 109
9.9 clear 109
10 Die Grundeinstellungen 111
10.1 Scroll-Balken erzwingen 112
10.2 Seite zentrieren in drei Schritten 114
11 Die Navigation 119
11.1 Navigation horizontal 120
11.2 Menü vertikal 124
11.3 font - Schriften benutzerfreundlich voreinstellen 133
11.4 background - Farben und Bilder als Hintergrund 137
12 Mehr Design mit CSS 143
13 Bilder einsetzen und gestalten 149
14 Inhalte strukturieren und formatieren 155
14.1 font-, text-, paragraph - Schriften und Text 156
14.2 anchor - Links im Text gestalten 158
14.3 h1 bis h6 - noch mehr Design für Überschriften 161
14.4 strong, em - fett und betont 165
14.5 span - das Inline-Pendant zu div 166
14.6 ol und li - nummerierte Listen 168
14.7 blockquote, cite - Textkästchen mit Quelle 170
14.8 definition, sample - Zitat, Definition, Beispiel 173
14.9 dl - noch mehr Listen 173
14.10 horizontal rule - horizontale Linie 176
15 Tabellen für Zahlen und Daten 177
16 Formulare formschön gestalten 185
17 CSS und Medien: Ein Stylesheet für den Druck 193
17.1 Verknüpfung von Media-Stylesheets 195
17.2 Stylesheets für Medien-Typen 196
17.3 Checkliste für Druck-Stylesheets 197
18 Kaskade, Spezifität und Vererbung - die lieben Verwandten 203
18.1 Kaskade - wer kommt zuerst 204
18.2 Spezifität - wer gewinnt 207
18.3 Vererbung - und wer erbt was 209
19 Grundsätzliche Überlegungen 215
19.1 Usability - Seien Sie freundlich zu Ihren Besuchern 216
19.2 Schriften unter der Lupe 217
19.3 Fix oder Flex 218
19.4 Design - Die Kunst liegt im Weglassen 219
20 Eine Basisvorlage für alle Fälle 221
20.1 Der Basis-HTML-Code häppchenweise 223
20.2 Der Basis-CSS-Code häppchenweise 225
20.3 Variante mit flexibler Breite 231
21 Vorlage #1: Eine Spalte 233
21.1 Variante mit fixer Breite 234
21.2 Designvorschläge 236
21.3 Variante mit flexibler Breite 240
21.4 Anwendungsbeispiele für einspaltige Layouts 240
22 Navigieren mit Tabs 243
22.1 Einfache Tab-Leiste mit Rollover-Effekt 244
22.2 Einfache Tab-Leiste mit Verlauf und Rollover 247
22.3 Tab-Leiste mit Pfeil für Rollover 252
22.4 Anwendungsbeispiele für Tab-Navigation 255
23 Vorlage #2: Zwei Spalten 257
23.1 Menü rechts 259
23.2 Menü links 260
23.3 Ein einfacher Style-Switcher 261
23.4 Variante mit Navigation 263
23.5 Variante Menüpunkte 264
23.6 Variante mit Hintergrundbildern 265
23.7 Anwendungsbeispiele für ein 2-Spalten-Layout 266
24 Vorlage #3: Drei Spalten mit Textboxen 269
24.1 Varianten für Textboxen 274
24.2 Variante mit drei Spalten, alle fluid 279
24.3 Variante mit schmalen Spalten rechts 281
24.4 Anwendungsbeispiele für
3-Spalten-Layouts 282
25 Vorlage #4: Vier Spalten 285
25.1 Variante mit drei Spalten rechts fix, Textspalte links fluid 287
25.2 Anwendungsbeispiele für 4-Spalten-Layouts 289
26 Vorlage #5: Drei Spalten mit Galerie 291
27 Vorlage #6: Frames oben und links 297
27.1 Varianten für das Design 305
28 Vorlage #7: Formular in Spalten 309
28.1 Modul 1: Namen und Adresse - Radio-Buttons und Textfelder 311
28.2 Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen 319
28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button 321
29 Elemente zentrieren 325
29.1 Elemente horizontal zentrieren 326
29.2 Elemente vertikal zentrieren 327
30 CSS-Code optimieren 331
30.1 Vor der Erstellung von Stylesheets 332
30.2 Nach dem Anlegen Ihres Projektes 340
30.3 Tools zur Optimierung von CSS-Code 341
31 CSS-Code validieren und Fehlersuche 345
31.1 W3C-Validatoren 346
31.2 Firefox-Erweiterung Web Developer 351
31.3 Web Development Bookmarklets 352
32 Browserkompatibilität testen 355
33 Was tun gegen Browserbugs 359
33.1 Hacks, Workarounds, Filter - die Begriffe 360
33.2 Das Problem mit Hacks und dergleichen 361
33.3 Grundsätzliche Überlegungen 362
33.4 Vorgehen bei einem vermeintlichen Bug 362
33.5 Conditional Comments 363
33.6 Der Star-Selektor-Hack 368
34 CSS-Eigenschaften A-Z 373
34.1 Eigenschaften von CSS 2.1 374
35 CSS: Maßeinheiten und Werte 395
35.1 Schlüsselbegriffe 396
35.2 Längenangaben 396
35.3 Farben 400
36 Nützliche Checklisten 403
36.1 Checkliste für die Webproduktion 404
36.2 Checkliste der "beliebtesten" Fehler in (X)HTML 406
36.3 Checkliste der "beliebtesten" Fehler in CSS 407
37 Meine liebsten Tools 409
38 CSS-Frameworks und YAML 415
38.1 Was sind CSS-Frameworks 416
38.2 Was ist YAML 416
38.3 Andere CSS-Frameworks 417
38.4 Vor- und Nachteile von CSS-Frameworks 421
38.5 CSS-Frameworks - ganz persönlich betrachtet 422
Inhalt der DVD-ROM 425
Übungsdateien zum Buch 426
Programme und Tools 426
Video-Training 427
1 Auf die Plätze 15
1.1 Wozu CSS lernen 16
1.2 Wem nützt dieses Buch 17
1.3 Wie funktioniert dieses Buch 17
2 Was Sie wissen sollten 21
2.1 Was sind Webstandards 22
2.2 Was ist das W3C 22
2.3 Was ist eine Webseite 23
2.4 Was ist HTML 23
2.5 Was ist XHTML 24
2.6 Was ist CSS 25
2.7 Was bedeutet Browserkompatibilität 27
2.8 Was versteht man unter Usability 27
2.9 Wie sorgt man für Accessibility 28
2.10 Wozu tabellenfreies Design 29
3 Was Sie können sollten 31
3.1 HTML-Grundlagen 32
3.2 Upload von Dateien - FTP 32
3.3 Grundkenntnisse in Englisch 33
4 Was Sie verwenden sollten 35
4.1 XHTML-Editor Amaya 36
4.2 Browser-Erweiterungen 36
4.3 Foren 38
5 Was Sie verstehen sollten 39
5.1 Der Aufbau einer XHTML-Datei 40
5.2 Die wichtigsten Regeln für XHTML 43
5.3 HTML-Elemente 45
5.4 Schreibweisen in (X)HTML 46
5.5 Der Aufbau einer CSS-Datei 46
5.6 Die wichtigsten Regeln für CSS 47
5.7 CSS-Selektoren 48
5.8 Schreibweisen in CSS 48
5.9 Verkürzte Schreibweise von Eigenschaften 50
5.10 XHTML und CSS miteinander verbinden 54
6 Der erste Entwurf 59
6.1 Die XHTML-Datei - Struktur und Inhalt der Webseite 60
6.2 Die CSS-Datei - Formen und Farben der Webseite 65
6.3 Browsercheck - ganz schnell 68
6.4 Lorem ipsum - provisorischer Inhalt 70
7 Die drei Säulen von CSS: 1. Die Selektoren 73
7.1 Der Universal-Selektor 74
7.2 Typ-Selektoren (Element-Typ-Selektoren 75
7.3 ID-Selektoren 76
7.4 Klassen-Selektoren 77
7.5 Pseudoklassen 80
7.6 Pseudoelemente 82
7.7 Attribut-Selektoren 82
7.8 Kombinatoren 83
7.9 Gruppieren von Deklarationen 84
7.10 Gruppieren von Selektoren 84
7.11 Namen von Selektoren 85
7.12 Spanitis, Divitis, Klassitis - gefürchtete Seuchen 86
8 Die drei Säulen von CSS: 2. Das Boxmodell 89
8.1 Das IE 5-Boxmodell 93
8.2 display - Element-Anzeige ändern 96
9 Die drei Säulen von CSS: 3. Positionierung 99
9.1 position: static 100
9.2 Normal Flow 101
9.3 top, right, bottom, left 102
9.4 position: relative 103
9.5 position: absolute 104
9.6 position: fixed 106
9.7 float und clear 106
9.8 z-index 109
9.9 clear 109
10 Die Grundeinstellungen 111
10.1 Scroll-Balken erzwingen 112
10.2 Seite zentrieren in drei Schritten 114
11 Die Navigation 119
11.1 Navigation horizontal 120
11.2 Menü vertikal 124
11.3 font - Schriften benutzerfreundlich voreinstellen 133
11.4 background - Farben und Bilder als Hintergrund 137
12 Mehr Design mit CSS 143
13 Bilder einsetzen und gestalten 149
14 Inhalte strukturieren und formatieren 155
14.1 font-, text-, paragraph - Schriften und Text 156
14.2 anchor - Links im Text gestalten 158
14.3 h1 bis h6 - noch mehr Design für Überschriften 161
14.4 strong, em - fett und betont 165
14.5 span - das Inline-Pendant zu div 166
14.6 ol und li - nummerierte Listen 168
14.7 blockquote, cite - Textkästchen mit Quelle 170
14.8 definition, sample - Zitat, Definition, Beispiel 173
14.9 dl - noch mehr Listen 173
14.10 horizontal rule - horizontale Linie 176
15 Tabellen für Zahlen und Daten 177
16 Formulare formschön gestalten 185
17 CSS und Medien: Ein Stylesheet für den Druck 193
17.1 Verknüpfung von Media-Stylesheets 195
17.2 Stylesheets für Medien-Typen 196
17.3 Checkliste für Druck-Stylesheets 197
18 Kaskade, Spezifität und Vererbung - die lieben Verwandten 203
18.1 Kaskade - wer kommt zuerst 204
18.2 Spezifität - wer gewinnt 207
18.3 Vererbung - und wer erbt was 209
19 Grundsätzliche Überlegungen 215
19.1 Usability - Seien Sie freundlich zu Ihren Besuchern 216
19.2 Schriften unter der Lupe 217
19.3 Fix oder Flex 218
19.4 Design - Die Kunst liegt im Weglassen 219
20 Eine Basisvorlage für alle Fälle 221
20.1 Der Basis-HTML-Code häppchenweise 223
20.2 Der Basis-CSS-Code häppchenweise 225
20.3 Variante mit flexibler Breite 231
21 Vorlage #1: Eine Spalte 233
21.1 Variante mit fixer Breite 234
21.2 Designvorschläge 236
21.3 Variante mit flexibler Breite 240
21.4 Anwendungsbeispiele für einspaltige Layouts 240
22 Navigieren mit Tabs 243
22.1 Einfache Tab-Leiste mit Rollover-Effekt 244
22.2 Einfache Tab-Leiste mit Verlauf und Rollover 247
22.3 Tab-Leiste mit Pfeil für Rollover 252
22.4 Anwendungsbeispiele für Tab-Navigation 255
23 Vorlage #2: Zwei Spalten 257
23.1 Menü rechts 259
23.2 Menü links 260
23.3 Ein einfacher Style-Switcher 261
23.4 Variante mit Navigation 263
23.5 Variante Menüpunkte 264
23.6 Variante mit Hintergrundbildern 265
23.7 Anwendungsbeispiele für ein 2-Spalten-Layout 266
24 Vorlage #3: Drei Spalten mit Textboxen 269
24.1 Varianten für Textboxen 274
24.2 Variante mit drei Spalten, alle fluid 279
24.3 Variante mit schmalen Spalten rechts 281
24.4 Anwendungsbeispiele für
3-Spalten-Layouts 282
25 Vorlage #4: Vier Spalten 285
25.1 Variante mit drei Spalten rechts fix, Textspalte links fluid 287
25.2 Anwendungsbeispiele für 4-Spalten-Layouts 289
26 Vorlage #5: Drei Spalten mit Galerie 291
27 Vorlage #6: Frames oben und links 297
27.1 Varianten für das Design 305
28 Vorlage #7: Formular in Spalten 309
28.1 Modul 1: Namen und Adresse - Radio-Buttons und Textfelder 311
28.2 Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen 319
28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button 321
29 Elemente zentrieren 325
29.1 Elemente horizontal zentrieren 326
29.2 Elemente vertikal zentrieren 327
30 CSS-Code optimieren 331
30.1 Vor der Erstellung von Stylesheets 332
30.2 Nach dem Anlegen Ihres Projektes 340
30.3 Tools zur Optimierung von CSS-Code 341
31 CSS-Code validieren und Fehlersuche 345
31.1 W3C-Validatoren 346
31.2 Firefox-Erweiterung Web Developer 351
31.3 Web Development Bookmarklets 352
32 Browserkompatibilität testen 355
33 Was tun gegen Browserbugs 359
33.1 Hacks, Workarounds, Filter - die Begriffe 360
33.2 Das Problem mit Hacks und dergleichen 361
33.3 Grundsätzliche Überlegungen 362
33.4 Vorgehen bei einem vermeintlichen Bug 362
33.5 Conditional Comments 363
33.6 Der Star-Selektor-Hack 368
34 CSS-Eigenschaften A-Z 373
34.1 Eigenschaften von CSS 2.1 374
35 CSS: Maßeinheiten und Werte 395
35.1 Schlüsselbegriffe 396
35.2 Längenangaben 396
35.3 Farben 400
36 Nützliche Checklisten 403
36.1 Checkliste für die Webproduktion 404
36.2 Checkliste der "beliebtesten" Fehler in (X)HTML 406
36.3 Checkliste der "beliebtesten" Fehler in CSS 407
37 Meine liebsten Tools 409
38 CSS-Frameworks und YAML 415
38.1 Was sind CSS-Frameworks 416
38.2 Was ist YAML 416
38.3 Andere CSS-Frameworks 417
38.4 Vor- und Nachteile von CSS-Frameworks 421
38.5 CSS-Frameworks - ganz persönlich betrachtet 422
Inhalt der DVD-ROM 425
Übungsdateien zum Buch 426
Programme und Tools 426
Video-Training 427
Vorwort 11
1 Auf die Plätze 15
1.1 Wozu CSS lernen 16
1.2 Wem nützt dieses Buch 17
1.3 Wie funktioniert dieses Buch 17
2 Was Sie wissen sollten 21
2.1 Was sind Webstandards 22
2.2 Was ist das W3C 22
2.3 Was ist eine Webseite 23
2.4 Was ist HTML 23
2.5 Was ist XHTML 24
2.6 Was ist CSS 25
2.7 Was bedeutet Browserkompatibilität 27
2.8 Was versteht man unter Usability 27
2.9 Wie sorgt man für Accessibility 28
2.10 Wozu tabellenfreies Design 29
3 Was Sie können sollten 31
3.1 HTML-Grundlagen 32
3.2 Upload von Dateien - FTP 32
3.3 Grundkenntnisse in Englisch 33
4 Was Sie verwenden sollten 35
4.1 XHTML-Editor Amaya 36
4.2 Browser-Erweiterungen 36
4.3 Foren 38
5 Was Sie verstehen sollten 39
5.1 Der Aufbau einer XHTML-Datei 40
5.2 Die wichtigsten Regeln für XHTML 43
5.3 HTML-Elemente 45
5.4 Schreibweisen in (X)HTML 46
5.5 Der Aufbau einer CSS-Datei 46
5.6 Die wichtigsten Regeln für CSS 47
5.7 CSS-Selektoren 48
5.8 Schreibweisen in CSS 48
5.9 Verkürzte Schreibweise von Eigenschaften 50
5.10 XHTML und CSS miteinander verbinden 54
6 Der erste Entwurf 59
6.1 Die XHTML-Datei - Struktur und Inhalt der Webseite 60
6.2 Die CSS-Datei - Formen und Farben der Webseite 65
6.3 Browsercheck - ganz schnell 68
6.4 Lorem ipsum - provisorischer Inhalt 70
7 Die drei Säulen von CSS: 1. Die Selektoren 73
7.1 Der Universal-Selektor 74
7.2 Typ-Selektoren (Element-Typ-Selektoren 75
7.3 ID-Selektoren 76
7.4 Klassen-Selektoren 77
7.5 Pseudoklassen 80
7.6 Pseudoelemente 82
7.7 Attribut-Selektoren 82
7.8 Kombinatoren 83
7.9 Gruppieren von Deklarationen 84
7.10 Gruppieren von Selektoren 84
7.11 Namen von Selektoren 85
7.12 Spanitis, Divitis, Klassitis - gefürchtete Seuchen 86
8 Die drei Säulen von CSS: 2. Das Boxmodell 89
8.1 Das IE 5-Boxmodell 93
8.2 display - Element-Anzeige ändern 96
9 Die drei Säulen von CSS: 3. Positionierung 99
9.1 position: static 100
9.2 Normal Flow 101
9.3 top, right, bottom, left 102
9.4 position: relative 103
9.5 position: absolute 104
9.6 position: fixed 106
9.7 float und clear 106
9.8 z-index 109
9.9 clear 109
10 Die Grundeinstellungen 111
10.1 Scroll-Balken erzwingen 112
10.2 Seite zentrieren in drei Schritten 114
11 Die Navigation 119
11.1 Navigation horizontal 120
11.2 Menü vertikal 124
11.3 font - Schriften benutzerfreundlich voreinstellen 133
11.4 background - Farben und Bilder als Hintergrund 137
12 Mehr Design mit CSS 143
13 Bilder einsetzen und gestalten 149
14 Inhalte strukturieren und formatieren 155
14.1 font-, text-, paragraph - Schriften und Text 156
14.2 anchor - Links im Text gestalten 158
14.3 h1 bis h6 - noch mehr Design für Überschriften 161
14.4 strong, em - fett und betont 165
14.5 span - das Inline-Pendant zu div 166
14.6 ol und li - nummerierte Listen 168
14.7 blockquote, cite - Textkästchen mit Quelle 170
14.8 definition, sample - Zitat, Definition, Beispiel 173
14.9 dl - noch mehr Listen 173
14.10 horizontal rule - horizontale Linie 176
15 Tabellen für Zahlen und Daten 177
16 Formulare formschön gestalten 185
17 CSS und Medien: Ein Stylesheet für den Druck 193
17.1 Verknüpfung von Media-Stylesheets 195
17.2 Stylesheets für Medien-Typen 196
17.3 Checkliste für Druck-Stylesheets 197
18 Kaskade, Spezifität und Vererbung - die lieben Verwandten 203
18.1 Kaskade - wer kommt zuerst 204
18.2 Spezifität - wer gewinnt 207
18.3 Vererbung - und wer erbt was 209
19 Grundsätzliche Überlegungen 215
19.1 Usability - Seien Sie freundlich zu Ihren Besuchern 216
19.2 Schriften unter der Lupe 217
19.3 Fix oder Flex 218
19.4 Design - Die Kunst liegt im Weglassen 219
20 Eine Basisvorlage für alle Fälle 221
20.1 Der Basis-HTML-Code häppchenweise 223
20.2 Der Basis-CSS-Code häppchenweise 225
20.3 Variante mit flexibler Breite 231
21 Vorlage #1: Eine Spalte 233
21.1 Variante mit fixer Breite 234
21.2 Designvorschläge 236
21.3 Variante mit flexibler Breite 240
21.4 Anwendungsbeispiele für einspaltige Layouts 240
22 Navigieren mit Tabs 243
22.1 Einfache Tab-Leiste mit Rollover-Effekt 244
22.2 Einfache Tab-Leiste mit Verlauf und Rollover 247
22.3 Tab-Leiste mit Pfeil für Rollover 252
22.4 Anwendungsbeispiele für Tab-Navigation 255
23 Vorlage #2: Zwei Spalten 257
23.1 Menü rechts 259
23.2 Menü links 260
23.3 Ein einfacher Style-Switcher 261
23.4 Variante mit Navigation 263
23.5 Variante Menüpunkte 264
23.6 Variante mit Hintergrundbildern 265
23.7 Anwendungsbeispiele für ein 2-Spalten-Layout 266
24 Vorlage #3: Drei Spalten mit Textboxen 269
24.1 Varianten für Textboxen 274
24.2 Variante mit drei Spalten, alle fluid 279
24.3 Variante mit schmalen Spalten rechts 281
24.4 Anwendungsbeispiele für
3-Spalten-Layouts 282
25 Vorlage #4: Vier Spalten 285
25.1 Variante mit drei Spalten rechts fix, Textspalte links fluid 287
25.2 Anwendungsbeispiele für 4-Spalten-Layouts 289
26 Vorlage #5: Drei Spalten mit Galerie 291
27 Vorlage #6: Frames oben und links 297
27.1 Varianten für das Design 305
28 Vorlage #7: Formular in Spalten 309
28.1 Modul 1: Namen und Adresse - Radio-Buttons und Textfelder 311
28.2 Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen 319
28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button 321
29 Elemente zentrieren 325
29.1 Elemente horizontal zentrieren 326
29.2 Elemente vertikal zentrieren 327
30 CSS-Code optimieren 331
30.1 Vor der Erstellung von Stylesheets 332
30.2 Nach dem Anlegen Ihres Projektes 340
30.3 Tools zur Optimierung von CSS-Code 341
31 CSS-Code validieren und Fehlersuche 345
31.1 W3C-Validatoren 346
31.2 Firefox-Erweiterung Web Developer 351
31.3 Web Development Bookmarklets 352
32 Browserkompatibilität testen 355
33 Was tun gegen Browserbugs 359
33.1 Hacks, Workarounds, Filter - die Begriffe 360
33.2 Das Problem mit Hacks und dergleichen 361
33.3 Grundsätzliche Überlegungen 362
33.4 Vorgehen bei einem vermeintlichen Bug 362
33.5 Conditional Comments 363
33.6 Der Star-Selektor-Hack 368
34 CSS-Eigenschaften A-Z 373
34.1 Eigenschaften von CSS 2.1 374
35 CSS: Maßeinheiten und Werte 395
35.1 Schlüsselbegriffe 396
35.2 Längenangaben 396
35.3 Farben 400
36 Nützliche Checklisten 403
36.1 Checkliste für die Webproduktion 404
36.2 Checkliste der "beliebtesten" Fehler in (X)HTML 406
36.3 Checkliste der "beliebtesten" Fehler in CSS 407
37 Meine liebsten Tools 409
38 CSS-Frameworks und YAML 415
38.1 Was sind CSS-Frameworks 416
38.2 Was ist YAML 416
38.3 Andere CSS-Frameworks 417
38.4 Vor- und Nachteile von CSS-Frameworks 421
38.5 CSS-Frameworks - ganz persönlich betrachtet 422
Inhalt der DVD-ROM 425
Übungsdateien zum Buch 426
Programme und Tools 426
Video-Training 427
1 Auf die Plätze 15
1.1 Wozu CSS lernen 16
1.2 Wem nützt dieses Buch 17
1.3 Wie funktioniert dieses Buch 17
2 Was Sie wissen sollten 21
2.1 Was sind Webstandards 22
2.2 Was ist das W3C 22
2.3 Was ist eine Webseite 23
2.4 Was ist HTML 23
2.5 Was ist XHTML 24
2.6 Was ist CSS 25
2.7 Was bedeutet Browserkompatibilität 27
2.8 Was versteht man unter Usability 27
2.9 Wie sorgt man für Accessibility 28
2.10 Wozu tabellenfreies Design 29
3 Was Sie können sollten 31
3.1 HTML-Grundlagen 32
3.2 Upload von Dateien - FTP 32
3.3 Grundkenntnisse in Englisch 33
4 Was Sie verwenden sollten 35
4.1 XHTML-Editor Amaya 36
4.2 Browser-Erweiterungen 36
4.3 Foren 38
5 Was Sie verstehen sollten 39
5.1 Der Aufbau einer XHTML-Datei 40
5.2 Die wichtigsten Regeln für XHTML 43
5.3 HTML-Elemente 45
5.4 Schreibweisen in (X)HTML 46
5.5 Der Aufbau einer CSS-Datei 46
5.6 Die wichtigsten Regeln für CSS 47
5.7 CSS-Selektoren 48
5.8 Schreibweisen in CSS 48
5.9 Verkürzte Schreibweise von Eigenschaften 50
5.10 XHTML und CSS miteinander verbinden 54
6 Der erste Entwurf 59
6.1 Die XHTML-Datei - Struktur und Inhalt der Webseite 60
6.2 Die CSS-Datei - Formen und Farben der Webseite 65
6.3 Browsercheck - ganz schnell 68
6.4 Lorem ipsum - provisorischer Inhalt 70
7 Die drei Säulen von CSS: 1. Die Selektoren 73
7.1 Der Universal-Selektor 74
7.2 Typ-Selektoren (Element-Typ-Selektoren 75
7.3 ID-Selektoren 76
7.4 Klassen-Selektoren 77
7.5 Pseudoklassen 80
7.6 Pseudoelemente 82
7.7 Attribut-Selektoren 82
7.8 Kombinatoren 83
7.9 Gruppieren von Deklarationen 84
7.10 Gruppieren von Selektoren 84
7.11 Namen von Selektoren 85
7.12 Spanitis, Divitis, Klassitis - gefürchtete Seuchen 86
8 Die drei Säulen von CSS: 2. Das Boxmodell 89
8.1 Das IE 5-Boxmodell 93
8.2 display - Element-Anzeige ändern 96
9 Die drei Säulen von CSS: 3. Positionierung 99
9.1 position: static 100
9.2 Normal Flow 101
9.3 top, right, bottom, left 102
9.4 position: relative 103
9.5 position: absolute 104
9.6 position: fixed 106
9.7 float und clear 106
9.8 z-index 109
9.9 clear 109
10 Die Grundeinstellungen 111
10.1 Scroll-Balken erzwingen 112
10.2 Seite zentrieren in drei Schritten 114
11 Die Navigation 119
11.1 Navigation horizontal 120
11.2 Menü vertikal 124
11.3 font - Schriften benutzerfreundlich voreinstellen 133
11.4 background - Farben und Bilder als Hintergrund 137
12 Mehr Design mit CSS 143
13 Bilder einsetzen und gestalten 149
14 Inhalte strukturieren und formatieren 155
14.1 font-, text-, paragraph - Schriften und Text 156
14.2 anchor - Links im Text gestalten 158
14.3 h1 bis h6 - noch mehr Design für Überschriften 161
14.4 strong, em - fett und betont 165
14.5 span - das Inline-Pendant zu div 166
14.6 ol und li - nummerierte Listen 168
14.7 blockquote, cite - Textkästchen mit Quelle 170
14.8 definition, sample - Zitat, Definition, Beispiel 173
14.9 dl - noch mehr Listen 173
14.10 horizontal rule - horizontale Linie 176
15 Tabellen für Zahlen und Daten 177
16 Formulare formschön gestalten 185
17 CSS und Medien: Ein Stylesheet für den Druck 193
17.1 Verknüpfung von Media-Stylesheets 195
17.2 Stylesheets für Medien-Typen 196
17.3 Checkliste für Druck-Stylesheets 197
18 Kaskade, Spezifität und Vererbung - die lieben Verwandten 203
18.1 Kaskade - wer kommt zuerst 204
18.2 Spezifität - wer gewinnt 207
18.3 Vererbung - und wer erbt was 209
19 Grundsätzliche Überlegungen 215
19.1 Usability - Seien Sie freundlich zu Ihren Besuchern 216
19.2 Schriften unter der Lupe 217
19.3 Fix oder Flex 218
19.4 Design - Die Kunst liegt im Weglassen 219
20 Eine Basisvorlage für alle Fälle 221
20.1 Der Basis-HTML-Code häppchenweise 223
20.2 Der Basis-CSS-Code häppchenweise 225
20.3 Variante mit flexibler Breite 231
21 Vorlage #1: Eine Spalte 233
21.1 Variante mit fixer Breite 234
21.2 Designvorschläge 236
21.3 Variante mit flexibler Breite 240
21.4 Anwendungsbeispiele für einspaltige Layouts 240
22 Navigieren mit Tabs 243
22.1 Einfache Tab-Leiste mit Rollover-Effekt 244
22.2 Einfache Tab-Leiste mit Verlauf und Rollover 247
22.3 Tab-Leiste mit Pfeil für Rollover 252
22.4 Anwendungsbeispiele für Tab-Navigation 255
23 Vorlage #2: Zwei Spalten 257
23.1 Menü rechts 259
23.2 Menü links 260
23.3 Ein einfacher Style-Switcher 261
23.4 Variante mit Navigation 263
23.5 Variante Menüpunkte 264
23.6 Variante mit Hintergrundbildern 265
23.7 Anwendungsbeispiele für ein 2-Spalten-Layout 266
24 Vorlage #3: Drei Spalten mit Textboxen 269
24.1 Varianten für Textboxen 274
24.2 Variante mit drei Spalten, alle fluid 279
24.3 Variante mit schmalen Spalten rechts 281
24.4 Anwendungsbeispiele für
3-Spalten-Layouts 282
25 Vorlage #4: Vier Spalten 285
25.1 Variante mit drei Spalten rechts fix, Textspalte links fluid 287
25.2 Anwendungsbeispiele für 4-Spalten-Layouts 289
26 Vorlage #5: Drei Spalten mit Galerie 291
27 Vorlage #6: Frames oben und links 297
27.1 Varianten für das Design 305
28 Vorlage #7: Formular in Spalten 309
28.1 Modul 1: Namen und Adresse - Radio-Buttons und Textfelder 311
28.2 Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen 319
28.3 Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button 321
29 Elemente zentrieren 325
29.1 Elemente horizontal zentrieren 326
29.2 Elemente vertikal zentrieren 327
30 CSS-Code optimieren 331
30.1 Vor der Erstellung von Stylesheets 332
30.2 Nach dem Anlegen Ihres Projektes 340
30.3 Tools zur Optimierung von CSS-Code 341
31 CSS-Code validieren und Fehlersuche 345
31.1 W3C-Validatoren 346
31.2 Firefox-Erweiterung Web Developer 351
31.3 Web Development Bookmarklets 352
32 Browserkompatibilität testen 355
33 Was tun gegen Browserbugs 359
33.1 Hacks, Workarounds, Filter - die Begriffe 360
33.2 Das Problem mit Hacks und dergleichen 361
33.3 Grundsätzliche Überlegungen 362
33.4 Vorgehen bei einem vermeintlichen Bug 362
33.5 Conditional Comments 363
33.6 Der Star-Selektor-Hack 368
34 CSS-Eigenschaften A-Z 373
34.1 Eigenschaften von CSS 2.1 374
35 CSS: Maßeinheiten und Werte 395
35.1 Schlüsselbegriffe 396
35.2 Längenangaben 396
35.3 Farben 400
36 Nützliche Checklisten 403
36.1 Checkliste für die Webproduktion 404
36.2 Checkliste der "beliebtesten" Fehler in (X)HTML 406
36.3 Checkliste der "beliebtesten" Fehler in CSS 407
37 Meine liebsten Tools 409
38 CSS-Frameworks und YAML 415
38.1 Was sind CSS-Frameworks 416
38.2 Was ist YAML 416
38.3 Andere CSS-Frameworks 417
38.4 Vor- und Nachteile von CSS-Frameworks 421
38.5 CSS-Frameworks - ganz persönlich betrachtet 422
Inhalt der DVD-ROM 425
Übungsdateien zum Buch 426
Programme und Tools 426
Video-Training 427
"Ein guter Ratgeber ist Gold wert und im Verlag Galileo Press liegt mit Elisabeth Wetschs 'Einstieg in CSS. Grundlagen und Praxis' ein besonders gelungener Vertreter vor. [...] Wetschs Buch konkurriert zweifellos mit zahllosen anderen Einsteigerwerken zum Thema CSS - und ist diesen eine Nasenlänge voraus. [...] Alles in allem überzeugt 'Einstieg in CSS' auf der ganzen Linie. Wetschs Einsteigerbuch ist die erste Wahl. [...]" media-mania.de