Use os recursos de preenchimento de código e dicas de código do Dreamweaver para reduzir o tempo de codificação.

Os recursos de preenchimento de código e dicas de código do Dreamweaver permitem que você insira e edite o código rapidamente, o que reduz erros de digitação e outros erros comuns.

Você também pode usar esse recurso para visualizar:

  • Atributos disponíveis para uma tag
  • Parâmetros disponíveis para uma função ou
  • Métodos disponíveis para um objeto

Suporte a idiomas e tecnologias

O Dreamweaver suporta dicas de códigos para os seguintes idiomas e tecnologias:

Leia para saber sobre como as dicas de código e o preenchimento de código funcionam para esses idiomas.

Ativar dicas de código

Para ativar dicas de código, clique em Editar > Preferências > Dicas de código e selecione Ativar dicas de código. Para desativar as dicas de código, desmarque Ativar dicas de código.

Para ativar descrições nas dicas de código, selecione Ativar dicas de ferramentas de descrição. Você pode ver as descrições com suas dicas de código.

Dicas de código HTML

Os seguintes tipos de dicas de código estão disponíveis para HTML:

  • Dicas da tag
  • Dicas do nome do atributo
  • Dicas do valor do atributo

Dicas da tag

Pressione a tecla < no teclado para começar a digitar o código. À medida que você digita, o Dreamweaver exibe tags HTML válidas. Se a string que você está digitando aparecer no menu, vá até ela e pressione Enter ou Return para concluir sua entrada.

Por exemplo, quando você digita <, um menu pop-up mostra uma lista de nomes de tags. Em vez de digitar o restante do nome da tag, você pode selecioná-la no menu de forma a incluí-la em seu texto.

Dicas básicas de código HTML
Dicas básicas de código HTML

Essas dicas de tag HTML também incluem uma descrição rápida da tag, onde aplicável.

Dicas do nome do atributo

O Dreamweaver exibe atributos apropriados para tags durante a codificação no Dreamweaver. Digite o nome de uma tag e pressione a barra de espaço para exibir os nomes de atributos válidos que podem ser usados.

Dicas de código do nome do atributo
Dicas de código do nome do atributo

Dicas do valor do atributo

O texto da dica do valor do atributo pode ser estático ou dinâmico (como nos valores de exibição das dicas de código, baseados no que estiver
presente nos arquivos relacionados). 

A maioria das dicas do valor do atributo é estática. Por exemplo, o valor do atributo de destino, que é estático por natureza: as dicas serão estáticas também. 

Exemplos de dicas estáticas do valor do atributo
Exemplos de dicas estáticas do valor do atributo

O Dreamweaver exibe dicas de código dinâmicas para aqueles valores de atributo que as exigem, como id, target, src, href e class.

Aqui estão alguns exemplos de dicas de código exibidas de forma dinâmica. 

Dicas de código dinâmicas para src

Neste exemplo, quando você digita src, valores de atributo válidos são mostrados, e quando você seleciona imagens, o Dreamweaver exibe as imagens válidas reais que estão presentes em sua pasta de imagens. Você pode então escolher o que quiser.

Dicas de código dinâmicas para src
Dicas de código dinâmicas para src

Se você tiver ativos nas bibliotecas da CC, eles também serão exibidos quando você digitar src. Esses recursos da biblioteca da CC são indicados por um ícone de nuvem.

Quando você escolhe um ativo da biblioteca da CC, um menu pop-up é exibido permitindo fazer uma nova amostra do tamanho da imagem e alterar o formato.

Incluir um ativo da biblioteca da CC em seu código
Incluir um ativo da biblioteca da CC em seu código

Observação:

apenas 50 ativos da biblioteca da CC podem ser exibidos em dicas de código. Essas dicas aparecem em ordem alfabética.

Observação:

não há suporte para a inclusão de ativos remotos da biblioteca da CC no código do Dreamweaver.

Dicas de código dinâmicas para href

Quando você digita href, o Dreamweaver exibe uma lista de arquivos em sua pasta, ao mesmo tempo que dá a você a opção de navegar e selecionar o arquivo que deseja vincular.

Dicas de código dinâmicas para href
Dicas de código dinâmicas para href

Dicas de código dinâmicas para id e style

Se você tiver definido ids em seus arquivos CSS, ao digitar id em seus arquivos HTML, o Dreamweaver exibirá todas as ids disponíveis.

Dicas de código dinâmicas para id
Dicas de código dinâmicas para id

Da mesma forma, se você tiver definido estilos CSS, ao digitar style em seus arquivos HTML, o Dreamweaver exibirá todos os estilos disponíveis.

