Cómo instalar el complemento 960 grids. ¿Por qué necesito un sistema de red? Diseño basado en cuadrículas
Grid 960 es un marco CSS, que permite a los desarrolladores crear rápidamente diseños de prototipos. Estas son excelentes herramientas para crear diseños. ¿Por qué? Porque ellos hacen todo el trabajo duro, permitiéndole obtener resultados rápidamente.
También puedes descargar el código fuente de nuestro diseño:
Suena genial, pero ¿cómo hacerlo? Hay muchos artículos de apoyo. Marcos CSS, pero ninguno de ellos contiene nada que pueda ayudar a los lectores inexpertos. Este artículo será diferente. Cubre todo el proceso de creación de prototipos. Imagina que recibes un diseño y necesitas hacer una maqueta para el cliente. Este artículo explica los conceptos básicos. Cuadrícula960,Planificación de redes para diseño y codificación. Las muestras utilizarán la mayor cantidad posible. Cuadrícula 960, brindándole una sólida base de conocimientos con la que trabajar. Una vez que vea el diseño a continuación, es hora de aprender cómo funciona el Grid 960.
Creando una malla
Grid 960 funciona utilizando clases mediante herencia. Grid 960 proporciona dos redes: 12 y 16 columnas. El contenedor principal siempre tiene 960 px de ancho. El uso de 960 le permite aprovechar la mayor cantidad de combinaciones de columnas y, al mismo tiempo, seguir siendo fácil de trabajar. Usaremos 12 columnas para codificar este diseño, pero no usaremos las 12 columnas. Cada celda tiene margen: 0 10px. Esto crea un relleno de 20px. Al crear una fila, el ancho total de todos los elementos sube a 960. Mire la cuadrícula de 960 de la página de demostración. Verás una bonita cuadrícula con todas las combinaciones posibles. Cada celda tiene una clase que determina su ancho. A continuación se muestra un desglose de los anchos de las columnas en una cuadrícula de 12 columnas.
Cada ancho corresponde a una clase, formada de la siguiente manera: cuadrícula_X, donde X es un número de la lista anterior. Si desea crear un bloque de 940 de ancho, use la clase cuadrícula_12. ¿Cómo sabe la cuadrícula 960 cuál debe ser el ancho? Cada cuadrícula_x es un selector contenedor_Y. Cuadrícula_X donde Y es igual a 12 o 16 columnas. Veamos el código. A continuación se explica cómo crear dos filas de cuadrícula en una columna de 12 contenedores. Deje que la primera fila tenga 940 px y la segunda fila contenga dos columnas iguales.
HTML
940px 460px 460px |
Al crear una fila en una cuadrícula, asegúrese de que todos los números secundarios de grid_X sumen el número de columnas que está utilizando. Esto asegura el ancho correcto. Los dos divs grid_6 se suman al 12. No estás limitado a los mismos números. También puedes usar 6, 4 y 2. Cuando hayas terminado, la cuadrícula estará lista para ser completada. Ahora que sabes cómo funciona Grid 960, veamos cómo crear un diseño.
Creando un diseño
Visualizar una cuadrícula de diseño es fácil. Hay una fila para el título de la imagen, una fila para la barra de navegación, una fila de 2 columnas para el historial de encabezados y carteles, debajo de 4 columnas y luego un pie de página de 3 columnas.
Después de comprobar el renderizado, deberías entender cómo crear la cuadrícula de diseño. Usar el ancho, hacer coincidir la clase de la lista le permite crear código. No olvide agregar un Div con clase clara al final de cada línea. No olvides incluir estilos en Grid 960.
HTML
El esqueleto está listo. Es hora de empezar a establecer el diseño. Los paneles verdes son simplemente divs con un color de fondo y una altura. El bloque de menú no tiene una altura establecida. Su altura estará controlada por el tamaño de los enlaces que se encuentran dentro del bloque. Además, no olvides la imagen en el encabezado del sitio.
Div.spacer (color de fondo: #8FC73E; altura: 1em;) div#navbar (color de fondo: #8FC73E; relleno: 10px 0;)
div.spacer( color de fondo: #8FC73E; altura: 1em; div#barra de navegación ( color de fondo: #8FC73E; relleno: 10px 0; |
Aplique la clase para ajustar grid_12 y establezca la ID.
HTML
Las columnas del medio no requieren ningún contenido. Agregue algo de texto a estos bloques. Puedes hacer esto. Antes de pasar a la sección superior, pase al pie de página. En la captura de pantalla, el pie de página está relleno de un color sólido. No puedes hacer eso con este marcado. Envuelva las tres columnas inferiores en un Div para resolver este problema. O simplemente inserte un div (DIV). Esto rompe la cuadrícula debido a la dependencia de Grid 960 de las celdas principales y secundarias para aplicar estilos (¿recuerda el selector contenedor_12. Grid_4?). Subgrid resuelve este problema. Grid 690 le permite utilizar cuadrículas anidadas. Cree una subcuadrícula agregando un DIV grid_12, luego coloque grid_4 dentro de él. Cuando se utilizan cuadrículas anidadas en elementos secundarios, se requieren clases especiales. La primera celda necesita la clase "alfa" y la última necesita la clase "omega". Cambie el marcado para reflejar los cambios y aplique cambios de estilo al pie de página.
HTML
div#pie de página (color de fondo: #e5e5e6; )
div#pie de página ( color de fondo: #e5e5e6; |
¡Excelente! El pie de página ahora tiene un color de fondo sólido y puedes ajustar el tamaño de las columnas si es necesario. Agregue algo de texto a las columnas del pie de página ahora, lo que lo llevará al bloque de navegación. El bloque de navegación (menú) es una simple lista desordenada. Agregue algunos enlaces y un estilo adecuado.
HTML
- Artículos
- Temas
- Acerca de
- Editores
- Contacto
|
div#navbar ul (estilo de lista: ninguno; visualización: bloque; margen: 0 10px; ) div#navbar ul li ( flotante: izquierda; margen: 0 1,5em; fuente: negrita 1em Arial; )
div#barra de navegación ul ( estilo de lista: ninguno; mostrar: bloquear; margen: 0 10px; div#barra de navegación ul li ( flotador: izquierda; margen: 0 1,5 em; fuente: negrita 1em Arial; |
Perfecto. Ante tus ojos, la página adquiere una apariencia holística. Todo lo que queda es crear un bloque efectivo en la parte superior de la página. Antes de profundizar en él, debes comprender algunos puntos y matices de la cuadrícula framefork 960 CSS en general.
A continuación, en combinación con el contenedor_24 clase, la pull_xx las clases le dan al div un negativo relleno izquierdo, que permite "tirar" el contenido del div hacia la izquierda. Por otro lado, el empujar_xx las clases, como se esperaba, hacen lo contrario y le dan al div un relleno izquierdo (positivo) para "empujar" su contenido hacia la derecha (dando paso al relleno izquierdo).
“¿Pero por qué la molestia?” podrías preguntar. "¿Por qué no simplemente ponerlas en el orden correcto en el marcado en primer lugar, para no tener que usar estas clases innecesarias?"
Buenas preguntas. La respuesta radica en la búsqueda de un marcado semántico y accesible: nuestros diseños no deben forzar el marcado a una estructura que no tenga sentido o que no cumpla con los estándares cuando los estilos están desactivados. Y se ha demostrado que CSS maneja estas situaciones con elegancia: nos permite lograr el aspecto de nuestros diseños independientemente de cómo se escribió el marcado (bueno, en gran medida).
En el sitio 960gs, Nathan Smith muestra el encabezado como un buen ejemplo de cómo usó estas clases:
A primera vista, podríamos pensar que el marcado mostrará primero el logotipo de Twitter, luego el enlace de descarga y finalmente el logotipo de 960. Pero eso no sería semántico: el título del sitio (es decir, el logotipo de 960) debería aparecer primero. Y como probablemente sepa, esta disposición también tiene beneficios de SEO. Entonces, el marcado para el encabezado en realidad es algo como:
Sistema de red 960
Descargar - Plantillas: Fuegos artificiales de bellota, Flash, ...
Como puede ver, el logotipo aparece primero y, después, el enlace de descarga. (El marcado para el logotipo de Twitter se encuentra después del pie de página, se le dio una identificación de gorjeo, y está absolutamente posicionado. No se le dio una clase 960.gs, por lo que no nos ocuparemos de eso).
También vio en el marcado (como se predijo) que se insertó el logotipo y se eliminó la sección del enlace de descarga. Para visualizarlo más claramente:
Y así es como usas el empujar o jalar clases: sepa que le dan a sus divs un relleno izquierdo negativo o positivo, luego "extraen" o "empujan" su contenido de acuerdo con la cantidad de columnas que necesita que su contenido sea extraído o enviado.
Hay un último conjunto de clases que son parte integral de 960.gs y que le permiten crear diseños complejos. Una columna que abarca varias filas, por ejemplo.
clases alfa y omega
Si ha leído tutoriales o artículos sobre 960.gs antes, probablemente ya sepa que el alfa y omega Las clases cancelan los rellenos horizontales establecidos por cuadrícula_xx clases. Y lo más probable es que también sepas que su uso principal radica en tener cuadrícula_xx clases internas divs anidados.
Para aquellos que aún no lo saben, vayamos a nuestro CSS y veamos qué hacen estas clases con los elementos a los que están asignadas:
Alfa (margen izquierdo: 0;) .omega (margen derecho: 0;)
Bastante sencillo: simplemente ponen a cero la izquierda ( alfa) y derecha ( omega)márgenes. Y como hemos visto hace un tiempo, cuando asignamos a un elemento un cuadrícula_xx clase, automáticamente le damos márgenes horizontales de 5px en ambos lados. Con divs anidados, no queremos duplicar estos márgenes, por lo que damos un alfa o un omega clase, o ambas, según corresponda.
Un div anidado que toca el borde izquierdo de su div principal recibiría la alfa clase. De manera similar, el omega La clase se asigna al div anidado que se coloca en el borde derecho del div principal. Pero, ¿qué pasa si tenemos un div anidado que toca ambos bordes de su div principal? Así es, le asignamos ambas clases.
Pasemos a un ejemplo para que veas cómo se hace.
Aunque no se muestra en la demostración de 960.gs, aquí hay un ejemplo de cómo se logra un diseño complejo con la ayuda de alfa y omega clases (y divs anidados con cuadrícula_xx clases):
Aquí tenemos columnas que abarcan varias filas en ambos lados, con filas y cuadros en el medio. También puedes visualizarlo como un diseño típico de 3 columnas; pero para nuestro ejemplo, solo usamos 15 columnas. Por supuesto, puedes expandirlo fácilmente a 24 columnas.
La clave para crear diseños como estos en 960.gs es:
- Recuerde que 960.gs hace posible el diseño flotando divs a la izquierda.
- Crea tus divs anidados a partir de esos divs flotantes iniciales. Esto significa que tendrás divs flotantes dentro de divs flotantes.
Esta es una forma de abordar nuestro diseño: primero agrúpelos en tres columnas y asígneles el formato apropiado. cuadrícula_xx clases:
A continuación, asigne el adicional cuadrícula_xx clases para los divs anidados (tenga en cuenta que no tenemos ningún div anidado para la columna de la derecha):
Dado que tenemos al menos dos niveles de cuadrícula_xx dentro de las clases divs anidadas, también necesitamos agregar el alfa y omega clases apropiadamente:
Los divs anidados dentro de la columna izquierda tocan ambos bordes de su div principal, por lo que debemos agregar ambos alfa y omega. Lo mismo es válido para los divs con cuadrícula_8 clases en la sección media. pero cada uno cuadrícula_4 div en la parte superior sólo tiene que tener alfa o omega, ya que solo toca el borde izquierdo o derecho de su div principal.
Como habrás llegado a la conclusión de este sencillo ejemplo, puedes anidar divs con cuadrícula_xx clases tan profundas como desee (si su diseño lo exige), siempre que las marque correctamente y les dé las clases 960.gs correctas, para que floten correctamente y se cancelen los márgenes sobrantes.
Y hablando de flotantes, el último grupo de clases 960.gs, aunque no es exclusivo de 960.gs, lo hace todo posible: borran los flotantes que se crean automáticamente cuando asignas un cuadrícula_xx clase.
Nivelando el campo: las clases claras
Anteriormente, notamos esto en el marcado: cada div al que se le dio un cuadrícula_xx clase, que también era el último div de su fila, fue seguida por un div vacío con una clase de claro.
La razón obvia para esto es que necesitamos borrar los divs flotantes, porque una vez que los hacemos flotar, ya no ocupan espacio, lo que hace que los elementos debajo se "levanten", lo que finalmente conduce a un diseño roto.
Como hemos visto en la demostración, una solución para este posible problema es colocar un div no semántico adicional con una clase de claro, que hace lo siguiente:
Borrar ( borrar: ambos; mostrar: bloquear; desbordamiento: oculto; visibilidad: oculto; ancho: 0; alto: 0;)
El código anterior es básicamente la solución del propio Nathan Smith al problema, como se comenta en su blog. Muchos diseñadores web no tienen ningún problema con él, excepto probablemente los estandaristas que podrían avergonzarse ante la idea de usar código adicional que no sea estándar. Divs semánticos en el marcado para un problema de estilo.
Afortunadamente, Nathan Smith también incluyó el arreglar claro solución en CSS 960.gs, discutida por primera vez en PositionIsEverything.net. Elimina el div adicional, ya que puedes colocarlo junto al cuadrícula_xx clases y lograr el mismo efecto:
Ese es el mismo ejemplo de marcado anterior con los divs adicionales eliminados y el arreglar claro clase agregada. Él voluntad Haz lo mismo, para que puedas elegir este método de limpieza si lo encuentras de tu agrado. Aquí está el CSS para ello:
Clearfix:after (clear: ambos; contenido: ""; mostrar: bloque; tamaño de fuente: 0; altura de línea: 0; visibilidad: oculta; ancho: 0; alto: 0;) /* La siguiente regla zoom:1 es específicamente para IE6 + IE7. Muévase a una hoja de estilo separada si el problema es CSS no válido. */ * html .clearfix, *:primer hijo+html .clearfix ( zoom: 1; )
El código puede ser un poco diferente de lo que estás acostumbrado. Esto se debe a que Nathan Smith lo basó en una entrada de blog de Jeff Star, que supuestamente actualiza el truco clearfix original, para eliminar el código destinado a un navegador que ahora extinto (es decir, IE para Mac) y lo modifica para los más nuevos (es decir, IE6 e IE7).
Conclusión
Usando solo la demostración de 24 columnas de 960.gs (y en algunos casos, el sitio 960.gs en sí), le mostré cómo funciona cada una de sus clases y cómo puede usarlas para convertir sus diseños basados en 960 en HTML y CSS.
Cada sección de la demostración imparte lecciones que aprender y una vez que vea lo que las clases hacen con su marcado al examinar el CSS, el misterio de 960.gs se desvanecerá y obtendrá una mejor comprensión de lo que sucede detrás de escena. Incluso podrías encontrar nuevas formas de utilizar las clases, ya que ahora sabes lo que hacen.
Aplicar su nuevo conocimiento se vuelve fácil, porque una vez que haya configurado sus columnas usando 960.gs, solo tendrá que asignar identificaciones a los divs (según lo requiera la situación) como ganchos para ajustar aún más los rellenos de los divs o el tamaños de su texto en el interior.
Otra lección sobre diseño web. Aquí le mostraremos cómo crear diseños de sitios web utilizando el sistema 960 Grid. Verás cómo estas técnicas de diseño hacen que el proceso de posicionamiento adecuado sea claro y transparente. Además, al finalizar esta lección Obtendrá una apariencia elegante y ordenada para su sitio web.
1 paso
Comience creando un nuevo documento en Photoshop con un ancho de 1680 px y una altura de 1100 px, luego rellene el fondo con un color gris tenue #F9F9F9.
2 Paso
Hay una gran cantidad de cuadrículas de diseño disponibles en Internet, así como tutoriales sobre cómo crearlas. El propósito de esta lección es ponerlo al día si nunca antes se ha encontrado con este tipo de cuadrículas. Con su ayuda, el proceso de diseño puede acelerarse significativamente y generar plantillas de páginas prototipo de alta calidad. Descargue el marcado del sistema 960 Grid. Después de descargarlo desde el enlace, descomprima el archivo y abra esta carpeta. Cargue la “cuadrícula de 12 columnas 960” en Photoshop.
Ahora necesitamos transferir la cuadrícula a nuestro documento. Seleccione el grupo "Cuadrícula de 12 columnas", combínelo en una capa y luego transfiéralo al documento principal. La altura de la rejilla será ligeramente menos documento, por lo que hay que estirarlo verticalmente para que sus extremos toquen los bordes superior e inferior del documento.
Ahora todavía necesitamos crear una base de cuerda. Esta cuadrícula nos ayudará a colocar correctamente las sangrías verticales entre elementos y controlar el interlineado del texto, entre párrafos y bloques lógicos. Primero cree otro archivo en Tamaños de Photoshop 24?24px, elimine el fondo y dibuje una sola línea de 1px a lo largo de la última regla del área de trabajo. Necesitamos guardarlo como plantilla (Editar > Definir patrón) y darle un nombre distintivo.
Queda por marcar la zona de trabajo con tres guías. Cree una nueva guía vertical: Ver > Nueva guía, seleccione Vertical y establezca su posición en 360px. De la misma forma, crea dos guías más a 840px y 1320px. Entonces seleccionamos un área de 960 px entre las marcas de 360 px y 1320 px y dibujamos una guía exactamente en el medio del documento.
Si trabaja directamente desde un archivo con el 960 Grid System, en él ya están configuradas guías convenientes. Simplemente ve a Ver > Mostrar > Guías.
3 pasos
Ahora que tenemos una plantilla de marcado lista, podemos comenzar a diseñar la estructura del sitio. El diseño de la página se dividirá en 5 bloques: encabezado, llamada, bloque izquierdo, contenido derecho, pie de página.
4 pasos
Lo primero que haremos será el encabezado, ya que nos iremos moviendo de arriba hacia abajo. Tome la herramienta Marco rectangular y úsela para seleccionar un área en todo el ancho del documento en la parte superior con una altura de 120 px (una vez activada la visibilidad de su marcado horizontal, una altura de 120 px es más que fácil de calcular). son solo 5 líneas de 24px cada una). Rellena el encabezado con gris oscuro (#2C2C2C). El encabezado contendrá el logotipo del sitio y el menú de navegación.
5 pasos
Ahora coloque su logotipo en la esquina superior izquierda de la página, alineándolo con la segunda columna (que es una sangría de 40 píxeles). Para el logotipo, utilicé una inscripción simple de dos partes en fuente Century Gothic y fuente de 50 puntos. La primera parte de la inscripción tiene un tinte azul claro (#ADC7D9), la segunda es negrita y blanca (#FFFFFF). Luego agregué al logo. sombra interior(estilo Sombra interior); Bajó la opacidad del estilo al 25% y estableció los siguientes parámetros: Distancia - 2px, Estrangulamiento - 0%, Tamaño - 5px.
6 pasos
Aquí crearemos un menú de navegación. Para mantener la página limpia y organizada, usaremos enlaces de texto en el menú. Seleccione la fuente Arial de 18 puntos y cree sus etiquetas de enlaces. Rellena el botón activo con blanco (#FFFFFF) y el resto con gris claro (#BBBBBB). Alinéelos verticalmente y colóquelos en la franja central del encabezado.
7 pasos
Llamé a este bloque llamada porque todo lo que se necesita es transmitir información sobre la página al usuario. Repita el mismo proceso que con el encabezado (seleccionando con la herramienta Marco rectangular), pero esta vez manteniendo la altura del bloque en 240 px, rellene la selección con el mismo azul claro (#ADC7D9) que la parte del logotipo. Necesitamos agregar un degradado sutil a esta capa, así que haga doble clic en ella para abrir el panel Estilo de capa y seleccione el estilo Superposición de degradado. Seleccione un degradado que pase a un color transparente, cambie el modo de fusión del estilo a Superponer y baje su Opacidad al 30%.
8 pasos
Dado que llamamos a nuestra empresa "Cuadrícula azul", mostraremos celdas apenas perceptibles en el fondo de la leyenda. Para ello utilizamos la misma técnica que utilizamos para crear líneas horizontales. Primero, cree un nuevo documento de 25 px por 25 px. Después de eso, elimina su fondo para hacerlo transparente y pinta una línea inferior de píxeles de 1 px de grosor, y lo mismo en uno de los lados. Guarde este archivo como plantilla (Edición > Definir patrón).
9 paso
Crea una nueva capa encima de la capa líder y rellénala con la plantilla que acabas de crear (Edición > Rellenar).
Gira esta capa 15 grados, dale una Superposición de color blanco y colócala encima del panel de llamada.
Establece el modo de fusión de la capa en Luz suave. A continuación, seleccione el panel líder con la herramienta Marco rectangular o presionando Ctrl + Clic en la capa que lo contiene. Después de eso, estando en el modo de herramienta Marco rectangular, haga clic derecho en el área seleccionada, seleccione Inverso y luego presione Eliminar. Ahora hemos eliminado la parte innecesaria de la malla que se extiende más allá del panel de leyenda.
El siguiente paso es hacer que la cuadrícula sea visible solo en todo el ancho del espacio de trabajo a 960 px. Active las guías si las tiene ocultas (Ver > Mostrar > Guías), luego agregue una máscara a la capa de malla.
Cambie al modo de máscara haciendo clic en el botón correspondiente en la parte inferior de la paleta Capas, luego seleccione la herramienta Degradado (G) y defina un degradado de transparente a negro. Usando un degradado y una máscara, eliminaremos partes de la malla que se extienden más allá del área central de 960 px.
Asegúrese de que el estilo de degradado esté seleccionado como lineal. Comience a estirar el degradado moviéndose ligeramente desde el borde del espacio de trabajo central del líder hacia las guías que lo limitan hasta tocar el borde directamente. Repite lo mismo en el otro lado.
10 pasos
Coloquemos el texto en nuestra llamada. Tome fuente Arial, tamaño 45 puntos (#2C2C2C) y escriba algún eslogan, resaltando palabras significativas en negrita. Debajo, coloque la introducción del texto en un tamaño de fuente más pequeño (17 puntos) y mueva todo a lado izquierdo paneles de llamadas.
11 paso
Ahora prepararemos el área para la presentación de diapositivas. Seleccione la herramienta Marco rectangular y haga una selección entre las guías central y derecha. La altura del área seleccionada debe ser de 8 reglas horizontales, deje una regla vacía en la parte superior e inferior. Rellena este rectángulo con un color gris oscuro (#2C2C2C).
Agregue una sombra al fondo de su presentación de diapositivas: haga doble clic para abrir el panel Estilo de capa, seleccione Sombra paralela, cambie el Color a #2C2C2C, establezca la Distancia en 1px y el Tamaño en 10px.
A continuación, como diapositiva, debe colocar una captura de pantalla de algún sitio web en segundo plano; no importa. Tomé una captura de pantalla del primer blog que encontré, le cambié el tamaño exactamente al tamaño de nuestro fondo gris oscuro y luego agregué 10 píxeles de relleno (Seleccionar > Modificar > Contraer 10 píxeles, luego invertí la selección y eliminé su contenido presionando Eliminar). .
12 pasos
Para comenzar a trabajar con la sección principal, también debes agregar un degradado claro al fondo. Usando la herramienta Marco rectangular, seleccione toda el área debajo de la línea líder, luego seleccione la herramienta Degradado (G) con el color #F0F0F0 para transparente y arrastre el degradado hacia abajo. No vayas demasiado lejos: el fondo debe desvanecerse a #F9F9F9 hacia la parte inferior de la página.
13 paso
Agregue un párrafo introductorio al lado izquierdo del bloque del cuerpo. Fuente: Arial, tamaño de fuente: 18 pt, color >#9C9C9C, color del enlace #A3BBCC y subrayado.
14 paso
Agreguemos una lista de servicios. Primero, diseñe el encabezado: Arial, 25 puntos, negrita, color #262626. Haga la lista de elementos en tamaño 18pt, fuente Arial #9C9C9C. Complete los elementos de la lista usando Marquesina elíptica Herramienta, o usando códigos alt (Alt + 7) con un color de fuente azul claro (#A4BCCD) y alineación de cuadrícula.
Agregue cualquier información necesaria de la misma manera.
15 Paso
El bloque derecho de la sección principal generará últimas noticias. Primero, agregue un título con el mismo estilo que el anterior (Arial, 25 puntos, Negrita, color #262626) y alinéelo con la sección de servicios prestados. Ahora cree un titular para una de las noticias en fuente Arial, 18 puntos, #A4BDCD, y escriba el contenido en tamaño 16 puntos y color #9C9C9C. Escriba 3 noticias de esta manera y luego coloque un enlace a las noticias debajo de ellas en fuente Arial con subrayado, fuente de 16 puntos y color #A4BDCD.
16 paso
Nuestro último bloque Habrá un sótano en el que habrá un formulario para ingresar su nombre de usuario y contraseña, contactos y varios enlaces. Seleccione la parte inferior del documento usando la herramienta Marco rectangular y rellénela con gris oscuro (#262626).
Ahora necesitamos agregar un formulario para ingresar nombre de usuario y contraseña. Primero, en Arial Bold, 20pt, fuente blanca, haga la inscripción correspondiente en el lado izquierdo del pie de página. Luego use la herramienta Marco rectangular para crear dos rectángulos que servirán como campos de entrada. Etiquete los campos usando fuente Arial de 16 puntos y color #9C9C9C.
Repita lo mismo para el botón de enviar, solo que esta vez use la herramienta Rectángulo redondeado (U). Luego, agrega una Sombra Interior a estos elementos, reduce la Opacidad de este efecto al 30%, establece la Extensión en 0 y la Distancia en 10px. Agregar un enlace de recuperación contraseña perdida(Arial, 13 puntos, estilo subrayado, color #A4BDCD).
17 paso
Completemos el diseño agregando un bloque de contacto en el pie de página: titúlelo en Arial 20 puntos, negrita blanca (#FFFFFF) y alinéelo con el título del formulario de inicio de sesión. Luego agregue la información de contacto en una simple letra Arial de 16 puntos, también en blanco.
18 paso
Comprobar equilibrio y alineación. Usando tus guías y regla, revisa que todo esté en su lugar y que todo esté equilibrado. Si no, corríjalo.
Paso 19
Espero que este tutorial te haya dado un buen comienzo para aprender sobre sistemas de red y también para crear el tuyo propio, único entre los demás. diseño ordenado sitio. Recomiendo encarecidamente utilizar este tipo de rejillas en el futuro hasta que se convierta en un hábito. Con el tiempo, este enfoque simplificará enormemente su trabajo.
Comparte la lección
Información legal
Traducido del sitio www.tutorial9.net, el autor de la traducción se indica al comienzo de la lección.
Marco (del marco inglés - marco)
Es posible que ya haya oído hablar de marcos CSS como Blueprint, Grid System 960, Elastic, etc. También hay opiniones de que pueden ser un buen punto de partida para el desarrollo de su propio trabajo y reducir significativamente el tiempo de diseño de plantillas para sitios web. ¿Pero es esto realmente así? En este artículo veremos cómo usar CSS Frameworks usando el ejemplo de uno de los frameworks CSS más populares. RedSistema 960.
Y así CSS Frameworks es una herramienta que proporciona al diseñador (desarrollador) web una arquitectura clara basada en reglas escritas bastante precisas que permiten el diseño de plantillas de diseño para sitios web sin empezar desde cero.
AQuésemejanteMarcos CSS - Sistema Grid 960.
RedSistema 960- es un conjunto de hojas de estilo que proporcionan un contenedor común ubicado en una cuadrícula. La estructura dispone de dos pilas: la primera está formada por 12 columnas y la segunda por 16 columnas. En ambas cuadrículas, el ancho del contenedor común siempre sigue siendo 960 px.
¿Por qué elegir el tamaño 960px?
Actualmente, todos los monitores modernos admiten una resolución mínima de 1024x768 píxeles. El número 960 es divisible por 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480. Esto proporciona combinaciones mucho más flexibles en cuanto a las medidas de los altavoces que se pueden realizar.
En las imágenes a continuación puedes ver ejemplos de dos sitios que se hicieron usando dos grillas diferentes, la primera con 12 columnas y la segunda con 16.
Cómo utilizar el marco Grid System 960.
Primero, por supuesto, debe descargar el archivo del marco CSS Grid System 960, descomprimirlo, tomar la carpeta css de allí y moverla a donde se ubicarán todos los archivos de plantilla. Ahora inicie su editor favorito (recomiendo Adobe Dreamweaver) y cree un documento index.html. Conectemos todos los archivos necesarios al documento index.html. estructura.
Insertar entre etiquetas principales
= "hoja de estilo" tipo="text/css" media="all" href="css/reset.css" /> = "hoja de estilo" tipo="text/css" media="all" href="css/960.css" /> = "hoja de estilo" tipo="text/css" media="all" href="css/text.css" />También crearemos CSS separado el archivo “style.css” el cual contendrá nuestras propias reglas de estilo, lo guardamos en la carpeta ruta, esto se hace para no hacer cambios en los archivos css estructura.
Conectemos "style.css"
= "hoja de estilo" tipo="text/css" media="all" href="css/style.css" />
Cómo elegir un contenedor/malla a utilizar.
Ahora debemos seleccionar el tipo de cuadrícula que queremos usar, de 12 columnas (.Container_12) o de 16 columnas (.Container_16). Sabemos que ambas cuadrículas tienen una dimensión de 960 px, la única diferencia es que 12 columnas dividen la dimensión entre 12 y 16, respectivamente, entre 16.
La clase que selecciona el tipo de cuadrícula se ve así:
¿Cómo configurar el tamaño de la columna?
Cuando queremos dividir nuestro contenedor en varias columnas, simplemente podemos usar una clase para hacerlo. Grid_XX, en el que “XX” representa el número de columnas (de la cuadrícula seleccionada como contenedor). A partir del cual se compilará la columna que queremos obtener.
Por ejemplo, si queremos tener dos columnas (menú lateral y contenido), simplemente especifíquelo así:
La clase "grid_7" especifica que la barra lateral del menú debe tener un tamaño igual a 7 columnas de la cuadrícula seleccionada.
Como puedes ver, la suma de la primera columna (grid_7) con la segunda columna (grid_5) es exactamente 12, el número total de columnas que componen el grid del contenedor que seleccionamos (contenedor_12). De esta manera no necesitamos saber el ancho que debe tener cada columna, lo que facilita cambiar el tamaño de nuestras columnas a medida que se desarrolla el diseño.
Veamos otro ejemplo, necesitamos dividir nuestro contenedor principal en tres columnas de igual tamaño, no es necesario hacer ningún cálculo para determinar el tamaño deseado en píxeles que debe tener cada columna. Todo lo que necesitas hacer es aplicar un poco de matemáticas para obtener lo siguiente:
Como puedes ver, la suma de estas tres columnas grid_4 es exactamente 12 (4 + 4 + 4).
Espacios entre columnas.
Las configuraciones de columna predefinidas tienen un relleno específico entre ellas. Cada clase grid_XX tiene 10px. sangría tanto a derecha como a izquierda. Si queremos eliminar, por ejemplo, la sangría de la primera y última columna de nuestro diseño, necesitamos agregar la clase "alfa"Esto eliminará la sangría del borde izquierdo y "omega" por el correcto.
He aquí un ejemplo:
En el ejemplo, lo hicimos para que la primera columna no tenga sangría a la izquierda y la última a la derecha.
En caso de que queramos dejar uno o más espacios vacíos antes y después de la columna.
Para dejar uno o más espacios vacíos antes o después de una columna, necesita usar clases “prefijo_XX” o “sufijo_XX”, en lugar XX debes indicar el número de columnas que deseas dejar vacías.
Veamos un ejemplo:
En este ejemplo, lo hemos configurado antes de la columna cuadrícula_7 Habrá un espacio vacío igual a una columna, y también después de la columna. cuadrícula_3 Habrá una columna vacía.
No olvide que la suma de todas las columnas, incluidas las vacías, debe ser igual a 12 (cuadrícula_7 + cuadrícula_3 + prefijo_1 + sufijo_1) o 16 si seleccionó la cuadrícula adecuada.
Conclusiones
Como probablemente habrás notado, el marco CSS permite ahorrar significativamente tiempo en el proceso de diseño de un sitio web. Evidentemente, nadie prohíbe personalizar la plataforma según tus necesidades reales, ya que estas soluciones nunca pueden ser universales, especialmente en lo que respecta a la maquetación de tus obras. Por eso te aconsejo que no te quedes ahí. fácil de usar marco, pero vaya más allá y experimente.
Quiero dar una descripción completa del maravilloso marco de cuadrícula modular 960gs. Recientemente, en algún lugar de los comentarios dijeron que 960gs es más difícil de entender que el plano, lo que me sorprendió. No quiero comparar estos marcos, aunque solo sea porque funcionan en diferentes categorías de peso; sin embargo, para construir una cuadrícula modular, no he visto nada más fácil y fácil de entender que 960gs.
Parece que en Habré escribieron sobre redes modulares, pero la búsqueda de alguna manera nos decepcionó, se encontró todo tipo de basura, como "Geometría filosófica". Aquí hay algunos enlaces que se te ocurren:
Como soy programador, espero que los diseñadores y diseñadores de diseño experimentados me perdonen algunos errores si de repente se cometen a continuación en el texto. Eliminé todo el código en pastie.org, en primer lugar, Habr no le permite publicar el artículo completo debido a la gran cantidad de etiquetas al resaltar el código y, en segundo lugar, el código no inflará en vano el artículo.
960gs recibe su nombre de la elección de Nathan Smith, el autor del marco, de tener un ancho de contenedor completo predeterminado de 960 píxeles. Sin embargo, 960 px no es una limitación estricta en absoluto.
Todos los elementos de 960gs se describen como clases para CSS. Obviamente, deben usarse como<тег class=«960gs_someclass»>.
En este artículo usaré el código del marco del sitio web oficial, 960.gs/css/960.css. Para leer y comprender el artículo, no es necesario mirar este código; al final de la historia, me detendré en las formas de obtener el código CSS con más detalle.
En los ejemplos, usaré divs como elementos de marcado y, por conveniencia, los llamaré por el nombre de su clase 960gs. Por ejemplo, llamaré a un div con class.container_12 un elemento contenedor. Espero que esta pequeña libertad encuentre comprensión a los ojos del gurú del diseño.
Además, al describir los parámetros de los elementos del marco, solo describiré los parámetros del código CSS original. Por supuesto, el diseñador de diseño es libre de cambiarlos o agregar nuevas propiedades según lo necesite.
Cuando se traduce, el elemento de la cuadrícula recibió el nombre de "celda", que está algo lejos de la "cuadrícula" literal, pero no suena tan feo y está mucho más cerca de su propósito real. Compare: "poner tres cuadrículas en una fila" y "poner tres celdas en una fila".
Espero que se hayan superado las asperezas, así que pasaré directamente al tema de este artículo.
Recipiente
Recipiente– el elemento raíz del marcado 960gs, que especifica los parámetros para la red modular. "Elemento raíz" significa que solo los elementos del marco que son sus hijos participarán en la formación de la cuadrícula modular, "establecer parámetros" significa que todos los elementos del marco que están dentro del contenedor obedecen sus parámetros de manera uniforme.Un contenedor con 12 columnas podría verse así:
El contenedor especifica siguientes parámetros para una rejilla modular:
Todo lo demás queda a voluntad del diseñador.
Una página puede contener tantos contenedores como se desee, tanto con los mismos parámetros como con otros diferentes (obviamente, el diseñador debe tener razones muy convincentes para utilizar varias cuadrículas modulares diferentes en una página).
Es conveniente utilizar varios contenedores, por ejemplo, para dividir una página en áreas de encabezado/contenido/pie de página.
Los contenedores anidados dentro de la ideología 960gs son absurdos (imagínese en html), sin embargo, manipulando la sangría en css, es posible anidar contenedores uno dentro de otro. ¿Pero por qué?
En el futuro usaré un contenedor con parámetros:
- Ancho de columna: 60px
- Número de columnas: 12
- Ancho de ranura: 20px
- Ancho del contenedor = (60*12) + (20 * 11) + (20/2 * 2) = 960px
En la etapa de desarrollo, es conveniente utilizar una imagen de cuadrícula como imagen de fondo del contenedor, que puede tomar, por ejemplo, en el sitio web oficial (sobre esto se escribirá un poco más adelante). Es cierto, solo para diseños estándar de 12 y 16 columnas.
div.container_12 (fondo: #fff url("/img/12_col.gif") repetir-y;)
Red
Grid es uno de los dos elementos de marcado básicos diseñados para organizar elementos HTML en una cuadrícula contenedora modular. Una celda (cuadrícula) siempre orienta su contenido en un plano horizontal con respecto al contenedor. Una celda puede ocupar una columna de una cuadrícula modular, o todas a la vez los nombres de las clases reflejan esta propiedad: para una celda que ocupa una columna, la clase tendrá el nombre grid_1, para una celda con dos columnas, grid_2; una celda de cinco columnas: grid_5, etc. d. Por lo tanto, en términos generales podemos representar la clase como grid_ incógnita, donde X es el ancho de celda que necesitamos en las columnas de la cuadrícula modular. Veamos un ejemplo con las grillas grid_1, grid_6 y grid_12 respectivamente:Una celda bien puede estar adyacente a otras celdas horizontalmente, siempre que todas juntas no cubran más columnas de las que hay en el contenedor:
Tenga cuidado, si se requieren más columnas de las que tiene el contenedor, las celdas del extremo derecho que no caben en una línea se moverán a la fuerza a la línea de abajo.
Los lectores curiosos pueden examinar el código CSS y descubrir que los surcos se forman utilizando márgenes, a diferencia de las celdas, que requieren un elemento html. Sin embargo, espero que esto haya sido obvio para todos.
Los diseñadores de diseño agresivos pueden indignarse cambiar el nombre de todas las referencias a grid_ en el código marco a, por ejemplo, cell_, que, en mi opinión, se acerca más a la verdad y también es más claro.
Claro
Probablemente todos los que leyeron el código anterior notaron que apareció nuevo elemento:Claro– el segundo elemento básico del margen de beneficio de 960gs. Para comprender lo que hace clear, considere la siguiente situación: intentaré reescribir el último ejemplo sin usar clear y agregaré un borde rojo al contenedor para mayor comodidad.
Mmmm, el contenedor no se expandió con células infantiles, sino que permaneció delgado y solitario. Por eso, La primera tarea de Clear es estirar el contenedor principal al tamaño esperado.. Ahora, te sugiero que mires detenidamente el primer ejemplo de la sección de la cuadrícula, en el que cada celda por sí sola ocupa toda la línea. De este ejemplo es lógico concluir que la segunda tarea de clear es completar la línea actual, independientemente de cuántas columnas libres queden en ella.
Estas dos reglas hacen que sea un buen hábito cuando se trabaja con 960 gs terminar siempre cualquier línea con clear, incluso si es la última o única línea del contenedor.
No es ningún secreto que los diseñadores de diseño utilizan con relativa frecuencia divs con la clase clara. Para evitar posibles conflictos entre el código de todo el sitio y el código 960gs en el futuro, el diseñador probablemente debería cambiarle el nombre en el código archivo css clase de marco clara a alguna otra (por ejemplo, clr), o refinarla (por ejemplo, .container_12 .clear). Aún así, en mi opinión, cambiar el nombre en caso de posibles conflictos es un método más apropiado.
Alfa y Omega
A veces hay situaciones en las que es necesario anidar a varios más en una celda. Como ejemplo: necesitamos dos celdas sólidas muy largas a los lados, que ocupen 10 líneas de altura, y una celda en el medio, en cada una de las diez líneas.En tales casos deberías usar clases. alfa Y omega. La idea es simple: si anidamos varias otras celdas en una celda, entonces la primera celda anidada debe tener la clase alfa y la última, obviamente, omega.
Por cierto, el ejemplo es uno de los raros casos en los que es necesario utilizar la etiqueta
.
Si necesita anidar solo una celda, basta con usar solo la clase alfa, sin omega.
Prefijo, sufijo, empujar y tirar
Estos cuatro clase adicional, en esencia, son reemplazos más abstractos de padding-left, padding-right, left y right, respectivamente. Vale la pena señalar que usar estas clases es mucho más conveniente que calcular sangrías requeridas en tu cabeza o en una calculadora.Todos tienen nombres de clase similares a los nombres de clase de celda: classname_ incógnita, donde X es el número de columnas de la grilla modular.
Veamos un ejemplo sencillo:
Ahora apliquemos las clases prefijo_1, sufijo_1, push_1 y pull_1 a cada una de las celdas con la rima, respectivamente:
Eso es todo, el artículo enumera todas las características del 960gs, solo quedan algunos puntos por considerar.
En primer lugar, puede descargar el código con ejemplos del artículo en
