Guia do Usuário Cancelar

Escrever e editar código

  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 trabalhar na Visualização de código e aproveitar ao máximo os recursos de codificação do Dreamweaver.

Você pode trabalhar com código no Dreamweaver de várias maneiras. 

Basta abrir um novo arquivo de código usando a caixa de diálogo Novo documento e começar a digitar seu código.

Criar um novo arquivo de código no Dreamweaver
Criar um novo arquivo de código no Dreamweaver

À medida que você digita, dicas de código são exibidas para ajudar você a selecionar o código e evitar erros de digitação. Obtenha ajuda com CSS quando precisar usando os Documentos rápidos do Dreamweaver.

Também é possível inserir o código usando o painel Inserir ou usar atalhos de codificação como abreviações do Emmet.

Se você estiver copiando e colando a mesma parte do código várias vezes, experimente estes recursos para poupar tempo:

  • O painel Snippets é incrível para criar e inserir snippets de código pré-formatados rapidamente em seu código.
  • Com o recurso Vários cursores, você pode criar e editar várias linhas de código de uma vez.

O Dreamweaver também fornece um conjunto eficiente de ferramentas de edição que tornam a navegação e as alterações no seu código um processo simples.

  • Use o recurso localizar e substituir do Dreamweaver para pesquisar tags, atributos ou texto no código.
  • Use o recurso Navegador de código para navegar no código relacionado dentro ou fora do arquivo atual. Como uma opção ainda melhor, use o recurso Edição rápida para editar o código em arquivos relacionados sem precisar abrir o arquivo em uma nova guia.
  • Clique com o botão direito no código para exibir um menu de contexto simples e relevante que permite editar o código diretamente.
  • Use o recurso Quebra automática de tag para quebrar a linha de texto em tags.

Leia para obter mais informações sobre todos esses recursos de código.

Inserir código usando o painel Inserir

  1. Posicione o ponto de inserção no código.
  2. Selecione uma categoria apropriada no painel Inserir.
  3. Clique em um botão no painel Inserir ou selecione um item em um menu pop-up do painel Inserir.

    Quando você clica em um ícone, o código é exibido imediatamente na página ou, então, uma caixa de diálogo é exibida solicitando mais informações para concluir o código.

    O número e o tipo dos botões disponíveis no painel Inserir variam de acordo com o tipo do documento atual. Isso também depende da visualização que você está usando: Visualização de código ou Visualização de design.

Use o conjunto de ferramentas Emmet com o Dreamweaver

Emmet é um plug-in que permite a codificação e a geração de código HTML e CSS em alta velocidade.

Use abreviações do Emmet na Visualização de código ou no Inspetor de código do Dreamweaver e pressione a tecla Tab para expandir essas abreviações em marcações HTML ou CSS.

As abreviações de HTML se expandem em páginas HTML e PHP. As abreviações de CSS se expandem em páginas CSS, LESS, SASS, SCSS ou na tag de estilo em uma página HTML.

Confira alguns exemplos que demonstram como você pode usar abreviações de Emmet na Visualização de código. Para obter informações detalhadas e referência, consulte a documentação do Emmet.

Observação:

Atualmente o Dreamweaver é compatível com as abreviações do Emmet 1.2.2.

Exemplo 1: inserção de código HTML usando o Emmet

Para adicionar rapidamente o código HTML a uma lista não ordenada com três elementos, abra o arquivo HTML e digite a seguinte abreviação do Emmet na Visualização de código em <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Agora, verifique se o cursor está posicionado logo após a abreviação do Emmet e pressione Tab para expandir a abreviação. Como alternativa, selecione a abreviação inteira e pressione Enter.

A abreviação se expande para o seguinte código:

 

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Exemplo 2: inserção de código CSS usando o Emmet

Para inserir o código CSS para a criação do raio da borda com prefixos do fornecedor, abra o arquivo CSS e digite a seguinte abreviação do Emmet dentro de uma classe:

-bdrs

Ao pressionar Tab, a abreviação se expande para este código:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Trabalhar com comentários de código

Um comentário é um texto descritivo que você insere no código HTML para explicar o código ou fornecer outras informações. O texto do comentário aparece somente na Visualização de código e não é exibido em um navegador.

