En la imagen anterior de nuestro proyecto podemos observar que están definidos distintos sectores o divs, a saber:
- Un “header” o cabecera donde está la imagen con el logo de Joomla.
- Una barra de navegación con el menú
- Una barra lateral a la derecha dividida a su vez en tres sectores
- Un cuerpo de contenido donde está el texto titulado “Template Joomla”, que a su vez tiene otro sector con una barra de navegación inferior (“Volver-Inicio-Mapa del sitio”)
- Un pie donde dice “Mi primer template Joomla…”.
Dados estos sectores, modifiquemos primeramente nuestro “index.html” para que quede de la siguiente forma: (ver el código desde aquí) Vamos a ir viendo cada uno de los divs, pero expliquemos primero sus usos. Recordemos que un div empieza con el tag o etiqueta “
” y termina con “”.