Maquetación CSS con 960 Grid System, caso real

  • Por
Desarrollo de la maquetación de una web con 960 Grid System, paso a paso y desde cero, a partir de una imagen diseñada con Photoshop. Con vídeotutorial.
Hasta el momento en el Manual de 960 Grid System publicado en DesarrolloWeb.com hemos conocido las generalidades de este framework CSS y hemos aprendido sus clases CSS básicas y las reglas fundamentales para crear los espacios de una web a partir de las cajas disponibles en diversos tamaños. En el ejemplo del artículo anterior, pudimos ver cómo se maquetaría una web con 960 Grid, pero el diseño en pruebas era extra-rudimentario.

Ha llegado el momento de hacer un caso práctico real de maquetación CSS con 960 Grid System, que vamos a abordar en este artículo y los siguientes del manual. En este ejercicio aprenderemos a maquetar un caso real de una web con un aspecto medianamente decente. La web en sí es ficticia, pero tiene todas las características de lo que sería una web real, con una maquetación típica de los blog actuales.

Para ayudar a que las personas a entender el proceso de creación de una web desde cero, hemos apoyado los temas que vamos a tratar con vídeo, en el que veis todo el proceso de creación de los ejemplos, tal como los hemos ido desarrollando para poder escribir luego estos artículos. Es un trabajo doble, porque toca escribir los artículos y luego crear y editar el vídeo, pero merecerá la pena. O al menos eso deseo.

Nota: Puedes encontrar un videotutorial semejante a éste en el que estás, con un diseño en Photoshop y su correspondiente maquetación CSS, pero utilizando un producto distinto que 960gs: Videotutorial del diseño con Photoshop usando la rejilla de Blueprint y también el Videotutorial de la Maquetación con CSS y el framework CSS Blueprint.

Diseño de la web con Photoshop

Lo primero que habría que hacer es diseñar una web. Cada uno puede hacer el diseño que desee, pero para comenzar tenemos la ayuda de unas plantillas que nos proporciona 960 Grid. Para ello debemos descargar el framework CSS y en el archivo ZIP que obtendremos encontraremos en el directorio "templates" los ficheros gráficos en varios formatos para comenzar el diseño ayudados por unas guías, que marcan las columnas que tenemos disponibles. Con estos espacios definidos tenemos una facilidad adicional para hacer una creatividad que funcione luego bien, a la hora de desarrollarla en HTML y CSS. Tenemos plantillas para comenzar el diseño en programas tan populares como Fireworks o Photoshop.

Nosotros hemos realizado el diseño de una web con Photoshop, que vamos a utilizar para hacer esta práctica. Quien domine Photoshop puede que no le interese mucho ver cómo hemos diseñado la web, pero para quien no domine el programa, o para quien quiera ver nuestras costumbres a la hora de diseñar una web, o cómo apoyarse de las plantillas que ofrece 960 Grid System, os recomendamos la lectura de los siguientes artículos, que van también acompañados por vídeos para demostrar y luego explicar lo que vamos haciendo.

El aspecto de nuestra web, que vamos a maquetar con 960 Grid System intentando ser fieles a la imagen conseguida, es el siguiente:

Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop del manual Diseño desde cero"

Maquetación de una web con CSS y 960 Grid System

Ahora que hemos visto la manera de diseñar una web, viene la parte que muchos de los lectores habían pedido: Convertir la imagen de Photoshop en una página web. Lo veremos por pasos, porque la página es suficientemente grande para ocupar varios artículos y vídeos.

En el primer paso, que veremos en este artículo, vamos a crear la cabecera de la página. Para ilustrarlo de manera gráfica he colocado un vídeo al final de este texto, en el que se puede seguir el proceso que hemos realizado para crear la cabecera. Como tenemos el vídeo, comentando cada uno de los pasos, simplemente voy a colocar aquí las explicaciones básicas y el código fuente que hemos creado.

1) Importar las hojas de estilos del Framework:

En nuestra página, el primer paso será enlazar con las hojas de estilos del navegador, aparte de escoger un DOCTYPE para XHTML adecuado.

Los Link con las hojas de estilos son los siguientes. Leer referencias de artículos anteriores para más información.

<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">

Las dos primeras hojas de estilos son opcionales, pero vienen bien porque definen estilos básicos, que se aplicarán a todos los navegadores, para que nuestras páginas se vean igual en cualquier cliente web. El tercer archivo de estilos 960.css es el propio Framework, con las definiciones de las clases para crear los contenedores y los distintos tipos de cajas.

2) HTML

Para crear la cabecera tengo un titular y un buscador, ambos en la misma fila. En la cabecera tengo un titular que ocupará 6 columnas de espacio. Luego habrá 2 columnas de hueco y a la derecha del todo una caja con 4 columnas de espacio, donde aparecerá el buscador.

<div id="cabecera" class="container_12">
   <div id="titulogeneral" class="grid_6 suffix_2">
      <img src="images/titulo-general.png" width="443" height="30" alt="Diseño web">
   </div>
   <div id="buscador" class="grid_4">
      <form>
      <input type=text>
      <input type=button value="buscar">
      </form>
   </div>
   <div class="clear"></div>
</div>

Como se puede ver, todo se tiene que meter dentro de un container_12, al que le he puesto id="cabecera", para luego aplicarle estilos.

Dentro del container_12 tenemos la primera caja con id="titulogeneral", que es el espacio para el titular, con class="grid_6 suffix_2", que son las 6 columnas de ancho y el espacio en blanco después de 2 columnas.

Luego tenemos la caja id="buscador" con 4 columnas de anchura.

6 columnas + 2 espacios + 4 columnas = 12 columnas del container_12

Hay que fijarse que, después de las columnas que hacen esa fila de la cabecera, todavía dentro del container_12 se ha colocado una capa DIV con class="clear". Esto es esencial porque los grid_xx tienen un float y sin ese clear podríamos tener un problema con los fondos de los elementos que hay debajo de las cajas.

3) CSS

Ahora podemos ver los estilos que hemos colocado a la página por el momento.

BODY{
   background-color: #2b1f1f;
}
#cabecera{
   background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
   padding: 28px 0 0 0;
}
#buscador{
   background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
   text-align: right;
}
#buscador input{
   font-size:8pt;
}
#buscador form{
   padding: 40px 30px 6px 0px;
}

En el cuerpo hemos colocado por ahora simplemente un color de fondo.

En la cabecera hemos colocado como fondo el degradado que habíamos creado en el diseño, que se repite en la horizontal con el atributo repeat-x.

A la imagen que hay dentro de la caja titulogeneral le hemos colocado un padding para que haya un espacio por arriba.

Al buscador le hemos colocado un fondo con una imagen para conseguir el borde redondeado y hemos alineado el texto a la derecha.

Los campos INPUT que hay en el buscador los he estilizado con una letra menor, para que también se reduzcan de tamaño.

Al formulario del buscador le coloco también un poco de padding para que se sitúe donde quiero. Es especialmente importante el padding 40px que se ha colocado por la parte de arriba (top), porque con ello consigo empujar el formulario de búsqueda hacia abajo, para que la capa cabecera acabe justo donde termina el buscador. Así consigo el efecto que el buscador está alineado verticalmente en la parte de abajo de la cabecera.

Con todos estos estilos CSS y el HTML anterior la página queda maquetada tal como podemos ver en este enlace.

Vídeo de la maquetación web con HTML y CSS utilizando 960 Grid System

Para acabar, os dejamos un vídeo donde se ve el proceso relatado en este artículo, comentado y explicado para que se pueda entender bien.

Puedes ver la continuación este mismo videotutorial, pero publicado en el sitio de Youtube, para los que lo prefieran:

Como habrás visto, en los anteriores vídeos sólo hemos llegado a la maquetación de lo que sería la cabecera del sitio. Por lo tanto, aun tenemos bastante trabajo por delante. Puedes ver la continuación de este videotutorial de 960 Grid System ya mismo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

lara

06/7/2009
archivos del caso práctico
No se pueden descargar los archivos para realizar el caso práctico, no encuentro los enlaces para ello, y me resultaría muy interesante poder realizar esta práctica. ¿Podría tener acceso a dichos archivos? Gracias

Juan

22/7/2009
Excelente Tutorial
Excelente video.... ya les he marcado como favorito. Felicitaciones, me ha quedado muy claro la implementación del grid system.

danilo51

05/8/2009
Video
Buenas gente de desarrolloweb,
Seriais tan amables de subir el video otra vez para poderlo ver??

Un saludo

Aurasur

05/8/2009
Borraron los videos
Podrías subir de nuevo los videos ya que aparecen en Vimeo como que fueron borrados el 31 de Julio.
Gracias

flaszka

06/8/2009
Videotutoriales
Hola,podrían subir de nuevo todos los videotutoriales de su pagina web, o dar nos aproximada fecha cuando van ser accesible los videotutoriales. saludos

midesweb

20/8/2009
Ya está de nuevo el videotutorial de la maquetación CSS
Hola,

Acabamos de restaurar los vídeos, gracias a DailyMotion.
Perdonar el retraso en restaurarlo y esperemos que no volvamos a tener problemas con estos vídeos en la nueva plataforma.

Basco79

25/8/2009
Vídeo con explicaciones del diseño de una web con Photoshop
Podrian subir nuevamente el Vídeo con explicaciones del diseño de una web con Photoshop.
Gracias

eugen40

02/9/2009
Ilustrativo
Gracias por el vídeo, la verdad esta muy bien explicado y si lo acompañas con la explicación visual un 10 de 10.

Ahhhhh! ya he visto varias veces este vídeo porque vas muy rápido y pierdo el hilo.

Gracias !!!

bender

22/9/2009
Agradecimento!
Obrigado pelo trabalho realizado e o empenho em ajudar com este manual! Aproveitei muito!

Abraço!

elneo

28/9/2009
No puedo dejar de agradecer
Como los anteriores videos, realmente una maravilla muy buen trabajo les quedo agradecido 100% a Desarrolloweb ya que cada día que entro a leer tutoriales o manuales generan que mi cabeza se abra incorporando nuevas ideas y herramientas.

Un gran abrazo
Marcelo Pírez
Montevideo - Uruguay

Jean carlos

09/10/2009
No me sale el texto
Hola que tal buenas noches miren hice todo lo que decia en el video de
http://www.desarrolloweb.com/articulos/maquetacion-css-960-grid-cabecera.html
pero al momento de copiar el tituloPrincipal no me sale como esta en el video tengo el photoshop cs2 dime como hago la copia del texto (ala que llamaron titulo-general) esto fue lo que hice en photoshoo
primero selecione el texto(herramienta de marco rectangular)
luego le di click a la barra de herramientas al dibujo de una T
luego me enfoque en el texto donde esta al costado un ojito
y de ahi presione cntrl + may + c
y luego presione cntrl + n y de ahi le dije que sea transparente y luego de a ver creado el document. pegue y lo guarde para web
y le dije que sea png de 24
y de ahi voy ami pag le envio todo y me sale UN COLOR DE FONDO MEDIO PLOMITO MI MSN ES K_ARLYTOS@HOTMAIL.COM AYUDA PLZ

mahidi

