http://wiki.tocateules.com/index.php?action=history&feed=atom&title=Maquetacio 2026-06-16T08:54:23Z Revision history for this page on the wiki MediaWiki 1.31.16 http://wiki.tocateules.com/index.php?title=Maquetacio&diff=189&oldid=prev 2024-02-29T12:39:18Z

<p>Created page with &quot;La maquetació d&#039;un lloc web determina la distribució dels elements d&#039;aquests. La maquetació acostuma a seguir patrons habituals: *Disseny fixe/líquid/híbrid *Amb/sense...&quot;</p> <p><b>New page</b></p><div>La maquetació d'un lloc web determina la distribució dels elements d'aquests.<br /> <br /> La maquetació acostuma a seguir patrons habituals:<br /> <br /> *Disseny fixe/líquid/híbrid<br /> *Amb/sense capçalera/peu (fixes o no)<br /> *Barres laterals: amb/sense, comportament, quantitat.<br /> *Zones per a menús, barres d'eines, breadcrumbs, publicitat, móduls<br /> *Zones de continguts<br /> *Seguint una quadrícula de referència o no<br /> <br /> <br /> == Història ==<br /> <br /> Durant els anys 90, l'única manera de crear pàgines amb diverses columnes era mitjançant la utilització de taules.<br /> *En ocasions calia incloure taules dins de taules, cosa que complicava especialment el codi<br /> *L'objectiu de les taules no era aquest, si no presentar informació per files, columnes...amb certa lògica.<br /> <br /> Per a la maquetacióm utilitzem les ''&lt;div&gt;''<br /> <br /> Amb HTML5 s'introdueixen els elements semàntics, que es comporten igual que les ''&lt;div&gt;''.<br /> <br /> ==HTML &lt;5 vs HTML5==<br /> [[File:HTML5.png]]<br /> <br /> ==Model de capses==<br /> Els elements HMTL tenen una capsa i, segons el tipus de capsa, diferenciem:<br /> *'''Elements de bloc''': reserven línies completes (h1,p,ul,li,div,...<br /> *'''Elements en línia''': se situen dins d'una línia<br /> Per defecte NO treballen amb marges, espaiats, etc..però podem canviar aquest comportament (''display: inline-block'')<br /> Totes les capses tenen tres propietats que permeten ajustar-ne l'aparença:<br /> *'''margin''': el marge extern de la capsa<br /> *'''border''': la vora de la capsa<br /> *'''padding''': el marge intern de la capsa<br /> [[File:padding.gif]]<br /> <br /> ==Posicionament==<br /> CSS disposa d'una sèrie d'esquemes de posicionament, entre altres:<br /> *Estàtic<br /> *Relatiu<br /> *Absolut<br /> *Fixe<br /> *Flotant<br /> Podeu trobar informació detallada sobre els esquemes de posicionament en la següent pàgina: http://es.learnlayout.com/</div>

Jaume