Standardkonformes Webdesign muss nicht zwangsläufig zu langweiligen Designs führen, sondern ermöglicht durchaus originelle Ideen. Dieses schön gestaltete und durchgehend vierfarbige Buch bietet Anregungen und Beispiele für CSS-Standard-basierte Designs, die zur eigenen Inspiration studiert werden können, aber auch sofort angewendet und für die eigenen Bedürfnisse angepasst werden können. Das Buch wendet sich an Webdesigner, Autoren und Entwickler, die sich mit den XHTML- und CSS-Standards prinzipiell auskennen und nun auf der "Design-Leiter" ein paar Stufen höher klettern wollen.
* 26 praxisnahe Designbeispiele:
Die Designbeispiele reichen von Spaltenlayouts und Navigationen über Tabellen und Formulare bis zu Image-Maps, abgerundeten Ecken und Pullquotes.
* Workshop-Charakter:
Jedes Kapitel zeigt Schritt für Schritt, wie die vorgegebene Designidee mit CSS und XHTML umgesetzt wird. Nebenbei werden am praktischen Beispiel nützliche Fähigkeiten im Repertoire von Webdesignern demonstriert, z.B. Bildersatztechniken.
* Zugänglichkeit und Barrierefreiheit:
Bei der Umsetzung der Designs wurde auf größtmögliche Zugänglichkeit und Barrierefreiheit Wert gelegt.
* Browserkompatibilität:
Die Designs sind mit mindestens 95% der gegenwärtig benutzten Browserversionen kompatibel. Wo notwendig, zeigen die Autoren, wie Sie geschickt mit den CSS-Problemkindern unter den Webbrowsern umgehen können.
* Standardgerechte Codebeispiele zur freien Verwendung:
Die Codebeispiele wurden mit großer Sorgfalt erarbeitet und geprüft. Die CSS- und XHTML-Beispieldateien aller 26 Designs können heruntergeladen und frei verwendet werden.
Inhaltsverzeichnis:
Vorwort . . . . . . . . . . . . . . . . . . . . . . . ix
Teil I: Seitenvorlagen
1. Fotogalerie . . . . . . . . . . . . . . . . . . . . 3
2. Web-Bücherei . . . . . . . . . . . . . . . . . . . 15
3. Spaltenlayout "Alias" . . . . . . . . . . . . . . 23
4. Fließlayout "World of Fish" . . . . . . . . . . . 31
5. Konsole . . . . . . . . . . . . . . . . . . . . . 39
6. Spaltenlayout "Chat mehr!" . . . . . . . . . . . 43
7. Fließlayout "PC-Shop" . . . . . . . . . . . . . . 55
8. Spaltenlayout "Anodesign" . . . . . . . . . . . . 67
Teil II: Listen und Menüs
9. Blog-Navigation . . . . . . . . . . . . . . . . . 77
10. Sitemap . . . . . . . . . . . . . . . . . . . . . 83
11. Navigation "Fischwelten" . . . . . . . . . . . . 89
12. Fotoalbum "Paris 2005" . . . . . . . . . . . . . 93
13. Navigation "08/15" . . . . . . . . . . . . . . . 103
14. Themennavigation . . . . . . . . . . . . . . . . 109
Teil III: Formulare und Tabellen
15. Vergleichstabelle . . . . . . . . . . . . . . . 117
16. Newsletter-Formular . . . . . . . . . . . . . . 127
17. Kommentar-Formular . . . . . . . . . . . . . . . 135
18. Forenregistrierung . . . . . . . . . . . . . . . 143
19. Periodensystem der Elemente . . . . . . . . . . 149
20. Bundesligatabelle . . . . . . . . . . . . . . . 155
Teil IV: Effekte, Hingucker und Zaubereien
viii Inhalt
21. Image-Map . . . . . . . . . . . . . . . . . . . 169
22. Abgerundete Ecken . . . . . . . . . . . . . . . 177
23. Bilder im Fließtext . . . . . . . . . . . . . . 185
24. Mini-Kochbuch . . . . . . . . . . . . . . . . . 189
25. Pullquote . . . . . . . . . . . . . . . . . . . 197
26. Bildunterschriften . . . . . . . . . . . . . . . 201
Index . . . . . . . . . . . . . . . . . . . . . . . 209
* 26 praxisnahe Designbeispiele:
Die Designbeispiele reichen von Spaltenlayouts und Navigationen über Tabellen und Formulare bis zu Image-Maps, abgerundeten Ecken und Pullquotes.
* Workshop-Charakter:
Jedes Kapitel zeigt Schritt für Schritt, wie die vorgegebene Designidee mit CSS und XHTML umgesetzt wird. Nebenbei werden am praktischen Beispiel nützliche Fähigkeiten im Repertoire von Webdesignern demonstriert, z.B. Bildersatztechniken.
* Zugänglichkeit und Barrierefreiheit:
Bei der Umsetzung der Designs wurde auf größtmögliche Zugänglichkeit und Barrierefreiheit Wert gelegt.
* Browserkompatibilität:
Die Designs sind mit mindestens 95% der gegenwärtig benutzten Browserversionen kompatibel. Wo notwendig, zeigen die Autoren, wie Sie geschickt mit den CSS-Problemkindern unter den Webbrowsern umgehen können.
* Standardgerechte Codebeispiele zur freien Verwendung:
Die Codebeispiele wurden mit großer Sorgfalt erarbeitet und geprüft. Die CSS- und XHTML-Beispieldateien aller 26 Designs können heruntergeladen und frei verwendet werden.
Inhaltsverzeichnis:
Vorwort . . . . . . . . . . . . . . . . . . . . . . . ix
Teil I: Seitenvorlagen
1. Fotogalerie . . . . . . . . . . . . . . . . . . . . 3
2. Web-Bücherei . . . . . . . . . . . . . . . . . . . 15
3. Spaltenlayout "Alias" . . . . . . . . . . . . . . 23
4. Fließlayout "World of Fish" . . . . . . . . . . . 31
5. Konsole . . . . . . . . . . . . . . . . . . . . . 39
6. Spaltenlayout "Chat mehr!" . . . . . . . . . . . 43
7. Fließlayout "PC-Shop" . . . . . . . . . . . . . . 55
8. Spaltenlayout "Anodesign" . . . . . . . . . . . . 67
Teil II: Listen und Menüs
9. Blog-Navigation . . . . . . . . . . . . . . . . . 77
10. Sitemap . . . . . . . . . . . . . . . . . . . . . 83
11. Navigation "Fischwelten" . . . . . . . . . . . . 89
12. Fotoalbum "Paris 2005" . . . . . . . . . . . . . 93
13. Navigation "08/15" . . . . . . . . . . . . . . . 103
14. Themennavigation . . . . . . . . . . . . . . . . 109
Teil III: Formulare und Tabellen
15. Vergleichstabelle . . . . . . . . . . . . . . . 117
16. Newsletter-Formular . . . . . . . . . . . . . . 127
17. Kommentar-Formular . . . . . . . . . . . . . . . 135
18. Forenregistrierung . . . . . . . . . . . . . . . 143
19. Periodensystem der Elemente . . . . . . . . . . 149
20. Bundesligatabelle . . . . . . . . . . . . . . . 155
Teil IV: Effekte, Hingucker und Zaubereien
viii Inhalt
21. Image-Map . . . . . . . . . . . . . . . . . . . 169
22. Abgerundete Ecken . . . . . . . . . . . . . . . 177
23. Bilder im Fließtext . . . . . . . . . . . . . . 185
24. Mini-Kochbuch . . . . . . . . . . . . . . . . . 189
25. Pullquote . . . . . . . . . . . . . . . . . . . 197
26. Bildunterschriften . . . . . . . . . . . . . . . 201
Index . . . . . . . . . . . . . . . . . . . . . . . 209
"[...] für geübte Stilisten hat Jens Meiert mit Ingo Helmdach Webdesign mit CSS für O'Reilly verfasst. Hier geht es nicht um Einführung, sondern darum, wie Seitenlayouts, Listen, Tabellen und Formulare in konkreten Fällen umgesetzt sind. Die in mehreren Schwierigkeitsgraden gehaltenen Designs bieten Anregung genug zum Ausprobieren." -- iX, Ausgabe 2/2007
"[...] ein Buch, dass ich jedem empfehlen kann, der sich bereits mit HTML und CSS auseinandergesetzt hat und tiefer in diese Materie dringen möchte, oder Lösungen für spezielle Themen (z. B. Image-Replacement) sucht. Die Beispielprojekte sind hier mit Sicherheit ein guter Weg, um die gelernten Inhalte auch direkt umsetzen zu können." -- mileandra.de Weblog, April 2006
"In Workshop-artiger Manier leitet das Autorenduo durch praxisnahe Beispiele. [...] Alle Programmierbeispiele sind in verschiedene Schwierigkeitsstufen eingeteilt, besondere Hinweise und Tipps werden deutlich sichtbar platziert. Die Designanregungen sind für ganz unterschiedliche Einsatzzwecke gedacht. Privatpersonen werden dabei ebenso bedacht, wie Profis." -- Netzkritik.de, 03/2006
"Anhand von Beispielen, die man leicht auf die eigenen Bedürfnisse umstricken kann, wird gezeigt, wie man eindrucksvoll ganze Webseiten oder einzelne Elemente elegant mit CSS aufbauen kann. Angefangen von Seitenlayouts über Newsletterformulare und Fotoalben bis hin zu einem Kochbuch bietet das Buch eine breite Palette an Anwendungen. [...] So kann ich das Buch allen empfehlen, die sich nicht mit langweiligen Webseitendesign zufrieden geben wollen." -- Indiancoder.de, Februar 2006
"Schon im Vorwort wird erklärt, wie CSS-Code sauber und lesbar strukturiert werden kann. Diese Praxis zieht sich durch das ganze Buch hindurch. [...] Den Autoren ist es gelungen, eine Sammlung kreativer Designbeispiele zu erstellen." -- Linux Usergroup der Studentensiedlung Freiburg, März 2006
"Das Ziel wurde bereits im Untertitel formuliert: Designer-Techniken für kreative und moderne Webseiten. Prägnantes Urteil: Ziel erreicht. [...] Insgesamt ein gelungenes Sachbuch zum Thema Webdesign mit CSS, das nicht nur was für Anfänger ist. Auch bei ambitionierten Webdesignern und Profis erweist es sich als hilfreiches Nachschlagewerk." -- Webdevbits.de, Februar 2006
"[...] ein Buch, dass ich jedem empfehlen kann, der sich bereits mit HTML und CSS auseinandergesetzt hat und tiefer in diese Materie dringen möchte, oder Lösungen für spezielle Themen (z. B. Image-Replacement) sucht. Die Beispielprojekte sind hier mit Sicherheit ein guter Weg, um die gelernten Inhalte auch direkt umsetzen zu können." -- mileandra.de Weblog, April 2006
"In Workshop-artiger Manier leitet das Autorenduo durch praxisnahe Beispiele. [...] Alle Programmierbeispiele sind in verschiedene Schwierigkeitsstufen eingeteilt, besondere Hinweise und Tipps werden deutlich sichtbar platziert. Die Designanregungen sind für ganz unterschiedliche Einsatzzwecke gedacht. Privatpersonen werden dabei ebenso bedacht, wie Profis." -- Netzkritik.de, 03/2006
"Anhand von Beispielen, die man leicht auf die eigenen Bedürfnisse umstricken kann, wird gezeigt, wie man eindrucksvoll ganze Webseiten oder einzelne Elemente elegant mit CSS aufbauen kann. Angefangen von Seitenlayouts über Newsletterformulare und Fotoalben bis hin zu einem Kochbuch bietet das Buch eine breite Palette an Anwendungen. [...] So kann ich das Buch allen empfehlen, die sich nicht mit langweiligen Webseitendesign zufrieden geben wollen." -- Indiancoder.de, Februar 2006
"Schon im Vorwort wird erklärt, wie CSS-Code sauber und lesbar strukturiert werden kann. Diese Praxis zieht sich durch das ganze Buch hindurch. [...] Den Autoren ist es gelungen, eine Sammlung kreativer Designbeispiele zu erstellen." -- Linux Usergroup der Studentensiedlung Freiburg, März 2006
"Das Ziel wurde bereits im Untertitel formuliert: Designer-Techniken für kreative und moderne Webseiten. Prägnantes Urteil: Ziel erreicht. [...] Insgesamt ein gelungenes Sachbuch zum Thema Webdesign mit CSS, das nicht nur was für Anfänger ist. Auch bei ambitionierten Webdesignern und Profis erweist es sich als hilfreiches Nachschlagewerk." -- Webdevbits.de, Februar 2006