Cómo diseñar páginas web en columnas

Debido a diseños de páginas similares (como un diseño de tres columnas) tienen diferentes cantidades de contenido, cuando se está diseñando páginas web, usted tiene que planificar para que el contenido extra irá si no encaja dentro de la columna.

La respuesta simple: Down. El punto: Desplazamiento verticalmente (Arriba y abajo) en lugar de horizontalmente (De lado) en las páginas web es mucho más intuitivo y funcional. En lo negativo: Desplazamiento de ida y vuelta y de ida y vuelta y de ida y vuelta (que está recibiendo el punto) con una barra de desplazamiento horizontal realmente rompe el flujo cuando la gente está tratando de leer una página.

En otras palabras, las personas pueden desplazarse mucho más fácilmente arriba y abajo de lo que pueden desplazarse a la derecha ya la izquierda.

Aunque filas horizontales (conjuntos de contenido) juegan un papel en el diseño de páginas web, columnas definen el diseño de páginas. Una página 960 de rejilla puede ser tan largo o corto como quiera que sea. Pero de una manera u otra, el diseño de páginas tiene que permitir que el contenido de ampliar hacia abajo.

Las opciones básicas son las siguientes:

Puede tener columnas sin altura definida, permitiendo que el contenido se expanda hacia abajo tanto como sea necesario.
Se puede definir alturas de la columna, pero luego se va a invocar otras técnicas para permitir que el contenido se expanda hacia abajo, como cajas desplazables o flexibles.

Si usted examina muchas páginas web bien diseñados, se verá que no sólo están mayoritariamente dispuestos en contenedores 960 px, pero todos están esencialmente dispuestos en dos o tres columnas.

De Verdad? Cuando usted examina una gran cantidad de sitios bien diseñados, no lo harán Aparecer para ser presentado en dos o tres columnas. Se van a ver como que están dispuestos en 5 columnas, o 8 o 11. Pero si se mantiene una regla o una hoja de papel hasta la pantalla, verás que subyacen en todas las columnas en una página es una diseño más básico.

Echar un vistazo a la página de IMDb (Base de Datos de Películas Independientes). A primera vista, podría parecer que esta página se presenta en cinco o incluso ocho columnas (si se cuentan las tres columnas en la parte inferior derecha).

Video: 7. HTML5 Cómo crear una página con tres columnas

Pero si se traza una línea alrededor de las tres cuartas partes de la página desde el borde izquierdo, se puede ver que subyace a las cinco columnas visibles (en la mayor parte de la página) es una estructura más básica de dos columnas. Esa división de dos columnas básico se ilustra aquí:

La conclusión es la siguiente: Al diseñar páginas, es fácil de dividir columnas - dividirlos en dos, tres, cuatro, cinco y más columnas. Sin embargo, es técnicamente fácil de dividir los elementos de diseño de página, pero técnicamente difícil permitir que el contenido extenderse a lo largo de dos columnas definidas. Así que la regla por razones técnicas, es que las columnas en el diseño web son fáciles de dividir, pero difícil de combinar.

Video: Maquetación html + css, header, navegación, 2 columnas y footer

Así que cuando llega el momento para que usted pueda traducir un diseño en una página web, primero dividir la página en dos o tres columnas, y luego más subdividir esas columnas como sea necesario. Por ejemplo, Los New York Times El sitio parece que está dividido en cinco columnas.

Pero cuando uno se acerca y echa un vistazo a la página que se muestra en la siguiente figura, se puede ver cómo debajo de esas cinco columnas son en realidad dos columnas, cada una de las cuales se subdividen en otras columnas a veces. O, como en el caso de que el anuncio prominente en la derecha; la columna lado, el contenido puede expandirse para llenar una columna entera.

Hay una excepción a la regla aquí: Los principales elementos de la página se encuentran en un diseño de dos columnas, pero la cabecera (con la Veces cabecera) y el pie (no visible en las capturas de pantalla) son elementos de columnas individuales que se extienden a través de la totalidad de 960 px; recipiente amplia que enmarca la página.

Esta regla columna dos o tres se aplican sólo a los periódicos en línea? No. La siguiente figura muestra que el sitio de Facebook se divide en dos columnas, y YouTube se presenta en tres columnas.

Tenga en cuenta que la columna central de YouTube es a veces divididas por la mitad, en dos columnas. A medida que explore la web e identificar los sitios que usted aprecia, tome tiempo para deconstruir la forma en que se estructuran en torno a dos o tres columnas.