HTML5 für Webdesigner

Beispiel-Skizze, Teil 3: Navigationsbereiche mit <nav>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Damit sich Besucher zurecht und durch die Seiten finden: Erstellen Sie das HTML für den Navigationsbereich mit dem Element nav.

Transkript

In der Skizze der video2Brain-Startseite ist der Kopf bereits der Vorspann, der Head-Bereich und der sichtbare Kopfbereich, der Header, da sind sie im Augenblick gerade dabei. Das Logo ist eingebaut und jetzt kommen als Nächstes die Navigationsbereiche. Auf der Seite sehen Sie, da ist oben rechts hier die Meta-Navigation und dann kommt hier die Site-Navigation, wir haben also zwei Navigationsbereiche. Das mache ich erstmal, indem ich diesen kopiere und den unten drunter setze. Fangen wir mit der kleineren an, unten drunter die Meta-Navigation, die bekommt eine ID namens "Meta-Nav" und eine H2 Überschrift "Meta-Navigation", die kann man bei Bedarf später ausblenden, aber im HTML ist sie als Information erstmal Verfügungsscreenreader, können das ausnutzen. Dann haben wir hier nicht Startseite, sondern da steht "International" "registrieren" und "Warenkorb". Das Suchfeld bleibt erstmal weg, weil Formulare kommen zu einem späteren Zeitpunkt. Nav-ID -Meta-Nav - Metanavigation - ULLIAH" für international registrieren und Warenkorb, so hießen die drei Optionen. "International - Registrieren - Warenkorb Suchfeld" kommt später. Die Hauptnavigation bekommt die ID "Site-Nav", die Namen sind natürlich beliebig gewählt. Die könnte man auch anders nennen und auch hier wieder eine Überschrift, eine H2, die bei Bedarf später ausgeblendet wird, wenn sie im Layout nicht nötig sind. Dort haben wir ein paar mehr Navigationspunkte, das waren glaube ich acht, also kopiere ich mal hier eine Zeile und füge das hier unten wieder ein, "4 -5 - 6 - 7 - 8". So, und dann geht es los mit den Punkten "Gratis Videos - Abbonieren - Trainings und Trainer", dann kommen noch "Lösungen - Support", falls Sie nicht weiter wissen, "News - Neuigkeiten" und last but not least die "Apps". Das sind die Hauptnavigationspunkte, "Gratis Videos Abbonieren - Trainings und Trainer - Lösungen - Support - News - Apps". Die sind hier jetzt eingearbeitet im HTML. Man könnte natürlich hier das Logo auch noch als Link zurück zur Startseite bauen. Ist das hier gemacht? Ja, da kommt man zurück zur Startseite, dann machen wir das doch gleich auch noch eben. [Unverständlich], da wir keine wirkliche Startseite haben, machen wir hier einfach nur "Title" zur Startseite und bauen das hier noch eben ein. Da fehlt nur noch das schließende "/A". Dann haben wir hier alles drin, einmal rüber in den Firefox, "Neu laden", und Sie sehen, das Logo ist da, man kann zur Startseite kommen als Navigation, Seitennavigation mit acht Menüpunkten und die Meta-Navigation mit drei weiteren. Das Suchformular fehlt noch jetzt. Jetzt fehlt hier nur noch der Button "Einloggen". Das ist kein Formular, der kommt mit in diesen Navigationsbereich als zweite Liste und hat nur einen Listenpunkt, den wir gleich einfüllen, "/UL" und das ist wieder ein Link. Da steht einfach nur "Einloggen", der soll dann später so aussehen wie ein Button. Gespeichert ist, rüber in den Firefox, "Neu laden". Hier sehen wir die Grundstruktur zwei Listen in der Site Navigation, in der Metanavigation momentan nur eine. Das ist die Voraussetzung dafür, dass das später mit ein klein bisschen CSS so aussieht wie hier im Browser.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!