Adicionar comentários ao seu código

Primeiramente, insira o texto de comentário para adicionar comentários. Em seguida, coloque o cursor do mouse no ponto de inserção e clique no ícone Inserir da barra de ferramentas para abrir o submenu Aplicar comentário.

Também é possível selecionar o texto e transformá-lo em um comentário. O texto selecionado é delimitado em um bloco de comentários.

Inclusão de comentários
Inclusão de comentários

É possível adicionar comentários usando várias opções de sintaxe. Selecione a sintaxe adequada e o Dreamweaver insere as tags para você. Você apenas precisa inserir seu texto de comentário.

Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou de Cmd+/ (no Mac) para adicionar comentários.

Se você usar o atalho de teclado sem selecionar texto, o comentário será aplicado à linha atual. Se você selecionar o texto e usar o atalho de teclado, o comentário é aplicado ao texto selecionado.

Remover comentários do código

Para remover os comentários de código, selecione o código e clique no ícone Remover comentário na barra de ferramentas. Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou Cmd+/ (no Mac) para remover comentários.

Alternar comentários de código

Para alternar entre exibir e ocultar comentários na Visualização de código, pressione Ctrl+/ no Windows ou Cmd+/ no Mac para o comentário ou para a linha selecionados.

Usar vários cursores para adicionar ou alterar o texto em vários locais

Adicione cursores em diversos locais ou selecione várias seções de código e edite-as simultaneamente usando o recurso vários cursores do Dreamweaver.

Observação:

As operações de copiar e colar e de localizar e substituir não funcionam com vários cursores ou seleções múltiplas.

Adicionar vários cursores ou seleções múltiplas

É possível adicionar vários cursores de maneiras diferentes de acordo com as suas necessidades.

Se você deseja adicionar o mesmo texto em vários locais sem substituir qualquer texto existente, adicione vários cursores.

Se você deseja substituir o texto existente, é possível fazer seleções múltiplas. É possível selecionar linhas de texto contínuas, linhas de texto descontínuas ou ambas e adicionar cursores a elas.

Para adicionar vários cursores ou seleções múltiplas na mesma coluna em linhas contínuas:

Mantenha a tecla Alt pressionada e clique e arraste verticalmente. Ao arrastar verticalmente, os cursores são adicionados a cada linha pela qual você arrasta.

Texto adicionado aos cursores em várias linhas
Texto adicionado aos cursores em várias linhas

Para selecionar linhas contínuas de texto, pressione a tecla Alt e arraste diagonalmente. Ao arrastar diagonalmente, o Dreamweaver seleciona um bloco de texto retangular na seleção em questão. 

Selecionar e atualizar várias linhas de texto simultaneamente
Selecionar e atualizar várias linhas de texto simultaneamente

Observação:

Para adicionar cursores ou incluir várias linhas em uma seleção rapidamente, use o atalho de teclado Shift-Alt-Seta para baixo ou Seta para cima. 

Depois de adicionar os cursores (ou selecionar texto) em vários locais, comece a digitar. 

Se você tiver vários cursores, o novo texto será adicionado.

Se você tiver conteúdo selecionado em várias linhas de texto, ele será substituído pelo novo texto que você digitar.

Para adicionar vários cursores em colunas diferentes pelas linhas: 

Para adicionar cursores às linhas de texto descontínuas, pressione a tecla Ctrl e clique nas linhas nas quais deseja colocar o cursor.

Adicionar cursores a várias linhas de texto descontínuas
Adicionar cursores a várias linhas de texto descontínuas

Para selecionar linhas de texto descontínuas, selecione um texto e, em seguida, pressione a tecla Ctrl (Windows) ou Cmd (Mac) e continue fazendo outras seleções. 

Para adicionar cursores no início/final de cada linha:

Selecione várias linhas de texto e pressione as teclas de seta para a esquerda ou direita.

Para adicionar cursores em linhas precedentes ou subsequentes de uma seleção:

Pressione as teclas Shift+Alt+Seta para cima/baixo e, em seguida, pressione a tecla de seta para a direita.

Para selecionar linhas de texto contínuas e descontínuas:

Você pode combinar essas técnicas para selecionar as linhas de texto contínuas ou as linhas de texto separadas em uma única seleção.

