Maquetando con tamaños fijos – Capítulo 4

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

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

9 comentarios en «Maquetando con tamaños fijos – Capítulo 4»

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

  2. 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

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

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad