Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Meine erste Website

Ein Menü einfügen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Menü verweist auf alle Unterseiten Ihrer Website. Hier lernen Sie, wie so etwas umgesetzt wird.
07:42

Transkript

Was jetzt bisher gefehlt hatte, ist eine Navigation, also ein Menübereich, der auf die anderen Seiten verweisen könnte. Und die Positionierung dieses Menübereichs, das ist eine Designfrage. Ich möchte jetzt dafür sorgen, dass ich eben auf der linken Seite innerhalb meines umgebenen Wrapper-Elements meine Menüführung haben werde. Und im Moment ist es so, dass ich einfach nur das entsprechende HTML-Tag hier bei der Indexdatei eingefügt habe. Das Tag, das für eine Navigation steht heißt nav, und ich habe jetzt hier unterhalb meines Header-Bereichs und vor dem ersten Article-Bereich meine Navigation gesetzt und zwar als unsortierte Liste. Diese unsortierte Liste führt dazu, dass ich hier jetzt eben diese Pünktchen habe und jedes einzelne Listenelement ist eigentlich ein Anker, der auf die jeweilige Seite verweist. Nachdem alle Seiten auf derselben Ebene liegen, habe ich da jetzt nicht große Arbeit mit der richtigen Gabe, sondern da reicht das Aufrufen der einzelnen HTML-Seiten. Und das, was Sie hier sehen, ist dann die Bezeichnung, die tatsächlich auch auf der Website selber zu lesen ist. Ich möchte jetzt in einem zweiten Schritt dann mit CSS dafür sorgen, dass meine Artikel sich rechts von meiner Navigation aufhalten und um das zu erreichen, muss ich meine Navigation floaten lassen. Ich gehe also in meine main.css und werde dort jetzt meine diversen Einstellungen zum Element nav machen. Und wieder mit einer geschwungenen Klammer öffne ich sozusagen die Tore für neue Regeln. Und die erste Regel ist eben die, dass ich Float verwende und zwar float left. Im Moment werden wir aber noch nichts sehen können, wenn ich jetzt hier die Ansicht erneuere, weil im Moment das Element so wie es ist, zu breit ist, wie das Eltern-Element. Und um das jetzt zu ändern, werde ich einfach auch meiner Navigation eine spezielle Weite mitgeben, ich sage width, und sage ich möchte, dass die Weite 30 Prozent vom Eltern-Element ausmacht. Ich speichere und wenn ich jetzt die Seite neulade, dann können Sie sehen, dass sich meine Artikel anfangen um meine Navigation zu schlängeln. Wenn ich jetzt hier eine gedachte Linie nach unten haben möchte, dann muss ich meinen Artikel insgesamt besagte 30 Prozent auf der linken Seite eben als Margin dazu geben. Sie erinnern sich, Margin ist dafür zuständig, dass der Abstand außerhalb des Elements hin zum nächsten nächst höheren Element gemessen wird. Das heißt, ich werde jetzt eine Regel für meine Article aufstellen, und diese Regel besagt, dass wir einen margin left haben wollen. der genauso wie unsere nav 30 Prozent beträgt. Zur Lesbarkeit mache ich mir noch einen Abstand, aber niemals einen Abstand zwischen Zahlen, Wert und Maßeinheit machen. Nur wenn die zwei wirklich ohne Abstand zusammenstehen, hat dann dieser Wert noch eine Gültigkeit. Steuerung S zum Speichern und hier lade ich meine Seite neu und jetzt sehen Sie, dass alle Artikel brav etwas nach rechts hereinrücken. Was mir jetzt noch nicht gefällt, ist, dass meine Anzeige so weit hinaufgerutscht ist. Natürlich ist ja auf der selben Höhe oder fast auf derselben Höhe, sondern ich hätte ganz gerne, dass sie ein bisschen nach unten rutscht. Das heißt, ich gebe meinem nav-Element jetzt noch ein Padding mit. Das Padding ist immer innerhalb eines Elements, der Bereich bis zum übergeordneten Elemnt, und das Padding, das wahrscheinlich ganz viel Sinn macht, ist 4.2 em. Für oberhalb und unterhalb ist es eigentlich egal, aber für die Weite werde ich null nehmen, weil ich da keine spezifischen Padding-Angaben brauche. Steuerung S zum Speichern, dann lasse ich mir hier meinen Wert anzeigen und bin jetzt schon ein ganzes Stückchen runtergerutscht 4.2em ist fast jetzt ein bisschen zu weit. Dann schauen wir mal, ob nicht 4em reichen, zumindestens versetzt diese meine Ansicht anbelangt. Oder 3.2 em. Da kann man sich ein bisschen spielen. Für mich ist im Moment nur wichtig, dass ich vom oberen Rand weggerutscht bin, und meine Navigation so auf einer eigenen Breite, der eigenen Weite zu Hause ist. Alles, was ich jetzt noch machen möchte, ist zum Beispiel, dass ich diese Punkte loswerde, also diese spezielle Auszeichnung für eine Liste, und dass ich diese Unterstriche für die Verlinkungen wegbekommen möchte. Das ist zwar noch nicht sehr benutzerfreundlicht, aber wir werden eventuell später eine andere Formatierung wählen, die dann das deutlich macht. Auf jeden Fall möchte ich Ihnen so zeigen, dass Sie bestimmte Eigenschaften nur bei bestimmten Teilen oder Elementteilen durchführen können. So betrifft zum Beispiel die Frage nach diesen Punkten, das Element Ul, also die unsortierte Liste und um diese anzusprechen und damit klar ist, dass es sich nur um diese unsortierte Liste innerhalb meines nav-Elements handelt, sage ich nav Abstand ul, und werde hier jetzt sagen, dass ich vom list-style-type hier gar nicht möchte, also none haben möchte. Damit sollten, wenn ich hier speichere, die Pünktchen verschwinden, das tun sie auch. Und wenn ich jetzt diese Unterstriche loswerden möchte, dann sind die eine Folge der Tatsache, dass ich hier Anker-Elemente eingesetzt habe. Das heißt, wenn ich diesen Strich loswerden will, muss ich mich auch auf das Anker-Element beziehen. und zwar auf das Anker-Element innerhalb einer Navigation, und auch hier sage ich dann einfach text-decoration none. Ich speichere, ich lasse mir meine Seite neuladen, und hier sehen Sie das Ergebnis. Ich habe noch immer diese klassische Farbgebung, die Anker auszeichnet. Darum kann ich mich zu einem anderen Zeitpunkt kümmern, aber mithilfe meiner Navigation hier auf der linken Seite konnte ich Ihnen zeigen, dass ich eben einzelne Elemente innerhalb meiner Navigation ansprechen muss, um bestimmte Details erreichen zu können.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

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!