Dicas de código e preenchimento de código

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

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

• HTML
• CSS
• JavaScript 
• PHP

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 a inserção automática de chaves e de aspas, selecione Inserir chaves automaticamente e Inserir aspas automaticamente respectivamente.

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.

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

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.

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.

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

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

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.

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

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.

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 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

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

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. 

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.

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.

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 posterior 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: 

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.

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.

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”.

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. 

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.