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 liquido 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 elemento de HTML tienen un comportamiento fluido, es decir, sino se especifíca 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:

 

Cabecera

principal

lateral

pie


Enero-2019 (V 2.0)
Pág. 14.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.