Source: http://aprende-web.net/css/css8_2.php
Timestamp: 2017-03-29 07:25:16+00:00

Document:
Tipos de diseño con CSS
Visitas el mes pasado: 201 WEB-GRAFÍA
8.2 Tipos de diseño
La estructura de una página Web es la forma en que se veran sus contenidos.
Nos referimos aquí a los bloques de contenido, diferenciados unos de otros, que
se muestran en la pantalla en áreas distintas.
Hay varios tipos de estructura que suelen ser comunes a muchas páginas. Una estructura clásica suele tener varios bloques: una cabecera; un cuerpo central, en el que hay varias columnas (dos o tres normalmente) de las cuales una de ellas es mas ancha; debajo de todo se suele poner en otro bloque un pie de página.
A pesar de que este tipo de estructura es la más usada para el diseño de páginas, nada nos impide crear un tipo de estructura diferente, creando diseños originales que se salgan de estos estándares.
En este tema veremos las estructuras más comunes usadas en el diseño de páginas, así como las diferentes maneras de construirlas, y las ventajas e inconvenientes
Una vez aprendido ésto, el diseño de páginas distintas de las habituales es cuestión de imaginación y buen gusto.
Estructuras más habituales
Tal vez la estructura más simple que solemos encontrar en el diseño de páginas es la de
cabecera, un menú lateral izquierdo, un bloque central de contenidos, y el pie de página:
Otra estructura también muy habitual es la de cabecera, debajo de ella tres columnas, que
suelen ser un menú a la izquierda, los contenidos en el centro, y una columna lateral a la derecha. Debajo de éstas columnas un pie de página.
Nos basaremos en estos diseños para explicar cómo crear una página con varios bloques, ya que una vez que se aprende a crear una página con varios bloques de contenidos, cambiar
la posición, el tamañó y la cantidad de los bloques es cuestión de seguir los mismos
Conviene, antes de escribir el código del diseño de la página, hacerse un esquema
o dibujo de cómo queremos visualizar la página, con el sitio que va a ocupar cada bloque. Esto puede facilitarnos mucho el trabajo posterior.
Tamaño fijo o variable
Se entiende por tamaño fijo de página, aquel que utiliza para definir el tamaño de los bloques medidas fijas, que no varían aunque cambie el tamañó del navegador (por estar en una ventana que no ocupa toda la pantalla), mientras que el
posicionamiento variable hace que los bloques cambien de tamaño al cambiar el tamaño de la ventana.
En concreto el tamaño fijo utiliza como medida habitual los píxeles, mientras que el tamaño variable suele tener como medida el porcentaje.
El tamaño fijo o variable muestra diferente comportamiento en la pantalla del ordenador,
sobre todo en los siguiientes casos:
Ventana restaurada: en el sistema operativo Windows, las ventanas que muestran los
programas (el navegador también) pueden estar definidas de tres maneras; maximizada: la ventana
ocupa toda la pantalla; Restaurada: la ventana ocupa parte de la pantalla, dejando ver en la
parte que no ocupa otras ventanas que no están activas o el fondo del escritorio; Ventana minimizada:
la ventana no se muestra pero tiene una pestaña en la barra de tareas. El comportamiento de la
página Web es distinto para la página en la ventana restaurada, según su diseño sea fijo o variable.
Resolución de pantalla La resolución de pantalla es la cantidad de píxeles que se muestran en
la pantalla. se mide en "pixeles_ancho" x " píxeles_alto". Ésta puede variar de un usuario a otro, ya que el mismo usuario puede cambiarla en su ordenador. En Windows para cambiarla pulsamos el botón derecho del ratón
en el escritorio, y en el menú emergente pulsamos en propiedades; aparecerá el cuadro "propiedades
de pantalla", y allí elegimos la pestaña "configuración". Las resolución de pantalla depende también del tipo de pantalla, en pantallas más estrechas (4 x 3) suelen ser de 800 x 600px, 1024 x 768px, 1280 x 960, etc.; en pantallas más anchas (16 x 9)la resolución puede ser de
1280 x 768, 1440 x 900, etc. Las páginas Web tienen diferente comportamiento
al cambiar la resolución de pantalla, según su diseño sea fijo o variable.
Veamos ahora cual es el comportamiento de cada uno de estos dos tipos de tamaño:
Tamaño variable: porcentajes.
Ventana restaurada: En el tamaño variable los contenidos de la ventana se adaptan a su tamaño, reduciendose también el tamañó de los bloques de forma proporcional. Las cajas siempre ocuparán un tanto por ciento del tamaño de la ventana, ya sea ésta más
grande o más pequeña. El problema puede estar en que los contenidos de dentro de
las cajas, (párrafos, imágenes, tablas, etc.) no siempre están definidos en diseño
variable (porcentajes), con lo que al reducir el tamaño de la ventana, puede que la página no se visualice bien.
Resolución de pantalla En el diseño variable, las cajas o bloques en los que
se divide la página se muestran siempre de la misma anchura, sea cual sea su resolución, ya que estas ocupan un tanto por ciento de la pantalla. el problema puede estar otra vez en el contenido de los bloques, que de no estar definidos en tantos por cientos, se verán
más pequeños cuanto mayor sea la resolución, haciendo que, por ejemplo, en los párrafos
las líneas no tengan la misma longitud ni el párrafo la misma altura con diferentes resoluciones, Tamaño fijo: píxeles.
Ventana restaurada: En el tamaño fijo los contenidos de la ventana muestran siempre el mismo tamaño. Al reducir o ampliar el tamaño de la ventana, si la página no cabe en ella, se muestran las barras de desplazamiento horizontal y vertical, pero los bloques y demás
elementos de la página no reducen su tamaño. El principal problema es que la página no se visualiza entera aunque tenemos la ventaja de saber que siempre se visualizará de la misma
Resolución de pantalla: En el tamaño fijo, al variar la resolución de pantalla, también varía el tamaño de visualización de la página. esto se debe a que la página
tiene un número fijo de píxeles de ancho o de alto. Al variar el número de píxeles de la pantalla, la página sigue teniendo los mismos, con lo cual le sobrarán o le faltarán píxeles para acabar de llenar toda la pantalla. Cuanto mayor sea la resolución, la página
se verá más pequeña, con lo cual puede ser que en la ventana se vea un espacio sobrante. Sin embargo el aspecto será siempre el mismo, ya que la reducción o aumento de la página es en la misma proporción para todos sus elementos. Para minimizar el aspecto
de los espacios sobrantes, lo que suele hacerse es centrar la página respecto a la ventana.
Las siguientes páginas de ejemplo son una con diseño fijo y otra variable, aparentemente
pueden ser casi iguales, sin embargo puedes comprobar las diferencias cambiando la resolución de pantalla o restaurando la ventana y cambiándole su tamaño.
Página de tamaño variable
Página de tamaño fijo También podemos combinar los dos tipos de tamaño, de forma que unas cajas sean fijas y otras
variables, o poner un límite al diseño variable, de forma que a partir de ciertas medidas no pueda expandirse o contraerse más la caja. Todo esto lo veremos más adelante.
Al dar una medida a una caja mediante las propiedades width y height
se tiene en cuenta sólo lo que es la caja en sí, por tanto no entran ahí ni los márgenes, ni el borde ni el relleno.
Al diseñar una página, debemos tener en cuenta que cada caja o bloque va a ocupar no sólo
la medida que le demos, sino también la de sus márgenes, su borde y su relleno. Por tanto la
medida real del ancho de un bloque será la suma de:
El ancho de la caja en si, dado mediante la propiedad width.
El ancho del relleno o padding, tanto por su izquierda como por su derecha.
El ancho de los bordes izquierdo y derecho.
Los márgenes (margin) izquierdo y derecho.
Es importante tener en cuenta que la caja va a ocupar la suma de todas estas medidas, ya que al diseñar la página hay que tener en cuenta el sitio que va a ocupar y el sitio
que queda libre para insertar las otras cajas.
Para la altura de la caja ocurre lo mismo, así que la altura real será también la suma de todos los elementos anteriores en altura.
Diseño posicionado o diseño flotante
Según empleemos la propiedad position o la propiedad float para diseñar los bloques de la página tendremos distintos tipos de diseño. Mediante la propiedad position Tendremos un diseño posicionado, en el que marcamos en qué lugar deben ir cada uno de los bloques. Con la propiedad float es el
mismo tamaño de los bloques el que marca donde deben posicionarse.
Son por tanto distintos métodos de trabajo, y por lo tanto distintas formas de diseñar la página.
En la siguiente página veremos cómo diseñar una página mediante la propiedad position y las propiedades de desplazamiento:
Diseño posicionado.

References: Resolución 
 resolución 
 resolución 
 resolución 
 resolución 

Resolución 

Resolución 
 resolución 
 resolución