Martes, 25 Abril 2017

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

Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar