Maquetación CSS con 960 Grid System

Explicaciones y ejemplos de uso del Framework CSS 960 Grid System, con el que veremos como maquetar una página con CSS paso a paso y de manera sencilla.

Listado de los capítulos
1.- Presentación de 960 Grid System
Introducción a la maquetación de páginas web usando CSS con el sistema 960 Grid. Entrar

2.- Primeras notas de uso de 960 Grid System
Primera demo de uso del framework CSS 960 Grid, para aprender lo más básico acerca de maquetar con CSS utilizando este sistema de rejilla. Entrar

3.- Clases definidas en el framework CSS 960 Grid System
Conociendo y explotando las distintas clases (class de CSS) disponibles para la maquetación CSS con 960 Grid System. Entrar

4.- Aplicación de clases CSS de 960 Grid System
Veremos un ejemplo de maquetación CSS utilizando las clases disponibles en 960 Grid System, para que nos sirva de práctica. Entrar

5.- Descargas de la plantilla Photoshop del manual Diseño desde cero
Diversos archivos para descarga que serán de utilidad para seguir el vídeo del diseño web desde cero con Photoshop y el manual de maquetación CSS 960 Grid System. Entrar

6.- Maquetación CSS con 960 Grid System, caso real
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. Entrar

7.- Maquetación CSS con 960 Grid System, Parte II
Continuamos mostrando un caso real de maquetación con CSS usando el framework CSS 960 Grid System. Entrar

8.- Maquetación CSS, fin del ejemplo
Terminamos de crear en XHTML y CSS la plantilla del diseño de ejemplo para mostrar el funcionamiento de 960 Grid System, con vídeo incluido para ilustrar el proceso. Entrar

Descargas
 Si eres usuario de DesarrolloWeb:
Archivo de descarga 1554690 plantilla Photoshop del manual Diseño desde cero. Todos los archivos que necesitas para la plantilla.

Comentarios
Envie un comentario u opinión sobre este manual.
Comentar el manual
Ver comentarios (7)

Comentarios
Enviar un comentario al manual
Fueron enviados 7 comentarios al manual
1 comentario no revisado
6 comentarios revisados:

cjlaslu...
manual botones estilo
10/6/09
Es un manual muy claro, que permite al diseñador visualizar ampliamente el todo el codigo que puede encontrarse detras de un boton.

Gracias!!

Grafeno
Manual
19/6/09
Gracias por compartir este Manual.

protofu...
se agradece
24/6/09
muchas gracias por el manual, me sera de mucha utilidad.
Evitar los div clear
Por: Laura
06/8/09
Primero, muy bueno el manual, está bien explicado y desarrollado par conseguir empezar a trabajar y sacarle todo el partido al framework.
Personalmente, no me gusta tener codigo "sucio" en mis páginas y después de probar he visto que se puede evitar el uso de un clear para el salto de página con un simple añadido en css:

#fondo_cajas{
overflow: hidden;/* Evitamos el "Div="clear"" de la maquetación y mejoramos el código y la usabilidad*/
width: 75%;

Causa el mismo efecto y en páginas con muchas cajas evitamos errores de anidamiento. El width se puede ajustar a lo que deseamos se muestre, por si ponemos colores o imagenes de fondo. En mi caso es el contenedor del cuerpo principal, que debe ir centrado y por lo tanto con espacios "vacios" a derecha e izquierda.

Espero que os sirva.
problemas con el grid_12
Por: akbert
15/10/09
Hola buenas, el problema es el siguiente. si creo una fila que contiene este codigo:

<div id="animado" class="container_12">
<div id="l1" class="grid_4"><p>1</p></div>
<div id="l2" class="grid_8"><p>2</p></div>
<div class="clear"></div>
</div>

el problema es que el 2 aparece en la siguiente linea y no al lado del 1. alguien me puede decir porque? en teoria suma 960 pixels y no deberia saltar de linea.

gabriel...
problemas con transparencia de png en IE6
19/11/09
hola a todos el manual esta excelente muy claro y completo.
yo me encontre con el preoblema de querer visualizar la pagina con IE6 las imagenes transparentes salen de un color gris horrible( lo hice con este navegador porque es el que tiene las maquinas cuando le acabas de istalar el XP)
El Problema se Soluciono con un SCRIPT, La imagen ya era transparente pero el problema despues fue que ponia un espacio para 1 imagen que no entiendo de donde el IE6 saca esto.
Ver comentarios pendientes de revisar
Enviar un comentario al manual
En este manual
Descargar manual 1

Categorías relacionadas:

Manuales relacionados
Alojados en el grupo