Guia do Usuário Cancelar

Personalizar a codificação por cores

  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 personalizar as cores de seus elementos de código (codificação por cores), como os comentários, no Dreamweaver.

No Dreamweaver, você pode alterar as preferências de cor da interface em Editar > Preferências > Interface.

Você pode escolher entre quatro temas de cor diferentes e um tema de código claro ou escuro. 

Após configurar seu tema de cores e de código, personalize as cores do código no Dreamweaver editando os seletores no arquivo main.less.

Definir temas de cores e temas de código

Você pode escolher um tema de cores de acordo com as suas preferências ao iniciar o Dreamweaver. Você também pode alterar essa preferência a qualquer momento.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (macOS).

  2. Selecione Interface na lista Categoria à esquerda.

  3. Escolha um tema na lista Temas de cores. 

  4. Após definir o tema da interface, defina o tema do código.

    Você pode escolher um tema de código claro ou escuro. Depois, salve o tema com um novo nome e personalize-o ainda mais.

    Temas de código padrão
    Temas de código padrão

  5. Clique em Aplicar para salvar as alterações.

Personalizar temas de código

Após selecionar um tema de código, personalize as cores do código salvando-o com um novo nome e editando-o.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (macOS).

  2. Selecione um tema claro ou escuro, clique no ícone de adição e salve o tema com um novo nome.

    Observação:

    Os temas padrão claro e escuro não são editáveis, portanto, faça alterações em uma cópia destes temas. Os novos temas que você cria podem ser editados sempre.

    Criar um tema
    Criar um tema

  3. Salve o tema de código padrão com um novo nome.

    Criar um tema de código baseado em um tema de código padrão
    Criar um tema de código baseado em um tema de código padrão

  4. Selecione o tema de código recém-criado e clique no ícone Editar.

    O arquivo main.less é aberto no Dreamweaver e você pode editar os seletores no tema para personalizar as cores do código.

    A Visualização de código é atualizada com as novas cores assim que você salvar o arquivo main.less.

Editar seletores no arquivo main.less

Antes de ir para a seção Editar seletores no arquivo main.less, dedique alguns minutos para ler os comentários e instruções no arquivo de tema. Se ainda não tiver certeza sobre qual seletor editar, consulte os seguintes recursos:

  • Compreender seletores – tabelas de referência que fornecem informações sobre os elementos de código impactados por um seletor específico
  • Usar o Token Inspector – use o Token Inspector para “inspecionar” um arquivo específico e realçar os elementos de código impactados por um seletor específico.
  • Se quiser editar as cores de código dos comentários ou ajustar a cor do realce em tags emparelhadas, consulte os exemplos de snippets de código listados em Exemplos de personalização de código.

