9 febrero 2010 in XHTML/CSS by dacho

Bueno esta si es la ultima leccion de nuestro tutorial basico de HTML y CSS, si bien la continuare, lo que haremos sera agragar algunos detalles a la pagina en la proxima leccion, pero ahora continuamos creando nuestra pagina de ejemplo!

La habíamos dejado de esta forma:

<html>
 
<head>
<title>Ejemplo pagina web</title>
 
<style type="text/css">
body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;}
#cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px;}
/*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/
 
#contenido{ width: 500px; float: left; margin-bottom: 70px;}
#contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
#contenido h2 span{  color: #a7a7a7;   } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/
#contenido p{font-size: 13px;}       
 
#menu{ width: 180px; float: left; text-transform: uppercase}    
 
#fotos {width: 370px;}
#fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver;  }
/*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/
 
#pie{ clear: both;  height: 296px;}
#pie h2{ font-size: 18px; color: #464545; font-weight: normal }
#pie h2 span{  color: #a7a7a7;   }
#pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
 
div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
#menu ul li a:hover{ color: #e93700 }
#menu ul{ margin:0; padding-left:80px; }
#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}
 
</style>
</head>
 
<body>
 
<div id="cont">
 
<div id="encabezado">
<h1>Dacho Fotografias</h1>
<h2>Portafolio Personal</h2>
</div>
 
 
<div id="contenido">
 
<h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2>
<p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p>
<p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos años, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p>
</div>
 
 
<div id="menu">
 
<h3>Menu</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Paisajes</a></li>
<li><a href="#">Animales</a></li>
<li><a href="#">Gente</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
 
 
<div id="pie">
<h2>ULTIMAS <span>fotografias tomadas</span></h2>
<div id="fotos">
<div id="foto1">Fotografia 1</div>
<div id="foto2">Fotografia 2</div>
<div id="foto3">Fotografia 3</div>
<div id="foto4">Fotografia 4</div>
<div id="foto5">Fotografia 5</div>
<div id="foto6">Fotografia 6</div>
</div>
 
 
<p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div>
</div>
</body>
</html>

Para poder continuar es necesario que te descargues las imagenes de la web: Descargar
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!

Poner imagen en el titulo de la pagina

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:

  1. Colocar una imagen de background y esta imagen no so tiene que repetir
  2. Una vez colocada esta imagen correctamente tenemos que ocultar el texto del div
Colocando la imagen de fondo en el encabezado

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; Le 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? prueben y veran!)

El codigo quedaria asi:

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

Bueno 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.

Si quieren saber un poco mas de image-replacement pueden ver en este enlace: reemplazo de texto por imagenes

Colocando camara de fondo en la parte derecha inferior de la web

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 codigo que debemos agregar al ya existente seria:

background: url(Images/camara.jpg) no-repeat; background-position: bottom right;
background ya vimos que hace unos parrafos mas arriba, 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;}

Si probamos como va quedando la pagina veremos que ya va tomando otra forma :) …

Por ultimo nos queda colocar todas las imagenes (las 6 en realidad) que deben aparecer en los lugares que ahora estan en gris:

Colocando las imagenes en los lugares grises

Bueno para facilitar que imagen va en que lugar he llamado a las imagenes de una forma que no se pueden confundir, esto es fotoX_n y fotoX_c, resalto la X porque es una variable que va de 1 a 6, es un criterio para seguir en los nombres de las fotografias y el _n o _c nos indica si la fotografia esta en negro o si es color.

Una vez interpretado esto vemos la estructura html de esos 6 elementos grises que es esta:

<div id="fotos">
<div id="foto1">Fotografia 1</div>
<div id="foto2">Fotografia 2</div>
<div id="foto3">Fotografia 3</div>
<div id="foto4">Fotografia 4</div>
<div id="foto5">Fotografia 5</div>
<div id="foto6">Fotografia 6</div>
</div>

Una vez repasado cual es el codigo ahora lo que haremos sera nuevamente reemplazar texto por imagenes!, como lo hacemos? sobre cada div con id fotoX (con como x una variable) ponemos la siguientes propiedades de CSS:

div#fotoX{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/fotoX_n) no-repat; }

Es decir que tendremos que agregar todos este codigo 6 veces cambiando X por el numero que corresponda, quedaria asi:

div#foto1{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto1_n.jpg) no-repeat; }
div#foto2{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto2_n.jpg) no-repeat; }
div#foto3{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto3_n.jpg) no-repeat; }
div#foto4{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto4_n.jpg) no-repeat; }
div#foto5{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto5_n.jpg) no-repeat; }
div#foto6{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto6_n.jpg) no-repeat; }

Bueno pueden ver que colocando este codigo la pagina queda igual o muy parecida a la de la imagen al principio de la leccion para crear una pagina web, algunos ajustes se pueden hacer para que quede mejor!….

El codigo final de nuestro ejemplo es:

<html>
 
<head>
<title>Ejemplo pagina web</title>
 
<style type="text/css">
body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;}
#cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
#encabezado{ height: 32px; margin-bottom: 40px; width: 693px; background: url(Images/titulo.jpg) no-repeat; overflow: hidden; text-indent: -9999%; display: block;} 
 
#contenido{ width: 500px; float: left; margin-bottom: 70px;}
#contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
#contenido h2 span{  color: #a7a7a7;   } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/
#contenido p{font-size: 13px;}       
 
#menu{ width: 180px; float: left; text-transform: uppercase}    
 
#fotos {width: 370px;}
#fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px;   }
div#foto1{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto1_n.jpg) no-repeat; }
div#foto2{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto2_n.jpg) no-repeat; }
div#foto3{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto3_n.jpg) no-repeat; }
div#foto4{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto4_n.jpg) no-repeat; }
div#foto5{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto5_n.jpg) no-repeat; }
div#foto6{ overflow: hidden; display: block; text-indent: -999%; background: url(Images/foto6_n.jpg) no-repeat; }
/*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/
 
#pie{ clear: both;  height: 296px; background: url(Images/camara.jpg) no-repeat; background-position: bottom right;}
#pie h2{ font-size: 18px; color: #464545; font-weight: normal }
#pie h2 span{  color: #a7a7a7;   }
#pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
 
div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
#menu ul li a:hover{ color: #e93700 }
#menu ul{ margin:0; padding-left:80px; }
#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}
 
</style>
</head>
 
<body>
 
<div id="cont">
 
<div id="encabezado">
<h1>Dacho Fotografias</h1>
<h2>Portafolio Personal</h2>
</div>
 
 
<div id="contenido">
 
<h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2>
<p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p>
<p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos años, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p>
</div>
 
 
<div id="menu">
 
<h3>Menu</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Paisajes</a></li>
<li><a href="#">Animales</a></li>
<li><a href="#">Gente</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
 
 
<div id="pie">
<h2>ULTIMAS <span>fotografias tomadas</span></h2>
<div id="fotos">
<div id="foto1">Fotografia 1</div>
<div id="foto2">Fotografia 2</div>
<div id="foto3">Fotografia 3</div>
<div id="foto4">Fotografia 4</div>
<div id="foto5">Fotografia 5</div>
<div id="foto6">Fotografia 6</div>
</div>
 
 
<p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div>
</div>
</body>
</html>

Ademas vamos a agregar una cosita para que quede mas linda, esto es vamos a hacer por medio de CSS que la imagen de las fotografias se pongan en color cuando le pasamos el mouse por encima… Y haremos que el menu cambie de color cuando le pasamos el mouse por encima, pero eso en la proxima leccion! Hasta aqui llego el tutor basico de HTML y CSS, comenzaremos con cosas mas avanzadas en la proxima entrega, donde utilizaremos los eventos de css, combinados con cambio de texto por imagenes para lograr menues con efectos, y veremos como maquetar otras estructuras, nos meteremos mas de fonde en como funcionan y que parametros tiene cada propiedad de HTML y de CSS… En fin todavia queda mucho por aprender, pero estoy seguro de algo….

Con todos los elementos que adquiriste durante el tutor basico ya estas en condiciones de seguir solo, googleando como hacer tal cosa o tal otra, o posteando en este blog para que te explique dudas o cosas que por ahi necesitas para crear tus webs!…

En fin Diseñar webs se aprende solo con mucha practica, asi que A PRACTICAR!!!!!

>> Volver al Indice de Contenido <<

Entradas Relacionadas: