Saiba como usar o painel CSS Designer para criar ou anexar folhas de estilos, consultas de mídia, seletores e definir propriedades CSS.
O painel CSS Designer (Janela > CSS Designer) é um Inspetor de Propriedades CSS que permite criar "visualmente" estilos CSS, arquivos e definir propriedades, junto com consultas de mídia.
As seções a seguir estão disponíveis na interface do CSS Designer:
Usando o CSS Designer, você pode editar uma regra individual em uma folha de estilos CSS (use a guia Atual no CSS Designer) ou, se preferir, pode trabalhar diretamente na folha de estilos CSS (use a guia Todos no CSS Designer).
No painel Origens do painel CSS Designer, clique em 
e em uma das seguintes opções:
Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas.
Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando uma CSS, o local para salvar o novo arquivo.
Siga um destes procedimentos:
(Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS.
No painel CSS Designer, clique em uma origem CSS no painel Origens.
Clique em 
no painel @Mídia para adicionar uma nova consulta de mídia.
A caixa de diálogo Definir consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o Dreamweaver.
Selecione as Condições conforme desejar.
Verifique se você especificou valores válidos para todas as condições selecionadas. Caso contrário, as consultas de mídia correspondentes não serão criadas com sucesso.
Apenas a operação 'And' é compatível com múltiplas condições.
Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas).
Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel @Mídia.
No painel CSS Designer, selecione uma origem CSS no painel Sources ou uma consulta de mídia no painel @Media.
No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente e sugere o seletor relevante (até três regras).
Execute um ou mais destes procedimentos:
Observação: a opção Duplicar na consulta de mídia está disponível somente quando a fonte do seletor selecionado contém consultas de mídia. Não é possível duplicar um seletor de uma fonte em uma consulta de mídia de outra fonte.
Agora é possível copiar estilos de um seletor e colá-los em outro. Você pode copiar todos os estilos ou somente uma categoria de estilos específica, como Layout, Texto e Borda.
Clique com o botão direito em um seletor e escolha entre as opções disponíveis:
Clique no seletor desejado e arraste-o para a nova posição no painel Seletores.
As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades:
antes de editar as propriedades de um seletor CSS, identifique os elementos associados a ele usando a Inspeção inversa. Ao fazer isso, você pode avaliar se todos os elementos realçados na Inspeção inversa realmente exigem alterações.
Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar para um seletor, desmarque a caixa de seleção Exib. conj.
Para definir uma propriedade, como width ou border-collapse, clique nas opções necessárias exibidas perto da propriedade no painel Propriedades.
As propriedades substituídas são indicadas em formato de tachado.
Usando os controles de caixa no painel Propriedades do CSS Designer, é possível definir rapidamente as propriedades de margens, preenchimento e posição. Se preferir código, você pode especificar código abreviado para margem e preenchimento nas caixas de edição rápida, conforme mostrado neste exemplo.
Clique nos valores e insira o valor necessário. Se quiser que todos os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de link no centro.
A qualquer momento, você pode desabilitar ou excluir valores específicos, por exemplo, o valor da margem esquerda mantendo os valores direito, principal e inferior.
As propriedades de Controle de borda são organizadas em guias lógicas para ajudar você a visualizar ou modificar rapidamente as propriedades.
Se preferir código, você pode especificar código abreviado para bordas e raio da borda na caixa de texto de edição rápida.
Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são então habilitadas e as propriedades definidas na guia 'Todos os lados' são refletidas para bordas individuais.
Quando você altera uma propriedade nas guias de borda individuais, o valor da propriedade correspondente na guia 'Todos os lados' muda para 'indefinido' (valor padrão).
No exemplo abaixo, a cor da borda foi definida como preta e depois alterada para vermelho na borda superior.
O código inserido é baseado na configuração de preferência para abreviado ou por extenso.
Durante a Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, seguida por “Superior“, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se apenas o valor principal de uma borda for definido, o modo computado leva o foco para a guia "Superior" ignorando a guia "Todos os lados" porque a guia "Todos os lados" não está definida.
O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS a partir do painel CSS Designer, sem ter que fazer alterações diretamente no código. Quando você comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores específicos têm na sua página.
Quando você desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentários de CSS e um rótulo [desativado] à propriedade do CSS que você desativou. Você pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferência.
Você pode desabilitar ou excluir cada propriedade usando o CSS Designer.
As capturas de tela a seguir mostram os ícones de desativar e excluir da propriedade height. Esses ícones ficam visíveis quando você passa o mouse na propriedade.
Você também pode usar os controles excluir e desabilitar no nível do grupo Controle de borda para aplicar essas ações a todas as propriedades.
Você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Você também pode navegar entre os grupos de propriedades no painel Propriedades.
|
Atalho |
Fluxo de trabalho |
|
CTRL + Alt +[Shift =] |
Adiciona seletor (se o controle estiver na seção de seletor) |
|
CTRL + Alt+ S |
Adiciona seletor (se o controle estiver em qualquer lugar no aplicativo) |
|
CTRL + Alt +[Shift =] |
Adiciona propriedade (se o controle estiver na seção de propriedade) |
|
CTRL + Alt+ P |
Adiciona propriedade (se o controle estiver em qualquer lugar no aplicativo) |
|
Select + Delete |
Exclui o seletor, se ele estiver selecionado |
|
CTRL + Alt + (PgUp/PgDn) |
Salta entre as seções enquanto estiver no subpainel de propriedades |
Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um cabeçalho, e um texto de rodapé podem ser associados ao mesmo seletor CSS. Ao editar as propriedades do Seletor CSS, todos os elementos associados ao seletor serão afetados, incluindo aqueles que não serão alterados.
Realce dinâmico ajuda a identificar todos os elementos associados a um Seletor CSS. Para alterar apenas um elemento ou alguns elementos, você pode criar um novo seletor CSS para os elementos e editar as propriedades.
Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com Código ativo “desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas.
Para fixar o realce dos elementos, clique no seletor. Agora, os elementos estão realçados com uma borda azul.
Para remover o realce azul em torno de elementos, use o seletor novamente.
O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de ferramentas Documento, e clique em Desativar realce dinâmico.
Quando você edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS são atualizados para refletir essas edições.
É possível exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincular-se a uma folha de estilos externa para aplicar os estilos encontrados nesse local.
Você pode anexar às páginas qualquer folha de estilos criada ou copiada no site.
Abra o CSS Designer seguindo um destes procedimentos:
No CSS Designer, clique no ícone + ao lado de Origens e selecione Anexar arquivo CSS existente.
Siga um destes procedimentos:
Clique no botão Visualizar para verificar se a folha de estilos aplica os estilos desejados à página atual.
Se os estilos aplicados não forem o que você espera, clique em Cancelar para remover a folha de estilos. A aparência da página será revertida para o estado anterior.
Clique em OK.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
