ZoWebdev

Web ontwikkeling voor Jongeren
[ 20-10-2010 | 8:55 ]

Denk in blokjes

Je bent er nu bijna klaar voor om met het grafisch ontwerp aan de slag te gaan. Er is echter nog een ding waar je rekening mee moet houden bij het ontwerpen: denk in blokjes.

Als je je ontwerp straks om gaat zetten van een grafisch ontwerp naar code, zul je zo min mogelijk plaatjes willen gebruiken. Code wordt namelijk veel sneller afgebeeld. De code die je zult gebruiken om kleuren, lettertypes en de plek op de pagina van elementen de definieren heet CSS (Cascading Style Sheets).

Met CSS kun je de plek van elke HTML element precies bepalen, of ten opzichte van elkaar. Daarbij zul je veel gebruik maken van het HTML element <div>. Dit maakt een blokje waar je weer tekst, plaatjes en andere div-elementen in kan plaatsen. Als je dat wil wordt dit blokje groter als zijn inhoud groter is, of heeft hij een vast formaat.

Meestal zul je de div-elementen links uitlijnen, soms ook rechts. Als je ze links uitlijnt, worden ze net als bij het lezen eerst van links naar rechts geplaatst en als ze niet meer op de pagina passen worden ze op de volgende regel geplaatst, onder het dikste blok van de regel erboven. Om het ontwerp te krijgen dat jij wilt zul je soms verschillende blokken in elkaar moeten nestelen. Je hoeft je nu niet druk te maken over hoe dit allemaal geprogrammeerd gaat worden, maar het helpt om bij het ontwerp alsvast in blokjes te denken.

Mijn werkwijze:

Ik begin vaak met het definieren van een groot blok wat midden-bovenaan de pagina wordt geplaatst. Daarbinnen plaats ik dan de echte elementen van mijn pagina:

  • Vaak betekent dat dat er een hoofd-blok komt (voor het logo en de site-titel)
  • een blok voor het linker menu
  • het midden van de pagina, waar de feitelijke tekst en inhoud komt te staan
  • en eventueel nog een blok rechts