Primeiro, selecione as linhas de texto descontínuas e, em seguida, pressione Ctrl + Alt (no Windows) ou Cmd + Alt (no Mac) e arraste para adicionar um conjunto de linhas às seleções múltiplas existentes.

Selecionar linhas de texto contínuas e descontínuas
Selecionar linhas de texto contínuas e descontínuas

Obter ajuda com CSS no Dreamweaver usando os Documentos rápidos

Ao trabalhar com arquivos CSS, LESS ou SCSS no Dreamweaver, você pode obter informações sobre as propriedades ou os valores do CSS rapidamente.

Coloque o cursor do mouse em uma propriedade ou o valor e pressione Ctrl+K, o Dreamweaver abrirá a documentação do projeto do Web Platform Docs.

É possível abrir vários editores inline e visualizadores de documentos simultaneamente.

Documentação do CSS no Dreamweaver
Documentação do CSS no Dreamweaver

Para fechar apenas um editor inline ou visualizador de documento, clique no “X” no canto superior esquerdo, ou pressione Escape enquanto os Documentos rápidos tiverem foco.

Para fechar todos os editores e documentos inline, coloque o cursor do mouse no editor de código delimitador principal e pressione Escape.

Analisar o código

O Dreamweaver é compatível com linting (análise estática de código) para HTML, CSS e JavaScript.

O painel Saída exibe os erros e avisos detectados por linting. Para obter mais informações, consulte Linting de código.

Além disso, o Dreamweaver também exibe uma visualização rápida do erro na coluna de número de linha da linha que contém o erro. O número de linha é exibido em vermelho para indicar que contém erros, e quando você passa o mouse sobre ele, uma descrição breve do erro é exibida.

Observação: somente o primeiro erro da linha é exibido. Se a linha contém apenas um aviso, a descrição do aviso é exibida. Se a linha contém um aviso e um erro, apenas a descrição do erro é exibida.

Delimitar o texto do código usando o recurso Quebra automática de tag

Use o recurso Quebra automática de tag na Visualização de código para delimitar linhas de texto específicas com uma tag. Na Visualização de design ou dinâmica, você pode usar esse recurso para delimitar objetos com uma tag.

  1. Selecione o texto na Visualização de código ou um objeto na Visualização de design e pressione Ctrl+T no teclado.

    Uma janela pop-up é exibida para que você faça a seleção dentre várias tags HTML.

  2. Selecione uma tag no menu.

    Se você estiver trabalhando na Visualização de código, o texto selecionado é delimitado com a tag. Se você estiver trabalhando na Visualização de design ou dinâmica, o objeto selecionado é delimitado com a tag.

Editar código com o menu de contexto Codificação

Use o menu de contexto do Dreamweaver para fazer edições rápidas no código. 

Para acessar o menu de contexto, clique com o botão direito (Windows) ou clique com a tecla Command pressionada (no Mac). Você pode usar estas opções:

Edição rápida

Clique nessa opção para entrar no modo Edição rápida. Neste modo, o Dreamweaver fornece o código de contexto específico e as ferramentas inline permitindo que você avance rapidamente à seção do código necessária. Para obter mais informações, consulte Edição rápida.

Recortar, copiar, colar

Clique nessas opções para recortar, copiar e colar textos rapidamente sem precisar acessar o menu Editar.

Localizar e substituir, Localizar próximo, Localizar anterior

Clique nessas opções para localizar e substituir textos rapidamente sem precisar acessar o menu Localizar.

Criar snippet

Use essa opção para criar snippets de código para que você possa salvá-los e reutilizá-los posteriormente. Selecione o código e clique em Criar snippet para que o código selecionado se torne um snippet. Para obter mais informações, consulte Trabalhar com snippets de código.

Abrir arquivo relacionado

Clique com o botão direito sobre um link/tag de script e depois em Abrir arquivo relacionado para abri-lo.

Anexar folha de estilos

Anexe uma folha de estilos CSS existente à sua página.

Seleção

O submenu Seleção inclui várias opções de edição do código que você pode usar em uma parte do código selecionada, como alternar a linha e os comentários em bloco, expandir e recolher a seleção, converter CSS inline em regras, mover regras CSS e imprimir o código.

