InDesign-Boxen sind so einfach wie klicken und ziehen. Mit den Photoshop-Ebenen können Maler Pixel an beliebigen Stellen einfärben. Aber Layout mit HTML und CSS ist ein Spiel des Anstupsens und Kaskadierens.

Es passiert jeden Tag: Photoshop-artige Art Directors motzen Designs, verfeinern ihre Abstände, wählen sorgfältig geeignete Schriften und Farben aus. Sie geben ihre Arbeit an einen eifrigen HTML-Entwickler weiter, der ankündigt, dass das Design wahrscheinlich Tage dauern wird, um zu funktionierendem HTML / CSS zu werden. Schlimmer noch, sie nehmen Änderungen vor, um unterschiedliche Bildschirmgrößen zu berücksichtigen. Timing ist ein Geheimnis für beide Parteien. Wird der Entwickler eine Stunde oder eine Woche benötigen, um seine PSD in funktionierendes HTML / CSS umzuwandeln?

Die Grundlagen des Weblayouts - das Mögliche, das Praktische, die Möglichkeiten - sind leicht zu verstehen. Wie das Design selbst wird das Verständnis der Prinzipien jedem Designer helfen, bessere Entwürfe zu erstellen und den Prozess des Aufbaus einer Website zu beschleunigen.

Blockelemente stapeln, Inline-Elemente fließen

Alles auf einer Webseite, von Absätzen über Bilder bis zu Links zu fettem Text, befindet sich in unsichtbaren Kästchen. Diese Boxen gibt es in zwei Varianten: Block und Inline. Der Unterschied zwischen Inline und Block liegt in ihrem Verhalten.

• Blockelemente sind Rechtecke. Sie lieben es, den horizontalen Raum zu füllen.
• Inline-Elemente sind rechteckig, außer dass sie umwickeln können.

Blockelemente werden übereinander gestapelt. Wenn nicht anders angegeben, nehmen sie so viel horizontalen Raum wie möglich ein und schieben alles um sie herum nach oben oder nach unten. Für das Design sind Blockelemente das primäre Layout-Werkzeug.

Inline-Elemente basieren auf Textformatierung. Sie unterbrechen den Textfluss nicht, und ihre Dimensionen erweitern sich, um zu ihrem Inhalt zu passen. Ein Inline-Element zu teilen, um eine Breite von 200 Pixeln beizubehalten, funktioniert nicht. Es mit Text füllen wird.

Standardmäßig ist jedes Element in der ist entweder ein Inline- oder ein Blockelement. Designer können ihre Natur mit ein wenig CSS ändern - sagen wir, indem wir einen Stapel von Listenelementen (native Blöcke) in eine Reihe oder eine Reihe horizontaler Links (nativ inline) in einen vertikalen Stapel verwandeln. Das bedeutet, dass jedes sichtbare Element für das Layout verwendet werden kann. Ob dies der Fall ist, hängt vom jeweiligen Layout ab.

Native Blockelemente umfassen:

• Abteilungen
• Absätze

• Listen
  • Elemente in einer Liste
  • Überschriften

    -

  • Tabellen
    Block Zitate

    Organisatoren in HTML5

    , ,
    Der Körper selbst

    Inline-Elemente umfassen:

    • Anker (Hyperlinks)
    • Fett gedruckt und
    • Kursiv und
    • Bilder
    • Zitate
    • Styling eingeben
    • Formularbeschriftungen
    • Wie du willst

    Allgemeine Tags, die weder blockiert noch inline sind:

    • Der Titel des Dokuments