Como criar consultas de mídia personalizadas no Dreamweaver - manequins

Quando você cria páginas usando recursos de layout de grade de fluido, o Dreamweaver cria automaticamente as consultas de mídia correspondentes para você, mas você pode criar suas próprias consultas de mídia personalizadas e usá-las para segmentar suas próprias regras CSS.

As consultas de mídia foram usadas na web há mais de uma década para outros usos, como criar um design de página alternativo otimizado para impressão. Uma consulta de mídia é composta por um tipo de mídia, como tela ou impressão (os dois mais comuns) e uma expressão opcional que verifica características específicas, como a altura ou a largura. Os tipos de mídia mais utilizados são

• tudo: adequado para todos os dispositivos

• imprimir: projetado para visualização de impressão e para exibição quando uma página é impressa tela

• : para conteúdo exibido em qualquer tela

O tipo de mídia do dispositivo portátil é quase nunca mais usado e foi usado melhor apenas para celulares e outros dispositivos com telas pequenas, largura de banda limitada e monitores monocromáticos que suportam apenas gráficos bitmap. Os dispositivos iOS e a maioria dos smartphones são categorizados como tipos de mídia de tela.

Como aplicar estilos aos projetos de sua página do Dreamweaver

Você pode aplicar folhas de estilo como arquivos externos, ligando-os ou importando-os, ou você pode incluí-los como estilos internos na região principal do seu código HTML da página. Você pode até mesmo segmentar dispositivos usando estilos inline - uma opção útil se você deseja aplicar uma regra específica apenas a determinados dispositivos.

Você pode usar uma combinação dessas opções, e você pode importar, ou vincular, várias folhas de estilo externas para a mesma página da Web. Depois de definir o tipo de mídia com os recursos de mídia que deseja segmentar, você especifica como os estilos devem ser aplicados na página.

Como usar consultas de mídia em folhas de estilo externas no Dreamweaver

Você pode usar consultas de mídia com folhas de estilo externas de duas maneiras. A primeira opção é vincular a uma folha de estilo externa com vários conjuntos de estilos separados por consultas de mídia. É assim que o Dreamweaver vincula os estilos quando você cria um layout de grade de fluido.

A segunda opção é vincular duas ou mais folhas de estilo externas separadas a cada página HTML e incluir as consultas de mídia em cada folha de estilo. De qualquer forma, o código para o CSS e o HTML são guardados em arquivos separados e a tag os conecta.

Se você salvar todas as consultas de mídia e estilos relacionados em um arquivo ou em arquivos CSS separados, você também pode vincular folhas de estilo adicionais a qualquer página HTML. Por exemplo, você pode incluir um conjunto separado de estilos em uma folha de estilos separada projetada para formatar a página quando ela é enviada para uma impressora.

Como criar consultas de mídia no Dreamweaver

Você pode criar tantas consultas de mídia como quiser no Dreamweaver e você pode incluí-las em um arquivo CSS ou em muitos. Para criar uma nova consulta de mídia no Dreamweaver, siga estas etapas:

1. Abra o painel do CSS Designer, escolhendo Window → CSS Styles.

2. Selecione uma folha de estilo existente no painel Fontes ou crie uma nova clicando no sinal de mais (+) no painel Fontes.

   

3. Clique no sinal de mais (+) no painel @Media no painel CSS Designer.

   A caixa de diálogo Definir mídia consultas é aberta.

4. Selecione Mídia na primeira lista suspensa e Tela na segunda lista suspensa.

   

5. Mova o cursor para a direita de cada uma das listas suspensas para que o sinal de mais apareça e, em seguida, clique no sinal de mais para adicionar um novo campo.

   Um novo campo aparece na caixa de diálogo Consultas de mídia para que você possa especificar a orientação. Este campo é opcional, mas é comumente usado se você deseja criar diferentes designs para visualizações de paisagens e retratos em um tablet ou em um smartphone. Se você não quiser criar layouts adicionais com base na orientação, você pode remover este campo clicando no sinal de menos.

   Nota: Os sinais de mais e menos ficam visíveis somente quando você rola seu cursor no lado direito da caixa de diálogo.

6. Mova o cursor à direita das listas suspensas, clique no sinal de mais uma segunda vez para adicionar um campo e digite uma condição mínima de largura.

   O campo Min-Width aparece na caixa de diálogo Consultas de mídia para que você possa especificar a largura mínima que deseja usar para direcionar a consulta. A largura mínima é importante porque a consulta de mídia segmenta os estilos com base no intervalo de largura mínimo a máximo especificado, coberto na próxima etapa.

7. Mova o cursor para a direita das listas suspensas, clique no sinal de mais uma terceira vez para adicionar um campo e digite a condição de largura máxima.

   O campo Max-Width aparece na caixa de diálogo para que você possa especificar a largura máxima que deseja usar para segmentar a consulta.

8. Clique em OK.

   A caixa de diálogo Consultas de mídia fecha e a consulta de mídia é gerada e adicionada à folha de estilo selecionada no painel Fontes no painel CSS Designer.

9. Para adicionar consultas de mídia adicionais a qualquer folha de estilo selecionada, repita as Etapas 3-8. Para adicionar consultas de mídia a uma folha de estilo diferente, repita as Etapas 2-8.

Embora você possa salvar consultas de mídia em tantas folhas de estilos diferentes quanto quiser, salvá-las em uma folha de estilo externa é mais eficiente porque cada folha de estilos deve ser baixada separadamente do servidor, exigindo mais largura de banda. Fazer o download de uma folha de estilo longa com várias consultas de mídia é um pouco mais eficiente do que baixar várias folhas de estilo.