Suchen und Finden

Titel

Autor/Verlag

Inhaltsverzeichnis

Nur eBooks für mein Endgerät anzeigen:

 

Newsletter

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

von: Ben Henick

O'Reilly Verlag, 2010

ISBN: 9783897216181, 360 Seiten

Format: PDF, OL

Mac OSX,Windows PC,Mac OSX,Windows PC Apple iPad, Android Tablet PC's Online-Lesen für: Linux,Mac OSX,Windows PC

Preis: 28,00 EUR

Ersparnis: 6,90 EUR

  • ColdFusion MX
    Adobe Photoshop CS4 - Übungsbuch - 50 x Praxis pur - von der Aufnahme bis zur Ausgabe
    PHP 5.3 & MySQL 5.4 - Programmierung, Administration, Praxisprojekte
    Web Application Development mit ColdFusion 4.5
    Modernes Webdesign - Gestaltungsprinzipien, Webstandards, Praxis
    Adobe InDesign CS4 - Die Workshops für Einsteiger
    PHP5 / MySQL5
    Webdesign mit Photoshop - Aktuell zu CS4
  • JavaScript und Ajax - Das Praxisbuch für Web-Entwickler
    Suchmaschinenoptimierung - Website-Marketing für Entwickler
    Dreamweaver CS4 - Professionelle Webseiten entwickeln. Einführung, Arbeitsbuch, Nachschlagewerk
    Grundkurs Grafik und Gestaltung - Mit konkreten Praxislösungen
    JQuery - Das neue JavaScript-Framework für interaktives Design
    Design und Typografie - Die überraschend einfachen Gesetze guten Designs. Wie Sie Seiten gestalten, die jeder gerne liest

     

     

     

 

Mehr zum Inhalt

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


 

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