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

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 asignarles a cada una 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.

Estas media query, o consulta de medios, pueden realizarse a través del Diseñador de CSS, el cual tiene un subpanel llamado @Medios. Cuando creamos una consulta, ésta aparece en el panel y podemos seleccionarla para crear las correspondientes reglas de estilo.

Al pulsar el botón de la sección @Medios, se abre un cuadro de diálogo donde definimos las características del dispositivo para el que vamos a crear reglas de estilo. Por ejemplo, supongamos que deseamos crear reglas de estilo para todos nuestros selectores CSS para el caso de que nuestra página sea vista en pantallas de 480px como caso mínimo y máximo de 720px.

Observa que en la sección Condiciones, tenemos dos desplegables, uno para el establecer la condición de la consulta y otro más para establecer la salida. En este caso, la pantalla (screen). Conforme vamos añadiendo las condiciones, el código va generándose en la parte inferior.

Al pulsar Aceptar, la consulta de medios pasa a formar parte del subpanel @Medios. Al hacer clic en la consulta, la pantalla se ajustará a la misma y podemos añadir selectores CSS con propiedades que se aplicarán cuando la página sea vista en dispositivos que cumplan con las condiciones. Por ejemplo, en la siguiente imagen, podemos ver que ya está definida y seleccionada la consulta, por lo que podemos crear reglas de estilo para los párrafos (etiqueta <p>) o añadir cualquier otro selector, de clase, ID, etcétera.

 

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.