Suchen und Finden
Service
Infos und Kontakt
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
Mehr eBooks vom gleichen Verlag
Postfix, von: Kyle D. Dent, Preis: 10,00 EUR
Netzwerkangriffe von innen, von: Paul Sebastian Ziegler, Preis: 15,00 EUR
Alle Preise verstehen sich inklusive der gesetzlichen MwSt.; Ersparnis im Vergleich zur Printversion























