CSS Diseño Web Webmaster

Creando una web, 4ª parte, diseñando la cabecera

26 febrero, 2011

Continuamos con el diseño de la web, esta vez vamos a dar modificar la cabecera y el pie de la página

Recordamos los pasos realizados desde el inicio de la web

  1. Colocar imagenes en donde estan los divs de fotografias, dejamos el espacio para ellas
  2. Dar estilo al menú
  3. Reemplazar texto por imagenes en el encabezado
  4. Colocar un background en el pie de pagina
  5. Remplazar los cuadros grises por las imágenes

3. Reemplazar texto por imagenes en el encabezado

Para poder continuar es necesario que te descargues las imagenes de la web:

Descargar imágnes de la web

Para que todo funcione correctamente es necesario que coloques la carpeta Images (que esta comprimida) en la misma ubicacion que esta el archivo html en el que estamos trabajando. Una vez dicho todo esto comencemos.

Ponemos el título como una imagen. Lo que vamos a hacer es un remplazo de texto por imagen (Image Replacement), para poder colocar el logo de nuestra pagina de ejemplo, Si observamos el html vemos que el logo se debe colocar en donde se encuentra el div con id encabezado.

Lo que haremos sera:

3.1. Colocar una imagen de background y esta imagen no se tiene que repetir
3.2. Una vez colocada esta imagen correctamente tenemos que ocultar el texto del div

3.1. Colocar una imagen de background y esta imagen no se tiene que repetir

Para colocar la imagen de fondo trabajaremos sobre el css en el elemento #encabezado y utilizaremos la propiedad background de CSS, el formato es el siguiente:

background:url(Images/titulo.jpg) no-repeat;

Estamos diciendo al CSS que coloque de fonfo la imagen titulo.jpg que se encuentra en la carpeta /Images y no-repeat le dice que la coloque solo una vez! (¿Que pasa si no colocamos no-repeat? prueba y verás)

El codigo quedaria asi:


#encabezado  {
height: 32px;
margin-bottom: 40px;
width: 693px;
background: url(Images/titulo.jpg) no-repeat;
}

3.2 Ocultar el texto del div

Ahora si recargamos la pagina con la modificacion anterior veremos que la imagen se coloca de fondo pero tiene el texto encima, entonces debemos quitarselo. Esto se logra colocando las siguientes propiedades de CSS:

Overflow: hidden; Esto le dira al css que si algo sobrepasa el tamaño del div entonces no agrande el div, sino que es contenido quede oculto
text-indent: -9999%; Esto le dice que corra todo el texto de ese div -9999% el tamaño del div a la izquierda lo que lo obliga a salirse del div y de esta forma no se ve!
display: block; Esto hace que el elemento en cuestion se convierta a un elemento en bloque, en este caso no es necesario, pero si lo hacemos en por ejemplo un enlace entonces si lo es.

Colocando todo esto nos quedaria asi la configuracion de CSS para el elemento div con id encabezado:

#encabezado{
height: 32px;
margin-bottom: 40px;
width: 693px;
background: url(Images/titulo.jpg) no-repeat;
overflow: hidden;
text-indent: -9999%;
display: block;
}

Una vez hecho el cambio en el css pueden verificar que el texto desaparecio (Prueben seleccionarlo si no me creen) y que la imagen titulo.jpg esta de fondo en el encabezado.

4. Colocar un background en el pie de pagina

Colocaremos la imagen camara.jpg de fonde en la parte inferior derecha de la pagina, esto lo podemos hacer colcandola en por ejemplo el div con id pie, lo hacemos por medio de css y con la propiedad background, y background-position nuevamente, solo que no necesitamos correr el texto, porque sino desaparece todo lo que colocamos en el div con id pie.

El código que debemos agregar al ya existente seria:

background: url(Images/camara.jpg) no-repeat;
background-position: bottom right;

Background ya vimos que hace, pero background-position no lo habiamos visto antes, esta propiedad nos sirve para indicarle al css que a la imagen de fondo la ubique abajo (bottom) a la derecha (right), mas adelante veremos mas especificamente como usar background-position, pero por el momento nos alcanza con saber esto (si no lo colocamos, la configuracion por defecto es que aparezca arriba a la izquierda, todo lo contrario a lo que necesitamos). En fin el codigo del div con id pie seria el siguiente:


#pie{
clear: both;
height: 296px;
background: url(Images/camara.jpg) no-repeat;
background-position: bottom right;}

Resumiendo hasta aquí:
Después de la explicación tenemos: 08-creando-web.html
Ya nos queda menos, solamente el último capítulo de esta entrega

También podría gustarte

4 Comentarios

Dejar un Comentario