InDesign-bokse er lige så enkle som klik og træk. Photoshops lag lader malere farvepixel overalt, hvor de vil. Men layout med HTML og CSS er et spil med nudging og cascading.

Det sker hver dag: Photoshop-kyndige kunstdirektører mocker design, henter deres afstand, vælger omhyggeligt passende skrifttyper og farver. De afleverer deres arbejde til en ivrig HTML-udvikler, der annoncerer, at designet sandsynligvis vil tage dage til at blive til HTML / CSS. Værre, de vil foretage ændringer for at tage højde for forskellige skærmstørrelser. Timing er et mysterium for begge parter. Vil det tage udvikleren en time eller en uge at gøre deres PSD til arbejde HTML / CSS?

Grundlaget for weblayoutet - det mulige, det praktiske, mulighederne - er let at forstå. Ligesom design selv, vil forstå principperne hjælpe enhver designer producere bedre design og fremskynde processen med at bygge et websted.

Blokelementer stak, inline elementer strømme

Alt på en webside, fra afsnit til billeder til links til fed tekst, befinder sig i usynlige bokse. Disse kasser kommer i to sorter: blok og inline. Forskellen mellem inline og blok ligger i deres adfærd.

• Blokelementer er rektangler. De elsker at fylde vandret rum.
• Inline elementer er rektangulære, bortset fra at de kan vikle.

Blokelementer stak oven på hinanden. Medmindre andet er sagt, besætter de så meget vandret plads som muligt og skubber alt omkring dem op eller ned. Til design er blokelementer det primære layoutværktøj.

Inline elementer er baseret på tekstformatering. De bryder ikke strømmen af ​​tekst, og deres dimensioner udvides til at passe deres indhold. At tælle et inline-element for at holde en bredde på 200 pixels virker ikke. Fyldning med tekst vil.

Som standard er hvert element i er enten et inline eller blokelement. Designere kan ændre deres karakter med en lille CSS - sig om at vende en stak listemner (native blokke) i en række, eller en række vandrette links (indbygget inline) i en lodret stak. Det betyder, at et synligt element kan bruges til layout. Uanset om de skal afhænge af det pågældende layout.

Native blokelementer omfatter:

• divisioner
• Stk

• Lister
  • Elementer i en liste
  • Overskrifter

    -

  • Borde
    Bloker citater

    Arrangører i HTML5

    , ,
    Kroppen selv

    Inline elementer omfatter:

    • Ankre (hyperlinks)
    • Dristig og
    • Kursiv og
    • Billeder
    • citater
    • Skriv styling
    • Form etiketter
    • Op til dig

    Fælles tags, der hverken er blok eller inline:

    • Dokumentets titel