CSS ist die vom W3C anerkannte Methode, um die visuelle Darstellung von Webdokumenten über die kruden Möglichkeiten von HTML und XHTML hinaus zu beeinflussen und zu vereinfachen. Mit übersichtlichen und leicht zu wartenden Stildefinitionen ist es möglich, ausgefeilte Seitenlayouts für eine ganze Website zu erstellen und bei Bedarf in kürzester Zeit zu verändern. Außerdem können mit Cascading Style Sheets Inhalte und Layout von Webdokumenten unabhängig voneinander entwickelt werden. CSS haben sich zwar inzwischen als Standard für Web-Entwickler und -Designer durchgesetzt, ihre Anwendung ist…mehr
CSS ist die vom W3C anerkannte Methode, um die visuelle Darstellung von Webdokumenten über die kruden Möglichkeiten von HTML und XHTML hinaus zu beeinflussen und zu vereinfachen. Mit übersichtlichen und leicht zu wartenden Stildefinitionen ist es möglich, ausgefeilte Seitenlayouts für eine ganze Website zu erstellen und bei Bedarf in kürzester Zeit zu verändern. Außerdem können mit Cascading Style Sheets Inhalte und Layout von Webdokumenten unabhängig voneinander entwickelt werden.
CSS haben sich zwar inzwischen als Standard für Web-Entwickler und -Designer durchgesetzt, ihre Anwendung ist jedoch nicht immer einfach und intuitiv. Dieses Kochbuch bietet Ihnen über 80 fertige Lösungen für typische Aufgaben und Probleme bei der Entwicklung von Webseiten. Sie können die Beispiele, die auf CSS 2.1 basieren und zum Herunterladen bereit liegen, sofort für Ihre eigenen Zwecke einsetzen und anpassen. Gleichzeitig können Sie durch die Erläuterungen in jedem Rezept von den Techniken der CSS-Experten lernen und Ihr eigenes Wissen über CSS erweitern.
Zu den behandelten Lösungen gehören beispielweise:
Christopher Schmitt ist der Präsident/Vorstandsvorsitzende (CEO) von Heatvision.com, Inc., einem Unternehmen für neue Medien und Design mit Sitz in Tallahassee, Florida.
Christopher ist ein preisgekrönter Webdesigner, der seit 1993 mit dem Web arbeitet und Mitte der 90er Jahre sowohl für David Siegel als auch für Lynda Weinman als Praktikant tätig war, während er als Student an der Florida State University an seinem Abschluss im Bereich der Kunstwissenschaften mit dem Schwerpunkt grafische Gestaltung feilte.
Er ist der Autor von Designing CSS Web Pages (New Riders). Außerdem ist er Koautor von Photoshop CS in 10 Steps or Less (Wiley) und Dreamweaver MX Design Projects (glasshaus) und steuerte vier Kapitel zu XML, HTML, and XHTML Magic (New Riders) bei. Christopher schrieb auch Beiträge für das New Architect Magazine, A List Apart, Digital Web und Web Reference.
Im Jahre 2000 führte er sein Team zum Sieg im "Cool Site in a Day"-Wettbewerb, wo er und fünf andere talentierte Entwickler eine voll funktionsfähige, gut gestaltete Website für eine gemeinnützige Organisation in 8 Stunden entwickelten.
Auf Konferenzen wie The Other Dreamweaver Conference und SXSW hielt Christopher Vorträge über die Verwendung und die Vorteile von CSS-basiertem Design. Er ist Listenbetreuer bei Babble (http://www.babblelist.com), einer Mailinglisten-Community, die sich mit fortgeschrittenen Webdesign-Themen beschäftigt.
Auf seiner privaten Website http://www.christopher.org zeigt Christopher sein wahres Gesicht und seine neuesten Unternehmungen. Er ist 67 und spielt kein Profi-Basketball, hätte aber nichts gegen eine gute Partie Schach einzuwenden.
Inhaltsangabe
Vorwort von Dan Cederholm IX
Vorwort XI
Typografie für das Web 1
1.1 Zeichensätze und deren Vererbung festlegen 2
1.2 Schriftgrößen und -maße festlegen 6
1.3 Schriftgrößen erzwingen 10
1.4 Versalien zu Beginn eines Absatzes 11
1.5 Größere und zentrierte Versalien 12
1.6 Bilder als Versalien 14
1.7 Überschriften mit Stil 17
1.8 Überschriften mit Rahmen 18
1.9 Überschriftentext mit einem Bild versehen 20
1.10 Gestaltung einer "Pull-Quote" mit HTML-Text 22
1.11 "Pull-Quotes" mit Rahmen 24
1.12 "Pull-Quotes" mit Bildern 26
1.13 Die erste Zeile eines Absatzes einrücken 29
1.14 Ganze Absätze einrücken 30
1.15 Text als Blocksatz darstellen 33
1.16 Die erste Zeile eines Absatzes mit Stildefinitionen versehen 34
1.17 Die erste Zeile eines Absatzes mit einem Bild versehen 36
1.18 Textteile hervorheben 37
1.19 Zeilenabstände ändern 39
Seitenelemente 41
2.1 Seitenränder entfernen 41
2.2 Farbige Scrollbalken 44
2.3 Elemente auf einer Webseite zentrieren 46
2.4 Ein Hintergrundbild definieren 52
2.5 Hintergrundbilder wiederholen 53
2.6 Ein Hintergrundbild platzieren 53
2.7 Das Hintergrundbild verankern 57
2.8 Seitenränder 60
2.9 Anpassen einer horizontalen Trennlinie 62
2.10 Design-Beispiel: Einrichten einer dynamischen Splash-Seite 65
Links und Navigation 72
3.1 Unterstreichungen von Links entfernen 72
3.2 Blinkender Text 74
3.3 Links auf andere Art hervorheben 75
3.4 Alternative Cursor 77
3.5 Rollover-Effekte ohne JavaScript 79
3.6 Nicht-grafische Menüs mit Rollover-Effekten 80
3.7 Aufklappbare Menüs 84
3.8 Horizontale Menüs 87
3.9 Hierarchische Navigation 92
3.10 Grafische Rollover-Effekte 95
3.11 Dynamische visuelle Menüs 100
3.12 Kontextmenüs 103
Listen 107
4.1 Die Formatierung einer Liste ändern 108
4.2 Browserübergreifende Einrückungen 110
4.3 Eigene Aufzählungszeichen für Listeneinträge 111
4.4 Eigene Grafiken als Marker für Listeneinträge verwenden 113
4.5 Listeneinträge als Inline-Elemente darstellen 115
4.6 Hängende Einrückungen für Listen definieren 116
4.7 Das Aufzählungszeichen innerhalb des Eintrags darstellen 118
Formulare 120
5.1 Stildefinitionen für Eingabeelemente 121
5.2 Stildefinitionen für textarea-Elemente 124
5.3 Stildefinitionen für Aufklappmenüs und Auswahllisten 125
5.4 Stildefinitionen für Buttons 128
5.5 Buttons, die nur einmal benutzt werden können 131
5.6 Ein Webformular ohne Tabellen 132
5.7 Designbeispiel: ein Login-Formular 134
5.8 Designbeispiel: ein Registrierungsformular 139
Tabellen 150
6.1 Den Zellzwischenraum einstellen 151
6.2 Einstellen der Rahmen und Innenabstände für Zellen 152
6.3 Stildefinitionen für Tabelleninhalte 155
6.4 Leerraum zwischen Bildern und dem Zellenrand entfernen 156
6.5 Stildefinitionen für die Tabellenüberschriften 158
6.6 Designbeispiel: ein eleganter Kalender 160
Seitenlayouts 171
7.1 Hybride Layouts mit HTML und CSS 172
7.2 Einspaltige Layouts 177
7.3 Zweispaltige Layouts 179
7.4 Zweispaltige Layouts mit festen Breiten 184
7.5 Flexible mehrspaltige Layouts mit Floats 187
7.6 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats 190
7.7 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung 193
7.8 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung 197
7.9 Asymmetrische Layouts 198
Druck 203
8.1 Eine druckfreundliche Seite erstellen 204
8.2 Ein Webformular für den Ausdruck aufbereiten 206
8.3 Nach einem Link die URL anzeigen 209
8.4 Designbeispiel: Eine druckfreundliche Seite mit CSS 211
Hacks und Workarounds 220
9.1 Besondere Werte für Internet Explorer 5.x für Windows 221
9.2 Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern 224
9.3 CSS-Regeln vor dem Internet Explorer 5 für Macintosh verbergen 225
Design mit CSS 226
10.1 Extrem stark vergrößerter Text 227
10.2 Unerwartete Unstimmigkeiten erzeugen 228
10.3 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen 231
10.4 Kontraste verwenden, um den Blick zu führen 233
10.5 Panoramabilder 236
10.6 Verschiedene Bildformate miteinander kombinieren 238
1.10 Gestaltung einer "Pull-Quote" mit HTML-Text 22
1.11 "Pull-Quotes" mit Rahmen 24
1.12 "Pull-Quotes" mit Bildern 26
1.13 Die erste Zeile eines Absatzes einrücken 29
1.14 Ganze Absätze einrücken 30
1.15 Text als Blocksatz darstellen 33
1.16 Die erste Zeile eines Absatzes mit Stildefinitionen versehen 34
1.17 Die erste Zeile eines Absatzes mit einem Bild versehen 36
1.18 Textteile hervorheben 37
1.19 Zeilenabstände ändern 39
Seitenelemente 41
2.1 Seitenränder entfernen 41
2.2 Farbige Scrollbalken 44
2.3 Elemente auf einer Webseite zentrieren 46
2.4 Ein Hintergrundbild definieren 52
2.5 Hintergrundbilder wiederholen 53
2.6 Ein Hintergrundbild platzieren 53
2.7 Das Hintergrundbild verankern 57
2.8 Seitenränder 60
2.9 Anpassen einer horizontalen Trennlinie 62
2.10 Design-Beispiel: Einrichten einer dynamischen Splash-Seite 65
Links und Navigation 72
3.1 Unterstreichungen von Links entfernen 72
3.2 Blinkender Text 74
3.3 Links auf andere Art hervorheben 75
3.4 Alternative Cursor 77
3.5 Rollover-Effekte ohne JavaScript 79
3.6 Nicht-grafische Menüs mit Rollover-Effekten 80
3.7 Aufklappbare Menüs 84
3.8 Horizontale Menüs 87
3.9 Hierarchische Navigation 92
3.10 Grafische Rollover-Effekte 95
3.11 Dynamische visuelle Menüs 100
3.12 Kontextmenüs 103
Listen 107
4.1 Die Formatierung einer Liste ändern 108
4.2 Browserübergreifende Einrückungen 110
4.3 Eigene Aufzählungszeichen für Listeneinträge 111
4.4 Eigene Grafiken als Marker für Listeneinträge verwenden 113
4.5 Listeneinträge als Inline-Elemente darstellen 115
4.6 Hängende Einrückungen für Listen definieren 116
4.7 Das Aufzählungszeichen innerhalb des Eintrags darstellen 118
Formulare 120
5.1 Stildefinitionen für Eingabeelemente 121
5.2 Stildefinitionen für textarea-Elemente 124
5.3 Stildefinitionen für Aufklappmenüs und Auswahllisten 125
5.4 Stildefinitionen für Buttons 128
5.5 Buttons, die nur einmal benutzt werden können 131
5.6 Ein Webformular ohne Tabellen 132
5.7 Designbeispiel: ein Login-Formular 134
5.8 Designbeispiel: ein Registrierungsformular 139
Tabellen 150
6.1 Den Zellzwischenraum einstellen 151
6.2 Einstellen der Rahmen und Innenabstände für Zellen 152
6.3 Stildefinitionen für Tabelleninhalte 155
6.4 Leerraum zwischen Bildern und dem Zellenrand entfernen 156
6.5 Stildefinitionen für die Tabellenüberschriften 158
6.6 Designbeispiel: ein eleganter Kalender 160
Seitenlayouts 171
7.1 Hybride Layouts mit HTML und CSS 172
7.2 Einspaltige Layouts 177
7.3 Zweispaltige Layouts 179
7.4 Zweispaltige Layouts mit festen Breiten 184
7.5 Flexible mehrspaltige Layouts mit Floats 187
7.6 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats 190
7.7 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung 193
7.8 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung 197
7.9 Asymmetrische Layouts 198
Druck 203
8.1 Eine druckfreundliche Seite erstellen 204
8.2 Ein Webformular für den Ausdruck aufbereiten 206
8.3 Nach einem Link die URL anzeigen 209
8.4 Designbeispiel: Eine druckfreundliche Seite mit CSS 211
Hacks und Workarounds 220
9.1 Besondere Werte für Internet Explorer 5.x für Windows 221
9.2 Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern 224
9.3 CSS-Regeln vor dem Internet Explorer 5 für Macintosh verbergen 225
Design mit CSS 226
10.1 Extrem stark vergrößerter Text 227
10.2 Unerwartete Unstimmigkeiten erzeugen 228
10.3 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen 231
10.4 Kontraste verwenden, um den Blick zu führen 233
10.5 Panoramabilder 236
10.6 Verschiedene Bildformate miteinander kombinieren 238
10.7 Sprechblasen 244
10.8 Zitate hervorheben 247
10.9 Bilder mit einem Schatten versehen 250
Anhang
Ressourcen 253
Anhang
Index 259
Rezensionen
"...das Buch bietet eine Sammlung von über 80 Rezepten, um mit CSS grafisch ansprechende und trotzdem flexible Webseiten zu gestalten. Die Rezepte sind gut verständlich und praxisnah gehalten und mit der nötigen Ausführlichkeit, was etwa beim Design eines Kalenders (Kap. 6.6) deutlich wird. Das Buch vermittelt interessantes praktisches Wissen und gibt gute Einblicke in die Arbeitsweise mit CSS." -- Mac User Group Kassel, Oktober 2005
"Insgesamt ein Buch, das sich Leute, die regelmäßig mit CSS arbeiten, unbedingt anschaffen sollten. Zwar merzt die Routine beim Arbeiten einige Aspekte rasch aus, aber vieles verliert man von einem Projekt zum nächsten wieder aus dem Blick, und dann ist dieses Buch sehr hilfreich, weil es die typischen Probleme mitsamt Lösungen auf einen Blick serviert und somit teils langwierigere oder auch des öfteren durchzuführende Recherchen überflüssig macht. Wer mit CSS bislang keine Erfahrungen gesammelt hat, der sollte mit zusätzlicher Lektüre [...] starten, doch auch für diese Leute ist dieses Buch empfehlenswert, um die vorgenannten, teils mühselig zu erwerbenden Problemlösungen von vornherein minimieren zu können." -- Tanja Elskamp, Media-Mania.de, September 2005 Für den erfahrenen Webdesigner und Entwickler bietet das Buch dagegen schnelle Lösungen für Standardaufgaben und Probleme. So ist dann auch der Aufbau der einzelnen Skripts in Problem, Lösung und Diskussion der verwendeten Mittel gut gelungen. Der Autor deckt mit seinene Skripts alle Anwendungsmöglichkeiten von Stylesheets ab: Typografisches, Layout, Navigation, Listen, Formulare, Tabellen, Druck und diverse Effekte stehen auf der Menüfolge. Es ist angerichtet!" -- Internet Professionell, Mai 2005
"Mit gekonnter Seitengestaltung per CSS erreichst du, dass deine Website den Besuchern Appetit macht und die Inhalte in schmackhafter Form dargeboten werden. Damit du jetzt aber nicht stundenlang am virtuellen Herd stehst und das eine oder andere "anbrennt", solltest du dir die Rezepte in Christopher Schmitts CSS Kochbuch aus dem Verlag O'Reilly zu Gemüte führen. Denn hier erfährst du in angenehm lesbarer Form, wie sich bestimmte Probleme auf einfache Weise mit CSS lösen lassen. Ob es um horizontale Menü-Leisten mit Hover-Effekt geht, ansprechende und intuitiv nutzbare Formulare, mehrspaltige Seitenlayouts ohne Einsatz von Tabellen - hier dürfte für jeden etwas dabei sein. Und wenn du die Rezepte alle mal "nachgekocht" hast, bist du so weit fit in CSS, dass dir neue Problemstellungen keine Probleme mehr bereiten werden. Denn oft wird es genügen, die Zutaten aus verschiedenen Rezepten miteinander zu kombinieren. Wir wünschen dir guten Appetit!" -- Onlinemagazin Datenstrand, März 2005…mehr
Es gelten unsere Allgemeinen Geschäftsbedingungen: www.buecher.de/agb
Impressum
www.buecher.de ist ein Shop der buecher.de GmbH & Co. KG Bürgermeister-Wegele-Str. 12, 86167 Augsburg Amtsgericht Augsburg HRA 13309
