Como criar consultas personalizadas de mídia no Dreamweaver
Ao criar 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 personalizados e usá-los para direcionar suas próprias regras CSS.
Menu
consultas de mídia têm sido utilizados na web para mais de uma década para outros usos, tais como a criação de um design página alternativa otimizado para impressão. A consulta de mídia é composta de um tipo de mídia, tais como tela ou impressão (As duas mais comuns), e uma expressão opcional que verifica a existência de características particulares, tais como a altura ou largura. Os tipos de mídia mais comumente usados são
todos: Indicado para todos os dispositivos
impressão: Projetado para visualização de impressão e para a exibição quando uma página é impressa
tela: Para o conteúdo exibido em qualquer tela
o portátil tipo de mídia quase nunca é mais usado e foi melhor utilizados apenas para telefones celulares e outros dispositivos com telas pequenas, largura de banda limitada e displays monocromáticos que suportam apenas os gráficos de bitmap. dispositivos iOS e a maioria dos smartphones são categorizados como tela tipos de mídia.
Como aplicar estilos para seus designs de página do Dreamweaver
Você pode aplicar folhas de estilo como arquivos externos, ligando-os ou importá-los, ou você pode incluí-los estilos como internos na região da cabeça do código HTML da sua página. Você pode até direcionar dispositivos usando estilos in-line - uma opção útil se você deseja aplicar uma regra específica apenas para certos dispositivos.
Você pode usar uma combinação dessas opções, e você pode importar ou vincular, várias folhas de estilo externa para a mesma página web. Depois de definir o tipo de mídia com os recursos de mídia que você deseja atingir, você especifica como os estilos deve ser aplicada à página.
Como usar consultas de mídia em folhas de estilo externas em Dreamweaver
Você pode usar consultas de mídia com folhas de estilo externas de duas maneiras. A primeira opção é para conectar-se a uma folha de estilo externa com vários conjuntos de estilos separados por consultas de mídia. Isso é como Dreamweaver liga os estilos quando você cria um layout de grade fluido.
A segunda opção é ligar duas ou mais folhas de estilo externa separadas para cada página HTML e incluir as consultas de mídia em cada folha de estilo. De qualquer maneira, o código para o CSS e HTML são salvos em arquivos separados, eo tag conecta-los.
Se você salvar todas as consultas de mídia e estilos relacionados em um arquivo ou em arquivos CSS separados, você pode ligar folhas de estilo adicionais para qualquer página HTML também. Por exemplo, você pode incluir um conjunto separado de estilos em uma folha de estilo separada que é projetado para formatar a página quando ela é enviada para uma impressora.
Como criar consultas de mídia em Dreamweaver
Você pode criar quantas consultas de mídia como você gosta no Dreamweaver e você pode incluí-los em um arquivo CSS ou muitos. Para criar uma nova consulta de mídia no Dreamweaver, siga estes passos:
Abra o painel de Designer do CSS, escolhendo estilos de janela-CSS.
Selecione uma folha de estilo existente no painel de Fontes, ou criar uma nova clicando no sinal de mais (+) no painel de Fontes.
Clique no sinal de mais (+) no painel de @media no painel CSS Designer.
A caixa de diálogo Definir consultas de mídia abre.
Selecionar Mídia na primeira lista drop-down e tela a partir da segunda lista drop-down.
Mova o cursor para a direita de cada as listas drop-down para fazer o sinal de adição aparecer, 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 desenhos diferentes para paisagem e retrato em um tablet ou um smartphone. Se você não quiser criar layouts adicionais com base na orientação, você pode remover esse campo, clicando no sinal de menos.
Nota: O mais e menos sinais se tornam visíveis apenas quando você rola o cursor sobre o lado direito da caixa de diálogo.
Mova o cursor para a direita das listas drop-down, clique no sinal de mais uma segunda vez para adicionar um campo e introduza uma condição mínima de largura.
O campo Min-Largura aparece na caixa de diálogo Mídia consultas para que você pode especificar a largura mínima que deseja usar para direcionar a consulta. A largura mínima é importante porque a consulta de mídia tem como alvo os estilos com base no mínimo a faixa de largura máxima especificada, abordado na próxima etapa.
Mova o cursor para a direita das listas drop-down, clique no sinal de mais uma terceira vez para adicionar um campo e digite a condição de largura máxima.
O campo Max-Largura aparece na caixa de diálogo para que você pode especificar a largura máxima que deseja usar para direcionar a consulta.
Clique em OK.
A caixa de diálogo Mídia consultas fecha ea consulta de mídia é gerada e adicionada à folha de estilo que você selecionou no painel de Fontes no painel CSS Designer.
Para adicionar consultas de mídia adicionais para qualquer folha de estilo selecionada, repita os passos 3-8. Para adicionar consultas de mídia para uma folha de estilo diferente, repita os passos 2-8.
Embora você pode salvar consultas de mídia em tantas folhas de estilos diferentes como você quer, poupando-lhes tudo em uma folha de estilo externa é mais eficiente porque cada folha de estilo deve ser baixado a partir do servidor separadamente, exigindo mais largura de banda. Baixando uma folha de estilo por muito tempo com consultas múltiplas de mídia é um pouco mais eficiente do que o download de várias folhas de estilo.