Maquetacio

La maquetació d'un lloc web determina la distribució dels elements d'aquests.

La maquetació acostuma a seguir patrons habituals:

• Disseny fixe/líquid/híbrid
• Amb/sense capçalera/peu (fixes o no)
• Barres laterals: amb/sense, comportament, quantitat.
• Zones per a menús, barres d'eines, breadcrumbs, publicitat, móduls
• Zones de continguts
• Seguint una quadrícula de referència o no

Història

Durant els anys 90, l'única manera de crear pàgines amb diverses columnes era mitjançant la utilització de taules.

• En ocasions calia incloure taules dins de taules, cosa que complicava especialment el codi
• L'objectiu de les taules no era aquest, si no presentar informació per files, columnes...amb certa lògica.

Per a la maquetacióm utilitzem les

Amb HTML5 s'introdueixen els elements semàntics, que es comporten igual que les

.

HTML <5 vs HTML5

Model de capses

Els elements HMTL tenen una capsa i, segons el tipus de capsa, diferenciem:

• Elements de bloc: reserven línies completes (h1,p,ul,li,div,...
• Elements en línia: se situen dins d'una línia

Per defecte NO treballen amb marges, espaiats, etc..però podem canviar aquest comportament (display: inline-block) Totes les capses tenen tres propietats que permeten ajustar-ne l'aparença:

• margin: el marge extern de la capsa
• border: la vora de la capsa
• padding: el marge intern de la capsa

Posicionament

CSS disposa d'una sèrie d'esquemes de posicionament, entre altres:

• Estàtic
• Relatiu
• Absolut
• Fixe
• Flotant

Podeu trobar informació detallada sobre els esquemes de posicionament en la següent pàgina: http://es.learnlayout.com/