Navegador de código

Clique nessa opção para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Para obter mais informações, consulte Navegação no código relacionado.

Ferramentas de dicas de código

O submenu Ferramentas de dicas de código coloca o seletor de cores, o navegador do URL e as ferramentas da lista Fonte ao seu alcance.

Recuo dos blocos de código

Ao escrever e editar código na Visualização de código ou no Inspetor de código, você pode alterar o nível de recuo de um bloco ou linha de código selecionado, deslocando-o para a direita ou a esquerda em uma tabulação.

Recuo do bloco de código selecionado

  • Pressione Tab ou
  • Pressione Ctrl+] ou
  • Selecione Editar > Recuar código.

Cancelar recuo do bloco de código selecionado

  • Pressione Shift+Tab ou
  • Pressione Ctrl+[ ou
  • Selecione Editar > Diminuir recuo do código.

O Navegador de código exibe uma lista de códigos fonte relacionados a uma determinada seleção de sua página. Use-o para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Quando você clica em um link do Navegador de código, o Dreamweaver abre o arquivo que contém a parte relevante do código. O arquivo aparece na área relacionada a arquivos, se estiver ativada. Se você não tiver arquivos relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento.

Se você clicar em uma regra CSS no Navegador de código, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um arquivo, o Dreamweaver exibe a regra na visualização Dividida. Se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e exibe a regra na área relacionada a arquivos acima do documento principal.

Você pode acessar o Navegador de código das Visualizações de design, de código e dividida assim como pelo Inspetor de código.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de código, consulte www.adobe.com/go/dw10codenav.

Para assistir a um tutorial em vídeo sobre como trabalhar com Visualização dinâmica, arquivos relacionados e o Navegador de código, consulte www.adobe.com/go/lrvid4044_dw.

Abrir o Navegador de código

  1. Alt+clique (Windows) ou Command+Option+Click (Macintosh) em qualquer local da página. O Navegador de código exibe links para o código que afeta a área onde você clicou.

Clique fora do Navegador de código para fechá-lo.

Observação:

Você também pode abrir o Navegador de código clicando no indicador Navegador de código . Esse indicador aparece próximo ao ponto de inserção em sua página quando o mouse fica sem atividade por 2 segundos.

  1. Abra o Navegador de código na área da página na qual você está interessado.

  2. Clique na parte do código para a qual você deseja ir.

O Navegador de código agrupa os códigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabética. Por exemplo, suponha que as regras CSS em três arquivos externos afetam a seleção em seu documento. Neste caso, o Navegador de código relaciona esses três arquivos, assim como as regras CSS relevantes à seleção. Para CSS relacionados a uma determinada seleção, o Navegador de código funciona como o painel de Estilos CSS no Modo atual.

Observação:

Quando você passa o cursor do mouse por links para as regras CSS, o Navegador de código exibe dicas de ferramentas das propriedades na regra. Essas dicas de ferramentas são úteis quando você quer distinguir entre muitas regras que compartilham o mesmo nome.

Desativar o indicador do Navegador de código

  1. Abra o Navegador de código.

  2. Selecione Desativar indicador no canto inferior direito.

  3. Clique fora do Navegador de código para fechá-lo.

Para reativar o indicador do Navegador de código, Alt+clique (Windows) ou Command+Option+clique (Macintosh) para abrir o Navegador de código e desmarcar a opção Desativar indicador.

Acessar uma função JavaScript ou VBScript

Na Visualização de código e no Inspetor de código, é possível exibir uma lista de todas as funções JavaScript ou VBScript no código e acessar qualquer uma delas.

  1. Exiba o documento na Visualização de código (Exibir > Código) ou no Inspetor de código (Janela > Inspetor de código).
  2. Siga um destes procedimentos:
    • Na Visualização de código, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) em qualquer lugar da Visualização de código e selecione o submenu Funções no menu de contexto.

    Observação:

    O submenu Funções não aparece na Visualização de design.

    Qualquer função JavaScript ou VBScript do código aparece no submenu.

    Observação:

    Para ver as funções em ordem alfabética, mantenha pressionada a tecla Control enquanto clica com o botão direito do mouse (Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualização de código. Em seguida, selecione o submenu Funções.

    • No Inspetor de código, clique no botão Navegação de código ({ }) na barra de ferramentas.
  3. Selecione um nome de função para ir até a função no código.

Extrair JavaScript

O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo externo e vincula o arquivo externo ao seu documento. O JSE também pode remover manipuladores de eventos, como onclick e onmouseover do seu código e, então, anexar ao seu documento, de modo não intrusivo, o JavaScript associado a esses manipuladores.

Confira a seguir as limitações do Extrator de JavaScript antes de usá-lo:

  • O JSE não extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). Há chance de que a externalização desses scripts possa causar resultados imprevistos. Por padrão, o Dreamweaver lista esses scripts na caixa de diálogo Externalizar JavaScript, mas não os seleciona para extração. (Você pode selecioná-los manualmente se desejar).

  • O JSE não extrai JavaScript de regiões editáveis de arquivos .dwt (modelo do Dreamweaver), regiões não editáveis de instâncias de modelos ou itens de biblioteca do Dreamweaver.

  • Após extrair JavaScript usando a opção Externalizar JavaScript e Anexar de modo não intrusivo, você não poderá mais editar comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver não pode inspecionar e preencher o painel Comportamentos com comportamentos anexados de modo não intrusivo.

  • Você não pode desfazer suas alterações após ter fechado a página. No entanto, você pode desfazer alterações, desde que permaneça na mesma seção de edição. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.

  • É possível que algumas páginas complexas não funcionem conforme o esperado. Esteja atento ao extrair JavaScript de páginas com document.write() no corpo e em variáveis globais.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte a JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript.

