Creando una web, ejemplo con div y css. 1ª Parte

Por Bernardo
22 febrero, 2011 - 0:52

Categoría : CSS, Diseño Web, Webmaster
Etiquetas : , , ,

Comentarios : Comentarios cerrados

Artículos Relacionados


Vamos a crear la siguiente web desde cero. Partimos de una página sin aplicar estilos y le iremos dando forma hasta conseguir el diseño que tenemos abajo.

Lo primero que hacemos es crear la página principal, para comenzar creamos la estructura de de la página que en este caso será:

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>Salamanca 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.guachipedia.com">guachipedia.com</a></p>
 </div>
 </div>
</body>
</html>

Pichar aquí para ver la página.

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

Centramos la página y colocamos un ancho fijo:

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

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 mas ancha que el monitor y lo que pasara es que se pondrá el scoll horizontal en el navegador y centrar una pagina mas grande que la pantalla carece de sentido en el 99% de los casos.

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, veamos el codigo de la hoja de estilos:

<style type="text/css">
body{ text-align: center; }
#cont{ width: 693px; margin: 0 auto 0 auto; text-align: left; }
</style>

Ver resultado en el siguiente enlace: 02-creando-web.html

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 aclaración la propiedad text-transform: uppercase de css hace que el texto se vea todo en letra mayuscula.

Elijiendo colores, tipografías y tamaños de letra

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:


a, 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;}

Hasta aquí tenemos el siguiente aspecto de la web: 03-creando-web.html

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

  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

Continuaré en la próxima entrega

Comentario cerrados