Das Beste an HTML & CSS - Best Practices für standardkonformes Webdesign
von: Ben Henick
O'Reilly Verlag, 2010
ISBN: 9783897216181
Sprache: Deutsch
360 Seiten, Download: 8312 KB
Format: PDF, auch als Online-Lesen
geeignet für:
| Inhalt | 7 | ||
| Einleitung | 17 | ||
| Über dieses Buch | 17 | ||
| Was ist das Beste an HTML und CSS | 17 | ||
| Was Sie vor dem Lesen dieses Buches wissen sollten | 18 | ||
| Der ideale Leser | 18 | ||
| Eine Warnung zum Thema (mangelnde) Kenntnis | 19 | ||
| Ziele dieses Buches | 20 | ||
| Was Sie nicht in diesem Buch finden | 21 | ||
| Über Webstandards | 23 | ||
| Über Photoshop | 24 | ||
| Was Sie auf der Website zu diesem Buch finden | 24 | ||
| Nomenklatur | 24 | ||
| »Read the Source, Luke!« | 26 | ||
| Typografische Konventionen | 27 | ||
| Die Verwendung der Codebeispiele | 27 | ||
| Danksagungen | 28 | ||
| Kapitel 1 – Hypertext von innen | 31 | ||
| Das Web ohne Links | 31 | ||
| URIs | 32 | ||
| Mit Links umgehen | 33 | ||
| Den Anwenderkomfort durch Links verbessern | 33 | ||
| Herausforderungen bei der Implementierung von Hypertext | 34 | ||
| Kapitel 2 – Mit HTML-Markup arbeiten | 37 | ||
| HTML-Syntax | 37 | ||
| Tags, Elemente und Attribute | 38 | ||
| Seitenstruktur | 40 | ||
| Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen | 40 | ||
| HTML oder XHTML? | 41 | ||
| Strict, Transitional oder Frameset? | 41 | ||
| Die Geschichte der zwei Boxmodelle | 42 | ||
| Der richtige Dokumenttyp für Ihr Projekt | 43 | ||
| Die schönen Seiten: universelle Attribute | 43 | ||
| Stylesheet-Anweisungen per »class« und »id« einbinden | 44 | ||
| Inhalt beschreiben mit »title« und »lang« | 45 | ||
| Das Attribut »contenteditable« in HTML 5 | 46 | ||
| Die Trennung von Inhalt, Strukur, Präsentation und Verhalten | 47 | ||
| Die Trennung in der Praxis | 48 | ||
| Mit Dokumentenbäumen arbeiten | 48 | ||
| Browser, Parsing und Rendering | 50 | ||
| Dynamisches HTML, Ajax und Rendering | 51 | ||
| Kapitel 3 – CSS-Überblick | 53 | ||
| Stylesheets und HTML-Dokumente verbinden | 53 | ||
| Ein Stylesheet per »link«-Element einbinden | 53 | ||
| Conditional Comments zum Ansprechen verschiedener Versionen des Internet Explorers | 54 | ||
| »link« durch »style« ersetzen | 55 | ||
| Die Verwendung von »@import« | 55 | ||
| Finger weg vom »style«-Attribut! | 56 | ||
| Regeln für bestimmte Medientypen | 56 | ||
| Selektoren für Elemente, die mit Stilen versehen werden sollen | 58 | ||
| Eltern, Kinder und Geschwister: Beziehungen zwischen Elementen | 58 | ||
| Einfache Selektoren | 59 | ||
| Gruppierte Selektoren und Selektoren für Nachfahrenelemente | 60 | ||
| Kindelemente direkt auswählen | 61 | ||
| Regelkonflikte, Priorität und Präzedenz | 61 | ||
| Priorität der Selektoren | 61 | ||
| Regelkonflikte vermeiden | 62 | ||
| Vererbte Werte | 63 | ||
| Untersuchung von CSS-Eigenschaften und -Werten | 64 | ||
| CSS-Maßeinheiten | 64 | ||
| Medienübergreifende Längen- und Maßeinheiten | 64 | ||
| Pixelwerte und Punktdichte | 65 | ||
| Druckfreundliche Längeneinheiten | 66 | ||
| Schriftgrößen | 67 | ||
| Farbwerte | 67 | ||
| Die wichtigsten CSS-Eigenschaften für das Layout | 68 | ||
| Kapitel 4 – Eine gesunde Beziehung zu den Webstandards entwickeln | 71 | ||
| Viele Standards fürs Web | 71 | ||
| Wozu Webstandards? | 72 | ||
| Interoperabilität | 73 | ||
| Die Kräfte des Marktes | 73 | ||
| Vorwärtskompatibilität | 73 | ||
| Zugänglichkeit | 73 | ||
| Prioritäten der Hersteller | 74 | ||
| Altlasten als Bremse | 74 | ||
| Best Practices (und ihr Fehlen) | 75 | ||
| Strikte Gesetzesauslegung | 75 | ||
| Der Mittelweg: Standardfreundlichkeit | 75 | ||
| Vorteile der Standardfreundlichkeit | 76 | ||
| Die Regeln für standardfreundliche Entwicklung | 76 | ||
| Kapitel 5 – Effektive Stylesheets und Dokumentenstrukturen | 79 | ||
| Die vier wichtigsten Angewohnheiten für effektive Stylesheets | 79 | ||
| Angewohnheit 1: In der Kürze liegt die Würze | 80 | ||
| Schlichtheit bei sehr großen Sites | 82 | ||
| Angewohnheit 2: Flexibilität | 83 | ||
| Flexibilität, eigene Bibliotheken und die Wiederverwendung von Code | 84 | ||
| Angewohnheit 3: Konsistenz | 85 | ||
| Konsistenz durch Template-Verwaltung | 87 | ||
| Angewohnheit 4: Auf Kurs bleiben | 88 | ||
| Produktdokumentation als »Kompass« | 89 | ||
| CSS-Zen und die Erfahrung des Gestalters | 90 | ||
| Die Funktionsprinzipien des CSS-Zen | 90 | ||
| Informationsarchitektur und Usability des Webs | 91 | ||
| Mehrdimensionalität | 92 | ||
| Navigation: Ortsbestimmung und Orientierungshilfen | 94 | ||
| Besucherstrategien | 95 | ||
| Richtlinien für die Erstellung benutzbarer Schnittstellen | 96 | ||
| Links auf das aktuelle Element deaktivieren | 97 | ||
| Szenarios und Benutzertests zur Vorhersage von Besucherverhalten | 98 | ||
| Taxonomie und Nomenklatur | 99 | ||
| Taxonomie auf die Kaskade anwenden | 100 | ||
| Neue Strukturelemente (HTML 5) | 103 | ||
| Kapitel 6 – Lösungen für das CSS-Layout-Puzzle | 105 | ||
| Das CSS-Boxmodell und die Größe von Elementen | 105 | ||
| Quirks Mode und Strict Mode | 106 | ||
| auto-Werte | 106 | ||
| Die Eigenschaft »overflow« | 107 | ||
| Länge und Breite für Elemente anstelle expliziter Werte nur begrenzen | 109 | ||
| Mit Unwägbarkeiten umgehen | 110 | ||
| Rahmen, Innen- und Außenabstände | 111 | ||
| Negative Außenabstände | 111 | ||
| Zusammengefasste Außenabstände | 112 | ||
| Rahmen | 113 | ||
| Innenabstände | 114 | ||
| Das Box-Verhalten der Wurzelelemente des Dokuments | 114 | ||
| Längenangaben für Box-Eigenschaften und Prozentwerte | 115 | ||
| Darstellungsrollen | 115 | ||
| Inline-Elemente | 116 | ||
| Block-Elemente | 116 | ||
| Inline-Block-Elemente | 117 | ||
| Das Flussverhalten eines Elements mit »display« ändern | 117 | ||
| Die Eigenschaft »display« | 118 | ||
| Die Eigenschaften »float« und »clear« | 119 | ||
| Das Verhalten von Floats | 119 | ||
| Das »float«-Verhalten mit der Eigenschaft »clear« steuern | 120 | ||
| »float«-Kontext | 121 | ||
| Mehrspaltige Layouts implementieren | 121 | ||
| Ein zweispaltiges Tabellen-Layout nach CSS portieren | 122 | ||
| Die Regeln für das zweispaltige Layout | 124 | ||
| Vorteile der Beschränkung von Layout-Anweisungen auf Stylesheets | 125 | ||
| Zwei Spalten auf drei Spalten erweitern | 126 | ||
| Mehr als drei Spalten | 128 | ||
| Semantisch leere Container für mehrspaltige Layouts | 128 | ||
| Fortgeschrittenes Layout mit CSS 3 | 129 | ||
| CSS-Eigenschaften für die Positionierung | 129 | ||
| Wie die Positionierung funktioniert | 129 | ||
| Positionierte Elemente begrenzen | 131 | ||
| Die Eigenschaften »visibility« und »z-index« | 133 | ||
| Ändern der Sichtbarkeit ohne Auswirkungen auf den Dokumentenfluss | 133 | ||
| Stapelung | 133 | ||
| Quellcode-Reihenfolge und präzises Layout für die Navigation | 135 | ||
| Die Liste ausrichten | 135 | ||
| Navigationslisten genau platzieren | 136 | ||
| Layouttypen und Hilfslinien-Raster | 138 | ||
| Feste, proportionale und flexible Layouts | 138 | ||
| Hilfslinien definieren | 141 | ||
| Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge | 143 | ||
| Implementierung eines flexiblen Layoutrasters | 144 | ||
| Kapitel 7 – Listen | 147 | ||
| Geordnete und ungeordnete Listen | 147 | ||
| Browser-Standarddarstellung für geordnete und ungeordnete Listen | 147 | ||
| Gültige geordnete und ungeordnete Listen erstellen | 148 | ||
| Die Eigenschaft »list-style-type« und das Attribut »type« | 148 | ||
| Das »nav«-Element (HTML 5) | 149 | ||
| Überlegungen zu Zugänglichkeit und Usability | 150 | ||
| Browsern ermöglichen, die Navigation auf andere Weise anzuzeigen | 151 | ||
| Die Zählweise in geordneten Listen anpassen | 151 | ||
| Längere Welllenlängen | 151 | ||
| Kürzere Wellenlängen | 151 | ||
| Andere Verwendungen für Listen | 152 | ||
| Gliederungen | 152 | ||
| Aufzählungen | 152 | ||
| Das Layout für Links im Fußteil anpassen | 153 | ||
| Aufzählungszeichen als Hintergrundbild? | 153 | ||
| Stile für Navigationselemente | 154 | ||
| Platzierung der primären Navigation in der Quellcode-Reihenfolge | 154 | ||
| Rezept für die primäre Navigation | 155 | ||
| Rezept für die Navigation im Fußteil | 156 | ||
| Definitionslisten | 157 | ||
| Stile für Definitionslisten | 157 | ||
| Wörterbuch-Beispiel | 158 | ||
| Beispiel für einen Dialog | 160 | ||
| Kapitel 8 – Überschriften, Hyperlinks, Inline-Elemente und Zitate | 163 | ||
| Überschriften und gutes Schreiben | 163 | ||
| Gedruckte Überschriften | 164 | ||
| Optimale Platzierung für Überschriften | 165 | ||
| Stile für Überschriften | 165 | ||
| Größe und Schriftart | 165 | ||
| Die Größen von Überschriften anpassen | 166 | ||
| Überschriften hervorheben | 167 | ||
| Markup für Links | 167 | ||
| Link-Attribute | 167 | ||
| Virtuose Verwendung des »href«-Attributs | 168 | ||
| Links auf bestimmte Teile eines Dokuments | 169 | ||
| Effektiver Inhalt für Links und Werte für das »title«-Attribut | 169 | ||
| Stildefinitionen für Links | 171 | ||
| Pseudoklassen für Links | 171 | ||
| Mit »display: block« den anklickbaren Bereich von Links vergrößern | 172 | ||
| Die Eigenschaft »text-decoration« | 173 | ||
| Die Eigenschaft »cursor« | 174 | ||
| Semantische Bedeutung durch Inline-Elemente | 174 | ||
| Zitate | 176 | ||
| Kapitel 9 – Farben und Hintergründe | 177 | ||
| Farbenlehre und Webfarben | 177 | ||
| Usability, Zugänglichkeit und Farbe | 178 | ||
| Das additive Farbmodell | 179 | ||
| Das HSB-Farbmodell | 179 | ||
| Das subtraktive Farbmodell | 179 | ||
| Design, Kontrast und Komplementärfarben | 180 | ||
| Farben identifizieren, Kurzfassung | 181 | ||
| Monitore und die »websichere« Farbpalette | 183 | ||
| Eigene Farbpaletten erstellen | 184 | ||
| CSS-Hintergründe | 185 | ||
| Die richtigen Werte für »background-position« | 185 | ||
| Die CSS-Kurzschrift-Eigenschaft »background« | 187 | ||
| Hintergrundbilder erstellen | 187 | ||
| »Faux Columns« | 188 | ||
| Gekachelte Hintergrundtexturen und -muster | 190 | ||
| Größere Hintergrundtexturen und nicht wiederholte Embleme | 191 | ||
| Schattenwürfe, Gel-Effekte und abgerundete Ecken | 192 | ||
| Grafische Schriften und das Fahrner Image Replacement | 192 | ||
| Die FIR-Stylesheet-Regeln | 194 | ||
| Nachteile der FIR-Methode | 194 | ||
| Die Serverlast mit Sprites verringern | 195 | ||
| Kapitel 10 – (Daten-)Tabellen | 197 | ||
| Nachteile von Layout-Tabellen | 197 | ||
| Quellcode-Reihenfolge: Die Quadratur des Kreises | 197 | ||
| Vom CSS-Zen bleibt nur ein Mythos | 198 | ||
| Die unvermeidliche Abhängigkeit von Templates | 198 | ||
| Positionierung ist bei Tabellen-Layouts wertlos | 199 | ||
| Bestandteile einer Datentabelle | 199 | ||
| Beispiel: Die volle Packung Tabellen-Markup | 200 | ||
| Tabellenzellen anlegen | 203 | ||
| Tabellen- und Datenanordnung | 204 | ||
| Tabellenkopf- und -fußteil und ihre Zellen | 206 | ||
| Attribute und Kindselektoren | 207 | ||
| Den Kontrast für Kopf- und Fußteil reduzieren | 208 | ||
| Rollover-Effekte für Tabellen | 209 | ||
| Kapitel 11 – Bilder und Multimedia | 211 | ||
| Ersetzte Elemente | 211 | ||
| Bilder vorbereiten | 212 | ||
| Das »alt«-Attribut | 213 | ||
| Bildgrößen und Rahmen | 213 | ||
| Bilder erstellen | 214 | ||
| Beschneiden | 214 | ||
| »Matting«: Ein virtuelles Passepartourt | 215 | ||
| Skalieren: Die absolute Bildgröße ändern | 216 | ||
| Tonwert und Kontrast anpassen | 217 | ||
| Mehrere Anpassungen auf einmal | 219 | ||
| Mit Farbprofilen arbeiten | 219 | ||
| Bildoptimierung | 221 | ||
| Das richtige Dateiformat wählen | 221 | ||
| Die goldene Mitte zwischen Dateigröße und Bildqualität | 221 | ||
| Bilder veröffentlichen | 222 | ||
| Bilder richtig ordnen | 222 | ||
| Bilder mit einem CMS verwalten und veröffentlichen | 223 | ||
| Etikette beim Veröffentlichen von Bildern | 224 | ||
| Stile für Bilder und Plugin-Inhalte | 225 | ||
| Bildlayout innerhalb einer Spalte | 225 | ||
| Bildbeschriftungen | 225 | ||
| Vorschaubilder für Galerien und Diaschauen (Slideshows) | 227 | ||
| Lightbox: Vorschaubilder, Galerien und Diaschauen | 228 | ||
| SlideShowPro | 229 | ||
| Integration von Videos und Präsentationen im Flash-Format mit SWFObject | 230 | ||
| Multimediadaten integrieren | 231 | ||
| Die Geschichte dreier Firmen | 232 | ||
| Flash als möglicher Ausweg | 232 | ||
| Multimedia-Inhalte mit reinem Markup einbinden | 233 | ||
| Probleme mit Stilen für Plugin-Inhalte | 233 | ||
| Plugin-Probleme mit dem HTTP-Header »Content-Disposition« umgehen | 234 | ||
| Eine offene Haltung bewahren | 234 | ||
| Die Elemente »video« und »audio« (HTML 5) | 235 | ||
| Videos einbetten | 235 | ||
| Unterstützung für alternative Videoformate | 235 | ||
| Rückwärtskompatibilität mit Browsern, die das »video«-Element nicht unterstützen | 236 | ||
| Das »canvas«-Element (HTML 5) | 236 | ||
| Die »CanvasRenderingContext2D«-API | 236 | ||
| SVG als Alternative zu »canvas« | 237 | ||
| Kapitel 12 – Web-Typografie | 239 | ||
| Eine kurze Geschichte der Schrift | 239 | ||
| Die Herkunft moderner westlicher Buchstabenformen | 240 | ||
| Gutenbergs Druckerpresse und die Kunst der Typografie | 240 | ||
| Das Aufkommen des Digitalsatzes | 241 | ||
| Verschiedene Beschränkungen, aber keine veränderten Erwartungen | 241 | ||
| Ein kurzes Glossar der Typografie | 242 | ||
| Schriftenglättung: Aliasing und Anti-Aliasing | 245 | ||
| Schriftstile, Lesbarkeit und Erkennbarkeit | 248 | ||
| Stildefinitionen zum Erhöhen der Lesbarkeit | 248 | ||
| Stildefinitionen zum Erhöhen der Erkennbarkeit | 248 | ||
| Der »Knick« und kleine Schriften | 249 | ||
| Schriftgrößen angeben | 251 | ||
| Die richtigen Längeneinheiten für Schriftgrößen | 251 | ||
| Berechnung der Werte für em-Einheiten und Prozentangaben | 252 | ||
| Schlüsselwörter für Schriftgrößen | 253 | ||
| Arbeit mit Schriften und Schriftschnitten | 253 | ||
| Das Problem der geringen Auswahl | 253 | ||
| Eigene Schriften definieren: Die Eigenschaft »font-family« | 256 | ||
| Die richtigen Schriftnamen finden | 257 | ||
| Mit der Eigenschaft »font« auf Systemschriften zugreifen | 259 | ||
| Überblick über die Zeichenkodierung | 259 | ||
| Was ist Zeichenkodierung? | 260 | ||
| ASCII, ISO 8859-1, Unicode und UTF-8 | 260 | ||
| Das richtige Kodierungsschema wählen | 261 | ||
| Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen | 262 | ||
| Ausgewogene Schriftgestaltung | 264 | ||
| Vorhersagbarkeit und Panik | 265 | ||
| Die Grenzen von Inhalten ermitteln | 265 | ||
| Schrift unterscheiden: Schriftschnitt, Größe, Gewicht, Stil und Farbe | 266 | ||
| Das »Überlaufen« von Text verhindern | 268 | ||
| Stile für Textpassagen mit gleicher Priorität | 269 | ||
| Schriftübersichten | 270 | ||
| Verschiedene typografische Aspekte von CSS | 270 | ||
| Die Eigenschaft »line-height« | 271 | ||
| Die Eigenschaften »font-variant« und »text-transform« | 271 | ||
| Die Eigenschaften »letter-spacing« und »word-spacing« | 272 | ||
| Die Eigenschaft »white-space« | 272 | ||
| Gute Webtypografie in der Praxis | 272 | ||
| Kapitel 13 – Saubere und zugängliche Formulare | 273 | ||
| Effektive Formulare erstellen | 273 | ||
| Webapplikationen, Benutzerperspektive und Design-Entscheidungen | 273 | ||
| Benutzerschnittstellen nach Funktion ordnen | 274 | ||
| Zehn Regeln für effektive Webformulare und -applikationen | 275 | ||
| Einschätzung und Struktur | 277 | ||
| Anforderungen ermitteln | 278 | ||
| Markup und Struktur | 280 | ||
| Grundsätzliche Struktur, Darstellung und Verhalten von Formularen | 283 | ||
| Vom Formular ausgelöste GET-Requests | 284 | ||
| Die POST-Methode und das Hochladen von Dateien | 286 | ||
| Die Größe und das Aussehen einzelner Formularelemente anpassen | 286 | ||
| Prototyping und Layout | 288 | ||
| Das Einmaleins des Prototyping | 288 | ||
| Design-Templates, Grundstile und Formular-Layout | 289 | ||
| Einheitliche Gestaltung von gleichen Formularelementen | 291 | ||
| Erforderliche Formularfelder und Eingabeformate | 292 | ||
| Erforderliche Felder hervorheben | 293 | ||
| Eingabefehler aufspüren und identifizieren | 294 | ||
| Die Attribute »disabled« und »readonly« | 295 | ||
| Zugängliche Formulare erstellen | 295 | ||
| Zugängliche Formulare implementieren | 296 | ||
| Formulare über die Tastatur steuern | 298 | ||
| Neue Merkmale in HTML 5 | 299 | ||
| Neue Eingabeelemente | 299 | ||
| Das Attribut »required« | 300 | ||
| Kapitel 14 – Die schlechten Seiten | 303 | ||
| Die schlechten Manieren des Internet Explorers (speziell IE 6) | 303 | ||
| Browserkrieg 2.0 | 304 | ||
| Fehlende oder schlechte Unterstützung für Selektoren | 305 | ||
| »hasLayout« | 306 | ||
| Verdoppelte Außenabstände: Der »Double Margin Bug« | 307 | ||
| »expression()«-Werte | 307 | ||
| ActiveX-Filter, Transparenz und Farbverläufe | 308 | ||
| PNG-Unterstützung (oder ihr Fehlen) | 308 | ||
| Schlecht unterstützte CSS-Eigenschaften | 309 | ||
| Probleme mit XHTML und XML | 309 | ||
| Ein hässliches System | 310 | ||
| Zerbrechliche Templates und Inhalte von Drittanbietern | 310 | ||
| Markup-Validierung als Voraussetzung für korrekte Stylesheet-Implementierung | 310 | ||
| »Optimiert für …« | 311 | ||
| Abgestufte Unterstützung | 311 | ||
| »embed« oder »object« | 313 | ||
| Formularelemente, Plugins und der Stapelkontext | 313 | ||
| Obskure Gründe für ungültiges Markup | 314 | ||
| Sackgassen und die bösen Nachbarn von HTML | 315 | ||
| Frames | 315 | ||
| Das Element »strike« | 317 | ||
| Das Attribut »name« | 317 | ||
| Die Elemente »noscript« und »noframes« | 318 | ||
| Semantische Verrenkungen und der begrenzte Wortschatz von HTML | 318 | ||
| Präsentationselemente und wie Sie sie vermeiden | 319 | ||
| Vertikalen Leerraum verändern: »hr« und »br« | 320 | ||
| Das Element »pre« und die Eigenschaft »white-space« | 320 | ||
| CSS-Travestien | 320 | ||
| @-Direktiven | 321 | ||
| Berechnete Werte und Rundungsunterschiede | 321 | ||
| Herstellerspezifische Präfixe: »-moz« und »-webkit« | 322 | ||
| Der Wert »inherit« | 322 | ||
| Dinge verstecken: »z-index« und »clip« | 323 | ||
| Zähler | 324 | ||
| Regeln für den Fluss der Elemente | 324 | ||
| Unicode-Werte und die Eigenschaft »content« | 325 | ||
| Die furchtbaren Seiten | 326 | ||
| Die Elemente »marquee« und »blink« | 326 | ||
| Eigenschaften der Benutzeroberfläche (IE) | 326 | ||
| Das Attribut »align« | 327 | ||
| Das Attribut »style« | 327 | ||
| Div-itis | 327 | ||
| Attribute für Event-Handler | 328 | ||
| Überflüssige Unterstreichungen | 329 | ||
| Das Attribut »http-equiv« | 329 | ||
| Das Puzzle wieder zusammensetzen | 330 | ||
| Anhang – URIs, Client-Server-Architektur und HTTP | 331 | ||
| Glossar | 337 | ||
| Index | 343 |