Agora que você sabe quais seletores precisa editar, faça as alterações no arquivo main.less.

  1. Vá até o final do arquivo até encontrar o comentário a seguir:

    /* Custom code colors or overrides should start after this line */

  2. Insira os seletores dos elementos de códigos para os quais você deseja editar as cores. Use uma sintaxe similar a do exemplo a seguir:

    .cm-tag {color: #00D0D0; }

    Observação:

    Se um único arquivo tiver várias linguagens de programação e você quiser
    distinguir cada linguagem pelas cores de código, consulte Personalizar cores de código em arquivos de código misto.

  3. Agrupe vários seletores se desejar atribuir a mesma cor a vários elementos. No exemplo a seguir, uma única cor foi atribuída a vários seletores separados por vírgula.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. Para deixar a personalização de cores específica para um tipo de arquivo, coloque os seletores dos elementos de códigos dentro do seletor do tipo de arquivo, como mostrado no exemplo a seguir:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. Após fazer as alterações, salve o arquivo.

    O Dreamweaver atualiza a Visualização de código em todos os documentos abertos com as novas cores.

Observação:

Se houver erros de sintaxe ou variáveis indefinidas em suas alterações, o Dreamweaver não carrega as alterações do código personalizado e o reverte para o tema de código padrão escuro.

Personalizar cores de código em arquivos de código misto

Se estiver trabalhando com arquivos em modo misto (um arquivo contendo linguagens de programação diferentes) como HTML/CSS, HTML/PHP ou HTML/JavaScript, você pode personalizar as cores do código da seguinte maneira:

  1. Crie um tema de código personalizado seguindo as instruções em Personalizar temas de código. Selecione o novo tema e aplique-o.

  2. Saia do Dreamweaver.

  3. Abra o package.json em um editor de texto.

    No Windows: %appdata%\Adobe\Dreamweaver CC 2017\pt_BR\Configuration\Brackets\extensions\user\\

    No Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/pt_BR/Configuration/Brackets/extensions/user//

    Adicione a linha a seguir em theme{}: 

    "addModeClass": true

    Editar o arquivo package.json
    Editar o arquivo package.json

  4. Abra o Dreamweaver, selecione Editar > Preferências > Interface, selecione o novo tema e clique no ícone Editar.

  5. Adicione estilos mais específicos no final do arquivo main.less.

    Use os seletores listados na tabela a seguir para editar as cores de código no tipo de arquivo correspondente.

    Seletor

    Tipo de arquivo de código

    .cm-m-clike

    PHP

    .cm-m-css

    CSS, Less

    .cm-m-javascript

    JavaScript

    .cm-m-xml

    HTML, XML

    Por exemplo, para personalizar as cores de código para nomes de tags no CSS e tags de estilo em HTML ou PHP, use a sintaxe a seguir:

    .cm-tag {color: #BD46BD;} 
    .cm-m-css.cm-tag {color: #38D08B;}
  6. Salve o arquivo main.less. 

    As alterações das cores de código agora são refletidas nos arquivos de código.

Exemplos de personalização de código

Revise os exemplos a seguir para entender como personalizar as cores do código em diferentes cenários.

Ajustar a cor do realce em tags emparelhadas

No arquivo main.less, procure o seguinte snippet de código e ajuste a cor.

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;
Observação:

Esse snippet de código é dependente do tema. Pode não estar presente em todos os temas.

Ajustar a cor dos comentários de código

No arquivo main.less, procure o seguinte snippet de código e ajuste a cor.

.cm-comment {color: #717171; font-style: italic;}

Compreender seletores

Para alterar as cores de seus elementos de códigos, edite as propriedades dos seletores no arquivo main.less.

No entanto, antes de você começar a modificar os seletores no arquivo main.less, é importante saber o que significa cada seletor e qual elemento de código ele afeta. Revise a tabela a seguir para entender os elementos de código em HTML, CSS, JavaScript e arquivos PHP que são impactados por esses seletores.

Você também pode usar o Token Inspector para entender quais elementos de código são impactados por um seletor específico.

Seletores HTML CSS JavaScript PHP
.cm-atom  Nomes de entidades, como   Cores em formato hexadecimal, RGB ou HSL, valores de atributos predefinidos como strong, none, auto, inherit e assim por diante. true, false, null, undefined, NaN, Infinity Constantes True, False, Null e magic, como __LINE__, __DIR__ e assim por diante
.cm-attribute  Nome do atributo Tipos de mídia como all, braille, print, screen e assim por diante    
.cm-bracket Brackets de tag, como <, >, /> e </      
.cm-builtin    Seletor de ID   Funções integradas, como htmlspecialchars, trim, substr e assim por diante
.cm-comment  Comentário Comentário Comentário Comentários
.cm-def    "@ rule" Variável, definição de função e parâmetro de função  O nome da função na definição da função 
.cm-error  Tags de finalização sem uma tag de abertura
Aspas ausentes em um valor de atributo
Erro devido a ausência de delimitadores {} ou aspas em um valor de propriedade ou propriedade não reconhecida    
.cm-keyword    Nomes de cores, palavras-chave importantes em @media, como and, only etc. Palavras-chave de estruturas de controle (if, else, …), in, of, from, default, public, private e assim por diante Palavras-chave, como function, if, else, new, echo, isset e assim por diante
.cm-meta  Declaração <!DOCTYPE> Prefixos específicos do navegador, como -webkit-, -o- e assim por diante Reticências em sintaxe Spread. Exemplo: myFunction(...iterableObj); <!DOCTYPE> Declaração e tags PHP de início e fim: <?php, ?>
.cm-number    Qualquer número com ou sem uma unidade Qualquer número, como 12, 2.1, 123e-5, 0x11, 0b11, 0o11 e assim por diante Qualquer número, como 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 e assim por diante
.cm-operator      Operadores: +, -, *, +=, !==, &&, >>> e assim por diante Operadores, como ===, &&, !, =>, +, - e assim por diante
.cm-property    Nome da propriedade Propriedade ou método de objeto  
.cm-qualifier    Seletor de classe    
.cm-string  Valor do atributo String regular, como uma informada em uma chamada url(), nome de fonte entre aspas e assim por diante. String literal String literal
.cm-string-2    Propriedades não-padrão, como scrollbar-arrow-color, scrollbar-base-color e assim por diante. Expressões regulares  
.cm-tag  Nome da tag Seletor de tags    
.cm-variable    Nomes de fontes sem aspas Variáveis/funções globais, referências de classe Nomes de funções definidas pelo usuário, referências de interface/classe, propriedades de classe, projeções, 
.cm-variable-2    Propriedades personalizadas, como main-bg-color Referências de variáveis/funções de escopo Variáveis, parâmetros ou atributos predefinidos ou definidos pelo usuário
.cm-variable-3   Pseudo-classes, como :hover e :focus e pseudo-elementos, como ::first-letter, ::selection e assim por diante    

A tabela a seguir indica os modelos e bibliotecas do Dreamweaver afetados pelos seletores no arquivo main.less.

Seletor

Modelos (DWT)

Biblioteca (LBI)

.cm-templateComment

Comentários do modelo

 

.cm-templateAttrVal

Valores de atributo nos comentários do modelo

 

.cm-instanceParam

Comentário e atributo do InstanceParam

 

.cm-instanceParamAttrVal

Valor de atributo do InstanceParam

 

.cm-libraryItem

 

Bibliotecas inseridas em um documento. Exemplo: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

A tabela a seguir indica quais seletores devem ser usados ao personalizar cores de código em cenários nos quais há várias linguagens em um único arquivo.

Seletor

Tipo de arquivo de código

.cm-m-clike

PHP

.cm-m-css

CSS, Less

.cm-m-javascript

JavaScript

.cm-m-xml

HTML, XML

Usar o Token Inspector

Para saber mais sobre como os seletores no arquivo de tema main.less afetam os elementos de código nos arquivos de código (diferentes de HTML, CSS, JavaScript e PHP), use o Token Inspector.

  1. Abra o Token Inspector usando o Google Chrome.

    O utilitário TokenInspector é composto por estas seções:

    • Editor de código, 
    • Uma opção para alternar modos e 
    • Uma lista de seletores à direita.
    Usar o Token Inspector para entender os seletores
    Usar o Token Inspector para entender os seletores

    A. Editor de código B. Opção Alternar modo C. Lista de seletores 

  2. Copie e cole o conteúdo de um arquivo no Editor de código.

  3. Altere o modo do arquivo inserindo a extensão do nome do arquivo e clicando em Alterar modo.

    Por exemplo, se for um arquivo HTML, altere a extensão do nome do arquivo para html. A página é atualizada para refletir a alteração no modo e informa o modo atual no topo da página.

    Indicação de modo no Token Inspector
    Indicação de modo no Token Inspector

  4. Selecione o elemento de código cuja aparência você deseja modificar.

    O Token Inspector destaca o seletor.

  5. (Opcional) Você também pode escolher um seletor específico para ver quais elementos de código no arquivo de código são afetados por aquele seletor.

  6. Anote os seletores que você deseja editar e atualizar e feche o Token Inspector.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online