Dicas de código dinâmicas para style
Dicas de código dinâmicas para style

Dicas de código CSS

Dicas de código estão disponíveis para os seguintes tipos de CSS:

  • @rules
  • Propriedades
  • Pseudosseletores e pseudoelementos
  • Formato abreviado

Além das dicas de código, também há dicas disponíveis para propriedades CSS.

Dicas de código para @rules CSS

O Dreamweaver exibe dicas de código para todas as @rules junto com uma descrição da regra CSS conforme mostrado aqui.

Dicas de código de @rule CSS
Dicas de código de @rule CSS

Dicas de propriedades CSS

Quando você digita propriedades CSS, ao digitar os dois pontos, as dicas de código aparecem para ajudar você a escolher um valor válido.

No exemplo de código a seguir, quando o termo font-family: é digitado, font-sets válidos são exibidos.

Você pode escolher um dos conjuntos de fontes ou abrir a caixa de diálogo Gerenciar fontes dentro dessas dicas e definir suas fontes favoritas. 

Dicas de código e ajuda para propriedades CSS
Dicas de código e ajuda para propriedades CSS

Outro exemplo de dicas de código úteis é quando você trabalha com cores no CSS. Quando você digita uma propriedade relacionada a cor (como a cor da borda ou a cor do fundo), ao pressionar os dois pontos, as dicas de código exibem uma lista de cores. Você pode selecionar uma cor na lista ou abrir o Color Picker dentro das dicas de código em si e definir uma cor preferida.

Dicas de código relacionadas a cores CSS
Dicas de código relacionadas a cores CSS

Se você tiver amostras de cores nas bibliotecas da CC, as dicas de código exibirão essas amostras também.

As amostras de cores das bibliotecas da CC são indicadas pelo ícone de nuvem
As amostras de cores das bibliotecas da CC são indicadas pelo ícone de nuvem

Observação:

apenas 50 ativos da biblioteca da CC podem ser exibidos em dicas de código. Essas dicas aparecem em ordem alfabética.

Dicas de pseudosseletores e pseudoelementos

Você pode adicionar um pseudosseletor CSS a um seletor para definir um estado específico do elemento. Quando você usa o estilo :hover, por exemplo, ele é aplicado quando o usuário coloca o ponteiro do mouse sobre o elemento especificado pelo seletor.

Quando você digita “:”, o Dreamweaver mostra uma lista de pseudosseletores válidos se o cursor estiver no contexto adequado.

Dicas de código de pseudosseletores
Dicas de código de pseudosseletores

Quando você digita “::”, o Dreamweaver mostra uma lista de pseudoelementos válidos (usados para aplicar estilo a determinadas partes de um elemento) se o cursor estiver no contexto adequado.

Dicas de código de pseudoelementos
Dicas de código de pseudoelementos

Dicas de formato abreviado CSS

Propriedades de formato abreviado são propriedades CSS que permitem ajustar os valores de diversas outras propriedades CSS simultaneamente. Alguns exemplos de propriedades de formato abreviado CSS são as propriedades background e font.

Como visto no exemplo abaixo, se você digita uma propriedade de formato abreviado CSS (como background, por exemplo) depois de digitar um espaço, o Dreamweaver exibe:

  • Os valores de propriedade adequados por ordem de importância
  • Os valores obrigatórios que devem ser usados (por exemplo, se você usa font, então font-size e font-family são obrigatórios)
  • A expansão do navegador para essa propriedade
Dicas de código para a propriedade CSS background
Dicas de código para a propriedade CSS background

Quando as propriedades de formato abreviado CSS são preenchidas, as dicas de código também exibem os valores de propriedade que você digitou.

Dicas de código CSS

Para algumas propriedades CSS (como box-shadow ou text-shadow), o Dreamweaver exibe dicas que indicam quais valores devem acompanhá-las, e também indicam quais valores são os valores obrigatórios usando um asterisco. 

Você também pode ver como o navegador interpreta o CSS.

Dicas que aparecem para propriedades CSS
Dicas que aparecem para propriedades CSS

Dicas de códigos de JavaScript

Nos arquivos JavaScript, o Dreamweaver fornece dicas de código para variáveis e parâmetros de função. 

No exemplo abaixo, o fragmento de código indica o tipo.

Dicas de códigos de JavaScript
Dicas de códigos de JavaScript

O Dreamweaver atualiza automaticamente a lista de dicas de códigos disponíveis conforme você trabalha em arquivos JavaScript. Por exemplo, suponha que você esteja trabalhando em um arquivo HTML principal e alterne para um arquivo JavaScript para fazer uma alteração. Essa alteração feita no arquivo JavaScript será refletida na lista de dicas de códigos quando você retornar ao arquivo HTML principal. 

