pasar de psd a html y css

Con este último post de la serie aprenderemos a maquetar el pie de página y con ello tendremos nuestro psd convertido en un html y  css completamente.

Hasta ahora hemos resuelto las siguientes cuestiones:

  1. Qué es un wireframe.
  2. Cómo organizar tu proyecto web.
  3. Recortar y optimizar imágenes para web.
  4. Maquetar un menú con listas.
  5. Añadir fondo de imagen, de repetición o individual.
  6. Incluir vídeos en tu página web, de Youtube o Vimeo.
  7. Crear columnas.

Pues bien, en el pie de página haremos más de lo mismo, poco es nuevo. Tan solo una particularidad, este div ocupa el 100 por 100 de la página, el color de fondo (tanto el gris como el negro) va de un extremo al otro de la página.

Esto significa que tenemos que sacar el div que contiene el pie de página fuera del contenedor global, ya que el pie de página ocupa 930px de ancho y está alineado en el centro de la pantalla. Lo situamos antes del cierre de la etiqueta </body>.

El <div id=”pie”> tendrá un ancho del 100% y dentro de este div habrá otro que aloja el contenido real del pie. A este div lo llamamos <div class=”contenedor_pie”>. El código que lo estructura de manera general es el siguiente:

Observamos que dentro de <div id=”pie”> se alojan dos divs: “barra_top” y “barra_bottom“. Estos divs corresponden a la banda gris y a la banda negra respectivamente y seguirán ocupando el 100% del ancho de pantalla, porque a cada uno le daremos un color de fondo diferente.

pasar de PSD a HTML y CSS | maquetar el pie de página

Ahora bien, dentro de cada uno de ellos es donde nos encontramos con el <div class=”contenedor_pie”>. Es es este mismo el que va a tener un ancho de 930 px y estará alineado en el centro de la página porque es quien va a alojar el contenido real del pie de página.

pasar de PSD a HTML y CSS | maquetar el pie de página

Para seguir viendo el proceso veamos qué estilos corresponden a esta estructura html.

Maquetamos el contenido del pie de página que estará dentro del div “contenedor_pie“. Como hemos dicho al comienzo del post, no vamos a ver nada nuevo hasta ahora así que pego el código directamente que pertenece al <div id=”barra_top”>:

Fíjate que he aplicado dos listas. Una para el menú de navegación y otra para le menú que conforman los botones de las redes sociales. Ahora vamos a maquetar el siguiente div: <div id=”barra_bottom”>:

Por último, los estilos CSS:

Después de maquetar el pie de página hemos cumplido con el objetivo de la serie pasar de PSD a HTML y CSS, maquetar el “Home” o la página de “Inicio”. Puedes ver la demo aquí.

Lógicamente, ahora tendríamos que maquetar el resto de páginas que están en el menú para completar el proyecto web. El procedimiento sería el mismo que hasta ahora y enlazando todas las páginas en el menú, tanto el de la cabecera como el del pie de página, tendríamos finalizada nuestra página web.

Por supuesto, puedes practicar con el código descargándotelo aquí. ¡Buena suerte y hasta el próximo post! 😀


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

 

Hacer Comentario

Su dirección de correo electrónico no será publicada.