HTML und CSS für Designer

Abstände und Größen der Objekte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Abstand eines Absatzes zum nächsten oder die Zeilenabstände werden wie in einem Kreativprogramm auch mit Hilfe von Margin und Padding realisiert.

Transkript

Betrachte ich mir den inhalt der HTML-Datei, dann fällt mir nun auf einmal auf, dass ich hier den Fließtext glatt am Rand habe. Und dass es jetzt nicht sehr schön. Des weiteren möchte ich endgültig diese Riesengrafiken beseitigen, denn das Dokument ist so breit, wie die Images, die ich eingetragen habe, da die relativ hochauflösend sind, macht das jetzt so nicht wirklich Sinn. Übrigens, warum überhaupt so große Grafiken? Sie müssen bei Webgrafiken immer darauf achten, dass sie auch von der Ladezeit her, wie man so schön sagt, webtauglich sind, so klein wie möglich, und qualitativ so hochwertig wie möglich. Wenn man sich das jetzt mal anschaut, dann haben wir hier ungefähr ein Verhältnis von 50 % also theoretisch gesehen könnte die Grafik 50% kleiner sein, um genau dieses Aussehen zu erreichen. warum habe ich das nicht gemacht? Das liegt daran, dass wir heute bei auch bei responsive Design vermehrt an Retina Displays denken müssen. Retina Displays, das ist jetzt zwar auch stark vereinfacht, da gibt es viele unterschiedliche Auflösungsvarianten und Umrechungsfaktoren, aber vereinfacht gesagt, haben Retina-Displays die doppelte Anzahl an Pixeln, die sie verarbeiten können bei gleicher Anzeigefläche. Wenn ich ein normales Display habe, einen normalen Bildschirm, bei einer Breite von 1118 Pixel, das würde bedeuten, dass diese Grafik ungefähr bei der Hälfte, wenn das Ganze die Hälfte kleiner gemacht werden würde, skaliert wird auf die Hälfte der Anzeige. Das wäre das normale Display. Sobald diese Anzeige eine Retina-Darstellung hat, ist auch diese Anzeige bei gleichbleibender Fläche in der Lage die Qualität der großen Grafik darzustellen, also doppelt so viele Pixel auf dem Raum, und insofern ist das schon ganz okay, wenn man das Ganze in etwa doppelt so groß ausrichtet allerdings reicht es leider nicht, so lange wir nur mit einem Imagebefehl Grafiken einbinden, weiß er ja gar nicht welche Grafik er laden soll für die Größenangabe. Das ist nur eine Vorbereitung für weiterführende Techniken, und ich wollte es kurz erwähnen. Wie passen wir jetzt diese Grafiken an? Das ist relativ leicht. Das ist der erste Schritt, den wir im Textbereich machen weil die Grafiken sich im Textbereich befinden. Ich gehe hier an die Stelle, setzen wir es ruhig an den Kopf. Das ganze betrifft Grafiken, die in der Sektion sitzen, und Grafiken heißen img ich eröffne meinen Block. Das erste, was es an Befehlen einzutragen gibt, ist ein Befehl, der heißt max-width also die maximale Breite, die soll bitte 100% sein, und das Gleiche gibt es dann noch mal mit der maximalen Höhe. Und auch das soll 100% sein. Das bestätige ich, gehe in den Browser, und aktualisiere, und schon habe ich meine Dokumente und Grafiken so breit, wie das Dokument breit ist. So habe ich mir das vorgestellt. Das Einzige, was ich noch machen muss, die Abstände sind nach Vorgabedokument hier etwas größer. Hier gibt's noch einen "margin"-Bereich. D. h. im "image" muss ich nichts anderes machen wie ein margin-top und der Wert, den ich mir ausgesucht habe ist einfach 1 em, das passt ganz gut. Gucken wir es uns an, was daraus wird. Das hier muss etwas größer werden, wie Sie sehen, tut es das auch. Damit habe ich die Imagebereiche vernünftig formatiert und mehr muss ich im Grunde mit dem Dokument nicht machen. Der nächste Step ist, dass wir hier die Seitenabstände wieder zurückbekommen.

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!