Guia do Usuário Cancelar

Aplicar layout às páginas usando o CSS Designer

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

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.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?