960 grid system
DESCRIPTION
Maquetacion 960 Grid SystemTRANSCRIPT
![Page 1: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/1.jpg)
![Page 2: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/2.jpg)
¿Que es 960 Grid System?
960 Grid System es un framework CSS, es una declaración de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar contenidos de una forma fácil y ordenada.Se basa en un diseño de 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestra “cajas” de una forma simple y rápida.
![Page 3: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/3.jpg)
Descripción del Grid 960
Como ya hemos comentado, tiene dos variantes, de 12 o de 16 columnas. Cada una de las columnas tiene un margen izquierdo y derecho de 10px, por ello tendremos en total una separación de 20px entre cada columna. Teniendo esto en cuenta, si decidimos 12 columnas el ancho será de 60px, y si decidimos 16 columnas el ancho será de 40px
Ver demo: http://960.gs/demo.html
![Page 4: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/4.jpg)
Descripción del Grid 960
12 columnas: 12 x 60 + 12 x 20 (de los márgenes) = 720 + 240 = 960 px
![Page 5: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/5.jpg)
Descripción del Grid 960
16 columnas: 16 x 40 + 16 x 20 (de los márgenes) = 640 + 320 = 960 px
![Page 6: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/6.jpg)
Conociendo las clases del Grid 960
Esta clase sirve para definir un contenedor, donde estará contenido todo nuestro diseño, es decir aquí decimos si trabajaremos con 12 o con 16 columnas. Las clases serán container_12 y container_16.
Class container_xx
![Page 7: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/7.jpg)
Conociendo las clases del Grid 960
La clase grid_xx define un elemento del diseño que será colocado en un contenedor. El valor “xx”, de grid_xx, expresa el tamaño de la rejilla que se está definiendo. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas, desde grid_1 hasta grid_12. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.
Class grid_xx
![Page 8: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/8.jpg)
Conociendo las clases del Grid 960
Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como sabemos, todas las columnas tienen un margen de 10px a la izquierda y 10 pixel a la derecha.La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha.
Class alpha y class omega
![Page 9: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/9.jpg)
Conociendo las clases del Grid 960
Class alpha y class omega
Ejemplo de código utilizando las clases alpha y omega.
![Page 10: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/10.jpg)
Conociendo las clases del Grid 960
Esta clase nos sirve para dejar espacios vacíos a la izquierda de las columnas. Por ejemplo, si quiero comenzar el diseño con grid_5 totalmente a la derecha, tendré que dejar un espacio vacío equivalente a un grid_7 (para este caso estamos trabajando con una configuración a 12 grid).
Class prefix_xx
![Page 11: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/11.jpg)
Conociendo las clases del Grid 960
Ejemplo de código del caso anterior.
Class prefix_xx
![Page 12: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/12.jpg)
Conociendo las clases del Grid 960
Class prefix_xx
![Page 13: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/13.jpg)
Conociendo las clases del Grid 960
De igual forma que prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. Aquí un ejemplo:
Class suffix_xx
![Page 14: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/14.jpg)
Class suffix_xx
Conociendo las clases del Grid 960
![Page 15: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/15.jpg)
Conociendo las clases del Grid 960
Por ultimo tenemos esta clase, que tiene por función limpiar los saltos de línea para poder separar un contenido de otro.
Class clearfix_xx
![Page 16: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/16.jpg)
¿Cómo empezar a utilizar el framework?
En primer lugar descargar de la web, http://960.gs/. Verás varias carpetas, la que nos interesa es la carpeta llamada code donde están los ficheros que nos interesan. Copia los archivos reset.css, text.css y 960.css. Después solamente tienes que enlazar las hojas de estilo a la pagina web dentro de <head>… </head> de la siguiente manera:
![Page 17: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/17.jpg)
¿Cómo empezar a utilizar el framework?
Veamos que es cada fichero: reset.css: para resetar todos los estilos. Fichero opcional
pero recomendable. text.css: para dar formato a los textos que utilices en tu
web. Fichero opcional. 960.css: donde tenemos nuestras columnas
(Obligatorio).
![Page 18: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/18.jpg)
Ahora estamos listos!!Para empezar a maquetar!!
![Page 19: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/19.jpg)
Ejemplo:
![Page 20: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/20.jpg)
Pasos para el desarrollo de la web
Primero crearemos un documento html el cual nombraremos index.html que estará guardada dentro de la carpeta www.
Dentro de la carpeta www, crearemos las carpetas css y img para las respectivas hojas de estilos y las imágenes.
![Page 21: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/21.jpg)
Pasos para el desarrollo de la web
Dentro de la carpeta css copiaremos las hojas de estilos correspondientes para poder ser uso del framework (reset.css, text.css y 960.css).
![Page 22: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/22.jpg)
Pasos para el desarrollo de la web
Ahora desarrollaremos cada parte de la web paso a paso, pero antes de empezar dentro de la carpeta css crearemos una hoja de estilo llamado Estilos.css, en el cual pondremos nuestros estilos para darle forma a la pagina web.
![Page 23: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/23.jpg)
Pasos para el desarrollo de la web
No olvidar de vincular las hojas de estilo (css) en la cabecera del documento html, para que podamos ser uso del framework como de los estilos creados en el documento Estilos.css.
![Page 24: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/24.jpg)
Pasos para el desarrollo de la web
La pagina la desarrollaremos con la configuración a 12 columnas (container_12).
Ahora Estructuremos cada una de las partes de la web, la cual estará formada por una cabecera (header), menú (nav), cuerpo y el pie de página (footer).
![Page 25: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/25.jpg)
Pasos para el desarrollo de la web
Cabecera (header)
![Page 26: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/26.jpg)
Pasos para el desarrollo de la web
Cabecera (header): Código html
![Page 27: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/27.jpg)
Pasos para el desarrollo de la web
Cabecera (header): Estilos.css
Para originar bordes redondeados
![Page 28: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/28.jpg)
Pasos para el desarrollo de la web
Menú (nav)
![Page 29: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/29.jpg)
Pasos para el desarrollo de la web
Menú (nav): Código html
![Page 30: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/30.jpg)
Pasos para el desarrollo de la web
Menú (nav): Estilos.css
![Page 31: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/31.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 01, uso de las clases alpha y omega
![Page 32: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/32.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 01, uso de las clases alpha y omega
![Page 33: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/33.jpg)
![Page 34: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/34.jpg)
Pasos para el desarrollo de la web
Cuerpo : Estilo.css
![Page 35: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/35.jpg)
![Page 36: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/36.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 02, uso de prefix
![Page 37: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/37.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 02, uso de prefix
![Page 38: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/38.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 02, uso de suffix
![Page 39: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/39.jpg)
Pasos para el desarrollo de la web
Cuerpo : Sección 02, uso de suffix
![Page 40: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/40.jpg)
Pasos para el desarrollo de la web
Pie de pagina (fotter)
![Page 41: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/41.jpg)
Pasos para el desarrollo de la web
Pie de pagina (footer): código html
![Page 42: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/42.jpg)
Pasos para el desarrollo de la web
Pie de pagina (footer): Estilos.css
![Page 43: 960 Grid System](https://reader035.vdocuments.pub/reader035/viewer/2022062222/5695d3da1a28ab9b029f6fb7/html5/thumbnails/43.jpg)
Ejercicio 1:
Utilizando el ejemplo anterior ahora debe usted utilizar las nuevas etiquetas que nos ofrece HTML5 semantic y estructurar la nueva página utilizando el Framework estudiado (Grid Sytem 960).