InDesign-bokser er like enkle som klikk og dra. Photoshops lag lar malere fargepiksler hvor som helst de ønsker. Men layout med HTML og CSS er et spill av nudging og cascading.

Det skjer hver dag: Photoshop-kunnskapsrike kunstdirektører mock opp design, honing avstanden deres, nøye å velge passende skrifttyper og farger. De overlater sitt arbeid til en ivrig HTML-utvikler, som kunngjør at designet sannsynligvis vil ta dager til å bli til HTML / CSS. Verre, de vil gjøre endringer for å ta hensyn til forskjellige skjermstørrelser. Timing er et mysterium for begge parter. Vil det ta utvikleren en time eller en uke å slå sin PSD til å arbeide med HTML / CSS?

Grunnleggende for weboppsettet - det mulige, det praktiske, mulighetene - er lett å forstå. Som å utforme seg selv, vil forståelse av prinsippene hjelpe noen designer å produsere bedre design og fremskynde prosessen med å bygge et nettsted.

Blokker elementer stakk, inline elementer flyter

Alt på en nettside, fra avsnitt til bilder til koblinger til fet tekst, ligger i usynlige bokser. Disse boksene kommer i to varianter: blokk og inline. Forskjellen mellom inline og blokk ligger i deres oppførsel.

• Blokkelementene er rektangler. De elsker å fylle horisontal plass.
• Inline elementer er rektangulære, bortsett fra at de kan vikle.

Blokkelementene stabler oppå hverandre. Med mindre annet er sagt, tar de så mye horisontal plass som mulig og skyver alt rundt dem opp eller ned. For design er blokkelementer det primære layoutverktøyet.

Inline-elementer er basert på tekstformatering. De bryter ikke strømmen av tekst, og deres dimensjoner utvides for å passe inn i innholdet. Å telle et inlineelement for å holde en bredde på 200 piksler, virker ikke. Fyller det med tekst vil.

Som standard er hvert element i er enten et inline- eller blokkelement. Designere kan forandre sin natur med et lite CSS - si å snu en stabel med listeposter (nativt blokker) i en rad, eller en serie horisontale koblinger (native inline) i en vertikal stabel. Det betyr at et synlig element kan brukes til layout. Enten de skal, avhenger av det aktuelle oppsettet.

Native blokkelementer inkluderer:

• divisjoner
• avsnitt

• lister
  • Elementer i en liste
  • overskrifter

    -

  • tabeller
    Blokker anførselstegn

    Arrangørene i HTML5

    , ,
    Kroppen selv

    Inline elementer inkluderer:

    • Ankre (hyperkoblinger)
    • Dristig og
    • kursiv og
    • Bilder
    • siteringer
    • Skriv styling
    • Skjemaetiketter
    • Opp til deg

    Vanlige merker som ikke er blokk eller inline:

    • Dokumenttittelen