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 |