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 “”.
Si observamos el código vemos que primero hay un div llamado “borde”, este nos servirá para darle un borde a toda nuestra página, es decir, todo lo que esté dentro de las etiquetas “y “” tendrá un borde que especificaremos en nuestro archivo de estilo “template.css”.
Siguiendo la estructura hay otro div llamado “contenedor” el cual “contendrá” toda nuestra página. Luego, dentro de este contenedor estarán todos los demás sectores.
¿Por qué usamos un contenedor? La respuesta es muy simple: De esta forma todo lo que esté dentro del contenedor quedará como un “bloque sólido” que podremos manejar a nuestro antojo. Principalmente para darle una alineación, como veremos más adelante.
Pero vayamos por partes… Tomemos como que nuestro proyecto web va a tener un ancho máximo de 700 pixeles para que pueda ser visualizado en cualquier resolución de monitor y que además se aprecie el fondo de la misma.
Vamos a agregar imágenes a nuestra carpeta “images”, pondremos las siguientes:
1.- Nuestro Banner
Una imagen de 700×100 Pixeles
2.- Para el fondo utilizaremos una imagen de 200 x 400 pixeles
3.- Nuestras viñetas
4.- Boton buscador
5.- Fondo para barra de navegación
Las mismas etiquetas que se usan en el archivo de html se pueden utilizar, es más se deberían utilizar, en el archivo de hojas de estilo.
Técnicamente hablando, cuando las invocamos desde el archivo CSS cambian de nombre y se las denomina “selectores” (haciendo una aproximación teórica sería algo como “selectores del html”) pero además el lenguaje CSS agrega muchísimos selectores más que sería largo enumerar aunque algunos iremos viendo.
En todo esto radica una de las cualidades más importantes de las CCS porque por defecto, al cargarse la web, ésta tomará los “atributos” de las “etiquetas” definidas en los “selectores” del archivo de estilo. ¡¡¡ Genial !!! ¡¡¡ Nos da una flexibilidad máxima!!!.
Capitulo 5 – Al fin Maquetando
de donde descargo el archivo html modificado al cual haces referencia??. Gracias¡¡¡
Donde esta el archivo html?
el link del archivo html modificado??
Sigue leyendo
En los capitulos siguientes tienes el link para descargar la plantilla
Otro que tampoco lo ve
En primer lugar, gracias por todo este ingente esfuerzo.
En segundo lugar, tampoco veo ese enlace, ni aquí ni en los posteriores capítulos. Sí en el PDF… pero es mucho para picar 😉 ¿Lo puedes indicar de una manera más clara?
Muchas gracias por transmitir ese conocimiento (como dices, [i]despiertas vida[/i]).
Aqui
http://solojoomla.com/capitulo-x-el-archivo-templatedetails.xml
donde puedo bajar el archivo index.com modificado
el link del archivo index.html no sirve si alguin puede ayudarme porfa enviamelo a oscarydey2002@hotmail.com
mil gracias
Se sigue sin ver el link
Se sigue sin ver el link del archivo index.html al que se hace referencia.
Tampoco a los archivos de la carpeta images: banner, fondo, viñetas, etc
NO lo veo tampoco
No veo el archivo index.html, ya recorri el tutorial completo y no encontre un link, solo una parte donde se muestra parte del archivo (creo que desde body) no se si copiando esa parte es suficiente.
Gracias por el tutorial y la ayuda
Capitulo 8
El enlace “Aqui” estaba equivocado. Empezar desde el capitulo 8 > [url]http://solojoomla.com/capitulo-viii-la-cabecera-del-archivo-index.html[/url]
[quote name=”Udyses”]No veo el archivo index.html, ya recorri el tutorial completo y no encontre un link, solo una parte donde se muestra parte del archivo (creo que desde body) no se si copiando esa parte es suficiente.
Gracias por el tutorial y la ayuda[/quote]