Viernes, 24 Marzo 2017

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

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!!!

 

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 hs.)
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- El primer contenedor: 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).

Cualesquiera de los métodos que usemos, cada uno tiene su particularidad y su forma de incorporarlo, cada uno tiene sus bemoles, pero eso es motivo de un tutorial aparte. Para empezar usaremos el más sencillo: una imagen estática.


Agregar el siguiente código al archivo CSS:

#header{

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

height : 100px;

width: 700px;

}

Explicación:
Línea 1: identificamos el div con su nombre
Línea 2: indicamos que “header” va a tener un background (fondo) y le damos la ubicación de la imagen (carpeta y nombre del archivo) que tiene que utilizar para tal fin. Los 2 puntos seguidos son indicativos de que tiene que retroceder una carpeta y desde ahí abrir la carpeta “images” y el archivo “banner.jpg”. Explico esto porque muchas veces la falta de estos 2 puntos es causa de error, de que la imagen no se vea. Con el modificador “no-repeat” estamos diciendo que no se debe repetir la imagen. Si obviamos esto último la imagen se repetiría a lo ancho de la página. Igualmente este no es el caso puesto que ya definimos su ancho en 700 pixeles pero si queremos ver cómo se repetiría la imagen saquen el “no-repeat” y aumenten el width (ancho) a 1000 px, por ejemplo, y veánlo en el navegador. Verán que no solo se repite el banner sino que además nos modifica el tamaño del contenedor.
Línea 3: le decimos que va a tener un alto de 100 pixeles, es decir, igual al alto de nuestro banner.
Línea 4: Le indicamos el ancho del div.


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;

}

 

Explicación:
Línea 1: identificamos el div con su nombre
Línea 2: le decimos cual va a ser la imagen de fondo y como no le ponemos ningún modificador ya que por defecto automáticamente se repetirá dentro del div. Noten que la imagen fondonav.gif es pequeña, esto facilita la carga de la página y aprovechamos su repetición automática. Esta técnica es muy utilizada.
Linea 3: le damos el padding. Padding traducido al castellano significa “acolchado”, figurativamente le damos cual va ser el espacio, su contexto. Le decimos que estará ubicado a 3px desde el div anterior, a una distancia de 10px desde el margen derecho, a 5px del div posterior y a 10 px del margen izquierdo. Es similar al “margin” (arriba, derecha, abajo, izquierda).
Línea 4: le decimos que va a tener un borde superior (border-top) de 1px, sólido y aquí, al igual que en la explicación de “border” podemos poner el que más nos guste.
Línea 5: idem anterior para el borde inferior.


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.

En la segunda definición le decimos que al posicionar el mouse arriba tome el color indicado. Hover significa sobre.
La “gestión” de links da mucho para hablar y comentar, pero lo mejor es experimentar. Prueben por ejemplo agregándole una línea con “background-color: #F0FFF0” a la segunda parte y verán efectos muy agradables, jueguen y aprendan, es la mejor forma de asimilar y dejar volar la imaginación. Algunos utilizan aquí imágenes.
TIP: por defecto los navegadores “subrayan” los enlaces, si queremos que esto no suceda deberemos agregar al primer cuerpo “text-decoration: none”.


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;

}

Explicación:
Línea 1: identificamos el DIV con su nombre
Línea 2: le decimos el ancho que va a tener
Línea 3: le indicamos que va a estar a 8 pixeles del borde izquierdo, esto es para que no quede “pegado” al borde.
Línea 4: ubicamos el contenido del cuerpo a 12 pixeles del div anterior, sin dejar espacio a la derecha ni a la izquierda, y a 10 pixeles del div siguiente. Esta distancia última es para separar el cuerpo del pie.
Línea 5: le damos un color de fondo, en este caso blanco.
Línea 6: le decimos que flote dentro del contenedor a la izquierda.
Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Solojoomla, un lugar donde encontrar ayuda para realizar tus proyectos en la red. Con Foro de ayuda gratuita y formularios para contratación de servicios ....

Videos Turtoriales de ayuda Joomla, WordPress, Less, Css...

Portafolio webs Joomla, Wordpress, HTML5..