Observação:

a atualização automática só funciona se você editar os arquivos JavaScript no Dreamweaver.

Inspeção do objeto dinâmico

O Dreamweaver também atualiza automaticamente dicas de código do tipo JavaScript.

Se você definiu uma variável como numeral, por exemplo, o Dreamweaver retém essas informações. Quando você faz referência a essa variável posteriormente no código, ela indica seu tipo.

Se você altera o tipo de variável (por exemplo, para uma sequência), as dicas de código do Dreamweaver indicam automaticamente que a variável é uma sequência.

Dica de código que indica o tipo de variável
Dica de código que indica o tipo de variável

Inclusão dinâmica de documentação

Se você adicionou comentários para uma função específica, quando essa função é sugerida, o Dreamweaver também exibe a documentação para essa função. 

Dicas de código PHP

O Dreamweaver oferece suporte a dicas de código para PHP versões 5.6 e 7.1. Essas dicas de código PHP são específicas do site e abrangem todas as funções principais, classes e constantes.

Para obter mais informações sobre o PHP 5.6 e 7.1, consulte o manual do PHP.

Para obter mais informações sobre dicas de código específicas do site, consulte Dicas de código específicas do site.

Um recurso útil de dicas de código PHP é o preenchimento automático de variáveis.

Quando você digita um sinal de cifrão ($), uma lista de todas as variáveis no script atual é exibida. Selecione o que deseja e pressione Enter/Return. As variáveis de arquivos relacionados também são listadas, eliminando o risco de reutilizar a mesma variável com um propósito diferente.

Quando PHP 7.1 é configurado como padrão, o Dreamweaver exibe as dicas de código específicas do PHP 7.1.

Dicas de código PHP 7
Dicas de código PHP 7

Um exemplo de dica de código do objeto PHP
Um exemplo de dica de código do objeto PHP

Edite as configurações de atraso para as dicas de código de PHP

Para melhorar o desempenho da digitação de códigos em arquivos .php, o Dreamweaver 2017.5 e superior adicionou um atraso para as dicas de código de PHP. Quando você digita o código PHP, o Dreamweaver exibe as dicas com um atraso de 400 ms. Se desejar alterar as configurações de atraso do código PHP, siga o procedimento a seguir: 

  1. Saia do Dreamweaver.

  2. Abra brackets.json no seguinte local usando um editor de texto:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Clique no botão Salvar estrutura no canto superior direito da caixa de diálogo.

    No arquivo JSON, adicione uma vírgula após o par sobrenome/valor.

    Adicione a seguinte linha com o tempo de atraso de sua preferência em milissegundos: "delayInPHPHint": <tempo em milissegundos>. Por exemplo, "delayInPHPHint": 200.

  4. Salve o arquivo e inicie o Dreamweaver.

Dicas de código específicas do site

O Dreamweaver permite aos desenvolvedores trabalhar com Joomla, Drupal, Wordpress ou outras estruturas e exibir dicas de código PHP enquanto escrevem na Visualização de código. Para exibir essas dicas de código, primeiro é necessário criar um arquivo de configuração usando a caixa de diálogo Dicas de código específicas do site. A configuração informa ao Dreamweaver o local para procurar as dicas de código específicas ao seu site.

Para assistir a um tutorial em vídeo sobre como trabalhar com dicas de código específicas do site, consulte www.adobe.com/go/learn_dw_comm13_br.

Criar o arquivo de configuração

Use a caixa de diálogo Dicas de código específicas do site para criar um arquivo de configuração necessário para exibir as dicas de código no Dreamweaver.

Por padrão, o Dreamweaver armazena o arquivo de configuração no diretório do Adobe Dreamweaver CS5\configuração\Compartilhado\Dinâmico\Predefinições.

Observação:

