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

Der Fußbereich <footer>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie bei einer Fußzeile gibt es auch in einem Webseitendokument einen Bereich, der Angaben über den Ersteller oder ähnliche Informationen enthalten kann - der Footer.

Transkript

Das letzte fehlende Element in der HTML-Seite ist der Footer. Der wird hier nicht angezeigt, weil er nicht eingeblendet ist. Wenn ich mir den ins Blickfeld hole, darum geht es jetzt -- den Rest habe ich implementiert -- dann sieht man auch hier, ist das Prinzip im Großen und Ganzen identisch. Am Headerbereich hier oben am Kopf des Dokumentes dieser Sektor. Denn auch hier gibt es eine Fläche, dass ich diesmal zwar kein Foto, sondern eine einfarbige Fläche, aber die Grundlage ist die gleiche, und es gibt einen Text. Der Text wiederum, der besteht aus einem Absatzformat, und dieses Absatzformat hat den Namen "Header 3", und das Ganze ist noch einmal gesplittet in ein Zeichenformat, das sieht man jetzt hier, das ist der "Subfooter 1", und genauso wie auch beim Header muss ich das Ganze nun nur im Footer übernehmen. Ich wechsle also in die Website, in die HTML-Codierung, gehe in den Footer, übernehme nun aus dem "Header 3", "H3", und das Ganze ist nun "Videotraining von video2brain", dann kommt "h3" wieder als schließender Bereich, dann folgt der Text, "Fotos bei mir", aber das ist nicht der schließende Sektor, hier brauche ich einen Zeilenumbruch, und dann geht's unten drunter weiter, und das Ganze muss mit "span" eingeschlossen werden, so wie es auch das Zeichenformat beinhaltet. "span" wird geschlossen, und jetzt das "H3" muss ich schliessen von der Überschrift. An der Stelle eine kurze Erklärung zu diesem "span"-Begriff. Der Begriff "span" ist ein Befehl, der zunächst einmal gar nichts tut, sondern nur einen Bereich einrahmt, den ich dann später bei den Formatzuweisungen mit weiteren Informationen belegen kann. Also, ein unterschiedliches Aussehen, genauso wie das hier bei dem InDesign-Dokument passiert, dass ich also ein Absatzformat habe, nämlich meinen "h3", mein "Header 3", das habe ich hier auch, und "Header 3" sind diese beiden Zeilen. Das ist auch genau das gleiche, was ich hier wieder finde, nur muss ich jetzt irgendwie hinkriegen, dass der Text, der hier größer dargestellt wird, genauso übertragen wird hier hinein, der Text, der kleiner dargestellt wird, genauso übertragen wird hier hinein. Und dann dieses kleinere, da komme ich mit dem "span"-Befehl später bei den CSS Zuweisungen daran, dass ich also dann sagen kann, wenn es einen Spanbereich innerhalb eines "h3" gibt, dann formatiere das bitte auf eine bestimmte Art und Weise. Das Gelcihe gilt auch hier oben beim "Header", wie es hier zu sehen ist. Ich kann das in eine Zeile schreiben, oder, wie ich das gerade im Footer gemacht habe, in zwei Zeilen. Das ist im Browser vollkommen egal. Ich speichere das ab, und das sollten Sie sich auch angewöhnen. Immer, wenn Sie hier etwas geändert haben, speichern Sie, schalten Sie um, und aktualisieren Sie. Sollte der Browser nicht geladen sein, bzw. die Datei nicht geladen sein, dann öffnen Sie einfach wieder die Datei, an der Sie gerade arbeiten. Wie man hier sieht, ist das Website-Index, also immer das gleiche Dokument, und jetzt muss der Footer hier unten zu sehen sein. Wir haben einen Zeilenumbruch, dass ist das "br". Wir haben eine fette Darstellung im Unterschied zu den Fließtext, und das bedeutet,dass auch hier eine Überschrift sein muss, und was eben noch nicht rüberkommt, ist der kleinere Text von dieser Fotozeile, weil es noch keine Formatangaben in CSS gibt. Damit ist bereits der gesamte Transfer von InDesign in HTML abgeschlossen. Sie haben erkennen können, dass es zu jedem Inhaltsobjekt in InDesign ein passendes Gegenstück in HTML gibt. Man hat das Dokument selbst, also HTML "head","body" etc. Das Gegenstück der Dokumentinformationen findet sich wieder im "Head"-Bereich durch die Metatags "description" "keywords" und weitere Angaben, und die Inhalte selbst werden von den Absatz und Zeichenformaten, in "h1" bis "h6", "p","img", "a" "ul" übernommen. Selbstverständlich ist das nicht der gesamte HTML Sprachumfang, aber wenn Sie das Prinzip verstanden haben, dann ist es auch kein Problem, sich spezielle Befehle zukünftig herauszusuchen, und diese dann in HTML umzusetzen. Sie haben sicherlich bemerkt, dass die Schreiberei in HTML keine Hexerei darstellt. Der Einstieg ist also gemacht. Die Frage, die man sich zukünftig stellen wird, ob man tatsächlich den Aufwand der Erstellung eines InDesign Dokumentes auf sich nehmen möchte oder nicht, oder doch mal direkt eine HTML-Datei schreibt. Ist im Grunde genauso schnell erledigt.

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!