Cómo crear consultas multimedia personalizadas en Dreamweaver

2. Software
3. Adobe
4. Dreamweaver
5. Cómo crear consultas multimedia personalizadas en Dreamweaver

Libro Relacionado

Dreamweaver CC para maniquíes

Por Janine Warner

Cuando crea páginas utilizando funciones de diseño de cuadrícula fluida, Dreamweaver crea automáticamente las consultas de medios correspondientes para usted, pero puede crear sus propias consultas de medios personalizadas y utilizarlas para dirigirlas a sus propias reglas CSS.

Las consultas de los medios de comunicación se han utilizado en la web durante más de una década para otros usos, como la creación de un diseño de página alternativo optimizado para la impresión. Una consulta de medios se compone de un tipo de medio, como serigrafía o impresión (los dos más comunes), y una expresión opcional que verifica características particulares, como la altura o el ancho. Los tipos de medios más utilizados son

• todos: Adecuado para todos los dispositivos
• imprimir: Diseñado para la vista previa de impresión y para mostrar cuando se imprime una página
• pantalla: Para el contenido que se muestra en cualquier pantalla

El tipo de medio portátil casi nunca se utiliza y se utilizó mejor sólo para teléfonos celulares y otros dispositivos con pantallas pequeñas, ancho de banda limitado y pantallas monocromas que sólo admiten gráficos en mapa de bits. Los dispositivos iOS y la mayoría de los teléfonos inteligentes se clasifican como tipos de medio de pantalla.

Cómo aplicar estilos a los diseños de las páginas de Dreamweaver

Puede aplicar hojas de estilo como archivos externos enlazándolas o importándolas, o puede incluirlas como estilos internos en el área de cabecera del código HTML de su página. Incluso puede dirigir dispositivos utilizando estilos en línea, una opción práctica si desea aplicar una regla específica sólo a determinados dispositivos.

Puede utilizar una combinación de estas opciones y puede importar o enlazar varias hojas de estilo externas a la misma página web. Una vez que haya definido el tipo de medio con las características del medio al que desea dirigirse, especifique cómo deben aplicarse los estilos a la página.

Cómo utilizar las consultas de medios en hojas de estilo externas en Dreamweaver

Puede utilizar consultas multimedia con hojas de estilo externas de dos maneras. La primera opción es enlazar a una hoja de estilo externa con múltiples conjuntos de estilos separados por consultas de medios. Así es como Dreamweaver enlaza los estilos cuando se crea una cuadrícula fluida.

La segunda opción es enlazar dos o más hojas de estilo externas a cada página HTML e incluir las consultas de medios en cada hoja de estilo. De cualquier manera, el código para el CSS y el HTML se guardan en archivos separados, y la etiqueta los conecta.

Ya sea que guarde todas las consultas de medios y estilos relacionados en un archivo o en archivos CSS separados, también puede vincular hojas de estilo adicionales a cualquier página HTML. Por ejemplo, puede incluir un conjunto separado de estilos en una hoja de estilo separada que está diseñada para formatear la página cuando se envía a una impresora.

Cómo crear consultas de medios en Dreamweaver

Puede crear tantas consultas multimedia como desee en Dreamweaver y puede incluirlas en un archivo CSS o en varios. Para crear una nueva consulta de medios en Dreamweaver, siga estos pasos:

1. Abra el panel CSS Designer seleccionando Window→CSS Styles.
2. Seleccione una hoja de estilo existente en el panel Fuentes, o cree una nueva haciendo clic en el signo más (+) en el panel Fuentes.
3. Haga clic en el signo más (+) en el panel @Media en el panel Diseñador de CSS y se abrirá el cuadro de diálogo Definir consultas de medios.
4. Seleccione Medios de la primera lista desplegable y Pantalla de la segunda lista desplegable.
5. Mueva el cursor a la derecha de cada una de las listas desplegables para que aparezca el signo más y, a continuación, haga clic en el signo más para agregar un nuevo campo. Este campo es opcional, pero se utiliza habitualmente si desea crear diferentes diseños para vistas apaisadas y verticales en una tableta o en un smartphone. Si no desea crear presentaciones adicionales basadas en la orientación, puede eliminar este campo haciendo clic en el signo menos.Nota: Los signos más y menos se hacen visibles sólo cuando pasa el cursor por encima del lado derecho de la ventana de diálogo.
6. Mueva el cursor a la derecha de las listas desplegables, haga clic en el signo más una segunda vez para agregar un campo e introduzca una condición de ancho mínimo. El ancho mínimo es importante porque la consulta de medios se centra en los estilos basados en el rango de ancho mínimo y máximo que usted especifique, que se trata en el siguiente paso.
7. Mueva el cursor a la derecha de las listas desplegables, haga clic en el signo más una tercera vez para agregar un campo e introduzca la condición de ancho máximo.
8. Se cierra el cuadro de diálogo Consultas de medios y la consulta de medios se genera y se agrega a la hoja de estilo que seleccionó en el panel Fuentes del panel Diseñador de CSS.
9. Para añadir consultas multimedia adicionales a cualquier hoja de estilo seleccionada, repita los pasos del 3 al 8. Para añadir consultas de medios a una hoja de estilo diferente, repita los pasos del 2 al 8.

Aunque puede guardar las consultas de medios en tantas hojas de estilo diferentes como desee, guardarlas todas en una hoja de estilo externa es más eficiente porque cada hoja de estilo debe descargarse desde el servidor por separado, lo que requiere más ancho de banda. Descargar una hoja de estilo larga con múltiples consultas de medios es un poco más eficiente que descargar múltiples hojas de estilo.