InDesign-rutorna är lika enkla som klick-och-dra. Photoshops lager låter målare färgpixlar var som helst de vill ha. Men layout med HTML och CSS är ett spel av nudging och cascading.

Det händer varje dag: Photoshop-kunniga konstledare mockar upp mönster, hinkar deras avstånd, väljer noggrant lämpliga teckensnitt och färger. De avger sitt arbete till en ivrig HTML-utvecklare, som tillkännager att designen sannolikt kommer att ta dagar för att bli en fungerande HTML / CSS. Värre, de kommer att göra ändringar för att ta hänsyn till olika skärmstorlekar. Timing är ett mysterium för båda parter. Kommer det att ta utvecklaren en timme eller en vecka för att göra sin PSD till en fungerande HTML / CSS?

Grunderna för webblayout - det möjliga, praktiska, möjligheterna - är lätta att förstå. Som att utforma sig själv, kan förstå principerna hjälpa någon formgivare att producera bättre mönster och påskynda processen att bygga en webbplats.

Blockelementen stackar, inline-elementen strömmar

Allt på en webbsida, från stycken till bilder till länkar till fet text, finns i osynliga lådor. Dessa lådor finns i två sorter: block och inline. Skillnaden mellan inline och block ligger i deras beteende.

• Blockelement är rektanglar. De älskar att fylla horisontellt utrymme.
• Inline-elementen är rektangulära, förutom att de kan vikas.

Blockelementen staplar ovanpå varandra. Om inte annat sägs upptar de så mycket horisontellt utrymme som möjligt och trycker allt runt dem upp eller ner. För design är blockelement det primära layoutverktyget.

Inline-element är baserade på textformatering. De bryter inte flödet av text, och deras dimensioner utökas för att passa deras innehåll. Att ange ett inlineelement för att hålla en bredd på 200 pixlar fungerar inte. Fyller det med textvilja.

Som standard är varje element i är antingen ett inline- eller blockelement. Designers kan ändra sin karaktär med en liten CSS - säg att man vänder en stapel listobjekt (inhemska block) i en rad, eller en serie horisontella länkar (native inline) i en vertikal stapel. Det betyder att ett synligt element kan användas för layout. Oavsett om de borde beror på den aktuella layouten.

Inbyggda blockelement innefattar:

• divisioner
• punkterna

• listor
  • Artiklar i en lista
  • rubriker

    -

  • tabeller
    Block citat

    Arrangörer i HTML5

    , ,
    Kroppen själv

    Inline-element inkluderar:

    • Ankare (hyperlänkar)
    • Djärv och
    • Kursiv och
    • Bilder
    • citat
    • Skriv styling
    • Form etiketter
    • Upp till dig

    Vanliga taggar som varken är block eller inline:

    • Dokumenttiteln