Fons de pàgina Web professional Div in Div

Un fons de pàgina xulo de veritat, no està fet amb un simple "aplicar imatge o color de fons", està fet amb diferents imatges de fons

Està seccionat en diferents imatges de fons (capçalera, menù, fons general, diferents seccions de caixa de text, interseccions de seccions de text, etc)

Per poder-ho realitzar, s'utilitza el que jo anomeno Div in Div, o sigui un Div que està dintre de un altre Div.

Què és un Div?

Primer de tot cal que expliqui que és un Div. és una caixa de contingut, on hi podem ficar a dintre fins i tot un o més Divs, al crear un Div, és crea un estil ID per aquest de manera automàtica, de manera que cal donar-li una ID que resumeixi la seva funciò o contingut (fons, menú, ovelleta, etc)

Doncs bè, aqui poso un exemple de com crear un fons a lo professional.

Creem una capçalera, que estarà composada per tres Divs.

Primer de tot crearem el Div capçalera, (que anomenarem "top") desde el codi HTML

<div id="top"></div>

Ara copiem aquest codi i l'enganexem dintre del mateix:

<div id="cap"><div id="cap"></div></div>

Separem i tabulem de manera que l'ùltim div quedi a dintre del primer

<div id="top">
     <div id="top"></div>
</div>

Ara creem dos Divs mès a dintre del primer:


<div id="top">
     <div id="top"></div>
     <div id="top"></div>
     <div id="top"></div>
</div>

I això se suposa que és el el Div top amb les seves seccions a dintre. Les seccions són una part superior que anomenarem "cap", una intermitja que anomenarem "barra", i una altra inferior per al contingut, que anomenarem "diapositiva" (perque estic parlant del treball web últim que vaig fer, i aqui hi va una diapositiva), aixì que ara nomès cal posar aquests IDs als DIVS interns, de la següent manera.



<div id="top">
      <div id="cap"></div>
     <div id="barra"></div>
     <div id="diapositiva"></div>
   
</div>

I tot això ès tan sols la capçalera, ara crearem una altre Div anomenat Contingut, que anirà a sota de la capçalera. Aquest Div és on hi va doncs, el contingut ( no cal ser un geni eh?), el text que parla de diferents temes, un de com s'està desfent l'Àrtic, una ltre de l'extracciò de petroli a lÀrtic (la pàgina tracta de lÀrtic), un altre sobre els conflictes entre els diferents països per destrossar l'ârtic per interessos propis, un alre sobre la pesca a l'Àrtic i un altre sobre que hi podem fer nosaltres per salvar l'Àrtic.
Aixì doncs crearem el Div Contingut, i hi afegim les diferents seccions tal i com fet amb el top.
 Els IDs que aplicarem serán els següents:

 desfent
petroli
conflicte
pesca
actua


Hauria de quedar aixì:


<div id="contingut">
      <div id="desfent"></div>
     <div id="petroli"></div>
     <div id="conflicte"></div>
     <div id="pesca"></div>
     <div id="actua"></div>
</div>



Ara anirem a la finestra d'estils, on s'haurà creat un estil ID per a cadascùn d'aquests Divs, i hi aplicarem en cadascún la seva imatge de fons de la carpeta img.


Ara, ja acabat el Div "contingut" crearem un Div anomenat "peu" que farà la funciò de peu de pàgina.

I ara crearem un nou Div, que anomenarem "body" i abarcarà tot el body. Ara ho coloquem els Divs "top", "contingut" i "peu" a dintre de "body".

Aixì hauria de quedar

<div id= "body">

   <div id="top">
        <div id="top"></div>
        <div id="top"></div>
        <div id="top"></div>
    </div>
    <div id="contingut">
        <div id="desfent"></div>
        <div id="petroli"></div>
        <div id="conflicte"></div>
        <div id="pesca"></div>
        <div id="actua"></div>
   </div>
   <div id= "peu"></div>
</div>


 Ara podem col·locar imatges on volguem, col·locant-les dintre d'un Div PA, (no Div)

En un altre entrada explicarè el tema del posicionament d'elements web.