InDesign-vakken zijn zo eenvoudig als klikken en slepen. Met de lagen van Photoshop kunnen schilders pixels op elke gewenste plek kleuren. Maar lay-out met HTML en CSS is een spel van nudging en cascading.

Het gebeurt elke dag: met Photoshop bedreven art directors bespotten ontwerpen, scherpen hun onderlinge afstand, kiezen zorgvuldig passende lettertypen en kleuren. Ze geven hun werk af aan een enthousiaste HTML-ontwikkelaar, die aankondigt dat het ontwerp waarschijnlijk dagen in beslag neemt om HTML / CSS te worden. Erger nog, ze zullen wijzigingen aanbrengen om rekening te houden met verschillende schermformaten. Timing is een mysterie voor beide partijen. Zal het de ontwikkelaar een uur of een week kosten om van zijn PSD HTML / CSS te maken?

De fundamenten van weblay-out - het mogelijke, het praktische, de mogelijkheden - zijn gemakkelijk te begrijpen. Net als het ontwerp zelf, helpt het begrijpen van de principes elke ontwerper om betere ontwerpen te maken en het proces van het bouwen van een site te versnellen.

Blokelementenstapeling, inline elementen stromen

Alles op een webpagina, van alinea's tot afbeeldingen tot koppelingen naar vetgedrukte tekst, bevindt zich in onzichtbare vakjes. Deze dozen zijn er in twee varianten: blok en inline. Het verschil tussen inline en blok ligt in hun gedrag.

• Blokelementen zijn rechthoeken. Ze houden ervan om de horizontale ruimte te vullen.
• Inline-elementen zijn rechthoekig, behalve dat ze kunnen worden ingepakt.

Blokelementen op elkaar stapelen. Tenzij anders wordt verteld, bezetten ze zoveel mogelijk horizontale ruimte en duwen ze alles om hen heen op of neer. Voor ontwerp zijn blokelementen de primaire lay-outtool.

Inline-elementen zijn gebaseerd op tekstopmaak. Ze breken de tekststroom niet, en hun afmetingen breiden uit om in hun inhoud te passen. Een inline-element weergeven om een ​​breedte van 200 pixels te behouden, werkt niet. Het vullen met tekst zal.

Standaard is elk element in de is een inline- of blokelement. Ontwerpers kunnen hun aard wijzigen met een beetje CSS. Stel bijvoorbeeld een stapel lijstitems (native blokken) in een rij, of een reeks horizontale links (native inline) in een verticale stapel. Dat betekent dat elk zichtbaar element kan worden gebruikt voor lay-out. Of ze moeten, hangt af van de lay-out in kwestie.

Native blokelementen omvatten:

• afdelingen
• De leden

• lijsten
  • Items in een lijst
  • rubrieken

    -

  • tabellen
    Blok citaten

    Organisatoren in HTML5

    , ,
    Het lichaam zelf

    Inline-elementen omvatten:

    • Ankers (hyperlinks)
    • Stoutmoedig en
    • Cursief en
    • Afbeeldingen
    • Citations
    • Type styling
    • Formulierlabels
    • Dat is jouw keuze

    Veelgebruikte tags die niet blokvormig of inline zijn:

    • De documenttitel