Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML und CSS für Designer

Die Formatierung des Sichtbereiches <header>

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Header erhält in diesem Beispiel die Aufgabe einer echten Titelseite. So soll die Website im Browser immer mit dieser Seite "beginnen" und nichts anderes zeigen. Das Titelblatt entscheidet, ob man verweilt und weiterlesen möchte.

Transkript

In unserem HTML Dokument müssen wir den Header übernehmen, den wir hier in dem InDesign-Dokument bereits gestaltet haben. Hierbei hab ich eine Besonderheit vor, und zwar möchte ich, dass dieser Header, ähnlich wie die Titelseite eines Magazins quasi immer als einziges Dokument im Vordergrund der HTML Seite bleibt. Das möchte ich gerne erreichen. Uns wird hier bei der CSS Umsetzung einiges an neuen Befehlen begegnen. Aber auch vieles, was wir bereits kennen. Schauen wir uns das zunächst mal an. Unsere Website, hier unten klar erkennbar, die sieht schon ganz gut aus. Vor allen Dingen, wenn wir jetzt uns den Text soweit anschauen. Die Bilder sind noch ganz groß, das kommt gleich. Aber hier oben der Header Bereich, der ist eben noch nicht so ganz, wie wir uns das wünschen. So, und entsprechend kann ich nun hingehen, und in der CSS Angabe mich um genau diesen Sektor kümmern. Und das mach ich mal. Als erstes definiere ich, wo ich mich befinde. Das ist dann hinterher ein bisschen leichter zum Suchen, und jetzt muss ich zugreifen auf die Struktur. Ich erinnere nochmal, wir haben hier den Header innerhalb dieses Containers stehen, und auf diesen Container muss ich zugreifen. Darin enthalten ist nur <h1, und ein <span, mehr nicht. So, also ich greife auf den Header zu. Jetzt besteht der erste Schritte darin, dass ich diesen Container mit einem Hintergrundbild versehe. und der Befehl dazu, der lautet: background-image. Das kann man sich, glaube ich, ganz gut merken. Der Zugriff erfolgt ähnlich wie hier oben, beim @import auf die URL, mit dem Befehl url(), also background-image: url(). Und jetzt muss ich ihn nur noch angeben, nach bereits bekannter Manier, wo sich diese Grafik denn befindet. Und die Grafik, die liegt im Ordner /images/scotland-header.jpg. Warum jetzt einen Schritt zurück? Weil die Datei liegt doch hier? Also Image, die wir gerade geladen haben, Scotland-Header liegt doch innerhalb dieses Ordners. Warum ist das so? Ganz einfach, weil wir arbeiten in der style.css. Das darf man nicht vergessen. Die style.css, die liegt in diesem Ordner. Da haben wir sie. Und jetzt muss ich einen Schritt raus gehen, und einen Schritt wieder rein gehen, um an die Datei ran zu kommen. Und genau das bilde ich hier ab. Einen Schritt raus, einen Schritt rein, und Zack, dann habe ich die Datei. Schauen wir uns an wie das aussieht. Ich speichere das Dokument ab. Laden das mal. Und man sieht zumindest schon mal was passiert. Das sieht nicht so aus, wie ich mir das vorstelle. Und der Grund ist der, dass hier die Box, also quasi der Textrahmen, der sich um die Überschrift aufzieht, der braucht nicht mehr Platz. Ich hab keine anderen Größen angegeben, und entsprechend muss ich hier ein bisschen Vorarbeit leisten. Und das tue ich jetzt mal. Und zwar zum einen sag ich, als aller erstes, dass der Header in einer Breite daher kommen soll, mit width, von 100%. Zweitens mit einer Höhe von 100%. Und wenn ich das jetzt alles abspeichere, und das Ganze mal anschaue, dann wird man sehen, hier tut sich schon was, aber noch nicht genug. Der Grund ist jetzt, dass hier viele CSS Angaben aufeinander aufbauen. Zunächst einmal möchte ich einen weiteren Eintrag machen. Und zwar betrifft das background-position. Die background-position, die möchte ich, weil hier sehen wir ja im Hintergrund, nur den Himmel. Und ich möchte das ein wenig verschieben, und zwar um 50% nach oben, und 50% nach links. Also mit anderen Worten, ich hole das Zentrum des Bildes in die Mitte der zur Verfügung stehenden Box. Vielleicht sieht man schon was, mal gucken. Ja, sie sehen, da erkennt man schon etwas, dass ich die Hintergrundgrafik verschoben hatte. Und, was ich jetzt mache ist... background-size. Das ist die Größe, die ich anwende. Die setze ich auf cover, damit er immer auf die entsprechende Auflösung, die ich habe, sich einstellen kann. So, und sie sehen jetzt passiert hier nämlich schon was. Erkennen sie es? Das Teil liegt immer zentriert in der Mitte und es passt sich an. Was ist jetzt hier im Grund passiert? Ich zeige ihnen das mal im InDesign Dokument, mit diesem cover und background-position. Ich lösche das jetzt einfach mal raus und gucken uns das hier an. Wenn ich dieses Dokument einpasse, also mit anderen Worten, ich mache das jetzt mal kleiner. So. Dann habe ich eine Grafik im Hintergrund, die trotzdem größer ist. Das erreiche ich bei InDesign durch Klick auf die Mitte hier. Und wenn ich diese Grafik bewege, dann wäre das die Standardeinstellung in der HTML Seite. Was ich mit dem Befehl background-position: 50% 50% gemacht habe, ist einfach, ich hab jetzt die Grafik 50% nach oben, also ungefähr hier. Und 50% nach links, also ungefähr so, gezogen. Und das ist genau dieser Befehl. background-position: 50% 50%. Und der cover Befehl, der sorgt jetzt dafür, dass ja hier im InDesign Dokument im Grund nicht passiert, dass sich dieser Ausschnitt anpasst. Aber selbst das kann man simulieren, indem ich die Grafik nun anklicke, und dann auf AUTOMATISCH EINPASSEN klicke. Und wenn ich jetzt die Grafik bewege, sie sehen, dann hab ich immer den Ausschnitt, egal wie groß ich bin, den ich benötige. Ja, und das entspricht 1:1 dessen, was wir hier hingeschrieben haben. background-position, und background-size: cover. Was uns nun noch fehlt, das sind margin-Angaben. Das kann man aber am besten erst dann machen, wenn auch der Rest des Dokumentes soweit angepasst ist. Und die Textangaben, die die Überschrift <h1 und <h1 < span formatieren, da ist eigentlich nichts Neues mehr dabei. Die können wir jetzt relativ schnell auch übertragen.

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!