HTML 5 Aufbau Seminar

Lernen Sie professionelles Webseiten Layout

Tabellenfreies Webseiten Layout mit HTML und CSS kann seine Tücken haben. Glücklicherweise haben sich die grössten Probleme bereits von selbst aufgelöst. Alte Browser wie der Internet Explorer 5 müssen in den heutigen Webprojekten meist nicht mehr berücksichtigt werden. Damit hat sich die Menge der Hacks und Browserweichen, die man heutzutage implementieren muss deutlich reduziert. Gott sei Dank! Dennoch muss beim Layouten von Webseiten noch einiges beachtet werden. In diesem Kurs entwicklen wir Schritt für Schritt unser eigenes Layout Framework basierend auf der Erkenntnis wie das Positionsmodel von CSS funktioniert. Mit diesem Wissen können wir auch spielend Dinge wie runde Boxen, Tab-Navigationen etc. designen. Natürlich orientieren wir uns an den "Best Practises", die sich im Lauf der Jahre im Webdesign etabliert haben.

Wie implementiert man Webseiten, die sich an die Grössenverhältnisse der Clients (Handy, PDA, Tablet, Desktop) anpassen (sog. Responsive Webdesign)?

Wir arbeiten wieder nach dem Prinzip "Learning by doing". Eine Übung folgt auf die andere ..

Schulungsdauer:

ca. 40 Unterrichtseinheiten à 45 Minuten

Zielgruppe:

Webdesigner

Seminarvoraussetzungen:

grundsätzliche HTML und CSS Kenntnisse, als Webdesign Neuling sollten sie vorher das HTML 5 Basis Seminar besucht haben

Bausteine:

  • Wie funktioniert das Box-Model?
  • Browser Hacks und Resets
  • Den Fluss der Web Elemente steuern
  • Runde Boxen
  • Die Kunst der Positionierung von Web Elementen
  • Tabbed Navigation
  • Die Sliding Doors Technik
  • Vertikale Navigation
  • Breadcrumb Navigation
  • Techniken der horizontalen Navigation
  • Font Grössen im Griff

CSS Layout

Skip Links

Layout:

  • Entwickeln eines Layout Models
  • Layouts umschalten
  • Reihen und Zellen
  • Stylesheets modularisieren
  • Skip-Links

Integration:

  • Im letzten Teil des Seminars werden alle Bausteine, die wir zu Beginn entworfen haben, in unser Layout Modell integriert
  • Integration einer Tabbed Navigation
  • Integration einer vertikalen Navigation
  • Integration einer horizontalen Navigation
  • Integration von Tabs mit der Sliding Doors Technik
  • Eine Seite mit Faux Columns einbauen
  • Den Inhalt in userer Webseite richtig "floaten"
  • Runde Boxen einbauen
  • Tabellen und Formulare einbauen