Screendesign Einstiegsjahr

Dreißig Unterrichtseinheiten Technik und Design

(Boxenmodel; Max:in Muster) Abstände eines Blockelements in HTML

Jedes Blockelement ist neben den Inlineelementen eine  rechteckige Box, (Kästchen) die über-, neben- und ineinandergestapelt werden.
Boxen besitzen Abstände zueinander die im Model näher erklärt werden.

margintop
marginleft1bordertop30
0paddingtop
marginleft3borderleft2paddingleft1paddingrightborderrightmarginright3
paddingbottom
borderbottom
marginbottom
0
  • Margin:
    ist der Abstand zwischen den Boxen.
  • Border:
    ist Rahmenstärke der entsprechenden Box.
  • Padding:
    ist der Abstand des Inhalt zur Box.

  • Wie sich die Regeln für die Abstände genau verhalten, tragen Sie bitte als Ergänzung im entsprechenden Listenelement dieser Tabelle ein.

Die folgende Grafik wurde mit Photoshop für das Web "gesliced", also in ein
lückenloses Rechteckpuzzel zerschnitten und sieht nun aus wie ein einzelnes
Bild bzw. optisch eher eine Grafik:
So wurde es möglich jedes einzelne Bildteil der Grafik mit einem CSS-Trick,
quasi eine interaktive wirkende Bildgrafik hinzuzufügen.
Wie das genau mit dem "Slice"-Werkzeug funktioniert, wird im entsprechenden
Tutorial (Teamklassenverzeichnis in der Kl2-Vorbereitung) als Zusatz erklärt.

Wozu man das "Slice"-Tool in Photoshop noch gebrauchen kann,
erklärt Kristof kurz und knapp, vielen Dank.
Warum das ganze heute selten gebraucht wird erkläre ich gerne bei Gelegenheit.


Grid-Box für Screentypografie

Layout mit Grid-Boxen erstellen. Wie? Das erfahrt Ihr auf dieser internen Webpage!