CSS PUR! - Ultimative Weblosungen mit Stil

CSS PUR! - Ultimative Weblösungen mit Stil......Page 1
Index......Page 6
An wen richtet sich dieses Buch?......Page 7
Inhaltlicher Aufbau......Page 8
Browsersupport......Page 9
Was ist CSS?......Page 11
Wozu CSS?......Page 12
Welche Vorteile bringt die Layoutierung mit CSS?......Page 13
HTML, XHTML, XML – was ist was?......Page 15
Semantisches XHTML & Mikroformate......Page 16
Tag-Wolke......Page 20
Web für alle!......Page 21
Richtlinien & Levels......Page 22
Testen – testen – testen......Page 23
Usability......Page 24
Usability-Analysen & Tests......Page 25
Wie funktioniert es?......Page 27
Fazit......Page 30
Wo nachsehen?......Page 31
Medientypen......Page 33
Monitorauflösung......Page 35
Präsentation der Farben......Page 37
1. Editoren......Page 39
2. Ordnerstruktur......Page 40
4. Webdeveloper-Toolbar, Firebug......Page 41
2 CSS-Basics......Page 44
Dokumenttyp-Deklaration (DTD)......Page 45
Struktur & Bezeichnung der Inhalte......Page 48
Struktureller Aufbau Prototyp 1......Page 49
Relative Maßeinheiten......Page 57
Absolute Maßeinheiten......Page 58
Screenreader......Page 59
CSS-Eigenschaften......Page 60
Stylesheets – Ursprung......Page 61
1. Externes Stylesheet......Page 62
Attribut......Page 64
4. Import......Page 65
CSS-Schreibweise......Page 66
Schreibweise & Tipps......Page 67
Die grundlegenden Selektoren im Detail......Page 68
Selektoren im Einsatz: Verschachtelungen, Kombinationen......Page 71
Die „Pseudos“: Pseudoklassen und Pseudoelemente......Page 74
1. Was ist die Kaskade nun genau?......Page 77
2. Vererbung......Page 80
Dokumentstammbaum......Page 81
Was ist was?......Page 85
Die Box und ihre Eigenschaften......Page 87
Die Box-Abmessungen......Page 90
Vertikale Außenabstände (margin-bottom, margin-top)......Page 92
1. Conditional Comments......Page 93
4. Hacks......Page 95
5. Das IE7/IE8-Script......Page 98
Und so funktioniert es......Page 101
Welche CSS-Attribute spielen bei der Positionierung eine Rolle?......Page 103
Positionierung mittels......Page 105
Positionieren mittels float......Page 109
Vorbereitung......Page 115
1. Einspaltiges Layout mit fixer bzw. variabler Breite......Page 116
2. Zweispaltiges Layout mit variabler bzw. fixer Breite......Page 117
Webseite horizontal zentrieren......Page 126
Mehrere CSS-Dateien......Page 127
Inhaltliche Struktur......Page 128
3 Prototypen......Page 130
Prototyp 1 - Visitenkarten-Website......Page 132
Das XHMTL-Grundgerüst......Page 133
Und so sieht es bis jetzt im Browser aus:......Page 136
Anlegen der CSS-Dateien & Normalisieren......Page 137
Seitenbreite fixieren und Seite zentrieren......Page 139
Gestaltung des Hintergrunds......Page 140
Text durch Bild ersetzen ( Image Replacement)......Page 151
Positionierung des Logos......Page 153
Zweispaltiges Layout mit float......Page 154
Designen der zwei Spalten #navi und #content_main......Page 155
Das Styling der Navigation #navi......Page 157
Teiltransparenter Hintergrund „ Milchglas-Effekt“......Page 158
Das Styling der Navigationsliste und der Schrift......Page 159
Wie groß ist „em“?......Page 160
Das Styling der Links......Page 161
#current – mit einem Blick wissen, wo man sich befindet......Page 163
Spezialeffekt: Hilfetext bei Akronymen......Page 164
Galerie: Bild&Text-Kombination in......Page 171
Text neben Bild......Page 173
Einheitliches Schriftbild über ......Page 175
Überschriften......Page 176
Design des Beschreibungstextes......Page 177
Erster Buchstabe anders......Page 178
Bilder automatisch rahmen......Page 179
Logo nachjustieren......Page 180
Design des Textes......Page 187
Prototyp 2 - Die Business-Website......Page 190
Gute Fotos fürs Business......Page 191
Farbgebung......Page 192
Der Aufbau des XHTML – die (semantische) Basis......Page 197
Strukturierung des Inhalts......Page 198
Der HTML-Code für den Kopfbereich......Page 200
Der Aufbau des grafischen Menüs......Page 201
Eine Alternative......Page 203
Die sekundäre Navigationsleiste......Page 204
HTML für den Fließtext erstellen......Page 205
Lorem Ipsum-Text besorgen......Page 206
Der unterstützende Inhaltsbereich......Page 207
Überschriftenrelevanz mit der Webdeveloper-Toolbar zeigen......Page 209
Die Fußzeile......Page 210
Rechtliches zum Impressum......Page 211
Übersicht......Page 212
Der derzeitige Stand der Website im Browser......Page 215
Fehler? Kein Problem!......Page 216
Gedanken hinter dem Design......Page 217
So – nun aber genug der Worte – legen Sie los!......Page 218
Den Hauptcontainer #main zentrieren......Page 219
Die Hauptnavigation #navigation positionieren......Page 220
Was bedeutet das nun konkret für unser Beispiel?......Page 222
Elemente am Rand positionieren......Page 223
Stapeln von Ebenen (Z-Index-Stacks)......Page 226
Die zweite Navigation #nav2 positionieren und ausrichten......Page 227
Der Content-Bereich #content......Page 229
Der Bereich #content_supp für Teaserboxen......Page 231
Aufräumen von Floats mit dem overflow-Trick......Page 232
Die Fußzeile #footer......Page 233
Das komplette CSS bis dato im Überblick......Page 237
Die 10 Highlights dieser Phase......Page 239
Gestaltung eines seriösen Schriftbilds......Page 241
Überschriften relativ anpassen......Page 242
Das Branding #branding gestalten......Page 244
Kombinieren und optimieren......Page 245
Alternative Deklarationen......Page 251
Die Hauptnavigation #main_nav gestalten......Page 253
Listen mit rechtsbündigen, wechselnden Aufzählungs-zeichen......Page 255
Den Slogan stylen......Page 257
Der Content-Bereich #content_main......Page 259
Der sekundäre Inhaltsbereich #content_supp......Page 260
Externe/interne Links unterschiedlich kennzeichnen......Page 266
Weitere Möglichkeiten, abgerundete Ecken zu erzeugen......Page 272
Der gesamte CSS-Code im Überblick......Page 273
Prototyp 3 - Das Web-Portal......Page 280
Inhalte des Portals im Überblick......Page 281
Die Einteilung der Haupt-div-Container......Page 284
Der Header #header......Page 285
Logo, Sprachenauswahl und Suche......Page 286
Teaser-Bild......Page 287
Die Zimmersuche #room-search mit form und table......Page 289
Der Infobereich #info......Page 292
Der Hauptinhaltsbereich #content......Page 293
Unterstützender Inhalt: Zitate, Hotels in der Nähe, Kleine Info (.supp)......Page 294
Der zentrale Inhalt #property-general: Beschreibung, Galerie und Adresse......Page 296
Der Adressenblock mit dem Mikroformat hCard......Page 298
Die Fußzeile #footer......Page 299
HTML-Code im Überblick......Page 301
Und so sollte die Seite nun in Ihrem Browser aussehen:......Page 307
Vorbereitungen......Page 309
Ziele unseres Layouts......Page 311
Normalisierung und die Kontrolle der Seitenbreite......Page 313
Positionierung der Header-Elemente #header......Page 314
Suche #ft-search, Sprachauswahl #lang-menu und Gästebereich #guest-login......Page 315
Den Teaser und die dazugehörige Sprechblase positionieren......Page 317
Die Sprechblase ausrichten:......Page 318
Abschlussarbeiten für den Kopfbereich......Page 319
Der Hauptbereich #main......Page 320
Die linke Spalte des Inhaltsbereichs......Page 321
Den Umbruch des Hauptcontainers verhindern......Page 322
Die unterstützenden Inhaltsboxen......Page 323
Der Footer #footer......Page 324
Footer-Höhe anpassen......Page 325
Der CSS-Code für Positionierung und Layout im Überblick......Page 327
Die Highlights dieser Phase......Page 329
Allgemeine Schriften......Page 331
Styling der Links......Page 332
Der Logo-Bereich #logo......Page 333
Die Gästenavigation #guest-login......Page 336
Die linke Spalte designen......Page 338
Den Info-Block #info stylen......Page 343
Allgemeine Styles für den Inhalt......Page 346
Gestaltung der Bilderpräsentation......Page 349
Horizontale Navigation mit Zusatztexten gestalten (im #footer-div)......Page 352
Finalisierung......Page 356
Validierung......Page 357
Der komplette CSS-Code im Überblick......Page 359
Layouts mit dem YAML-Builder......Page 363
So funktioniert das YAML-Builder-Interface......Page 364
2. Inhalte und weitere Templates einbetten......Page 365
4. Code generieren und weiterverwenden......Page 366
Anhang......Page 368
Visionen und Ausblicke - Die Zukunft des Webs......Page 369
Der Browser als neues Betriebssystem......Page 370
HTML 5.0 und XHTML 2......Page 371
CSS3 – die neuen Features......Page 372
Link-Liste......Page 373
D......Page 379
I......Page 380
P......Page 381
U......Page 382
Z......Page 383
Referenzkarte......Page 386