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 existian 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 solian 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;
}

Y este es el resultado:

Cabecera (860 px)

principal (510 px)

lateral (200 px)

pie

Observa que 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 esta desaconsejado.


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






Página inicial  Cursos Informática Gratuitos

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


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