Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Inhaltsverzeichnis

  • Einleitung 1
  • Workshop

    Teil I - Workshop

    Schritt für Schritt zum professionellen HTML-CSS-Design

    • Kapitel 1: So geht der Workshop vor 6
    • Kapitel 2: Vorbereitungen 8
      • 2.1 Anlegen einer sinnvollen Ordnerstruktur 9
      • 2.2 Das brauchen Sie, um loslegen zu können 10
      • 2.3 Analyse des Layouts 11
    • Kapitel 3: Grundlayout aufbauen 18
      • 3.1 HTML-Grundgerüst anlegen 19
      • 3.2 HTML-Seitengerüst aufbauen 20
      • 3.3 CSS-Grundlayout aufsetzen 23
    • Kapitel 4: Grafiken einbinden 30
      • 4.1 Grafikdatei verlinken (src) 30
      • 4.2 Alternativtext einfügen (alt) 31
      • 4.3 Breite und Höhe (width und height) 32
      • 4.4 Das richtige Dateiformat 33
      • 4.5 Einbau der Grafiken in das Beispiellayout 35
    • Kapitel 5: Abstände einfügen und Elemente fließen lassen 36
      • 5.1 Innen- und Außenabstände 37
      • 5.2 Elemente fließen lassen (float) 41
      • 5.3 float-Verhalten auflösen 45
      • 5.4 Mindesthöhe für den Inhaltsbereich 48
    • Kapitel 6: Übergreifende Formate definieren 51
    • Kapitel 7: Seitenkopf und -fuß gestalten: Hintergrundgrafiken einbinden 56
    • Kapitel 8: Navigationselemente gestalten 62
      • 8.1 Hauptnavigation aufbauen 62
      • 8.2 Quernavigationen gestalten 66
      • 8.3 Funktionslinks gestalten 71
    • Kapitel 9: Seitentypen anlegen 73
    • Kapitel 10: Startseite aufbauen 75
      • 10.1 Bereiche für Teaser 75
      • 10.2 Textteaser aufbauen 81
      • 10.3 Teaser mit Bild 86
    • Kapitel 11: Inhalte aufbauen und gestalten 91
      • 11.1 Einfache Beitragsseite aufbauen 94
      • 11.2 Text-Bild-Bausteine unterschiedlich gestalten 97
      • 11.3 Video/Audio einbinden 102
    • Kapitel 12: Formulare gestalten 106
      • 12.1 Beispielseite aufbauen 106
      • 12.2 Login-Formular für die Startseite 116
      • 12.3 Schlechte CSS-Unterstützung von Formularelementen 120
    • Kapitel 13: Mit Listen im Inhalt arbeiten 122
    • Kapitel 14: Datentabellen gestalten 125
      • 14.1 Komplexe Tabellen 127
      • 14.2 Kinoprogramm-Tabelle Schritt für Schritt gestalten 128
    • Kapitel 15: Responsive Design: Mobile Endgeräte und Media Queries 133
    • Kapitel 16: Druckausgabe 138
    • Kapitel 17: Barrierefreiheit 142
      • 17.1 Verstecke Texte 143
      • 17.2 Skalierbare Einheiten 145
      • 17.3 Drei Layouttypen: fix, elastisch und flüssig 149
      • 17.4 Korrekter Einsatz von label-Elementen 150
      • 17.5 Kontraste 151
      • 17.6 Abkürzungen, Akronyme und Sprachauszeichnung 151
    • Kapitel 18: Suchmaschinenoptimierung 153
    • Kapitel 19: Cross-Browser-Kompatibilität 155
      • 19.1 Welche Browser sollten unterstützt werden? 157
      • 19.2 HTML5-Browser-Kompatibilität herstellen 160
      • 19.3 CSS3-Browser-Kompatibilität herstellen 164
    • Kapitel 20: Entwicklungs- und Debug-Tools 170
      • 20.1 Browsereigene Entwicklertools 170
      • 20.2 Zusätzliche Entwicklungstools 175
    • Kapitel 21: Quelltexte auf Standardkonformität prüfen 179
      • 21.1 HTML validieren 180
      • 21.2 CSS validieren 182
  • Teil II - Grundlagen

    • Kapitel 22: Was macht HTML und was CSS? 186
    • Kapitel 23: Allgemeines zu HTML und Spezielles zu HTML5 190
    • Kapitel 24: Syntax 192
      • 24.1 Tag 192
      • 24.2 HTML-Element 193
      • 24.3 HTML-Attribute 196
      • 24.4 HTML Entities und Sonderzeichen 200
      • 24.5 Relative und absolute Pfade 203
      • 24.6 Grundgerüst einer HTML-Datei 205
      • 24.7 Kommentare in HTML 206
    • Kapitel 25: Doctype-Deklaration 208
      • 25.1 Doctype-Deklaration für HTML5 208
      • 25.2 HTML 4.01- und XHTML 1.0-Doctype 209
      • 25.3 Quirks-Modus ohne Doctype-Deklaration 210
    • Kapitel 26: head: Kopf einer HTML-Datei 211
      • 26.1 title-Tag 211
      • 26.2 meta-Element 212
      • 26.3 link-Tag 214
      • 26.4 style-Element 218
      • 26.5 script-Element 219
    • Kapitel 27: HTML-Tags für den body 221
      • 27.1 HTML-Elemente zur Seitenstrukturierung 221
      • 27.2 HTML-Elemente zur Textstrukturierung 222
      • 27.3 HTML-Elemente zur Auszeichnung von Texten 224
      • 27.4 HTML-Formular-Elemente 225
      • 27.5 HTML-Elemente zum Einbetten verschiedener Medien und Inhalte 229
      • 27.6 HTML-Tabellen-Elemente 230
    • Kapitel 28: HTML-Elemente, die man nicht einsetzen sollte 231
      • 28.1 Veraltete HTML-Elemente 231
      • 28.2 Noch nicht unterstützte HTML-Elemente 232
      • 28.3 Nicht standardkonformes HTML in Browsern 232
    • Kapitel 29: Allgemeines zu CSS und Spezielles zu CSS3 234
    • Kapitel 30: Schlüsselwörter, Werte und Maßeinheiten 236
      • 30.1 Schlüsselwörter (Keywords) 237
      • 30.2 Numerische Datentypen 237
      • 30.3 Längenangaben (length) 238
      • 30.4 Farbangaben 240
      • 30.5 Bildangaben über url() 244
      • 30.6 Weitere Einheiten 244
    • Kapitel 31: CSS-Regel 245
      • 31.1 Aufbau einer CSS-Regel 245
      • 31.2 Kurzschreibweisen – Shorthand Properties 247
      • 31.3 @-Regeln 253
      • 31.4 CSS-Regeln zusammengefasst 253
    • Kapitel 32: Kommentare in CSS 254
    • Kapitel 33: CSS in HTML einbinden 256
      • 33.1 Inline-Styles über das HTML-Attribut style 256
      • 33.2 Styles im head per HTML-Element style 257
      • 33.3 Externe Styles über das link-Tag einbinden 258
      • 33.4 Styles über die @import-Regel einbinden 258
      • 33.5 @media-Regel / Media Queries 259
    • Kapitel 34: Elternelement, Kindelement, Geschwisterelement 263
    • Kapitel 35: HTML-Attribute id und class 265
    • Kapitel 36: Selektoren 267
      • 36.1 Einfachselektoren (simple selectors) 267
      • 36.2 Kombinationsselektoren (combinators) 269
      • 36.3 Arbeiten mit Selektoren 271
      • 36.4 Alle Selektoren im Überblick 273
    • Kapitel 37: Ergänzungs- und Vererbungsprinzip 277
      • 37.1 Kaskade 277
      • 37.2 Rangfolge und Gewichtung 279
      • 37.3 Vererbungsprinzip 282
    • Kapitel 38: Grundprinzipien der Darstellung: Box-Modell und Elementfluss 284
      • 38.1 Box-Modell 284
      • 38.2 Natürlicher Elementfluss (Dokumentfluss) 286
      • 38.3 Block-Elemente 287
      • 38.4 Inline-Elemente 289
      • 38.5 Inline-Block-Elemente 289
      • 38.6 Block- und Inlineverhalten sind veränderbar! 290
      • 38.7 Zeilenhöhe 290
    • Kapitel 39: @font-face-Regel 294
    • Kapitel 40: Browserkennungen / Vendor-Präfixe 297
    • Index 299

Buchempfehlungen