As dicas de código que você criar são específicas para o site selecionado no painel Arquivos do Dreamweaver. Para exibir as dicas de código, a página em que você está trabalhando deve residir no site atualmente selecionado.

  1. Selecione Site > Opções de site > Dicas de código específicas do site.

    Por padrão, o recurso Dicas de código específicas do site rastreia o site para determinar qual estrutura do Sistema de gerenciamento de conteúdo (CMS) você está usando. O Dreamweaver, por padrão, oferece suporte a três estruturas: Drupal, Joomla e Wordpress.

    Os quatro botões à direita do menu pop-up Estrutura permitem que você importe, salve, renomeie ou exclua estruturas.

    Observação:

    não é possível excluir ou renomear as estruturas padrão existentes.

  2. Na caixa de texto sub-raiz, especifique a pasta sub-raiz em que você armazena os arquivos de estrutura. É possível clicar no ícone de pasta próximo à caixa de texto para ir ao local dos arquivos de estrutura.

    O Dreamweaver exibe uma estrutura em árvore de arquivo das pastas que contém seus arquivos de estrutura. Se as pastas e os arquivos que deseja rastrear forem exibidos, clique em OK para executar o rastreamento. Se deseja personalizar o rastreamento, você deve avançar as próximas etapas.

  3. Clique no botão de adição (+) acima da janela Arquivos para selecionar um arquivo ou pasta que você deseja adicionar ao rastreamento. Na caixa de diálogo Adicionar arquivos/pastas, é possível especificar as extensões de nomes de arquivos que você deseja incluir.

    Observação:

    especifique uma determinada extensão de nome de arquivo para acelerar o processo de rastreamento.

  4. Para remover arquivos do rastreamento, selecione os arquivos que você não deseja rastrear e clique no botão de subtração (-) acima da janela Arquivos.

    Observação:

    se sua estrutura selecionada for Drupal ou Joomla, a caixa de diálogo Dicas de código específicas do site exibirá um caminho adicional para um arquivo na pasta de configuração do Dreamweaver.

    Não exclua isto—ele é necessário para o uso destas estruturas.

  5. Para personalizar como o recurso Dicas de código específicas do site trata um arquivo ou pasta particular, selecione-a da lista e siga um destes procedimentos:

    • Selecione Rastrear esta pasta para incluir a pasta selecionada no rastreamento.
    • Selecione Repetido para incluir todos os arquivos e pastas no diretório selecionado.
    • Clique no botão Extensões para abrir a caixa de diálogo Localizar extensões, na qual você pode especificar as extensões de nomes de arquivos que deseja incluir no rastreamento de um arquivo ou uma pasta específica.

Salvar estrutura do site

É possível salvar a estrutura personalizada do site que você criou na caixa de diálogo Dicas de código específicas do site.

  1. Saia do Dreamweaver.

  2. Crie a estrutura de arquivos e pastas como você desejar, adicionando ou removendo arquivos e pastas quando necessário.

  3. Especifique um nome para a estrutura do site e clique em Salvar.

Observação:

se o nome especificado já estiver em uso, o Dreamweaver solicitará um nome diferente ou a confirmação de que você deseja substituir a estrutura com o mesmo nome. Não é possível substituir qualquer uma das estruturas padrão.

Renomear estruturas do site

Ao renomear a estrutura do site, lembre-se de que você não pode usar os nomes de qualquer uma das três estruturas do site padrão ou a palavra ¨personalizada¨.

  1. Exiba a estrutura que você deseja renomear.

  2. Clique no botão do ícone Renomear estrutura no canto superior direito da caixa de diálogo.

  3. Especifique um novo nome para a estrutura do site e clique em Renomear.

Observação:

se o nome que você especificou já estiver em uso, o Dreamweaver solicitará um nome diferente ou a confirmação de que você deseja substituir a estrutura com o mesmo nome. Não é possível substituir qualquer uma das estruturas padrão.

Adicionar arquivos ou pastas a uma estrutura do site

É possível adicionar quaisquer arquivos ou pastas que estão associadas à estrutura. Após adicionar arquivos ou pastas, você pode especificar as extensões de nome de arquivo dos arquivos que deseja rastrear. 

  1. Clique no botão de adição (+) acima da janela Arquivos para abrir a caixa de diálogo Adicionar arquivo/pasta.

  2. Na caixa de texto Adicionar arquivo/pasta, digite o caminho para o arquivo ou pasta que você deseja adicionar. Também é possível clicar no ícone de pasta próximo à caixa de texto para ir a um arquivo ou pasta.

  3. Clique no botão de adição (+) acima da janela Extensões para especificar as extensões de nome de arquivo dos arquivos que você deseja rastrear.

    Observação:

    especifique uma determinada extensão de nome de arquivo para acelerar o processo de rastreamento.

  4. Clique em Adicionar.

Rastrear um site em busca de extensões de nomes de arquivos

Use a caixa de diálogo Localizar extensões para exibir e editar extensões de nomes de arquivos que estão incluídas na estrutura do site.

  1. Na caixa de diálogo Dicas de código específicas do site, clique no botão Extensões.

    A caixa de diálogo Localizar extensões lista as extensões atuais possíveis de se rastrear.

  2. Para adicionar outra extensão à lista, clique no botão de adição (+) acima da janela Extensões.

  3. Para excluir uma extensão da lista, clique no botão de subtração (-).

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online