Entradas

Mostrando las entradas etiquetadas como diseño elástico

Estilos de maquetación web

Imagen
Los principales estilos de diseño que existen en la maquetación de una página web son: Sin diseño : es como se hacían las páginas web cuando nació la Web en 1990. Diseño fijo : se realiza cuando se trabaja con un ancho fijo. Este estilo de diseño tiene un problema importante : Cuando la resolución de pantalla es menor que el ancho definido para la página, aparece una barra de desplazamiento horizontal . Cuando la resolución de pantalla es mucho mayor que el ancho definido, se desaprovecha la pantalla de visualización. Hay varias formas de lograr una maquetación mediante un diseño fijo. La más antigua se realizaba sin la ayuda de CSS, se empleaba una tabla que permitía dividir la página web como si fuera una cuadrícula. Con el atributo width se definía el ancho de la tabla y de las celdas. El diseño fijo con tablas quedó obsoleto hace ya muchos años,  ya que el diseño con tablas presenta muchos problemas: mezcla el contenido con la presentación, el cód...

¿Qué es el diseño elástico?

Imagen
Diseño elástico es el que permite crear diseños que se adaptan a distintos dispositivos . Este diseño se basa en el tamaño del texto y sus posibilidades son limitadas. En el diseño elástico el ancho de la página no es fijo. El tamaño de la página y sus elementos  está declarado en relación con el tamaño del texto, que se suele especificar en em. La principal  ventaja de este diseño es que cuando se aumenta el tamaño del texto, este se reajusta  perfectamente a la estructura, sin desbordamientos. ¿Cómo se realiza un diseño elástico? Para el body, es decir para toda la página, se define un ancho fijo, y luego se define un ancho para cada una de las columnas que componen la página. La suma del ancho de las columnas es igual al ancho total. Para que esto sea verdad es muy importante poner a cero el margen de la página y de las columnas. La anchura de los distintos bloques de la página tendrás que definirlas con la unidad de medid...