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

14.1. Diseño web fijo

El diseño fijo utiliza tamaños fijos para un tipo de pantalla concreto. Durante un tiempo la mayoría de las pantallas eran de ordenadores con pantallas de tamaños conocidos (por ejemplo, 1024x768 y 1280x800) y no existían otros dispositivos como móviles y tablets, en esas circunstancias el diseño fijo tenía sentido. Actualmente ya no se utiliza para diseñar web completas, si puede usarse un diseño fijo para partes concretas de una página web.

Los inconvenientes del diseño fijo son que se desaprovecha el ancho cuando la pantalla es más grande que el diseño, y que no se ve bien el contenido cuando la pantalla es más pequeña, aparece la barra de desplazamiento horizontal que hace incomodo el uso.

Para este tipo de diseño se solían utilizar tablas con los tamaños de las filas y columnas fijos, y también contenedores div con tamaños fijos.

A continuación vamos a ver un ejemplo de cada uno de ellos, utilizaremos un diseño simple con una cabecera, un cuerpo dividido en tres columnas y un pie. El cuerpo tiene una columna a la izquierda para el menú, la zona principal más ancha en el centro, y una columna lateral a la derecha.

1. Diseño fijo con tablas HTML.

Como puedes ver en el siguiente código, la tabla tiene tres filas y tres columnas, en la primera fila la cabecera ocupa las tres columnas, en la segunda fila la primera columna tiene el menú, la segunda la zona principal y la tercera la zona lateral, la tercera fila es para el pie que ocupa las tres columnas.

<table class="table_fijo_tabla">
  <tr>
    <td  colspan="3" class="cabecera_fijo_tabla"><p>Cabecera (860 px)</p></td>
  </tr>
  <tr>
    <td class="menu_fijo_tabla">
      <p>menú (150 px)</p>
    </td>
   <td class="principal_fijo_tabla">
      <p>principal (510 px)</p> 
   </td>
   <td class="lateral_fijo_tabla">
      <p>lateral (200 px)</p>
   </td>
  </tr>
  <tr>
    <td  colspan="3" class="pie_fijo_tabla">
      <p>pie </p>
    </td>
  </tr>
</table>

Para definir las dimensiones de las filas hemos utilizado esta hoja de estilo. (En este caso y en el resto de la unidad hemos omitido escribir los colores de fondo):

.table_fijo_tabla {
	width: 860px;
 border-collapse: collapse;
 margin: 0 auto;
}
.cabecera_fijo_tabla {
 height: 4em;
}
.menu_fijo_tabla {
 width: 150px; 
}
.principal_fijo_tabla {
 width: 510px;
 height: 15em;
}
.lateral_fijo_tabla {
 width: 200px;
}
.pie_fijo_tabla {
 height: 3em; 
}

Puedes ver el resultado en esta página: Diseño fijo con tablas HTML

Observa que en la página del enlace anterior, si se hace la ventana más pequeña que el ancho de la tabla, aparecen las barras de desplazamiento en el navegador. Actualmente el uso de tablas para el diseño completo de una página web está desaconsejado.

A continuación también puedes ver esta captura de pantalla de la página anterior.

 Cursos Informática Gratuitos