17 enero 2010 in XHTML/CSS by dacho

votar
Share

Bueno he vuelto con la ultima leccion del curso, esta sin duda es la leccion mas importante, porque es donde veran aplicados la mayoria de los conocimientos del curso y quizas algunas cosas mas que ire explicando cuanod haga falta.

Vamos a crear una pagina con la siguiente pinta:

Bueno manos a la obra :-)

El home

Lo primero que vamos a hacer es la pagina principal, y para comenzar vamos a crear la estructura de la pagina que en este caso sera esta:

Por lo que la estructura HTML por ejemplo podria ser asi ya con la informacion cargada:

<html>
 
<head>
	<title>Ejemplo pagina web</title>
</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>Home</a></li>
		<li><a>Paisajes</a></li>
		<li><a>Animales</a></li>
		<li><a>Gente</a></li>
		<li><a>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>

¿Porque la pagina tiene esta estructura?¿Es la unica?

Bueno la pagina tiene esta estructura de HTML porque es la que se me ocurrio a mi, eso no quiere decir que sea la unica forma ni tampoco la mejor, simplemente es una buena estructura que me permitira obtener lo que se ve en la primera imagen, como siempre te invito a que la pruebes y la veas sin nada de CSS porque despues de eso empezaremos a darle el formato correspondiente!…

Centrando la pagina y colocando un ancho fijo

Bueno lo siguiente para que valla quedando con forma es centrar la pagina web y darle un ancho. Como verán toda la pagina web esta rodeada con un div que posee el id=”cont” este div nos servira para:

  1. Centrar la Pagina
  2. Colocarle el Ancho fijo!

Bueno para centrar la pagina lo primero que tenemos que hacer es decirle a los exploradores que la pagina tiene un ancho fijo y que ademas ese ancho es mas chico que la pantalla. es decir en este caso el ancho fijo sera de 693 pixeles, y si te preguntas ¿como centrar una pagina de por ejemplo 1200px de ancho para un monitor de 1024 pixeles de ancho? Pues la respuesta es obvia, pues la pagina es ams ancha que el monitor y lo que pasara es que se pondra el scoll horizontal en el navegador y centrar una pagina mas grande que la pantalla carece de sentido en el 99% de los casos.

Bueno una vez que le decimos que la pagina tiene 693px de ancho le tenemos que decir que se centre, esto se logra con la propiedad margin de el elemento #cont. Y ademas para arreglar el problema de internet explorer 6 agregaremos al body un text-align: center para que lo centre y a el elementeo #cont un text-align: left para que los textos no queden todos centrados!

En limpio el archivo quedaria:

<html>
 
<head>
	<title>Ejemplo pagina web</title>
 
	<style type="text/css">
	    body{ text-align: center; }    
	    #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left; } 
	</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>Home</a></li>
		<li><a>Paisajes</a></li>
		<li><a>Animales</a></li>
		<li><a>Gente</a></li>
		<li><a>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>

A partir de este momento todos los cambios que haremos seran para lo que se encuentra entre en la pagina por lo que no volvere a incluir todo el html, sino que colocare el css correspondiente!

Cada cosa en su lugar

Seguimos dando el formato a la pagina ahora estructuraremos cada cosa en su lugar con la forma que vimos en la imagen de colores mas arriba: Esto se logra basicamente utilizando las siguientes propiedades:

  • Width
  • Margin
  • Float
  • Clear
  • Height
  • Padding
   body{ text-align: center; }
 
   #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
   #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;}
   #contenido{ width: 500px; float: left; margin-bottom: 70px;}
   #menu{ width: 180px; float: left; text-transform: uppercase}	
   #pie{ clear: both;  height: 296px;}

Como se ve ahora la cosa empieza a toma forma como aclaraciones la propiedad text-transform: uppercase de css hace que el texto se vea todo en letra mayuscula.

Elijiendo colores, tipografias y tamaños de letras

El siguiente paso es elegir el todo lo nombrado en el subtitulo anterior, la tipografia elegida para toda la web es Tahoma, por lo que al elemento body (que es toda la pagina web) le asignamos esa tipografia por medio de font-family: Tahoma; y ya que esta elegimos otras tipografias en caso de que esa no este incluida en el sistema operativo del usuario por lo que quedaria font-family: Tahoma, Arial, Geneva, sans-serif;

Tambien casi todo el texto de la web tendra el color #797979 por lo que asignaremos al body la propiedad color: #797979

Con respecto a los tamaños les asignaremos a cada elemento en particular el que corresponda, lo podran ver en el codigo (es la propiedad font-size), no pongo la lista porque es algo extensa y no tiene sentido porque nos tenemos que ir acostumbrando a leer el css, entonces el css con todos los cambios quedaria asi:

   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}	
 
   #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;}

Bueno Ya tenemos armada la estructura basica de la pagina y ahora nos queda por hacer:

  • Dar estilo al menu!
  • Colocar imagenes en donde estan los divs de fotografias
  • Reemplazar texto por imagenes en el encabezado
  • colocar un background en el pie de pagina!

Debido a que la leccion se esta extendiendo demasiado vamos a darle formatos a los divs que contendran las imagenes y dejaremos todo lo otro para la siguiente leccion!

Bueno la estructura que tiene las fotografias que estan en el pie de pagina es la siguiente

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

Por lo que para que cada div se ponga uno al lado del otro le colocaremos la propiedad Float: left; y ademas como las imagenes tendran un tamaño de 100px de ancho por 69px de alto, esos seran los valores del las propiedades width y height. Por otra parte estaran separados por un margen de 10px superior, 9px a la derecha, 15px inferior y 9px a la izquiera, por lo que la propiedad margin para cada elemento sera margin: 10px 9px 15px 9px; . Y ademas como queremos que se muestren 2 filas por 3 columnas el contenedor con id=”fotos” tendra un width que supere los 100*3 + 9*3*3 px esto es 100 de cada width asignado a cada elemento y 9 por cada margen izquierdo de cada y elemento y 9 por cada margen derecho de cada elemento. En total puede tener un ancho de 360px. Por lo que id=”fotos” quedaria con un width: 370px; Si te quedan dudas de todo esto comenta y lo aclaro mas!

En fin de todo esto quedaria mas o menos asi el 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;}

Bueno dejamos los otros tres puntos para la siguiente leccion en donde veremos como reemplazar texto con imagenes sin perder semantica web, mejorar el menu y los colores de los enlaces y por ultimo colocar fondos a los elementos que hagan falta.

La web en este momento se deberia ver mas o menos de esta forma:

Nos vemos!

Siguiente Lección >>

>> Indice de Contenido <<

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?