mitp für Kids CSS für Kids von David Sigos 1. Auflage CSS für Kids Sigos schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG

Transkript

1 mitp für Kids CSS für Kids von David Sigos 1. Auflage CSS für Kids Sigos schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG Thematische Gliederung: Web Graphik & Design, Web-Publishing Web Graphik & Design, Web-Publishing mitp/bhv 2008 Verlag C.H. Beck im Internet: ISBN

2 David Sigos CSS Ebenfalls in dieser Reihe erschienen: ISBN Coole Webseiten gestalten! Cascading Style Sheets kurz auch CSS genannt machen aus durchschnittlichen HTML-Seiten schicke Layoutwunder. Du willst eigene Grafiken erstellen und lernen, wie du sie mit CSS in eine Webseite einbinden kannst? Kein Problem! David Sigos zeigt dir Schritt für Schritt, wie du deine Webseite mit CSS aufpeppst. Die verschiedensten Effekte und grafischen Ideen wirst du selbst umsetzen. Hinter Begriffen und Ausdrücken wie Kaskadenprinzip, Selektoren verschachteln oder barrierefreies Webdesign verstecken sich keine Zaubersprüche, sondern zum Teil einfache Regeln und Prinzipien, mit denen du erstklassige Webseiten gestalten kannst. Lass dich nicht abschrecken, denn alles wird genau erklärt! Und es ist gar nicht so kompliziert, wie es zunächst klingt. Mit diesem Buch lernst du aber nicht nur CSS kennen, sondern auch jede Menge über das Grafikprogramm GIMP. Am Ende des Buches hast du eine tolle Webseite erstellt, die du beispielsweise für deinen Verein verwenden kannst. CSS ist die farbige Zukunft des Internets pack sie an! Über den Autor: David Sigos ist Diplomsportlehrer und unterrichtet zusätzlich Informations- und Kommunikationstechnologie an einer Schweizer Schule. Systemvoraussetzungen: Alle Windows-Versionen von 9x über XP bis Windows 7 sowie Mac OS X und Linux Ab 12 Jahre, aber auch für Erwachsene, die eine wirklich einfache Einführung suchen David Sigos Als Download: Alle Beispiele und Grafiken in Farbe David Sigos Probekapitel und Infos erhalten Sie unter: info@vmi-buch.de Regalsystematik: Programmierung, Webdesign (D) 24,95 ISBN Als Download: Alle Beispiele in Farbe

3 Vorwort 13 CSS? 14 Zwei Fliegen mit einer Klappe? 14 Muss ich schon was wissen? 14 Einige wichtige Hinweise 15 Was ist auf der CD-ROM? 15 1 Vorbereitungen 17 Hol dir den Feuerfuchs 19 Add-ons installieren 19 Der Web Developer 23 Der Editor Weaverslave 25 Der CSS-Editor TopStyle Lite 26 GIMP Offene Quelle vom Feinsten 28 Dein erster Überblick in GIMP 29 Die erste Grafik: ein»new!«-sticker 31 Zusammenfassung 41 Ein paar Fragen 41 und ein paar Aufgaben 42 2 CSS = Chaos Sehr Schnell? Der Zauber dahinter 45 Was ist nun CSS? 46 Vorteile von CSS 48 Vier Wege führen nach Rom 53 Selektoren: Elemente, Klassen und IDs 57 Die 3 Stufen der Gestaltung 60 Zusammenfassung 60 Ein paar Fragen 61 und ein paar Aufgaben 62 7

4 3 Ohne Planung keine Ahnung das HTML- Grundgerüst 65 Deine Idee 66 Aus der Idee wird ein Konzept 66 Ohne HTML kein CSS 68 Dein erstes Layout 72 Zusammenfassung 76 Ein paar Fragen 77 und ein paar Aufgaben 78 4 Layout mit CSS: Lass es fließen float und clear 79 Deine erste CSS-Datei 80 Deine erste Eigenschaft: background-color 82 Du belebst die DIVs mit Farben 83 Die Positionierung dank float 86 Wo»gefloatet«wird, wird auch»gecleart«88 Zusammenfassung 89 Ein paar Fragen 90 und ein paar Aufgaben Steig in den Boxring gegen CSS Das Box-Modell 93 Das Box-Modell 97 Der Text klebt am Rand 99 Die DIVs wollen Freiräume 101 Der Bereich zwischen padding und margin: Der Rand! 104 Deine Webseite ist eine Zwiebel 107 Berechnung muss sein 109 Zusammenfassung 111 Ein paar Fragen 112 und ein paar Aufgaben 113

5 6 Auge um Auge, Satz um Satz Text gestalten 115 Schriften formatieren 116 Text formatieren 125 Ist diese Eigenschaft vererbbar? 127 Zusammenfassung 129 Ein paar Fragen 130 und ein paar Aufgaben Die lieben Erben und Verwandten Kaskade und Vererbung 133 Die Kaskade Stufe: Standardwerte Stufe: Vererbungen Stufe: die kleine Kaskade 142 Kombinierte Selektoren 150 Zusammenfassung 154 Ein paar Fragen 156 und ein paar Aufgaben Der Zauber beginnt 161 Ein guter Hintergrund 162 Ein Wasserzeichen als Hintergrund 162 Ein Himmel als Hintergrund 166 Ein Farbverlauf als Hintergrund 175 Die Gestaltung von Hyperlinks 178 Ein klitzekleines Aufzählungszeichen selbst gemacht 181 Listen wunderschön anpassen 187 Horizontale Listen sind möglich 192 Überschriften durch Textgrafiken ersetzen 193 Zusammenfassung 202 Ein paar Fragen 203 und ein paar Aufgaben 204 9

6 9 Spacer sinnvolle Trenner im Raum 207 Du gestaltest deinen Text 208 Spacer-Jäger: Mach dich auf die Symbol-Jagd 210 Schönheit durch Sparsamkeit: Spacer mit Dingbats gestalten 211 Den Spacer in den Text einfügen 213 Zusammenfassung 214 Ein paar Fragen 214 und ein paar Aufgaben Ay, ay Käpten! Die Navigation ruft 217 HTML-Anpassungen 218 Eine zweite Seite muss her 219 Navigation I: Karteireiter mit wechselnden Farben 220 Navigation II: Die Navigation mit Bildern 227 Zusammenfassung 235 Ein paar Fragen 235 und ein paar Aufgaben Bitte melde dich! Kontaktaufnahme mit Stil 237 Bring mich in»form«die HTML-Struktur 238 Give me some input! 240 Und wieder eine Liste 243 Positionierung wo soll s bitte hinkommen? 246 Und zu guter Letzt: Etwas Kosmetik bitte 251 Zusammenfassung 255 Ein paar Fragen 255 und ein paar Aufgaben

7 12 Sliding Doors Schiebetüren für runde Ecken 259 Der Wunsch, das Problem und das Prinzip 260 Lass die Kettensäge krachen 261 Anpassungen in der HTML-Datei 264 Die CSS-Datei: Einbinden und Abstände anpassen 265 Weiterführende Hinweise 268 Zusammenfassung 271 Ein paar Fragen 271 und ein paar Aufgaben Mit Nachdruck Ein zweites Stylesheet für den Druck 273 Die schlaue Weiche: media=print 274 Die nackten Tatsachen für den Druck 275 Nur für s Papier bestimmt 280 Schlussbemerkung 282 Zusammenfassung 283 Ein paar Fragen 283 und ein paar Aufgaben 284 Anhang A: Erste Hilfe bei Problemen 287 Die zwei Hauptfehler 287 Checkliste 291 Anhang B: Planungsablauf eines Webprojekts 293 Gesamtkonzeption 293 Feinkonzept 294 Gestaltungskonzept 296 Anhang C: CSS Hacks 299 Bugs und Hacks 299 CSS-Hacks

8 Bugs? Bugs! 300 Zwei Lösungsstrategien 301 Grundsätzliche Anpassung oder: Was ist der Quirks-Modus? 302 Zu Befehl, mein Feldherr! 303 Anhang D: Die besten CSS-Seiten im Internet 309 Überprüfe deine Codes 309 Nachschlagewerke 309 Tipps und Tricks 310 CSS-Bugs und -Hacks 310 Alles rund ums Design und Layout 310 Weitere sehr gute Seiten auf Englisch 311 Stichwortverzeichnis 313 Inhaltsverzeichnis 12