Das Beste an HTML & CSS: Best Practices für standardkonformes Webdesign

Buchcover......Page 1
Das Beste an HTML & CSS: Best Practices für standardkonformes Webdesign......Page 5
ISBN 13 978-3-89721-617-4......Page 6
Inhalt......Page 7
Was ist das Beste an HTML und CSS......Page 17
Der ideale Leser......Page 18
Eine Warnung zum Thema (mangelnde) Kenntnis......Page 19
Ziele dieses Buches......Page 20
Was Sie nicht in diesem Buch finden......Page 21
Über Webstandards......Page 23
Nomenklatur......Page 24
»Read the Source, Luke!«......Page 26
Die Verwendung der Codebeispiele......Page 27
Danksagungen......Page 28
Das Web ohne Links......Page 31
URIs......Page 32
Den Anwenderkomfort durch Links verbessern......Page 33
Herausforderungen bei der Implementierung von Hypertext......Page 34
HTML-Syntax......Page 37
Tags, Elemente und Attribute......Page 38
Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen......Page 40
Strict, Transitional oder Frameset?......Page 41
Die Geschichte der zwei Boxmodelle......Page 42
Die schönen Seiten: universelle Attribute......Page 43
Stylesheet-Anweisungen per »class« und »id« einbinden......Page 44
Inhalt beschreiben mit »title« und »lang«......Page 45
Das Attribut »contenteditable« in HTML 5......Page 46
Die Trennung von Inhalt, Strukur, Präsentation und Verhalten......Page 47
Mit Dokumentenbäumen arbeiten......Page 48
Browser, Parsing und Rendering......Page 50
Dynamisches HTML, Ajax und Rendering......Page 51
Ein Stylesheet per »link«-Element einbinden......Page 53
Conditional Comments zum Ansprechen verschiedener Versionen des Internet Explorers......Page 54
Die Verwendung von »@import«......Page 55
Regeln für bestimmte Medientypen......Page 56
Eltern, Kinder und Geschwister: Beziehungen zwischen Elementen......Page 58
Einfache Selektoren......Page 59
Gruppierte Selektoren und Selektoren für Nachfahrenelemente......Page 60
Priorität der Selektoren......Page 61
Regelkonflikte vermeiden......Page 62
Vererbte Werte......Page 63
Medienübergreifende Längen- und Maßeinheiten......Page 64
Pixelwerte und Punktdichte......Page 65
Druckfreundliche Längeneinheiten......Page 66
Farbwerte......Page 67
Die wichtigsten CSS-Eigenschaften für das Layout......Page 68
Viele Standards fürs Web......Page 71
Wozu Webstandards?......Page 72
Zugänglichkeit......Page 73
Altlasten als Bremse......Page 74
Der Mittelweg: Standardfreundlichkeit......Page 75
Die Regeln für standardfreundliche Entwicklung......Page 76
Die vier wichtigsten Angewohnheiten für effektive Stylesheets......Page 79
Angewohnheit 1: In der Kürze liegt die Würze......Page 80
Schlichtheit bei sehr großen Sites......Page 82
Angewohnheit 2: Flexibilität......Page 83
Flexibilität, eigene Bibliotheken und die Wiederverwendung von Code......Page 84
Angewohnheit 3: Konsistenz......Page 85
Konsistenz durch Template-Verwaltung......Page 87
Angewohnheit 4: Auf Kurs bleiben......Page 88
Produktdokumentation als »Kompass«......Page 89
Die Funktionsprinzipien des CSS-Zen......Page 90
Informationsarchitektur und Usability des Webs......Page 91
Mehrdimensionalität......Page 92
Navigation: Ortsbestimmung und Orientierungshilfen......Page 94
Besucherstrategien......Page 95
Richtlinien für die Erstellung benutzbarer Schnittstellen......Page 96
Links auf das aktuelle Element deaktivieren......Page 97
Szenarios und Benutzertests zur Vorhersage von Besucherverhalten......Page 98
Taxonomie und Nomenklatur......Page 99
Taxonomie auf die Kaskade anwenden......Page 100
Neue Strukturelemente (HTML 5)......Page 103
Das CSS-Boxmodell und die Größe von Elementen......Page 105
auto-Werte......Page 106
Die Eigenschaft »overflow«......Page 107
Länge und Breite für Elemente anstelle expliziter Werte nur begrenzen......Page 109
Mit Unwägbarkeiten umgehen......Page 110
Negative Außenabstände......Page 111
Zusammengefasste Außenabstände......Page 112
Rahmen......Page 113
Das Box-Verhalten der Wurzelelemente des Dokuments......Page 114
Darstellungsrollen......Page 115
Block-Elemente......Page 116
Das Flussverhalten eines Elements mit »display« ändern......Page 117
Die Eigenschaft »display«......Page 118
Das Verhalten von Floats......Page 119
Das »float«-Verhalten mit der Eigenschaft »clear« steuern......Page 120
Mehrspaltige Layouts implementieren......Page 121
Ein zweispaltiges Tabellen-Layout nach CSS portieren......Page 122
Die Regeln für das zweispaltige Layout......Page 124
Vorteile der Beschränkung von Layout-Anweisungen auf Stylesheets......Page 125
Zwei Spalten auf drei Spalten erweitern......Page 126
Semantisch leere Container für mehrspaltige Layouts......Page 128
Wie die Positionierung funktioniert......Page 129
Positionierte Elemente begrenzen......Page 131
Stapelung......Page 133
Die Liste ausrichten......Page 135
Navigationslisten genau platzieren......Page 136
Feste, proportionale und flexible Layouts......Page 138
Hilfslinien definieren......Page 141
Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge......Page 143
Implementierung eines flexiblen Layoutrasters......Page 144
Browser-Standarddarstellung für geordnete und ungeordnete Listen......Page 147
Die Eigenschaft »list-style-type« und das Attribut »type«......Page 148
Das »nav«-Element (HTML 5)......Page 149
Überlegungen zu Zugänglichkeit und Usability......Page 150
Kürzere Wellenlängen......Page 151
Aufzählungen......Page 152
Aufzählungszeichen als Hintergrundbild?......Page 153
Platzierung der primären Navigation in der Quellcode-Reihenfolge......Page 154
Rezept für die primäre Navigation......Page 155
Rezept für die Navigation im Fußteil......Page 156
Stile für Definitionslisten......Page 157
Wörterbuch-Beispiel......Page 158
Beispiel für einen Dialog......Page 160
Überschriften und gutes Schreiben......Page 163
Gedruckte Überschriften......Page 164
Größe und Schriftart......Page 165
Die Größen von Überschriften anpassen......Page 166
Link-Attribute......Page 167
Virtuose Verwendung des »href«-Attributs......Page 168
Effektiver Inhalt für Links und Werte für das »title«-Attribut......Page 169
Pseudoklassen für Links......Page 171
Mit »display: block« den anklickbaren Bereich von Links vergrößern......Page 172
Die Eigenschaft »text-decoration«......Page 173
Semantische Bedeutung durch Inline-Elemente......Page 174
Zitate......Page 176
Farbenlehre und Webfarben......Page 177
Usability, Zugänglichkeit und Farbe......Page 178
Das subtraktive Farbmodell......Page 179
Design, Kontrast und Komplementärfarben......Page 180
Farben identifizieren, Kurzfassung......Page 181
Monitore und die »websichere« Farbpalette......Page 183
Eigene Farbpaletten erstellen......Page 184
Die richtigen Werte für »background-position«......Page 185
Hintergrundbilder erstellen......Page 187
»Faux Columns«......Page 188
Gekachelte Hintergrundtexturen und -muster......Page 190
Größere Hintergrundtexturen und nicht wiederholte Embleme......Page 191
Grafische Schriften und das Fahrner Image Replacement......Page 192
Nachteile der FIR-Methode......Page 194
Die Serverlast mit Sprites verringern......Page 195
Quellcode-Reihenfolge: Die Quadratur des Kreises......Page 197
Die unvermeidliche Abhängigkeit von Templates......Page 198
Bestandteile einer Datentabelle......Page 199
Beispiel: Die volle Packung Tabellen-Markup......Page 200
Tabellenzellen anlegen......Page 203
Tabellen- und Datenanordnung......Page 204
Tabellenkopf- und -fußteil und ihre Zellen......Page 206
Attribute und Kindselektoren......Page 207
Den Kontrast für Kopf- und Fußteil reduzieren......Page 208
Rollover-Effekte für Tabellen......Page 209
Ersetzte Elemente......Page 211
Bilder vorbereiten......Page 212
Bildgrößen und Rahmen......Page 213
Beschneiden......Page 214
»Matting«: Ein virtuelles Passepartourt......Page 215
Skalieren: Die absolute Bildgröße ändern......Page 216
Tonwert und Kontrast anpassen......Page 217
Mit Farbprofilen arbeiten......Page 219
Die goldene Mitte zwischen Dateigröße und Bildqualität......Page 221
Bilder richtig ordnen......Page 222
Bilder mit einem CMS verwalten und veröffentlichen......Page 223
Etikette beim Veröffentlichen von Bildern......Page 224
Bildbeschriftungen......Page 225
Vorschaubilder für Galerien und Diaschauen (Slideshows)......Page 227
Lightbox: Vorschaubilder, Galerien und Diaschauen......Page 228
SlideShowPro......Page 229
Integration von Videos und Präsentationen im Flash-Format mit SWFObject......Page 230
Multimediadaten integrieren......Page 231
Flash als möglicher Ausweg......Page 232
Probleme mit Stilen für Plugin-Inhalte......Page 233
Eine offene Haltung bewahren......Page 234
Unterstützung für alternative Videoformate......Page 235
Die »CanvasRenderingContext2D«-API......Page 236
SVG als Alternative zu »canvas«......Page 237
Eine kurze Geschichte der Schrift......Page 239
Gutenbergs Druckerpresse und die Kunst der Typografie......Page 240
Verschiedene Beschränkungen, aber keine veränderten Erwartungen......Page 241
Ein kurzes Glossar der Typografie......Page 242
Schriftenglättung: Aliasing und Anti-Aliasing......Page 245
Stildefinitionen zum Erhöhen der Erkennbarkeit......Page 248
Der »Knick« und kleine Schriften......Page 249
Die richtigen Längeneinheiten für Schriftgrößen......Page 251
Berechnung der Werte für em-Einheiten und Prozentangaben......Page 252
Das Problem der geringen Auswahl......Page 253
Eigene Schriften definieren: Die Eigenschaft »font-family«......Page 256
Die richtigen Schriftnamen finden......Page 257
Überblick über die Zeichenkodierung......Page 259
ASCII, ISO 8859-1, Unicode und UTF-8......Page 260
Das richtige Kodierungsschema wählen......Page 261
Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen......Page 262
Ausgewogene Schriftgestaltung......Page 264
Die Grenzen von Inhalten ermitteln......Page 265
Schrift unterscheiden: Schriftschnitt, Größe, Gewicht, Stil und Farbe......Page 266
Das »Überlaufen« von Text verhindern......Page 268
Stile für Textpassagen mit gleicher Priorität......Page 269
Verschiedene typografische Aspekte von CSS......Page 270
Die Eigenschaften »font-variant« und »text-transform«......Page 271
Gute Webtypografie in der Praxis......Page 272
Webapplikationen, Benutzerperspektive und Design-Entscheidungen......Page 273
Benutzerschnittstellen nach Funktion ordnen......Page 274
Zehn Regeln für effektive Webformulare und -applikationen......Page 275
Einschätzung und Struktur......Page 277
Anforderungen ermitteln......Page 278
Markup und Struktur......Page 280
Grundsätzliche Struktur, Darstellung und Verhalten von Formularen......Page 283
Vom Formular ausgelöste GET-Requests......Page 284
Die Größe und das Aussehen einzelner Formularelemente anpassen......Page 286
Das Einmaleins des Prototyping......Page 288
Design-Templates, Grundstile und Formular-Layout......Page 289
Einheitliche Gestaltung von gleichen Formularelementen......Page 291
Erforderliche Formularfelder und Eingabeformate......Page 292
Erforderliche Felder hervorheben......Page 293
Eingabefehler aufspüren und identifizieren......Page 294
Zugängliche Formulare erstellen......Page 295
Zugängliche Formulare implementieren......Page 296
Formulare über die Tastatur steuern......Page 298
Neue Eingabeelemente......Page 299
Das Attribut »required«......Page 300
Die schlechten Manieren des Internet Explorers (speziell IE 6)......Page 303
Browserkrieg 2.0......Page 304
Fehlende oder schlechte Unterstützung für Selektoren......Page 305
»hasLayout«......Page 306
»expression()«-Werte......Page 307
PNG-Unterstützung (oder ihr Fehlen)......Page 308
Probleme mit XHTML und XML......Page 309
Markup-Validierung als Voraussetzung für korrekte Stylesheet-Implementierung......Page 310
Abgestufte Unterstützung......Page 311
Formularelemente, Plugins und der Stapelkontext......Page 313
Obskure Gründe für ungültiges Markup......Page 314
Frames......Page 315
Das Attribut »name«......Page 317
Semantische Verrenkungen und der begrenzte Wortschatz von HTML......Page 318
Präsentationselemente und wie Sie sie vermeiden......Page 319
CSS-Travestien......Page 320
Berechnete Werte und Rundungsunterschiede......Page 321
Der Wert »inherit«......Page 322
Dinge verstecken: »z-index« und »clip«......Page 323
Regeln für den Fluss der Elemente......Page 324
Unicode-Werte und die Eigenschaft »content«......Page 325
Eigenschaften der Benutzeroberfläche (IE)......Page 326
Div-itis......Page 327
Attribute für Event-Handler......Page 328
Das Attribut »http-equiv«......Page 329
Das Puzzle wieder zusammensetzen......Page 330
Anhang – URIs, Client-Server-Architektur und HTTP......Page 331
Glossar......Page 337
Index......Page 343