Para usar o Extrator de JavaScript:

  1. Abra uma página que contenha JavaScript.

  2. Clique em Ferramentas > Externalizar JavaScript.

  3. Na caixa de diálogo Externalizar JavaScript, edite as seleções padrão, se necessário.

    • Selecione Externalizar somente JavaScript se você deseja que o Dreamweaver mova todo JavaScript para um arquivo externo e para fazer referência àquele arquivo no documento atual. Esta opção deixa os manipuladores de evento como onclick e onload no documento e deixa os comportamentos visíveis no painel Comportamentos.

    • Selecione Externalizar JavaScript e Anexar de modo não intrusivo se desejar que o Dreamweaver 1) mova JavaScript para um arquivo externo e faça referência a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de execução usando JavaScript. Ao selecionar esta opção, você não poderá mais editar comportamentos no painel Comportamentos.

    • Na coluna Editar, desmarque todas as edições que não deseja realizar ou selecione as edições que o Dreamweaver, por padrão, não selecionou.

      Por padrão, o Dreamweaver lista mas não seleciona as seguintes edições:

      • Blocos de script no cabeçalho do documento que contêm chamadas document.write() ou document.writeln().

      • Blocos de script no cabeçalho do documento que contêm assinaturas de funções relacionadas ao código de manuseio EOLAS, conhecido por usar document.write().

      • Blocos de script no corpo do documento, a menos que os blocos contenham apenas construtores de widget do Spry ou de conjunto de dados do Spry.

    • O Dreamweaver atribui IDs automaticamente a elementos que ainda não têm IDs. Se não gostar dessas IDs, você poderá alterá-las, editando as caixas de texto de ID.

  4. Clique em OK.

    A caixa de diálogo de resumo oferece um resumo de extrações. Revise as extrações e clique em OK.

  5. Salve a página.

O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extraído. O Dreamweaver salva o arquivo SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nível da página da qual você extraiu o JavaScript. Não se esqueça de enviar esses arquivos dependentes para seu servidor Web quando enviar a página original.

Edição rápida

Em vez de desorganizar o ambiente de codificação com muitos painéis e ícones, o modo Edição rápida no Dreamweaver insere o código de contexto específico e as ferramentas inline. Dessa forma, você pode avançar rapidamente à seção do código necessária.

Como entrar no modo Edição rápida:

  • Clique com o botão direito do mouse em um snippet de código e selecione Edição rápida no menu de contexto exibido.
  • Pressione Ctrl+E (no Windows) ou Cmd+E (no Mac).

Usar o modo Edição rápida com arquivos HTML

