One-Page-Webseiten mit Bootstrap, LESS und Sass

Den Inhalt strukturieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Einzelne Sektionen sorgen mit den passenden Sprungpunkten dafür, dass später der Eindruck einzelner Abschnitte entsteht.
02:32

Transkript

Damit ich auf meiner onepage-Webseite das Gefühl von unterschiedlichen Abschnitten bekomme, muss ich auch solche Abschnitte erzeugen. Und diese Abschnitte sollen dann IDs bekommen, die genau den Sprungpunkten in der Navigation entsprechen. Das heißt, ich lege Sektoren an -- "section" und gebe ihnen eine ID, in meinem Fall jetzt mal von "home" und werde diese dann noch befüllen mit kleinen "div"-s, damit wir auch sehen, dass sich da was tut. Und dieses "div" bekommt eine Klasse mit "box". Ich habe ein bisschen gemogelt, muss ich zugeben, weil ich diese Box als Klasse schon angelegt habe, obwohl ich eigentlich erst zu einem späteren Zeitpunkt CSS verwenden möchte. Dann brauche ich hier noch eine Sektionsbezeichnung: "Sektion1", und diese Sektion kopiere ich mir jetzt noch zweimal mit STRG+C und STRG+V das erste Mal und STRG+V das zweite Mal. Der zweite Bereich soll den Sprungpunkt "ueber" haben, der dritte Bereich den Sprungpunkt "kontakt", und hier bei den Sektionen werde ich einfach noch die Zahlen austauschen. Wie gesagt, ich habe ein bisschen gemogelt, denn ich habe hier im Head-Bereich Style-Angaben hinterlegt, die werde ich später wieder rauslöschen, aber sonst würden wir nicht sehen, das heißt, ich habe für diese Boxen eine Klasse kreiert mit einer absoluten Breite und einer Höhe und eine Hintergrundfarbe, damit man sie sehen kann, und ein "padding-top", damit es unterhalb der Navigation hervorrutschen kann, und einem "margin-bottom", damit es etwas Abstand hat. Sehen wir uns unser Ergebnis an. Wir wollen die Veränderungen speichern. Hier haben wir eben unsere Sektionen, das heißt, wenn ich auf "Start" klicke, habe ich die Sektion 1 oben, bei "Über" habe ich Sektion 2 oben, und bei "Kontakt" taucht Sektion 3 auf, weil es eben noch nicht wirklich angeglichen und abgeglichen ist, passt auch nicht zu 100 %. Aber Sie sehen, diese Sprungpunkte sind bereits da, und ich kann in weiterer Folge dann diese Sektionen mit Inhalten befüllen.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 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!