HTML und CSS für Designer

Die Basisformatierung des Dokumentes <html>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein paar grundlegende HTML-Einstellungen sind in CSS nötig, damit insbesondere Größenangaben der Inhaltsobjekte vernünftig eingestellt werden können.

Transkript

Nun möchte ich meinen Titel, den ich oben schon implementiert habe, genau so umsetzen wie hier in dem InDesign-Vorgabedokument. Das sieht auf jeden Fall nicht so aus. Woher kommt das? Wir haben doch in der CSS-Anweisung bei dem "Header"-Container gesagt, der soll so breit wie möglich sein, also 100 % vom Ausgabedokument. Und er soll so hoch sein wie ... ja, wie was denn? Da hängt das Ganze jetzt dran. Er kann nicht wissen, wie hoch die Grafik ist, weil, die Information liegt ihm zu dem Zeitpunkt nicht vor. Er wird sie auch nicht beziehen können, bwz. er weiß ja gar nicht, soll ich mich auf die Höhe des Textes, auf die Höhe der Grafik einlassen? All das fehlt ihm. Entsprechend ist das eine Vorbereitung, die fast in jedem HTML-Dokument mit untergebracht werden muss, meistens am Kopf des Dokumentes. Man könnte sagen, das gehört fast zu einer Art Standardeinstellung. Zunächst einmal muss ich dem Dokument sagen, gerade bei responsive layouts, von welchen Höhen wir überhaupt ausgehen. Denn zunächst einmal sind die Breiten automatisch auf 100 % gesetzt. Das ist der Grund, warum wir im Hintergrund diese Breite haben. Was aber nicht auf 100 % gesetzt ist, ist die Höhe. Die Höhe orientiert sich immer an dem Inhalt dessen, was da drin ist. Und wenn ich keinen Inhalt habe, dann ist die Höhe auch 0. Dann sehe ich gar nichts. Das kann ich ein bisschen steuern, indem ich z. B. standardmäßig schonmal in dem HTML-Container - also für alles, was in dem Dokument drinsteht -, in dem HTML-Container sage: Das Ganze soll bitte 100 % sein, alle Objekte betreffend. Das trage ich jetzt mal ein und speichere das ab. Wir schauen es uns an. Keine Änderung. Aber dieser Eintrag, der ist sehr wichtig, der hat auch funktioniert. Was aber jetzt noch fehlt, das habe ich für das HTML-Dokument gesagt. Jetzt muss ich noch zusätzlich sagen, dass das nicht nur für HTML, sondern auch für "body" gelten soll. So, das speichere ich ab. "html", "body", Höhe: "100%". Gucken wir mal, was jetzt passiert. Jetzt erkennt er den Inhalt der Überschrift oder genauer genommen des "Header"-Bereiches und passt sich an nach dem "image", dem größten Bereich, der sich dort drinnen jetzt wieder findet. Der Rest ist ebenfalls gut. Was jetzt noch nicht so schön ist, das sind die Abstände hier oben und links und rechts. Da haben wir die Abstände um ein Objekt drumherum, quasi mit Padding und Margin und dergleichen. Jetzt möchte ich das Ganze für den "body"-Bereich. Der "body" soll also im Grunde mit 0 direkt am HTML dran sein. Also setze ich den "margin" im "body"-Bereich auf "0". Wenn Sie die Zahl 0 verwenden, dann brauchen Sie keine Einheit. Also 0 ist identisch zu 0 pixel oder 0 em. Null ist halt null. Da ist es egal, was für eine Einheit man verwendet, das kann man auch weglassen. Wenn ich das aktualisiere, dann sieht man, passt er sich jetzt in dieser Richtung schon an. Was noch fehlt, ist hier oben der Bereich. Da können Sie jetzt herumprobieren mit "margin top" und dergleichen. Das funktioniert nicht. Das liegt wiederum daran, dass jetzt der "body" automatisch nach oben noch einen Abstand hat. Das kann man mit einem Schlag umgehen, indem ich das nicht in den "body" hineinschreibe, sondern auch in den HTML-Bereich. Jetzt trifft das für beide zu. Das wird zwar noch keinen Unterschied bringen, aber jetzt hat es eine Bedeutung, wenn ich dann hier in den Header gehe, und ich trage das unter "background-size: cover" ein, auch hier eine "margin"-Angabe vergebe, nämlich für den Header, der jetzt in dem "body" steht. Da zeige ich Ihnen noch etwas Neues, und zwar, ich möchte nach oben 0 haben, nach rechts 0 haben, nach unten aber 4 rem und nach links ebenfalls 0. Das bestätige ich. Eine solche Angabe ist identisch zu Schreibweisen wie "margin-top: 0", "margin-right: 0", "margin-bottom:4rem", und der Rest auch wieder 0, also "margin- left". Programmierer sind grundsätzlich schreibfaul, das heißt, das kann ich mir schenken, indem ich, wenn ich solch eine Angabe im Kreis quasi angehe: "top", "right", "bottom", "left". Damit sage ich bestimmte Abstände voraus, und das gucken wir uns jetzt an. Bingo: So sollte es hinterher aussehen. Das Ganze rückt nach oben und steht dann hier entsprechend direkt am Dokumentkopf. So sollte es aussehen, und damit haben wir die Grundvoraussetzung geschrieben für die Ausrichtung dieses ganzen Dokumentes. Der Rest, und das habe ich jetzt schon vorbereitet, damit ich da nicht alles neu schreiben muss, der Rest ist im Wesentlichen nichts anderes als das Anpassen der Überschrift, und das gucken wir uns nochmal ganz kurz an. Da gibt es nichts Neues, hier unter den Header kopiere ich das hinein. Da haben wir den Befehl nach links, nach oben, wir haben die Farben, wir haben Fontgrößen, "font-weight" usw. Was ein bisschen neu ist, ist z. B. "uppercase" bei "text-transform", also Großbuchstaben, und diese Angabe: die "position:absolut". Ich möchte den Text hier oben nicht links oben stehen haben, sondern den möchte ich hier angepasst meinem InDesign-Vorlagendokument auch in die Mitte bringen, und daher muss ich sagen: "position:absolut". Ich möchte eine Positionsangabe ausgehend hier links oben vom Punkt, 5 % von links und 30 % von oben, genau so, wie es hier steht. Dann taucht das Ding ungefähr hier an der Stelle auf. Ich speichere das mal ab, lasse aktualisieren, und jetzt sind wir genau da, wo wir eigentlich ursprünglich hinwollten. Das sieht perfekt aus. Wenn wir uns das hier mit dem Bild anschauen, besser geht es eigentlich fast gar nicht. Ob jetzt die Schrift ein bisschen größer oder bisschen kleiner ist, das ist etwas anderes. Hier ist jetzt natürlich durch die Dynamik nicht diese starre Vorgabe wie bei dem InDesign-Dokument zu erwarten. Aber wir haben hier eine Dynamik drin, die kann sich sehen lassen. Und ich habe genau das erreicht was ich möchte: Ich habe ein Titelbild. Immer, wenn die Webseite aufgerufen wird, wird dieses Titelbild dominieren, erst dann kommt der Rest mit dem Text, und ich kann mir anschauen, was ich hier nun als Inhalt lesen kann.

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!