Em um arquivo HTML, coloque o cursor do mouse dentro de uma classe, do atributo id (nome ou valor) ou do nome da tag. A Edição rápida mostra todas as regras CSS, SCSS e LESS no seu projeto que são correspondentes. É possível editar essas regras diretamente inline, sem precisar sair do contexto do arquivo HTML.

Usar o modo Edição rápida com arquivos HTML
Usar o modo Edição rápida com arquivos HTML

Quando várias regras correspondem, navegue entre elas usando a lista à direita (ou use o Alt+Seta para cima/baixo).

Para criar uma regra CSS diretamente do editor inline, clique em Nova regra ou pressione Ctrl+Alt+N (no Windows) ou Cmd+Opt+N (no Mac).

Usar o modo Edição rápida com arquivos JavaScript

Em um arquivo JavaScript, coloque o cursor do mouse no nome de uma função. A Edição rápida mostra o corpo da função, mesmo se estiver presente em outros arquivos com referência a uma instrução necessária.

Usar o modo Edição rápida com arquivos JavaScript
Usar o modo Edição rápida com arquivos JavaScript

Usar o modo Edição rápida com arquivos CSS, SCSS, or LESS

Quando você insere a Edição rápida com o cursor do mouse em um valor de cor, é possível acessar o seletor de cores e modificar as cores usadas no código CSS rapidamente.

Acessar o seletor de cores em um arquivo CSS
Acessar o seletor de cores em um arquivo CSS

Em um arquivo CSS, LESS ou SCSS, coloque o cursor do mouse em uma função de momento de transição cubic-bezier() ou steps(). Dessa forma, a Edição rápida exibe um editor gráfico da curva de transição.

As funções de tempo predefinidas ease, ease-in, ease-out, ease-in-out, step-start e step-end também são pontos iniciais válidos.

Manipular uma curva de Bézier usando a Edição rápida
Manipular uma curva de Bézier usando a Edição rápida

Refatorar código

Refatoração de código é o processo de reestruturação do código de programa sem modificar seu comportamento externo para torná-lo mais legível e facilitar sua manutenção, compreensão e depuração. Ele é usado quando há códigos duplicados, métodos longos ou classes grandes no código. A depuração do código fica mais rápida graças a funções pequenas e substituições apropriadas.

Com a refatoração de JavaScript, você pode renomear funções e definir o escopo de uma variável para chamá-la no bloco de código no qual ela está definida.

Observação:

A refatoração de código agora está disponível somente em arquivos .js. 

Refatorar JavaScript

Você pode refatorar código em documentos html, php e javascript. Quando você clica com o botão direito na área de código no Dreamweaver, a opção Refatorar é exibida no menu suspenso. O menu Refatorar inclui as seguintes opções:

  • Renomear
  • Extrair para Variável
  • Extrair para Função
  • Delimitar em Try/Catch
  • Delimitar na Condição
  • Converter em Arrow Function
  • Criar Getters/Setters
Refatorar
Refatorar

Para entender como as opções de refatoração funcionam, consulte as seguintes seções:

Renomear

A opção Renomear é usada para alterar todas as ocorrências do nome de uma variável ou função em um código JavaScript. Para refatorar uma variável, não é necessário clicar e arrastar para selecioná-la.

Siga estas etapas para renomear no código JavaScript:

  1. Selecione o código que precisa ser alterado ou posicione o cursor de texto nele.

  2. Clique com o botão direito no texto selecionado e selecione Refatorar > Renomear. Você também pode usar o atalho de teclado Ctrl + Alt + R no Windows ou Command + Option + R no macOS para Renomear.

  3. Vários cursores são exibidos na tela, permitindo que você altere todas as ocorrências da variável. Melhorias no recurso de vários cursores fazem com que a próxima ocorrência da variável seja selecionada. Digite novamente o nome de uma única variável ou função para substituir o nome atual.

    Antes de Renomear
    Antes de Renomear

    Depois de Renomear
    Depois de Renomear

Extrair para Variável

Use a opção Extrair para Variável para substituir uma expressão por uma variável, uma variável local ou constantes no código JavaScript. Para fazer isso, selecione uma expressão e clique com o botão direito nela. Em seguida, selecione Refatorar > Extrair para Variável. Você também pode usar o atalho de teclado Ctrl + Alt + V no Windows e Cmd + Alt + V no macOS.

