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.
Muy importante!!!
Außerdem
... lassen wir den Internet Explorer 9/10 erst mal außen vor. Um den kümmern wir uns am Ende. Also benutzt den bitte nicht zwischendurch, sondern konzentriert euch auf die anderen Browser. Capice?
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.