| Vorwort | 8 |
| Inhaltsverzeichnis | 12 |
| 1 Do’s & Dont’s im Webdesign | 16 |
| 1.1 Referenzieren von Dateien | 17 |
| 1.2 Auf fremde Quellen referenzieren | 17 |
| 1.2.1 In der eigenen Website verweisen | 18 |
| 1. Übung: Referenzieren | 19 |
| 2 Die Grundlage: Hypertext Markup Language (HTML) | 22 |
| 2.1 Grundregeln | 22 |
| 2.2 HTML-Tags im praktischen Einsatz | 23 |
| 2.3 Arten von Tags | 23 |
| 2.4 Attribute bei den Tags | 23 |
| 2.5 HTML-Entitäten | 24 |
| 2.5.1 Wichtige Entitäten | 25 |
| 2.6 HTML-Struktur | 26 |
| 2.6.1 Document Type Definition (DTD) | 27 |
| 2.6.2 Der html-Tag | 27 |
| 2.6.3 Der head-Tag | 28 |
| 2.6.4 Der Zeichensatz | 29 |
| 2.6.5 Der title-Tag | 29 |
| 2.6.6 Der body-Tag | 31 |
| 2.7 Text mit HTML strukturieren | 31 |
| 2.7.1 Der Absatz | 31 |
| 2. Übung: Formatierung mit HTML | 32 |
| 2.7.2 Der Zeilenumbruch | 33 |
| 2.7.3 Textgliederung durch Überschriften | 36 |
| 3. Übung: Überschriften | 37 |
| 2.7.4 Aufzählungen | 39 |
| 4. Übung: Listen | 42 |
| 2.8 Zitate | 44 |
| 2.8.1 Lange Zitate | 44 |
| 2.8.2 Zitatquelle | 45 |
| 2.8.3 Kurze Zitate | 46 |
| 2.9 Logische Auszeichnungen | 47 |
| 2.9.1 Hervorhebung | 47 |
| 2.9.2 Starke Hervorhebung (Fettung) | 48 |
| 2.9.3 Kurzen Quelltext anzeigen | 49 |
| 2.9.4 Langen Quelltext anzeigen | 49 |
| 2.10 Bilder einbinden | 51 |
| 2.11 Tabellen | 53 |
| 2.11.1 Tabellenzeilen | 54 |
| 2.11.2 Tabellenzellen | 55 |
| 5. Übung: Tabellen | 59 |
| 2.12 Hyperlinks | 60 |
| 2.13 Elemente zum Gruppieren | 62 |
| 6. Übung: Gruppieren | 63 |
| 2.14 Besondere Tags | 67 |
| 2.14.1 … | 68 |
| 2.14.2 … | 68 |
| 2.14.4 … | 69 |
| 2.14.5 | 70 |
2.14.6- …
- …
| 70 |
| 2.14.7 … | 72 |
| 2.14.8 … | 73 |
| 2.14.9 … | 73 |
| 2.14.10 … | 73 |
| 2.15 Webadressen für dieses Kapitel | 74 |
| 3 Eclipse | 76 |
| 3.1 Installation der Entwicklungsumgebung | 76 |
| 3.1.1 Download der Software | 77 |
| 3.1.2 Installation für Windows-Systeme | 77 |
| 3.1.3 Installieren von Eclipse | 78 |
| 3.1.4 Installieren der Plug-Ins für Eclipse | 80 |
| 3.1.5 Anpassen der Perspektive von Eclipse | 84 |
| 3.2 Der Browser | 86 |
| 3.2.1 Firebug | 86 |
| 3.2.2 Web Developer | 88 |
| 3.2.3 GridFox | 88 |
| 3.3 Webadressen für dieses Kapitel | 90 |
| 4 Cascading Style Sheets | 92 |
| 4.1 CSS-Grundlagen | 92 |
| 4.1.1 CSS-Definitionen in HTML einbinden | 92 |
| 4.1.2 Der Aufbau einer CSS-Regel | 94 |
| 4.1.3 Darstellung von Elementen | 95 |
| 4.1.4 Positionierung von Elementen | 97 |
| 4.1.5 Werte in CSS | 98 |
| 4.2 Selektoren | 100 |
| 4.2.1 Universeller Selektor | 100 |
| 4.2.2 Typ-Selektor | 101 |
| 4.2.3 Kontext-Selektor | 102 |
| 4.2.4 Kind-Selektor | 103 |
| 4.2.5 Benachbarte Geschwisterelemente | 104 |
| 4.2.6 Klassen-Selektor | 105 |
| 4.2.7 ID-Selektor | 106 |
| 4.2.8 Allgemeiner Attribut-Selektor | 107 |
| 4.2.9 Exakter Attribut-Selektor | 108 |
| 4.2.10 Teilweiser Attribut-Selektor | 109 |
| 4.2.11 Pseudoklassen | 111 |
| 4.3 Hierarchie der CSS-Definitionen | 118 |
| 4.3.1 Spezifität | 119 |
| 4.3.2 Vererbung | 119 |
| 4.4 Text und Schrift formatieren | 121 |
| 4.4.1 Überschriften | 121 |
| 4.4.2 Eine kreative Überschrift | 121 |
| 7. Übung: Textformatierung mit CSS | 121 |
| 4.4.3 Schriften festlegen | 131 |
| 8. Übung: Überschriften mit CSS | 147 |
| 4.4.4 Eigene Schriftart verwenden | 148 |
| 4.5 Positionieren von Elementen | 150 |
| 9. Übung: Widgets | 151 |
| 4.6 Navigation | 168 |
| 10. Übung: Vertikale Navigation | 168 |
| 4.6.1 Navigation mit Registerkarten | 177 |
| 11. Übung: Karteikarten | 177 |
| 4.6.2 Registerkarten mit abgerundeten Ecken | 188 |
| 12. Übung: Runde Ecken für alle Browser | 189 |
| 4.7 Layout | 190 |
| 4.7.1 Zweispaltiges Layout ohne Tabellen | 190 |
| 13. Übung: Zweispaltiges Layout | 190 |
| 4.7.2 Eine vertikale Galerie | 196 |
| 14. Übung: Senkrechte Galerie | 197 |
| 4.7.3 Ein flexibles Layout | 201 |
| 15. Übung: Flexibles Layout | 201 |
| 4.8 Bilder formatieren | 203 |
| 4.8.1 Bilder im Polaroid-Stil | 203 |
| 16. Übung: Bilder mit Rahmen und Titeln | 203 |
| 4.8.2 Eine kreative Bilddarstellung | 207 |
| 17. Übung: Bilder im Fotoalbum-Stil | 207 |
| 4.9 Besondere Formate | 210 |
| 4.9.1 Zitate formatieren | 210 |
| 18. Übung: Zitate | 210 |
| 4.9.2 Eine semantisch richtige Visitenkarte | 211 |
| 19. Übung: Visitenkarte | 212 |
| 4.10 Formatierungen mit CSS 3 | 214 |
| 4.10.1 Schatteneffekte | 215 |
| 20. Übung: Schatten bei Bildern | 215 |
| 21. Übung: Textschattierungen | 218 |
| 4.10.2 Die Deckkraft von Elementen | 221 |
| 22. Übung: Fade-Out | 221 |
| 4.10.3 Mehrspaltiger Textsatz | 223 |
| 23. Übung: Layout im Zeitungsstil | 223 |
| 4.11 Webadressen für dieses Kapitel | 225 |
| 4.11.1 Tools und Online-Hilfen | 226 |
| A Anhang | 228 |
| A.1 Fachbegriffe | 228 |
| A.2 Websichere Farben | 231 |
| A.3 Quellcodes | 232 |
| Lösung zur 2. Übung | 232 |
| Lösung zur 3. Übung | 235 |
| Lösung zur 4. Übung | 237 |
| Lösung zur 5. Übung | 238 |
| Lösung zur 6. Übung | 241 |
| Lösung zur 7. Übung | 254 |
| Lösung zur 8. Übung | 257 |
| Lösung zur 9. Übung | 259 |
| Lösung zur 10. Übung | 262 |
| Lösung zur 11. Übung | 265 |
| Lösung zur 12. Übung | 267 |
| Lösung zur 13. Übung | 270 |
| Lösung zur 14. Übung | 274 |
| Lösung zur 15. Übung | 278 |
| Lösung zur 16. Übung | 281 |
| Lösung zur 17. Übung | 284 |
| Lösung zur 18. Übung | 287 |
| Lösung zur 19. Übung | 290 |
| Lösung zur 20. Übung | 293 |
| Lösung zur 21. Übung | 295 |
| Lösung zur 22. Übung | 297 |
| Lösung zur 23. Übung | 299 |
| Stichwortverzeichnis | 302 |
