HTML5 / CSS3 - Praxistutorial 1 - Überblick

1. Die Abschnitte

• Überblick
• Die Basisdefinitionen
• Die Hauptnavigation
• Die Infobereiche
• Die Inhalte
• Der Footer
• Das Ausklappmenü Teil 1
• Das Ausklappmenü Teil 2

2. Browser

Das folgende Tutorial wurde mit den folgenden Browsern getestet.

• Internet Explorer 9.0/10.0
• Firefox 20.0
• Opera 12.16
• Safari 5.1
• Google Chrome 26.0

Ein Hinweis zum IE 8

Den braucht ihr für dieses Tutorial erst gar nicht aus der Ecke holen, denn der kommt mit dem folgenden Code einfach nicht klar. Wie man das umgehen kann, zeig ich in einem kommenden Tutorial.

3. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien und Ordner müssen, wie unten beschrieben, vorhanden sein:

Struktur

• index.htm
• styles.css
• pics (Ordner)
  • subnav.gif
• fonts (Ordner)
  • bnkgothm.eot
  • bnkgothm.ttf
  • bnkgothm.woff

4. Über dieses Tutorial

Das Design

... ist ehrlich gesagt greulich (und nein, ich schreib das nicht gräulich). Da merkt man, dass ich kein Designer bin. Lasst euch aber davon nicht abschrecken, denn ich habe hier ziemlich viele Gestaltungselemente eingebaut, um euch ein paar Techniken zu zeigen.

Die Thematik

In diesem Tutorial geht es vor allem um Kontext-Selektoren und Pseudoklassen. Und das bedeutet leider auch, dass meine hier gewählte Vorgehensweise sich ausschließlich an deren Machbarkeit orientiert und im praktischen Einsatz so nicht verwendet werden sollte. Ich weise aber an den entsprechenden Stellen dezidiert darauf hin.

5. Die Vorgehensweise

Hier gibt es im Gegensatz zu den bisherigen Tutorials eine Besonderheit. Denn hier werden wir ein etwas vertracktes Ausklappmenü in die Hauptnavigation einbauen. Und da das ein wenig kompliziert ist, habe ich das an das Ende dieses Tutorials gestellt.

Der HTML-Code

... ist bereits vorhanden. Und ich denke auch nicht, dass ich dazu groß was sagen muss. Anstelle der sonst üblichen <div>-Elemente habe ich einfach die passenden HTML5-Pendants genommen. Es gibt nur eine Besonderheit bei der Navigationsliste, aber den Grund dafür erfahrt ihr später.

weiter zum nächsten Abschnitt