30/10/2009
parece interesante
Me gustaría ver los videos pero no están disponibles...:(((
Les sugiero que utlicen otro servidor que no sea vimeo por que por lo que noto en los comentarios es que ya se han caido varias veces... en vimeo aparecen disponibles pero tampoco cargan....no me digan que me van a dejar con la boca babeando....:D

RENZO SALAZAR

04/11/2009
PLANTILLA DEL EJEMPLO
HOLA QUE TAL QUERAI SABER DONDE PUEDO CONSEGUIR LA PLANTILLA MODELO QUE ESTAN UTILIZANDO ENEL VIDEO O TUTORIAL, DESEARIA OBTENRLA DE MANERA GRATUITA PARA HACER EL DESARROLLO Y AVANZAR JUNTMANETE CON EL VIDEO, DESEARIA SI UDS. LO TIENEN EN SU WEB U OTRO, DESRAI SU URL PARA DESCARGARLO.

GRACIAS

christianm21

08/1/2010
Gracias!
Muchísimas gracias, está muy bien hecho el artículo en su totalidad, y sobretodo el videotutorial, está muy bien explicado y realizado... Muchas gracias por el tiempo invertido en ello, a mí me está sirviendo de mucho.. =D

harold1402

22/1/2010
maquetacion con grid
hola me ha gustado mucho tu articulo sobre la maquetacion con 960grid, pero tengo un problema con los div uso el dreamweaver cs3 el problema es que en la cabecera no se me acomodan los divs como en el video si no que lo hacen abajo uno del otro y no se como poner los div uno al lado del otro en el titulo y el buscador.

Gracias.

harold

25/1/2010
problemas con 960 grid
hola eugin estoy viendo lo de maquetacion con 960grid pero tengo unos problemas con el posicionamiento de los divs estoy trabajando en dreamweaver cs3.
El problema es que los divs no se posicionan como en el tutorial sino que lo hacen debajo que tendria que hacer para que me quede como en el ejemplo de la cabecera el texto y al lado el buscador.
Gracias por tu tiempo, y muy bueno el tuto.

harold

26/1/2010
problemas con las imagenes
hola nuevamente, a ver si me puedes colaborar con lo siguiente el problema de pocisionamiento ya lo solucione pero ahora no se ven las imagenes en explorer y los vinculos de 960grid aparecen con un error de compatibilidad con varios navegadores incluyendo el ie7 que utilizo.
gracias por tu respuesta...

sfsdfsdf_sfsfsfsdf

29/1/2010
Pagina con sombra
muy buen post, he aprendido mucho de el. Puse manos a la obra y me encontre con un problema.... mi diseño web tenia sombra alrededor de mi contenedor o pagina central.... como lo puedo hacer ya que he probado de todo y no he podido porque se me descuadra ? acepto cualquier sugerencia: laweba@hotmail.com

orvix_0286

22/2/2010
Que buen tutorial
un muy buen tutorial, aunque la imagen se muy pixelada y aunque acercas no se define bien... quizas fuera bueno mejorar eso.
Pero de todos modos muchas gracias y feliz cumpleaños!!!!
Por miguel te vi en mejorando la web en vivo...

midesweb

28/3/2010
Plantilla original - archivo psd del diseño
Hola compañeros!!

Primero quiero agradecer de nuevo a todas las personas que están comentando este artículo práctico de maquetación CSS.

Además, como algunos preguntan que dónde está la plantilla para hacer este diseño, os paso de nuevo la referencia al artículo donde está publicada la descarga del PSD que hemos utilizado para esta práctica:
http://www.desarrolloweb.com/articulos/descarga-plantilla-photoshop-manua-diseno.html

RochXS

05/4/2010
Excelente!
Estupendos estos tutos, la verdad que se aprende muy bien y con el video todavía mejor.

Gracias y saludos desde México.

Nahir Acosta

27/4/2010
Muy lindo
¡muy interesante! me encanta está pagina, siempre la encuentro googleando, y siempre me responde a todas mis preguntas.

Jose Luis

29/4/2010
Comentario Grijander
Me ha parecido muy instrutivo, para gente que venimos del diseño gráfico, Ilustrator, Photoshop, Indisgn etc... y que empezamos en mi caso por inquietud, en este mundillo tan diferente de las WEBS, me parece genial que con este sistema del Gride 960 te ahorres todo el tema del posicionamiento flotando elentos que la verdad son muy dificiles de controlar. Bien seguiré de cerca todo el material que pongáis para aprender todo lo posible de los profesionales de esto.
Gracias por la ayuda.

Fraan

05/6/2010
Genial!
Cada vez mejor!, todo muy claro y muy practico. Es increíble el empeño que le ponen a esta página la verdad estoy muy asombrado, no paro de agradecer y no voy a poder parar.
Saludos desde Argentina Miguel!

davidnavia

16/9/2010
Videos
Felicidades por estos vídeos tan bien montados, me están sirviendo de mucho....

emasan

21/10/2010
960
excelente material, muchas gracias por compartir con los mortales esta informacion.

cybergod

04/1/2011
poder descargar video
me gustaria que pusieran un vinculo de descarga para descargar los videos relacionados con este tutorial porque vivo en cuba y nosotros no tenemos permiso para descargar desde Youtube y tampoco tenemos permiso para verlo directamente desde desarrolloweb.com solo tenemos permiso a descargar archivos, si me pueden ayudar lo agradeceria mucho

Maria Antonia

03/3/2011
Gracias!
Muy bueno.

¡Muchas gracias por tu servicio y entusiasmo en compartir esta información!

:)

Morkret

26/7/2011
Duda
Hola yo he llegado hasta la parte en que el titulo general e hace imagen y ponemos el color de cabecera, el problema es que solo en firefox se ve el color de fondo de la cabecera en chrome y I.E. no aparece sera que algo he hecho mal?

Marko

28/7/2011
Overflow
¿Qué diferencia habría en poner <div class="clear"> que añadirle la propiedad "overflow: hidden" a los elementos que tienen *float*? Una observación más, no se cerró en el videotutorial la etiqueta <img />. Saludos!

Joaquin

30/5/2012
deformado
Se me deforma considerablemente la página, alguien puede ayudarme me urge mucho!!!!!!!
Lo he revisado varias veces con respecto al videotutorial, lo he parado para comprobar el código y no hay forma de encontrar el error, por favor, si alguien es tan amable de decirme por qué no lo tengo como en el video se lo agradecería mucho

El código es el siguiente:

<html>
<head>
<title> Index </title>

<link href="960.css" rel="stylesheet" type="text/css">

<style type="text/css">
BODY{
background-color: #2b1f1f;
}
#cabecera{
background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
padding: 28px 0 0 0;
}
#buscador{
background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
text-align: right;
}
#buscador input{
font-size:8pt;
}
#buscador form{
padding: 40px 30px 6px 0px;
}

#cuerpo
{
background-color:#000;
}
#navegador
{
font-size:14px;
}
#enlaces
{
color:#FFF;
font-weight:bold;
}
#navegador ul
{
list-style-type:none;
margin:0;
padding:0;
}
#navegador il
{
float:left;
margin:0;
padding:0;
}
</style>

</head>

<body>
<div id="cabecera" class="container_12">
<div id="titulogeneral" class="grid_6 suffix_2">
<img src="images/titulo-general.png" width="443" height="30" alt="Diseño web">
</div>
<div id="buscador" class="grid_4">
<form>
<input type=text>
<input type=button value="buscar">
</form>
</div>
<div class="clear"></div>
</div>

<div class="container_12" id="cuerpo">
<div class="grid_12" id="navegador">
<ul>
<li>Indice</li>
<li>Seccion</li>
<li>Portada</li>
<li>Relleno</li>
<li>Otro</li>
</ul>
</div>
</div>


</body>
</html>

jr

23/11/2012
Error en IE6
No se ve igual en IE6