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.

Bootstrap 3 Grundkurs

Branding und Footer einfügen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Branding und Footer-Bereich schaffen Sie mit der Index-Seite eine Vorlage für die weiteren Seiten, die sich dann individuell befüllen lassen.
07:45

Transkript

Hier haben wir nun eine erste Grundstruktur der Seite, und ich möchte jetzt in diesem Video einmal das Branding der Seite und eine Fußnote einfügen, damit ich dann die Index-Seite als Vorlagenseite nehmen kann für alle anderen Seiten, und sie einfach dann kopiere zu soviel Seiten wie ich sie brauchen werde. Ich habe die Grundstruktur soweit hergerichtet, dass ich eben auf das normale Bootstrap CSS zugreifen kann, jetzt auch auf das Themen CSS von Bootstrap und hier habe ich raum geschafen für mein eigenes CSS. Da kann ich dann selbst einfach CSS Zusätze hinterlegen. Ich habe weiters dem body tag innerhalb von der Index-Seite eine ID gegeben und habe mal den umfassenden Container für den ersten Bereich festgelegt. Sie wissen noch, da geht's darum, und das ich mit dem Container sage wie breit das Ausgabemedium ist. Und dann habe ich eine Klasse gegründet, eben mit einer row und die erste Spaltenanzahl mit der ich arbeiten möchte, geht über die gesamte Breite, also 12 Spalten. Weil ich da jetzt hinein mein Branding setzen möchte. Bevor ich das aber tue, werde ich diesen Bereich noch einen eigenen Header geben. Und das hat jetzt eher was damit zu tun, dass ich mit der Klasse, die ich diesem Header geben werde, einen kleinen bug fixieren möchte und wenn Sie sich das gleich angewöhnen, sparen Sie sich später viel Mühe, und der fix heißt clearfix. Im Hintergrund läuft ein sogennter kleiner clearfix, der dafür sorgt, dass bei manchen Browsern unmotivierte Abstände, also Margins hin zum oberen Bildbereich einfach aufgehoben werden können damit. Und in diesem Header Bereich hinein, werde ich jetzt mein Branding setzen. Das Branding ist nicht sehr aufwendig. Es wird auf jeden Fall ein Link werden, weil ich eben von diesem Branding her von jeder Seite aus, auf meine Index-Seite referieren können möchte. html und in diesen kleinen Link setze ich jetzt ein h1 und dieses h1 besteht eigentlich nur aus einer Zeile und die Zeile ist eben der Text Jenseits der Eile - Von der Kunst des Verweilens. So. Und diesen Link packe ich jetzt aber noch in eine eigene Sektion. Ich hebe sogar die ID Branding mit, ich möchte das hier nur einmal verwenden. Oh, da fehlen mir die Anführungszeichen und umschließe also diesen Link mit dieser Sektion. Schauen wir uns das ganze einmal an. Ich speicher das mit Steuerung S. Schaue es mir an. Ja, und da habe ich schon meinen ersten sichtbaren Text auf dieser Seite. Der sieht jetzt aber noch nicht so wirklich aus wie ich das gerne hätte, weil es ist natürlich ein Link und damit blau und bekommt den Unterstrich, wenn ich drüber fahr'. Das möchte ich jetzt noch ganz gerne ändern und das ist jetzt so der erste Momemnt, wo ich in my CSS meine erste eigene Definition hineinschreibe. Und die wird nicht sehr aufwendig, sondern da geht's einfach nur darum, dass ich diese ID Branding ansprechen möchte und darin eben den a tag und der bekommt jetzt von mir, auf der einen Seite, eine eigene Farbe, d. h. er kriegt eine color Definition. Und diese Farbe habe ich mir schon im Vorfeld ausgesucht gehabt und die lautet b2a49a. Das sollte so ein zartes ins breunlich gehende grau sein. Und was ich jetzt noch brauche ist, dass ich die Text Decoration los werden möchte. text-decoration ist none. So. Schauen wir's uns jetzt an. Ich speicher das ganze wieder mit Steuerung S, wechsele hinüber in die Index. Und ja, hier ist es. Mein Branding ist jetzt soweit fertig. Das zweite was wir jetzt noch dranhängen ist, dass wir in der selben Art und Weise mit einem footer fortfahren. Ich möchte also im Fußbereich nicht viel stehen haben, aber schön wär's, wenn dort der Copyright Hinweis stünde. Und dafür werde ich jetzt unterhalb dieses einen Containers nochmal einen zweiten Container öffnen. D. h. eine div mit der Klasse container und in dieser div drinnen, da wird einfach ein footer sein. Footer ist ähnlich wie der header, ein html 5 tag, der eben semantisch gleich deutlich macht, dass es sich hier um einen speziellen Bereich handelt und dem gebe ich jetzt die Klasse row mit. Ganz normal, weil wir wollen ja wieder die Spalten zum Einsatz bringen. Und innerhalb dessen, mache ich jetzt ein ganz normales div und gebe dem div diese klassischen Längen bzw. Spaltenangabe mit, d. h. es wird sich um cols handeln. Es ist col-md. Es wird nicht so groß werden. D. h. es reichen mir wahrscheinlich 4 Spalten für meinen footer aber ich möchte ihn eher rechts zu liegend bekommen, d. h. wir machen ein col-md-offset von 8 Spalten und da hinein schreibe ich jetzt einfach nur einen Copyright Hinweis, nämlich 2013 viedeo2brain. Ich speicher dieses wieder und sehe es mir an. Wunderbar. Ich habe jetzt hier oben mein Branding und natürlich noch nicht wirklich am unteren Ende meinen footer, aber so die Struktur ist jetzt da und damit kann ich meine Index-Seite als Vorlage nehmen für die anderen Seiten, die ich noch erzeugen möchte. Und das ist gegeben nicht sehr aufregend. Also ich werde die Index-Seite File Save As im lazy Projekt und das soll eine ueberuns.html werden. Dann File Save As. Das nächste soll eine impressionen Seite werden. Ok. Und zur guter Letzt brauche ich noch ein Impressum. Save As impressum.html. So. Und dann wird das nächste wahrscheinlich noch Inhalt dazu wachsen, aber für diese 4 Seiten habe ich jetzt erstmal meine Grundstruktur fertig, um später damit weiter arbeiten zu können.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!