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.

HTML und CSS für Designer

Formatierung des Fußbereiches <footer>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Footer entspricht im Wesentlichen einem unteren Dokumentabschnitt, bspw. einer Fußzeile. In HTML muss dabei meist nicht mehr übernommen werden, als textueller Inhalt. Flächenfüllungen, Bemaßungen etc. werden dann mit Hilfe von CSS umgesetzt.

Transkript

Nun fehlt die Übernahme der Fußzeile des Footers in CSS. Das Ganze soll so aussehen, dass wir einen grauen Hintergrund haben. in den Maßen, die hier zu sehen sind, und der Text zentriert in diesem Rahmen ausgegeben werden soll. Im Moment sieht die Website so aus, dass wir den Text schon formatiert haben bis auf die Farbe, aber der Rest ist noch nicht sichtbar Sie werden sehen, auch da kommt nicht wirklich viel Neues mehr vor. Ich bin in die Sektor Fußzeile gegangen, die wir bereits begonnen haben, Ich greife nicht den Bereich "footer" auf, sondern die Überschrift, und ich muss hier einen weiteren Container öffnen nämlich den Footer selber und den dann formatieren, Das Erste, was ich machen kann, ist den Hintergrund. Da ich für eine normale Flächenfüllung nicht extra eine Grafik laden muss, kann ich das mit einer Farbe ausfüllen Das ist, was die Ladezeiten angeht, weitaus sinnvoller, als für ein normale Fläche eine Grafik zu laden. Und die Farbe ist bereits bekannt: 64 mit einer # davor oder RGB, entsprechend 100,100,100 und 0. Die 0 steht immer für Transparenz, das heißt 0 ist im Grunde nicht sichtbar, die 1 wäre 100% und 0,7 wäre jetzt 70% Deckkraft und 30% Transparenz. Im Grunde ganz einfach, Ich benutze den RGB-Wert nur dann, wenn ich mit Transparenzen, oder weiteren Einstellungen, die damit noch möglich sind, arbeite. Ansonsten favorisiere ich lieber die hexadezimale Angabe weil für mich ist das übersichtlicher, im Dokument zu erkennen. Ich habe hier eine Farbe, ganz normale hundertprozentig eine Farbe, und überall dort, wo ich RGB einsetze, da habe ich weitere Einstellungen. Das ist der Grund. Ich habe eine "background"-Farbe, kucken wir uns an, was passiert, ich aktualisiere das, jetzt haben wir fast einen Otto Waalkes-mäßigen Effekt: Graue Schrift auf grauen Grund, das wollen wir nicht, also trage ich hier in "h3" noch eine Farbe ein und das ist colour, gleiche Variante. Die Schriftfarbe selber ist nur der Befehl colour, und wenn alles "0" schwarz ist, dann ist alles auf "F" die weiße Farbe. Das schicke ich ab, und gucken wir es uns an. So soll es aussehen: weiße Schrift. Jetzt fehlen mir die Abstände hier noch, die Dimensionen sind nicht in Ordnung. Und da gibt es die Möglichkeit hier auf height zu gehen mit 100%, um das Ganze ein bisschen anzupassen oder besser gesagt height:auto. Da möchte ich den Text ausrichten das ist text-align, das ist die gleiche Funktion wie Zentrieren in dem InDesign-Dokument. Ich brauche oben einen kleinen Abstand mit "margin-top" von 3em. Das speichere ich ab. Und jetzt sieht das Ganze schon passend aus. Der Vollständigkeit halber gebe ich noch eine width von 100 % Jetzt muss ich mich noch ein bisschen um den "footer" selber kümmern. Also um die Einstellung hier unten, damit das Ganze übertragen werden kann. Farbe, ob es fett, normal, regular ist, in dem Fall ist es light, das wären 300%. Die Schriftgröße habe ich, den Zeilenabstand habe ich, was uns noch fehlt ist "padding", da möchte ich nun "3 rem" nach oben, und 3 rem nach links und rechts haben, und dass es eine weitere Schreibweise. Ich könnte überall "3 rem" hinschreiben, und zwar viermal und dann gilt das oben, rechts, unten, links. Nehme ich nur zwei Angaben, kann ich das ganze kombinieren also entweder 3em nach oben und unten und 3em nach links und nach rechts. Also jede Menge Möglichkeiten. Und dann mache das Ganze noch mit "margin" auf 0. Und dann wären wir im Grunde schon durch. Und dann sieht das Ganze so aus wie im InDesign-Dokument. Das ist das fertig formatierte Dokument, so wie ich mir das vorgestellt habe als Online-Magazin in Form einer Webseite. Sie haben gesehen, dass die CSS-Befehle, die wir verwenden, natürlich ein Sammelsurium vieler Einzelbefehle darstellen. Das sieht jetzt, wenn man sich das Ganze hier so anschaut, mächtig kompliziert aus, aber ich denke es ist schon mal deutlich geworden, dass das meiste davon nur deswegen so schlimm aussieht, weil es immer und immer wieder vorkommt, aber in der Reihenfolge sind diese Befehle häufig identisch. der Breiten-Befehl oder die Farbe, die uns hier begegnet bei der Überschrift, verschiedene weitere Einstellungen wie z.B. margin, padding et cetera. Und wenn da man sich dort ein wenig damit auseinandergesetzt hat, und ich hoffe, es ist mir gelungen Ihnen auch die Verbindung von dem, was Sie aus ihrem Satzprogramm kennen, und den Formatierungsvorgaben und Einträgen in der CSS-Datei zu übertragen, dann dürfte das weitere Erarbeiten mit weiteren Befehlen, weiteren HTML-Befehlen, und weiteren CSS-Befehlen nicht wirklich das größte Problem darstellen. Sie haben den Einstieg in HTML geschafft, Sie haben den Einstieg in CSS geschafft. Der Rest wird genauso locker und leicht, und macht obendrein viel Spaß.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 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!