dominios y alojamiento web en hostalia

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 960gs, 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 plantilla Photoshop del manual Diseño desde cero
Todos los archivos que necesitas para la plantilla.
Tamaño: 1554690

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

Compartir

Comentarios
Enviar un comentario al manual
Fueron enviados 13 comentarios al manual
3 comentarios no revisados
10 comentarios revisados:

cjlaslu...
manual botones estilo
10/6/2009
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/2009
Gracias por compartir este Manual.

protofu...
se agradece
24/6/2009
muchas gracias por el manual, me sera de mucha utilidad.
Evitar los div clear
Por: Laura
06/8/2009
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/2009
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/2009
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.
IE6 Gran Problema con la Transparencia & Padding para evitar colisión de Containers en 960
Por: Ivan Arango
17/12/2009
1. Para todos lo que tengan problemas con IE y desean resolver esto de la transparencia o capa gris. les recomiendo que googoleen estas palabras magicas:

"5 Easy Ways to Tackle IE6?s Transparency Issues": Encontrarán un video de Jeffrey Way, el famoso editor de Nettuts+. EN este video nos da 5 formas de evitar este incomo problema de IE.

2. Para los que tiene inconveniente con las grillas o rejillas de 960 y sienten que no les cuadra el asunto. les recomiendo googoleen:

"A Detailed Look at the 960 CSS Framework": Otro espectacular videotutorial que nos trae jeffrey Way, esta vez nos muestra la forma de crear nuestro "Template Folder" y como empezar a jugar con nuestro 960 Framework.

mabela
960 grid y ventanas emergentes
07/7/2010
hola!

gracias por el manual 960 grid! de verdad es muy facil trabajar con el. Ahora tengo una gran duda, pues ya le movi por mil lados, y no puedo:

como hacer una VENTANA MODAL (tipo light box) usando el grid960? lo he intentado de muchas maneras, y me lo saca de cualquier grid! si es que no se puede usar una ventana modal (co estilos .overlay .modal) saben de alguna otra manera de diseñar ventanas?

Gracias por su respuesta, de verdad ya busqué por varios sitios y no encuentro nada! y ya hice toda la web en 960grid, solo me faltan las ventanas y sería una pena tener que repetir la web en puro y duro css .....

Gracias de antemano, y gracias de nuevo por los tutoriales, geniales!

Marcelo...
Bug encontrado con IE8
05/8/2010
Hola a todos. antes que nada, el manual y los videos, son excelentes... He estado aprendiendo mucho.
Traté de hacer una maquetación web. no la del curso, sino una propia y me he encontrado con que siguiente error en el IE8. Utilizando una página como Template en el DWCS5, si pongo los div class clear, no me los toma y por esa razón, me genera unos espacios entre las capas separadoras del class container...
Ahora si la misma página, la abro en IE8 sin que sea derivada desde un Template de DW, si me respeta el class div clear del framwork!

Quisiera saber si se puede resolver o existe alguna solición?. Muchas Gracias.

todonor...
Maquetacion con 960grid
25/2/2011
Excelente trabajo. Mi única sugerencia, es realizar el mismo ejemplo con http://www.dmxzone.com/go?18032 en dreamwever
Ver otros 3 comentarios pendientes de revisar
Enviar un comentario al manual

En este manual
Descargar manual 1

Categorías relacionadas:

Manuales relacionados
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...