Antes de Extrair para Variável
Antes de Extrair para Variável

Depois de Extrair para Variável
Depois de Extrair para Variável

Extrair para Função

Use a opção Extrair para Função para substituir uma expressão nas chamadas de uma função dentro de um parâmetro. O valor padrão do novo parâmetro pode ser iniciado dentro do corpo da função ou transmitido para as demais chamadas de função.

Para refatorar usando a opção Extrair para Função, siga estas etapas:

  1. Selecione uma expressão ou um conjunto de expressões no código JavaScript.

    Extrair para Função
    Seleção de uma expressão

  2. Clique com o botão direito e selecione Refatorar > Extrair para Função. Você também pode usar o atalho de teclado Ctrl + Alt + M no Windows ou Cmd + Alt + M no Mac.

  3. No menu pop-up exibido na tela, selecione o escopo de destino para extrair a função.

    Tipos de escopo
    Tipos de escopo

    O resultado varia de acordo com o escopo de destino selecionado. Por exemplo, o escopo de destino pode ser um construtor, a classe selecionada ou uma função global.

    As características da opção Extrair para Função são:

    • Identificação dos parâmetros que devem ser transmitidos com base nos identificadores disponíveis na seleção ou no escopo de destino.
    • Identificação dos parâmetros de retorno que devem retornar da função com base nos identificadores cujos valores são alterados na seleção.
    • Criação de uma função com um nome exclusivo.

    As capturas de tela abaixo mostram o resultado de acordo com o respectivo escopo de destino selecionado. 

    Escopo de destino: Construtor
    Construtor

    Escopo de destino: Nome da classe
    Classe

    Escopo de destino: Global
    Global

Delimitar em Try/Catch

Use a opção Delimitar em Try Catch em uma exceção em um bloco de código exibido como erro após a compilação do programa. Essa função delimita o bloco de código em um bloco Try/Catch. Esse bloco de código é marcado como uma exceção durante a execução do programa.

Selecione o código ou posicione o cursor nele, clique com o botão direito e selecione Refatorar > Delimitar em Try/Catch. Se você posicionar o cursor no código, essa opção verificará se há instruções próximas a ele ou se o código é uma instrução. Se houver instruções, a opção delimitará o código em um bloco Try/Catch.

Antes de Delimitar em Try/Catch
Antes de Delimitar em Try/Catch

Depois de Delimitar em Try/Catch
Depois de Delimitar em Try/Catch

Delimitar na Condição

Use a opção Delimitar na Condição em uma expressão em um código para ser compilado somente com uma condição específica.

Selecione uma expressão no código, clique com o botão direito e selecione Refatorar > Delimitar na Condição.

Antes de Delimitar na Condição
Antes de Delimitar na Condição

Depois de Delimitar na Condição
Depois de Delimitar na Condição

Converter em Arrow Function

Uma Arrow Function é uma expressão que não tem suas próprias expressões de função, como this, arguments, super ou new.target. Essas expressões de função são usadas em expressões de não método e não podem ser usadas como um construtor.

Posicione o cursor em uma função, clique com o botão direito e selecione Refatorar > Converter em Arrow Function.

Antes de Converter em Arrow Function
Antes de Converter em Arrow Function

Depois de Converter em Arrow Function
Depois de Converter em Arrow Function

Observação:
  • Se a instrução selecionada tiver um parâmetro, a estrutura do parâmetro será exibida como param => {instruções}.
  • Se a instrução selecionada não tiver parâmetros ou tiver mais de um parâmetro, como em param (param1, param2), a estrutura do parâmetro será exibida como param (param1, param2) => {instruções}.

Criar Getters/Setters

Em JavaScript, um setter pode ser usado para executar uma função na qual uma propriedade especificada precisa ser alterada. Na maioria das vezes, os setters são usados com getters para criar um tipo de pseudo propriedade. Você não pode criar um setter para uma propriedade que tem um valor real.

Posicione o cursor em um membro de uma expressão de objeto, clique com o botão direito e selecione Refatorar > Criar Getters/Setters.

