Unidad 14. Técnicas de diseño web (I)

Como decíamos en el tema anterior, las técnicas de posicionamiento (Elementos flotantes, cajas flexibles, rejillas, ...) nos permiten crear diferentes diseños de páginas web. Existen infinidad de técnicas, tipos o esquemas de diseño, cada diseñador es libre de crear uno propio, pero vamos a estudiar unas técnicas generales de diseño que pueden servir de base para crear diseños personalizados.

El diseño web hereda muchas técnicas de maquetación de elementos impresos, como libros, revistas, etc. La gran diferencia es que mientras en una revista el tamaño es fijo, en la web los tamaños son variables según el dispositivo con que se visualicen.

Por simplificar nos vamos a centrar en el diseño o maquetación fijo, líquido y adaptativo (o adaptable, responsive en inglés). Para cada tipo vamos a crear varios ejemplos utilizando diferentes formas de posicionamiento (tablas, div, flotantes, cajas flexibles y rejillas). Vamos a tratar los siguientes casos:

1. Diseño fijo
1. Diseño fijo con tablas HTML.
2. Diseño fijo con contenedores div.
2. Diseño líquido
   1. Diseño líquido con tablas HTML.
   2. Diseño líquido con elementos flotantes.
   3. Diseño líquido con cajas flexibles. Flexbox.
   4. Diseño líquido con rejilla. Grid.
3. Diseño adaptativo
1. Diseño web adaptativo con flotantes.
2. Diseño web adaptativo con cajas flexibles. Flexbox.
3. Diseño web adaptativo con rejilla. Grid.

 Cursos Informática Gratuitos