Al fin… maquetando!!! – Capítulo 5

Capitulo I – Realizar plantillas para Joomla

Capitulo II – Armando los DIV´s

Capitulo III – Empezando el Template

Capítulo IV – Maquetando con tamaños fijos

1.- El cuerpo o “body” de nuestra web

Agregaremos al archivo “template.css” lo siguiente:

body {
background : url('/master/../images/fondo.jpg') repeat;

font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #666666;

margin : 20px 0px 20px 0px;

text-align: center;

}

Explicación:
Línea 1: identificamos en este caso el selector, o sea “body”
Línea 2: le indicamos cuál va a ser la imagen de fondo de nuestra web y que la repita.
Línea 3: le decimos el tamaño y tipo de fuente que usaremos en todo el contenido
Línea 4: le damos el color de la fuente
Línea 5: indicamos el margen de los textos en pixeles. Verán que son cuatro números con el sufijo px (unidad de medida píxeles). Estos números se refieren a las medidas de margen en este orden: margen superior, margen derecho, margen inferior, margen derecho. (Tip: imaginemos siguiendo las agujas de un reloj empezando de las 12 horas.)
Linea 6: esta propiedad se utiliza para centrar texto pero como en nuestro caso el texto va a estar dentro de un contenedor, lo que el navegador hace es centrar este contenedor. En la jerga a esto se lo denomina truco CSS o tip CSS.

2.- Maquetando el primer contenedor

El borde de nuestra web. Para que tengan una idea, tanto este div como el llamado “contenedor” serían algo así como cajas o rectángulos. Agregamos el siguiente código dentro del archivo CSS:

#borde{
border: 2px solid #CCCCCC;

text-align: left;

width: 700px;

margin: auto;

}

Explicación:
Linea 1: identificamos el div con su nombre
Línea 2: le decimos que va a tener un borde de 2 pixeles, que va a ser de tipo sólido (en vez de “solid” podríamos usar “hidden”, “doted”, “dashed”, “double”, “ridge”, “inset”, “outset”, experimenten cada uno y elijan el que más le guste, inclusive cambiándole los pixeles de ancho).
Linea 3: le decimos que el texto va a estar alineado a la izquierda.
Línea 4: le decimos el ancho del contenedor o caja, que debe ser igual al ancho del banner.
Línea 5: que tome el margen automáticamente según sea lo que contenga. Es decir que estará rodeando el contenido ajustadamente. Si aquí por ejemplo le ponemos un margen de 2px verán que el borde se separa en todo el contorno en esa cantidad de pixeles.

Observen que el nombre del identificador empieza con el signo de cardinal, #, esto es un símbolo inequívoco dentro de la hoja de estilo y hay que respetarlo. Además todos los atributos de este identificador se deben escribir dentro de corchetes, ambas son cuestiones de la semántica de CSS que corresponden al estandard definido por la W3C.

A su vez, el selector simplemente se menciona como es, sin ningún carácter adelante.

3.- El segundo contenedor

Agregaremos este código a nuestro archivo CSS:

#contenedor{
text-align: left;

width: 700px;

background-color : #ffffff;

margin: auto;

border: 2px groove green;

}

Explicación:
Línea 1: identificamos el div con su nombre
Línea 2: alineamos el texto que contenga a la izquierda
Línea 3: especificamos el ancho en pixeles, que debe ser igual o menor que el “border” o que el banner
Línea 4: Le damos un color de fondo, en este caso blanco
Línea 5: dejamos el margen en automático para que el contenido tome todo el ancho del div.
Línea 6: le damos un borde especial

Observen que también cabe la posibilidad de eliminar el div “border” y solamente utilizar el div “contenedor” lo cual es perfectamente válido. Solo que al diferenciarlos le damos un mejor aspecto a nuestra web porque podemos cambiarles sus bordes, sus margenes y demás atributos a cada contenedor.

4.- La cabecera o “header”

El “header”, como su traducción al castellano lo indica (si lo prefieren usen el término “cabecera”), se refiere a la parte superior de nuestra web. Lo más común es que aquí se inserte una imagen o logo que nos identifique y también es común que esa imagen reciba el nombre en inglés de “banner”. También es común que para darle “animación” a la web se agregue un archivo flash. En otros casos se incorpora un javascript para que ese “banner” sea “rotado”, vaya cambiando de imagen cada cierto intervalo de tiempo lo que le da un aspecto muy bueno. A esto último se lo denomina con el término ingles “banner rotator” (rotador de imagenes).

Agregar el siguiente código al archivo CSS:

#header{
background: url('/master/../images/banner.jpg') no-repeat;

height : 100px;

width: 700px;

}

5.- La barra de navegación

Agregamos el siguiente código:

#navegador{
background : url('/master/../images/fondonav.gif');

padding : 3px 10px 5px 10px;

border-top : 1px solid #cccccc;

border-bottom : 1px solid #cccccc;

}

6.- Los enlaces o links

Agregaremos el siguiente código:

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}

A.enlacenav:HOVER{

color: #3F7DE3;

}

En la primer definición le decimos que tanto para enlaces sin visitar como visitados, activos o enfocados vamos a usar ese color.

7.- El cuerpo del template

Agregamos el siguiente código:

#cuerpo{
width:480px;

margin-left: 8px;

padding: 12px 0px 10px 0px;

background-color : #ffffff;

float:left;

}