Guia do Usuário Cancelar

Aplicar layout às páginas usando o CSS Designer

 

 

Saiba como usar o painel CSS Designer para criar ou anexar folhas de estilos, consultas de mídia, seletores e definir propriedades CSS.

Painel CSS Designer
Painel CSS Designer

O painel CSS Designer (Janela > CSS Designer) é um Inspetor de propriedades CSS que permite criar “visualmente” estilos e arquivos CSS e definir propriedades, junto com consultas de mídia.

As seções a seguir estão disponíveis na interface do CSS Designer:

  • Fontes: uma coleção de arquivos CSS associados ao projeto
  • @Mídia: consultas de mídia para controlar o tamanho da tela
  • Seletores: seletores associados à consulta de mídia selecionada no painel @Mídia
  • Propriedades: propriedades associadas ao seletor selecionado, com a opção de mostrar apenas as propriedades definidas

Com 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, trabalhe diretamente na folha de estilos CSS (use a guia Tudo no CSS Designer).

Criar e anexar folhas de estilo

  1. No painel Origens do painel CSS Designer, clique em e em uma das seguintes opções:

    • Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento
    • Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento
    • Definir na página: para definir um CSS no documento
    Criar e anexar folhas de estilos usando o CSS Designer
    Criar e anexar folhas de estilos usando o CSS Designer

    Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas.

  2. Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando um CSS, o local para salvar o novo arquivo.

  3. Siga um destes procedimentos:

    • Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS.
    • Clique em Importar para importar o arquivo CSS no documento.
  4. (Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS.

Definir consultas de mídia

  1. No painel CSS Designer, clique em uma origem CSS no painel Origens.

  2. Clique em no painel @Mídia para adicionar uma nova consulta de mídia.

    A caixa de diálogo Defina a consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o Dreamweaver.

  3. Selecione as Condições conforme desejar.

    Definir consultas de mídia
    Definir consultas de mídia

    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.

    Observação:

    somente a operação “and” é compatível com várias 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.

Definir seletores do CSS

  1. No painel CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mídia no painel @Mídia.

  2. No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente e solicita o seletor relevante (até três regras).

    Execute um ou mais destes procedimentos:

    • Use as teclas de seta para cima ou para baixo para tornar o seletor sugerido mais ou menos específico.
    • Exclua a regra sugerida e digite o seletor obrigatório. Certifique-se de digitar o nome do seletor junto com o identificador do Tipo de seletor. Por exemplo, se você estiver especificando uma ID, o nome do seletor deverá ter o prefixo “#”.
    • Para pesquisar um seletor específico, use a caixa de pesquisa na parte superior do painel.
    • Para renomear um seletor, clique no seletor e digite o nome necessário.
    • Para reorganizar os seletores, arraste-os até a posição desejada.
    • Para mover um seletor de uma origem para outra, arraste-o até a origem necessária no painel Origem.
    • Para duplicar um seletor na origem selecionada, clique com o botão direito do mouse no seletor e clique em Duplicar.
    • Para duplicar um seletor e adicioná-lo a uma consulta de mídia, clique com o botão direito do mouse no seletor, passe o mouse sobre Duplicar na consulta de mídia e escolha a consulta de mídia.

    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.

Copiar e colar estilos

Agora é possível copiar estilos de um seletor e colá-los em outro. Você pode copiar todos os estilos ou copiar apenas uma categoria de estilos específica, como Layout, Texto e Borda. 

Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis:  

  • Se um seletor não tiver estilos, as opções Copiar e Copiar todos estilos estarão desabilitadas.
  • A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a
    opção Copiar e Copiar todos estilos fica disponível.
  • É possível colar estilos já existentes parcialmente em um seletor (sobreposição). A união
    de todos os seletores é colada.
  • Também é possível Copiar e colar estilos para diferentes integrações de arquivos CSS;
    estilos de importação, link e inline.
Copiar e colar estilos
Copiar e colar estilos

Reorganizar seletores

Clique no seletor requerido e arraste-o para a nova posição com o painel Seletores.

Definir propriedades do CSS

As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades:

  • Layout
  • Texto
  • Borda
  • Fundo
  • Mais (lista de propriedades “somente texto” e não de propriedades com controles visuais)
Observação:

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, por exemplo, 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 tachado.

Definir margens, preenchimento e posição

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 o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição rápida, como exibido neste exemplo.

Propriedade da margem
Propriedade da margem

Clique nos valores e insira o valor necessário. Se você desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de vínculo no centro.

A qualquer momento, você pode desativar ou excluir valores específicos, por exemplo, o valor da margem esquerda e manter os valores das margens direita, superior e inferior.

Definir propriedades de borda

As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades. 

Propriedades de controle da borda
Propriedades de controle da borda

Se preferir o código, você poderá especificar o 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 ativadas e as propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais.

Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “undefined” (valor padrão). 

No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior. 

Definir cor da borda em todos os lados
Definir cor da borda em todos os lados

Borda em todos os lados
Borda em todos os lados

Definir cor da borda na parte superior
Definir cor da borda na parte superior

Cor da borda definida como vermelho na parte superior
Cor da borda definida como vermelho na parte superior

O código inserido é baseado na configuração da preferência para o formato abreviado ou longo. 

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 estiver definido um valor apenas para a borda superior, o modo computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”.

Desativar ou excluir propriedades

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 desativar ou excluir qualquer 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.

Desativar/excluir propriedade
Desativar/excluir propriedade

Também é possível usar as opções de excluir e desativar no nível de grupo de controle de bordas para aplicar essas ações a todas as propriedades.

Atalhos do teclado

Você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Também é possível 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 

Identificação de elementos de página associados a um Seletor CSS

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 devem ser 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. 

Vincular a uma folha de estilos CSS externa

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.

  1. Abra o CSS Designer seguindo um destes procedimentos:

    • Selecione Janela > CSS Designer.
    • Pressione Shift + F11.
  2. No CSS Designer, clique no ícone + ao lado de Origens e selecione Anexar arquivo CSS existente.

    Anexar arquivo CSS existente
    Anexar arquivo CSS existente

  3. Siga um destes procedimentos:

    • Clique em Procurar para ir até uma folha de estilos CSS externa.
    • Digite o caminho para a folha de estilos na caixa Arquivo/URL.
  4. 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.

  5. Clique em OK.

Receba ajuda com mais rapidez e facilidade

Novo usuário?