Unidad 18. Diseño de página. Maquetación web (X)

Al abrir un documento de este tipo, Dreamweaver nos presenta una cuadrícula con columnas para que podamos encajar los elementos contenedores Div. Estos elementos deben ser creados mediante el comando Insertar etiqueta Div de diseño de cuadrícula fluida, del menú Insertar.

Por ejemplo, en la siguiente imagen vemos el diseño de una página con varios de estos elementos Div, en el primero hay una foto, en el segundo el título "Parque Natural Sierra Bicuerca", en el siguiente las opciones del menú, etc. Como estamos diseñando para un móvil, con poca anchura, colocamos los elementos uno encima de otro

Sin embargo, cuando estamos en el diseño para tabletas colocamos dos elementos en la misma fila, uno al lado del otro. Como puedes ver en la siguiente imagen.

Lo interesante de este diseño con cuadrícula fluida es que no tenemos que crear dos páginas web distintas, ambos diseños están en la misma página, simplemente tenemos que pulsar en el icono correspondiente para alternar una vista u otra de cada dispositivo (móvil, tableta, escritorio).

No sólo podemos variar la estructura de los elementos Div, también podemos definir elementos con estilos CSS diferentes para cada ancho de pantalla (móvil, tableta, escritorio). Y lo mejor es que Dreamweaver se encarga de todo, nosotros sólo tenemos que definir el estilo que queramos y automáticamente se le asigna al dispositivo en que nos encontremos.

Por ejemplo, si te fijas en el tamaño del título ( "Parque Natural Sierra Bicuerca") de las dos imágenes anteriores, verás que es más pequeño en el diseño para móvil que en el diseño para tableta porque hemos definido distinto tamaño de la fuente. Lo que ha hecho Dreamweaver es crear tres reglas #titulo y asigarles a cada un tamaño diferente de fuente, como puedes ver en la imagen siguiente.

Para que el diseño se adapte a distintos dispositivos el código de la hoja de estilo contiene media query que son instrucciones condicionales como la siguiente:

@media only screen and (min-width: 481px) { ... definición estilos ... }

Esta media query hace que las definiciones de estilo se apliquen sólo a las pantallas que, como mínimo, tengan un ancho de 481 px.

Como este tipo de instrucciones no son soportadas por navegadores antiguos, como Internet Explore 8, se incluye el archivo respond.min.js que suple esta carencia.

Para manejar estas instrucciones y otras similares, al crear una página de cuadrícula fluida Dreamweaver crea tres archivos adicionales (boilerplate.css, respond.min.js y una hoja de estilo) estos archivos han de guardarse y subirse al servidor junto con el archivo .html

En este vídeo puedes ver todo el proceso de diseño de forma más detallada:

Puedes ver un sitio de prueba realizado con este tipo de diseño en esta página fluido4, redimensiona la ventana para ver cómo va cambiando el diseño.

Ejercicio propuesto la Unidad 18

Prueba evaluativa de la Unidad 18

 Cursos Informática Gratuitos