Capítulo IV – Maquetando con tamaños fijos

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”)
  • y 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 codigo 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

Banner Primer Template

2- Para el fondo utilizaremos este, es una imagen grande lo cual no es conveniente porque hace pesada su carga, pero vale puesto que el efecto de fondo corteza de árbol queda muy bonito, es algo más a tener en cuenta: sacrificar el diseño por la velocidad de carga o viceversa:


Fondo del template

3- Nuestras viñetas
Viñetas Template

4- El botón buscador
Botón buscador

5- El fondo de la barra de navegación:
Fondo barra de navegación

Una vez que las tengamos todas guardadas en nuestra carpeta “images” -haciendo click con el botón derecho del mouse sobre ellas y eligiendo “Guardar como…”- abriremos el archivo “template.css” que estaba vació y le vamos a incorporar las primeras definiciones pero antes hagamos algunas aclaraciones.

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 V – Al fin Maquetando

Compartelo con tus seguidores
  •  
  •  
  •  
  •  
  •  
  •  

Comments

  1. Allen

    de donde descargo el archivo html modificado al cual haces referencia??. Gracias¡¡¡

  2. Allen

    Donde esta el archivo html?
    el link del archivo html modificado??

  3. redlo

    Sigue leyendo
    En los capitulos siguientes tienes el link para descargar la plantilla

  4. alvin

    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]).

  5. oscarmgg

    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

  6. pic21

    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

  7. Udyses

    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

  8. lorenzo

    Capitulo 8
    El enlace “Aqui” estaba equivocado. Empezar desde el capitulo 8 > [url]http://www.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]

Deja un comentario