Antes de Criar Getters/Setters
Antes de Criar Getters/Setters

Depois de Criar Getters/Setters
Depois de Criar Getters/Setters

Dicas de soluções de problemas

A tabela abaixo mostra dicas de soluções de problemas para as respectivas mensagens de erro, que são exibidas na tela ao selecionar um código de maneira incorreta:

Nome da função

Mensagem de erro

Dica de solução de problemas

Renomear

Nenhuma expressão na posição especificada

Posicione o cursor sobre ou antes do nome de uma variável ou função.

Extrair para Variável

A seleção não forma uma expressão

Selecione uma expressão no código antes de refatorá-lo.

Extrair para Função

O bloco selecionado deve representar um conjunto de instruções ou uma expressão

Verifique se você selecionou um bloco com um conjunto de instruções ou uma expressão.

Delimitar em Try/Catch

 Selecione um código válido para delimitar em um bloco Try/Catch

Verifique se você selecionou um código antes de aplicar a opção de refatoração em Try/Catch.

Delimitar na Condição

Selecione um código válido para quebrar linha em um bloco de condição

Verifique se você selecionou uma expressão antes de aplicar a opção de refatoração Delimitar na Condição.

Converter em Arrow Function

 Posicione o cursor dentro de uma expressão de função

Verifique se você posicionou o cursor dentro de uma expressão de função antes de aplicar a opção de refatoração.

Criar Getters/Setters

Posicione o cursor em um membro de uma expressão de objeto

Verifique se você posicionou o cursor em um membro de uma expressão de objeto antes de aplicar a opção de refatoração Criar Getter/Setters.

Localizar e substituir texto

Você pode usar os recursos de localização e substituição do Dreamweaver para pesquisar qualquer tipo de texto, código ou espaço no branco em seu site ou pasta.

Você pode pesquisar toda a marcação, ou pode limitar a pesquisa a apenas o texto renderizado na Visualização de design ou apenas o código.

Você também pode usar algoritmos de correspondência de padrão (expressões regulares) avançados para sofisticadas operações de localizar e substituir.

Assim que localizar o texto, você pode escolher substituí-lo pelo texto, código ou espaço em branco especificado.

Para obter mais informações, consulte Localizar e substituir texto.

Visualização de imagens e cores na Visualização de código

Após inserir o código relevante de imagens e cores, é possível visualizá-las diretamente na Visualização de código.

Visualização de imagens

Passe o mouse sobre qualquer URL de imagem para visualizar a imagem na Visualização de código. Você pode visualizar imagens indicadas como:

  • url();
  • data-uri()
  • Valor do atributo src da tag img

O Dreamweaver também exibe visualizações de imagens hospedadas remotamente.

Se o Dreamweaver não puder exibir a visualização de caminhos remotos, a mensagem “Não é possível carregar a imagem” será exibida.

Você pode visualizar estes tipos de imagem:

  • JPEG
  • JPG
  • PNG
  • GIF
  • SVG
Visualização de imagens na Visualização de código

Visualização de cores

Passe o mouse sobre os valores de cor para visualizar cores na Visualização de código. Os formatos compatíveis são:

  • Valores de cor hexadecimais de 3 e 6 dígitos: #ff0000;
  • RGB: rgb(0, 0, 0);
  • RGBA: rgba(0, 255, 228, 0.5);
  • HSL: hsl(120, 100%, 50%);
  • HSLA: hsla(120, 60%, 70%, 0.3);
  • Nomes de cores predefinidos, como, verde-oliva, verde azulado, vermelho.

A visualização de cores está disponível em todos os tipos de documento para os formatos de cores acima.

Visualização de cores na Visualização de código

Clique com o botão direito do mouse em um valor e selecione Edição rápida para abrir o seletor de cores e selecionar uma cor diferente.

Observação:

Para desativar visualizações de imagens e cores, desmarque a opção Exibir > Opções de visualização de código > Visualização do ativo.

Você pode imprimir o código para editá-lo offline, arquivá-lo ou distribuí-lo.

  1. Abra uma página na Visualização de código.
  2. Selecione Arquivo > Imprimir código.
  3. Especifique as opções de impressão e clique em OK (Windows) ou Imprimir (Macintosh).

 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