Capítulo VI - Terminando la maqueta - Extensiones, Templates y Tutoriales en español | Extensiones, Templates y Tutoriales en español

Capítulo VI - Terminando la maqueta

REVISANDO OTROS CAPITULOS

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

Capítulo V - Al fin... maquetando!!!

8- Formato a los títulos
Agregamos lo siguiente:

h1{
font-size: 12pt;
}

Aquí le indicamos al navegador que todos los títulos -“h1” es el selector de títulos- van a tener un tamaño de 12 puntos.

9- Barra de navegación inferior
Corresponde a la barra de navegación dentro del cuerpo del template, agreguen lo siguiente:

#navabajo{
font-weight : bold;
}

En el código, simplemente le decimos que va a tener el texto en negrita.

10- Barra lateral derecha
El código CSS de la barra lateral es el siguiente:

#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}

Explicación:

Línea 1: indicamos el nombre del identificador
Línea 2: le decimos el ancho que va a tener
Línea 3: le damos un color de fondo
Línea 4 y 5 le damos un borde inferior e izquierdo, ya que el superior ya está dado cuando definimos la barra de navegación.
Línea 6: le decimos que “flote” a la derecha, es decir, se posicione siempre a la derecha.

Observen que el div “cuerpo” tiene 480px y la barra lateral tiene 200px. Si hacemos la suma nos va a dar un total de 680px. A su vez hicimos que el div “cuerpo” flote a la izquierda y la barra lateral que flote a la “derecha” dentro del contenedor. Esto significa que entre ambos sectores va a quedar un espacio de 20px vacío. Con esto hacemos una separación para que no se superpongan los divs y queden perfectamente separados.

11- Las “clases” de la barra lateral
Hasta ahora hemos utilizado para codificar nuestro CSS solamente identificadores de etiquetas ID y selectores del html, ahora usaremos clases. ¿Cual es la diferencia? Los identificadores deben ser únicos, no se pueden repetir dentro del código html, no podemos tener dos divs con el mismo nombre de identificador, por ejemplo no puede haber dos divs con el nombre “cuerpo”. En cambio las “clases” se pueden repetir tantas veces como queramos, son reutilizables dentro del código html, otra característica más que nos da idea de la potencia de CSS.

Resumiendo:

Los selectores se los codifica usando su nombre, ejm.: body, a, h1, button, etc.
Los identificadores se los codifica usando cualquier nombre pero anteponiendo el signo cardinal # y NO SE PUEDEN REPETIR DENTRO DEL HTML
Las clases se codifican usando cualquier nombre pero anteponiendo un punto “.” y SE PUEDEN USAR MÁS DE UNA VEZ dentro del código html.

La clase (título lateral) titlat viene a ser la clase que identifica los títulos de la barra lateral y la codificamos de la siguiente forma:

.titlat{
background-color:#000080;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}

Explicación:
Línea 1: Identificamos la clase con su nombre
Línea 2: le damos un color de fondo
Línea 3: le damos un color a los textos
Línea 4: le damos un tamaño de letra
Línea 5: usamos una transformación, esto es, que por más que en el html esté en minúscula CSS lo convierta a mayúsculas.
Línea 6: le damos un espacio, una ubicación, como vimos en ejemplos anteriores. Estos nos permite “centrar” el título dentro del div.
Línea 7: weight traducido significa peso, en CSS se refiere al grosor de la fuente. En este caso es “normal” pero podría ser “bold” (negrita), “bolder”, “lighter”, o dándole un porcentaje de grosor.
Línea 8: aquí le indicamos que cada letra va a estar separada de la otra en 2 pixeles.
Línea 9: le damos un margen con respecto al div como vimos en otros códigos anteriores.

Agregaremos también este código:

.cuerpolateral{
padding: 5px 4px 13px 10px;
}

Este código nos sirve para darle ubicación a cada uno de los divs que están dentro de la barra lateral. Si observan el código html verán que cada div a su vez está identificado de forma inequívoca pero a su vez modificado con esta clase. Imagínense toda la personalización que podemos hacer de cada div, por eso les repito, jueguen, modifiquen el CSS, por ejemplo prueben codificar el id “registro”, más abajo verán el “fbuscar”.

12- Codificando el buscador
Vamos a ir agregando los siguientes códigos para darle formato al buscador, empezamos por el selector “input”:

INPUT {
font-size : 8pt;
}

Con esto le decimos que el texto que se ingrese en el campo tenga una fuente de 8 puntos de tamaño.

Continuamos agregando éste código (Noten aquí que en el código html el div “fbuscar” a su vez está modificado por la clase “cuerpolateral”).

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

Le damos al formulario del div “fbuscar” un margen de 0px. ¿Por qué? Esto lo hacemos porque de lo contrario los navegadores, por defecto, nos dejarán un espacio antes y otro después del formulario.

#campotexto{
float: left;
}

Le decimos que flote los textos a la izquierda.

#campotexto input{
width:100px;
}

Limitamos el ancho del campo input a 100px.

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

Le damos al botón buscar un entorno de ubicación.

#botonbuscar input{
border : 0px none;
}

Le decimos que el botón buscar no va a tener borde, de lo contrario, también por defecto aparecerá un borde (según el navegador).

.radio{
clear:both;
}

Esta simple clase hará que las opciones de buscar estén una debajo de la otra. Esta propiedad se utiliza cuando se flotan elementos dentro de un div y lo que hace es permitir o no elementos a su lado. Puede tomar 4 valores distintos: un valor left moverá el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, nuestro caso, que mueve el elemento debajo de los elementos flotantes a ambos lados. La propiedad clear es muy utilizada cuando combinamos páginas webs de ancho fijo con secciones dinámicas como veremos más adelante.

13- Codificando “Otras Secciones”

Agregamos los códigos que siguen pero no les doy explicaciones así deducen por su propia cuenta el por qué de cada una de las propiedades asignadas.

#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

#otras li{
padding-left: 35px;
background: transparent url(../images/bullet.gif) 0 2px no-repeat;
margin-bottom: 10px;
}

14- El código del pié de página
Agregamos lo siguiente:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Deduzcan uds. la función de cada línea de código.

Con esto, ya podemos probar nuestra plantilla y se debería ver cómo la imagen que puse en el capítulo III. Cabe decir que esta plantilla es solamente una plantilla web “común y corriente” pero en los capítulos siguientes la modificaremos y le daremos el formato para Joomla! que es a lo que apuntamos.

Lo que podemos hacer para finalizar esta parte del tutorial es validar nuestro archivo css en la W3C, para ello vayan a su web y súbanlo.

Resumiendo: con lo que vimos hasta ahora ya estas capacitado para maquetar una web en html utilizando hojas de estilo. Si quieres profundizar bajate algún manual CSS y estúdialo y asómbrate de lo que puedes llegar a hacer. Si te han quedado dudas, quieres sugerir algo, o si encontraste algún error en la transcripción, por favor, dejá tus comentarios. Muchas gracias!

Capítulo VII – Pasando nuestra plantilla a Joomla – Introducción

Tags: