Imagina que tu plantilla es la casa que vas a construir
Hagamos un ejercicio de imaginación, construyámonos nuestra casa, con jardín, salón amplio, cocina, habitaciones, etc. El primer paso que haremos será dibujarla en un plano.
Resumiendo tenemos una
Casa formada por:
jardín
salón
habitación 1
habitación 2
cocina
Hemos hecho las divisiones de nuestra casa, sigamos ahora con el ejercicio de imaginación, vamos a modificar los nombres
Nuestra casa se llamara body
jardin ► header-wrapper
salon ► main-wrapper
habitación 1 ► sidebar-wrapper 1
habitación 2 ► sidebar-wrapper 2
cocina ► footer-wrapper
Representemos eso en términos que los navegadores puedan entender. Como son divisiones como tal las definiremos, con una particularidad, toda división que se abre debe cerrarse para que pueda actuar como tal.
Así que tendremos
una casa ► <body>
y dentro de la casa las divisiones con sus ID o nombres que son exclusivos
jardin ► <div id='header-wrapper'></div>
salon ► <div id='main-wrapper'></div>
habitación 1 ► <div id='sidebar-wrapper 1'></div>
habitación 2 ► <div id='sidebar-wrapper 2'></div>
cocina ► <div id='footer-wrapper'></div>
se acaba la casa ► </body>
Ahora sin explicación
<body>
<div id='header-wrapper'></div>
<div id='main-wrapper'></div>
<div id='sidebar-wrapper 1'></div>
<div id='sidebar-wrapper 2'></div>
<div id='footer-wrapper'></div>
</body>
¿No se parece esto a algo conocido que os da mucho respeto?
Pero solo tengo la casa con divisiones y quiero que mi jardín tenga piscina, que mi salón tenga chimenea, que las habitaciones tengan armarios y en mi cocina quiero un hermoso frigorífico.
casa formada por:
jardín con piscina
salón con chimenea
habitación 1 con armario
habitación 2 con armario
cocina con frigorífico
Volvamos a la imaginación y cambiamos los nombres, estos ahora ya no serán exclusivos así que no serán ID sino clases
casa ► body
jardín con piscina ► header-wrapper con header
salón con chimenea ► main-wrapper con main
habitación 1 con armario ► sidebar-wrapper 1 con sidebar
habitación 2 con armario ► sidebar-wrapper 2 con sidebar
cocina con frigorífico ► footer-wrapper 1 con footer
Como estos nuevos aportes van dentro de las divisiones les llamaremos secciones, así que obtenemos
<body>
<div id='header-wrapper'>
<b:section class='header' id='header'>
</b:section>
</div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main'>
</b:section>
</div>
<div id='sidebar-wrapper 1'>
<b:section class='sidebar' id='sidebar1'>
</b:section>
</div>
<div id='sidebar-wrapper 2'>
<b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
</div>
</body>
Pues esto se va pareciendo cada vez más a mi plantilla.
Pero tendremos que rellenar algunas cosas de esas secciones, digo yo ¿no?, la piscina habrá que meterle agua, a la chimenea, leña, a los armarios unas baldas por lo menos y al frigorífico me niego que no le metamos unas cervecitas.
Como a estas alturas ya sabéis cual es el ejercicio de imaginación pasemos directamente a ver como quedaría
<body>
<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper 1'>
<b:section class='sidebar' id='sidebar1'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sidebar-wrapper 2'>
<b:section class='sidebar' id='sidebar2'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
</body>
Ahora si que se parece casi del todo, como sabréis podemos "rellenar" cada cosa con los elementos que queramos.
Hasta aquí tenemos una casa con sus divisiones, algunas secciones y cosas dentro de esas secciones, ¿pero como quiero que todo esto quede?, ¿con que color?, ¿que tamaño?...eso lo veremos en otra entrada.
