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

14.2. Diseño web líquido o fluido

Como decíamos, el diseño fijo ya no se utiliza para diseñar páginas web, en su lugar se utilizan el diseño líquido y el diseño adaptativo. Aunque el diseño adaptativo es el más recomendable, el diseño líquido también se sigue utilizando, por lo que vamos a verlo a continuación.

La principal característica del diseño líquido o fluido es que se ajusta de forma automática a diferentes anchos de pantalla. Ello es debido a que la anchura se expresa en unidades relativas, principalmente en porcentaje (o en fracciones para el caso de rejillas).

Por defecto, los elementos de HTML tienen un comportamiento fluido, es decir, sino se especifica la anchura se adaptan al ancho de la pantalla. Esto sucede con los párrafos, contenedores div, tablas, ... aunque en muchos casos necesitamos colocar varios de estos elementos en una línea y darles un valor de anchura con lo cual pierden este comportamiento adaptativo, salvo que indiquemos la anchura de forma relativa.

1. Diseño líquido con tablas HTML.

Se empleaba hace algunos años, cuando no existían otros métodos. Es un método muy sencillo, sólo hay que indicar las dimensiones de la tabla en valores relativos.

Por ejemplo, el siguiente código HTML muestra una tabla con tres filas y tres columnas, en la primera y en la tercera fila se han unido las tres columnas en una sola.

<table class="table_tabla">
  <tr>
    <td  colspan="3" class="cabecera_tabla"><p>Cabecera </p></td>
  </tr>
  <tr>
    <td class="menu_tabla">
      <p>menú</p>
    </td>
    <td class="principal_tabla">
      <p>principal</p> 
    </td>
    <td class="lateral_tabla">
      <p>lateral</p> 
    </td>
  </tr>
  <tr>
    <td  colspan="3" class="pie_tabla">
     <p>pie </p></td>
 </tr>
</table> 

Por medio de la siguiente hoja de estilo damos valores relativos en porcentaje a las dimensiones.

.table_tabla {
  width: 100%;
  border-collapse: collapse
}
.cabecera_tabla {
  height: 4em;
}
.menu_tabla {
  width: 15%; 
}
.principal_tabla {
  width: 65%;
  height: 15em;
}
.lateral_tabla {
  width: 20%;
}
.pie_tabla {
  height: 3em;
}

Y este es el resultado:

 Cursos Informática Gratuitos