Modernes Webdesign mit HTML5 und CSS3

Seminarziel

Im  Anschluss an dieses Seminar können Sie komplexe Layouts erstellen und in HTML5 und CSS3 umsetzen. Sie kennen die Möglichkeiten der Gestaltung und erhalten ein solides Grundwissen für die Arbeit im Webdesign, Interface-Design oder UX-Design.

Inhalt

1.-2. Tag auch separat buchbar als Erstellung von Webseiten mit HTML und CSS

• Grundlagen des Webdesign
  • Zusammenspiel von Server und Browser
  • Bedeutung von Semantik und Gestaltung
  • Übersicht über die aktuelle Browser-Landschaft
  • Einführung in einen HTML-Editor
• HTML Grundlagen
  • Grundgerüst einer Webseite
  • Begriffserklärungen für Element, Tag, Attribut, Kommentar, Style
  • Zeichenkodierung und Internationalisierung
  • Vorbereitungen für mobile Endgeräte
• CSS Grundlagen
  • Verknüpfen von CSS mit HTML
  • Gängige Selektoren im Überblick
  • CSS Box Modell verstehen
  • Unterschiede zwischenden Browsern abfangen
• Layout erstellen
  • Überschrifte, Absätze und Listen erstellen und formatieren
  • Links, Bilder und Tabellen einsetzen und ausgestalten
  • Positionierungs-Möglichkeiten von Inhalten
  • Einfache Formulare erstellen und dem Layout anpassen
  • Erstellen und positionieren von Navigationselementen
  • Verknüpfungen zwischen HTML-Seiten und zwischen Inhalten
    
    

3.-5. Tag auch separat buchbar als Responsive und browserunabhängige Webseiten mit HTML5 und CSS3

• Cross Browser Layouts und Debugging
  • Cross Browser Design
  • Browser Feature Test
  • Elemente untersuchen mit Browser Developer Tools
  • Browser und Endgeräte simulieren
• CSS Vertiefung
  • CSS3 Selektoren kennen und anwenden
  • Pseudoklassen und Pseudoelemente
  • CSS3 Color Module, intuitive Farben und Transparenz
  • Gradienten
  • Typografie im Detail
  • Hintergrundbilder und abgerundete Rahmen
  • Schattenwurf für Content Boxen und Text
  • Vertikale und Horizontale Anordnungen
  • Floats und Clearfix
  • Inline Formatierung
  • CSS Tabellenmodell
  • Positionierung und Stapelung
• Webdesign Anwendungsfälle
  • Komplexe Formulare
  • Layouts für mobile Endgeräte
  • Individuelle Schriftarten verwenden
  • Bilder für hochauflösende Bildschirme
  • Horizontale, vertikale und verschachtelte Navigationen
  • Mehrspaltenlayouts
  • Gleich hohe Spalten
  • Flexible Box Layout
  • Sticky Footer
  • Parallax Scrolling
  • Video Hintergründe
• Ausgaben für Medien anpassen
  • Print Ausgabe formatieren
  • Media Queries einsetzen
• Ausblick
  • Einsatz von JavaScript für das Design
  • Anwendungsfälle für jQuery und jQuery UI
  • Möglichkeiten von CSS Frameworks