- Guia do usuário do Dreamweaver
- Introdução
- Dreamweaver e Creative Cloud
- Áreas de trabalho e exibições do Dreamweaver
- Configurar sites
- Sobre sites do Dreamweaver
- Configurar uma versão local do site
- Conectar-se a um servidor de publicação
- Configurar um servidor de teste
- Importar e exportar configurações de site do Dreamweaver
- Trazer sites existentes de um servidor remoto para a raiz do site local
- Recursos de acessibilidade do Dreamweaver
- Configurações avançadas
- Definir preferências de site para transferência de arquivos
- Especificar configurações do servidor proxy no Dreamweaver
- Sincronizar as configurações do Dreamweaver com a Creative Cloud
- Como usar o Git no Dreamweaver
- Gerenciar arquivos
- Criar e abrir arquivos
- Gerenciamento de arquivos e pastas
- Obter e colocar arquivos no servidor
- Devolver e retirar arquivos
- Sincronizar arquivos
- Comparar arquivos em busca de diferenças
- Encobrir arquivos e pastas em seu site do Dreamweaver
- Ativar as Design Notes para sites do Dreamweaver
- Impedir possível ataque ao Gatekeeper
- Layout e design
- CSS
- Noções sobre as folhas de estilos em cascata
- Aplicar layout às páginas usando o CSS Designer
- Usar pré-processadores de CSS no Dreamweaver
- Como definir preferências de estilo CSS no Dreamweaver
- Mover regras de CSS no Dreamweaver
- Converter CSS inline em uma regra de CSS no Dreamweaver
- Trabalhar com tags div
- Aplicação de degradês ao fundo
- Criar e editar efeitos de transição do CSS3 no Dreamweaver
- Formatar código
- Conteúdo e ativos de página
- Definir propriedades da página
- Configurar propriedades de cabeçalho e propriedades de link de CSS
- Trabalhar com texto
- Localizar e substituir texto, tags e atributos
- Painel DOM
- Editar na Visualização dinâmica
- Codificar documentos do Dreamweaver
- Selecionar e exibir os elementos na janela Documento
- Definir propriedades de texto no Inspetor de propriedades
- Verificar ortografia de uma página Web
- Usar regras horizontais no Dreamweaver
- Adicionar e modificar combinações de fontes no Dreamweaver
- Trabalhar com ativos
- Inserir e atualizar datas no Dreamweaver
- Criar e gerenciar ativos favoritos no Dreamweaver
- Inserir e editar imagens no Dreamweaver
- Adicionar objetos de mídia
- Adição de vídeos no Dreamweaver
- Inserir vídeo HTML5
- Inserir arquivos SWF
- Adicionar efeitos de áudio
- Inserir áudio HTML5 no Dreamweaver
- Trabalhar com itens da biblioteca
- Usar texto em árabe e hebraico no Dreamweaver
- Vinculação e navegação
- Efeitos e widgets do jQuery
- Programar sites
- Sobre codificação no Dreamweaver
- Ambiente de codificação no Dreamweaver
- Definir preferências de codificação
- Personalizar codificação por cores
- Escrever e editar código
- Dicas de código e preenchimento de código
- Recolher e expandir código
- Reutilizar código com snippets
- Linting de código
- Otimizar código
- Editar código na Visualização de design
- Trabalhar com conteúdo do cabeçalho das páginas
- Inserir inclusões de servidor no Dreamweaver
- Usar bibliotecas de tags no Dreamweaver
- Importar tags personalizadas para o Dreamweaver
- Usar comportamentos JavaScript (instruções gerais)
- Aplicar comportamentos internos do JavaScript
- Sobre XML e XSLT
- Executar transformações XSL do servidor no Dreamweaver
- Executar transformações XSL do cliente no Dreamweaver
- Adicionar entidades de caracteres para XSLT no Dreamweaver
- Formatar código
- Fluxos de trabalho entre produtos
- Instalar e usar extensões no Dreamweaver
- Atualizações dentro do aplicativo no Dreamweaver
- Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
- Trabalho com o Fireworks e o Dreamweaver
- Editar conteúdo em sites do Dreamweaver usando o Contribute
- Integração do Business Catalyst ao Dreamweaver
- Criar campanhas de email personalizadas
- Modelos
- Sobre os modelos do Dreamweaver
- Reconhecimento de modelos e documentos baseados em modelo
- Criar um modelo do Dreamweaver
- Criar regiões editáveis nos modelos
- Criar regiões e tabelas repetitivas no Dreamweaver
- Usar regiões opcionais em modelos
- Definir atributos de tag editáveis no Dreamweaver
- Como criar modelos aninhados no Dreamweaver
- Editar, atualizar e excluir modelos
- Exportar e importar conteúdo xml no Dreamweaver
- Aplicar ou remover um modelo em um documento
- Editar conteúdo em modelos do Dreamweaver
- Regras de sintaxe para tags de modelo no Dreamweaver
- Definir preferências de realce para regiões de modelo
- Vantagens de usar modelos no Dreamweaver
- Dispositivo móvel e multitela
- Sites dinâmicos, páginas e formulários Web
- Noções sobre aplicativos Web
- Configurar o computador para desenvolvimento de aplicativos
- Solucionar problemas de conexões de banco de dados
- Remover scripts de conexão no Dreamweaver
- Criar páginas dinâmicas
- Visão geral das fontes de conteúdo dinâmico
- Definir origens de conteúdo dinâmico
- Adicionar conteúdo dinâmico a páginas
- Alterar conteúdo dinâmico no Dreamweaver
- Exibir registros de banco de dados
- Fornecer e solucionar problemas de live data no Dreamweaver
- Adicionar comportamentos personalizados de servidor no Dreamweaver
- Criar formulários usando o Dreamweaver
- Usar formulários para reunir informações de usuários
- Criar e ativar formulários do ColdFusion no Dreamweaver
- Criar formulários Web
- Suporte aprimorado a HTML5 para elementos de formulário
- Desenvolver um formulário usando o Dreamweaver
- Criação visual de aplicativos
- Criar páginas mestre e detalhadas no Dreamweaver
- Criar páginas de pesquisa e de resultados
- Criar uma página de inserção de registro
- Criar uma página de registro de atualização no Dreamweaver
- Criar páginas de exclusão de registro no Dreamweaver
- Usar comandos ASP para modificar um banco de dados no Dreamweaver
- Criar uma página de registro
- Criar uma página de logon
- Criar uma página que apenas usuários autorizados podem acessar
- Proteger pastas no ColdFusion usando o Dreamweaver
- Usar componentes do ColdFusion no Dreamweaver
- Testar, visualizar e publicar sites
- Solução de problemas
Saiba como definir preferências de codificação, temas de código, formato e preferências de regravação de código no Dreamweaver.
Você pode definir preferências de codificação, como formatação e cores de código, entre outras, para atender às suas necessidades específicas.
- Para definir preferências avançadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags).
- O Dreamweaver permite a formatação de arquivos CSS, JS e PHP. Para obter informações sobre como personalizar a formatação de códigos PHP, CSS e JS, consulte Formatar código.
Definir a aparência do código
Você pode definir a quebra automática de linha, exibir números de linha para o código, definir a cor da sintaxe dos elementos de código, definir o recuo e exibir caracteres ocultos no menu Exibir > Opções de visualização de código.
-
Abra um documento na Visualização de código ou no Inspetor de código.
-
Selecione Exibir > Opções de visualização de código.
-
Marque ou desmarque estas opções:
Quebra automática de palavra
Quebra automaticamente as linhas do código para que você possa visualizá-lo sem precisar rolar a tela horizontalmente. Esta opção não insere quebras de linha. Ela apenas facilita a visualização do código.
Números de linha
Exibe números de linha na lateral do código.
Caracteres ocultos
Exibe caracteres especiais no lugar dos espaços em branco. Por exemplo, um ponto substitui os espaços, uma seta dupla substitui as tabulações e um marcador de parágrafo substitui as quebras de linha.
Observação:As quebras de linha automáticas usadas pelo Dreamweaver não são exibidas com um marcador de parágrafo.
Sinalização da sintaxe por cores
Ativa ou desativa a codificação por cores. Para obter informações sobre a alteração do esquema de cores, consulte Definição das cores de código.
Recuar automaticamente
Faz com que o código recue automaticamente quando você pressiona Enter enquanto escreve o código. A nova linha de código é recuada no mesmo nível da linha anterior. Para obter informações sobre a alteração do espaçamento do recuo, consulte a opção Tamanho da tabulação em Alteração do formato de código.
Alterar formato de código
Você pode alterar a aparência do código especificando preferências de formatação, como recuo, tamanho da linha e uso de maiúsculas/minúsculas nos nomes de tags e atributos.
Todas as opções de formatação de código, exceto a opção Ignorar maiúscula/minúscula de, serão aplicadas apenas a documentos novos ou às adições a documentos que você fizer posteriormente.
Para reformatar documentos HTML existentes, abra o documento e selecione Editar > Código > Aplicar formatação de origem.
-
Selecione Editar > Preferências.
-
Selecione Formato do Código na lista Categoria à esquerda.
-
Defina uma das seguintes opções:
Recuo
Indica se o código gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas nessas preferências) ou não.
Observação:A maioria das opções de recuo nesta caixa de diálogo se aplica somente ao código gerado pelo Dreamweaver, e não ao código digitado. Para fazer com que cada nova linha do código digitado recue no mesmo nível da linha anterior, selecione a opção Exibir > Recuo automático das opções de visualização de código. Para obter mais informações, consulte Definir a aparência do código.
Com
(Caixa de texto e menu pop‑up) Especifica quantos espaços ou tabulações o Dreamweaver deve usar para recuar o código gerado. Por exemplo, se você digitar 3 na caixa e selecionar Tabulações no menu pop‑up, o código gerado pelo Dreamweaver será recuado usando três caracteres de tabulação para todos os níveis de recuo.
Tamanho da tabulação
Determina o tamanho de cada caractere de tabulação na Visualização de código. Por exemplo, se a opção Tamanho da tabulação for definida como 4, cada tabulação será exibida na Visualização de código como um espaço em branco de quatro caracteres. Se, além disso, a opção Recuar com for definida como 3 Tabulações, o código gerado pelo Dreamweaver será recuado usando três caracteres de tabulação para todos os níveis de recuo, o que será exibido na Visualização de código como um espaço em branco de doze caracteres.
Observação:O Dreamweaver aplica o recuo usando espaços ou tabulações. Ele não converte uma série de espaços em uma tabulação ao inserir código.
Emmet
Selecione esta opção se você deseja usar abreviações Emmet em seu código. Selecionar essa opção garante que, ao pressionar Tab, o Dreamweaver converta a abreviação Emmet em códigos HTML ou CSS completos. Para obter mais informações sobre como usar Emmet, consulte Usar o conjunto de ferramentas Emmet com o Dreamweaver.
Tipo de quebra de linha
Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site remoto. A escolha do tipo correto de caracteres de quebra de linha garante que o código-fonte HTML apareça corretamente quando visualizado no servidor remoto. Essa configuração também será útil quando você trabalhar com um editor de texto externo que reconhece apenas determinados tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o SimpleText for o editor externo.
Observação:No caso dos servidores conectados por meio do FTP, esta opção se aplica somente ao modo de transferência binário. O modo de transferência ASCII do Dreamweaver ignora esta opção. Se você baixar os arquivos usando o modo ASCII, o Dreamweaver definirá as quebras de linha com base no sistema operacional do seu computador. Se você fizer o upload de arquivos usando o modo ASCII, as quebras de linha serão definidas como CR LF.
Tag TD: Não incluir quebra de linha na tag TD
Lida com um problema de processamento que ocorre em alguns navegadores antigos quando há espaço em branco ou quebras de linha imediatamente após uma tag <td> ou imediatamente antes de uma tag </td>. Quando você seleciona esta opção, o Dreamweaver não grava quebras de linha depois da tag <td> ou antes da tag </td>, mesmo se a formatação na Biblioteca de tags indicar que a quebra de linha deve existir.
Formatação avançada
Permite que você defina opções de formatação para tags e atributos individuais no Editor de bibliotecas de tags.
Caractere de espaço em branco
(Apenas versão em japonês) Permite selecionar ou espaço Zenkaku para código HTML. O espaço em branco selecionado nesta opção será usado para tags vazias durante a criação de uma tabela e quando a opção “Permitir vários espaços consecutivos” estiver ativada nas páginas de codificação em japonês.
Tamanho mínimo de dobramento de código
O tamanho padrão para dobramento de código é de duas linhas. Nesta configuração padrão, todos os fragmentos que têm pelo menos duas linhas de código podem ser recolhidos. Os fragmentos de código menores do que duas linhas podem ser recolhidos apenas selecionando o código. Para obter mais informações sobre dobramento de código, consulte Recolher e expandir código.
Definir preferências de regravação de código
Use as preferências de regravação de código para especificar como e se o Dreamweaver modificará o código quando você abrir documentos, copiar e colar elementos de formulário e digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades. Essas preferências não têm efeito quando você edita HTML ou scripts na Visualização de código.
Se você desativar as opções de regravação, os itens de markup inválidos do HTML que seria regravado serão exibidos na janela Documento.
-
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
-
Selecione Regravação de código na lista Categoria à esquerda.
-
Defina uma das seguintes opções:
Corrigir tags abertas e aninhadas incorretamente
Regrava tags sobrepostas. Por exemplo, <b><i>texto</b></i> é regravado como <b><i>texto</i></b>. Esta opção também insere aspas e colchetes de fechamento caso eles estejam ausentes.
Renomear itens de formulário ao colar
Garante que não haja nomes duplicados de objetos de formulário. Esta opção é ativada por padrão.
Observação:Diferente das outras opções nesta caixa de diálogo de preferência, esta opção não se aplica quando você abre um documento, mas somente quando você copia e cola um elemento de formulário.
Remover tags de finalização adicionais
Exclui tags de finalização que não possuem uma tag de abertura correspondente.
Avisar ao corrigir ou remover tags
Exibe um resumo do HTML tecnicamente inválido que o Dreamweaver tentou corrigir. O resumo indica o local do problema (usando números de linha e coluna) para que você localize a correção e garanta que ela está sendo processada conforme esperado.
Nunca regravar código: em arquivos com extensões
Impede que o Dreamweaver regrave código em arquivos com as extensões especificadas. Esta opção é particularmente útil para arquivos que contenham tags de terceiros.
Codificar <, >, & e " em valores de atributo usando &
Garante que os valores de atributo digitados ou editados usando ferramentas do Dreamweaver, como o Inspetor de propriedades, contenham apenas caracteres legais. Esta opção é ativada por padrão.
Observação:Esta opção e as seguintes não se aplicam aos URLs digitados na Visualização de código. Além disso, elas não ocasionam a alteração do código já existente em um arquivo.
Não codificar caracteres especiais
Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais. Esta opção é ativada por padrão.
Codificar caracteres especiais em URLs utilizando &#
Garante que, ao digitar ou editar URLs usando ferramentas do Dreamweaver, como o Inspetor de propriedades, esses URLs contenham somente caracteres legais.
Codificar caracteres especiais em URLs utilizando %
Opera da mesma maneira que a opção anterior, mas usa um método diferente de codificação de caracteres especiais. Esse método de codificação (através do sinal de porcentagem) pode ser mais compatível com navegadores antigos, mas não funciona bem com os caracteres de alguns idiomas.
Definir preferências de dicas de código
Use as preferências de dicas de código para configurar como deseja trabalhar com as dicas de código.
-
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
-
Selecione Dicas de código na lista Categoria à esquerda.
-
Defina uma das seguintes opções:
Tags de finalização
Especifique como você deseja que o Dreamweaver feche as tags.
- Após digitar "</" -
- Após digitar ">" da tag de abertura - Selecione esta opção se deseja que o Dreamweaver adicione automaticamente uma tag de fechamento assim que você fechar a tag de abertura.
- Nunca - Selecione essa opção se você não quer que o Dreamweaver adicione automaticamente tags de fechamento.
Ativar dicas de código
Selecione essa opção para ativar ou desativar as dicas de código e o preenchimento de código no Dreamweaver. Para obter mais informações sobre os recursos de dicas de código e preenchimento de código do Dreamweaver, consulte Dicas de código e preenchimento de código.
Ativar dicas de ferramentas de descrição
Selecione essa opção para que descrições apareçam junto com as dicas de código. Essas descrições fornecem informações adicionais sobre o código que você está escrevendo.
Inserir chaves automaticamente Quando marcada, a chave de fechamento é inserida automaticamente sempre que um usuário digita uma chave de abertura. Quando desmarcada, a chave de fechamento não é inserida quando o usuário digita a chave de abertura. Aplica-se a todos os tipos de chaves e todos os tipos de arquivos (html, php, css, js).
Inserir aspas automaticamente Quando marcada, a aspas de fechamento é inserida automaticamente sempre que um usuário digita uma aspas de abertura. Quando desmarcada, a aspas de fechamento não é inserida quando o usuário digita a aspas de abertura. Aplica-se a aspas simples e duplas e todos os tipos de arquivos (html, php, css, js).
Definir preferência para preenchimento automático de códigos
Você pode ativar e desativar o fechamento automático de colchetes e aspas executando as seguintes etapas:
-
Abra o arquivo brackets.json no seguinte local:
- Win: %appdata%\Adobe\Dreamweaver CC 2018\pt_BR\Configuration\Brackets\
- Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2018/pt_BR/Configuration/Brackets/
-
Para desativar o fechamento automático de colchetes e parêntesis, defina autoCloseBraces como False.
-
Para desativar a inserção automática de aspas correspondentes, defina autoCloseQuotes como False.
Se você deseja ativar o fechamento automático de colchetes e aspas correspondentes, defina os valores mencionados acima como True.
-
Salve o arquivo .json e inicie o Dreamweaver.
Definir preferências de PHP
Você pode definir o ambiente de desenvolvimento de programação PHP em que deseja trabalhar. Você pode fazer isso de maneira específica para sites individuais em que trabalha ou de maneira geral para todos os arquivos PHP salvos fora dos sites do Dreamweaver.
O Dreamweaver definirá as dicas de código e as verificações de linting para a versão da linguagem PHP selecionada.
Para definir as preferências da versão do código PHP para arquivos não específicos a sites, conclua as seguintes etapas:
-
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
-
Defina o PHP na lista de categorias à esquerda.
-
Escolha uma versão do PHP na lista suspensa Versão do PHP e clique em Aplicar.
Para definir a versão do PHP para um site específico, conclua as seguintes etapas:
-
Na caixa de diálogo Configuração de site, em Configurações avançadas, selecione PHP.
-
Escolha uma versão do PHP na lista suspensa Versão do PHP e clique em Salvar.
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.
-
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
-
Selecione Interface na lista Categoria à esquerda.
-
Escolha um tema na lista Temas de cores.
-
Após definir o tema da interface, defina o tema do código.
Você pode escolher um tema de código claro ou escuro.
-
Clique em Aplicar para salvar as alterações.
Você pode optar por personalizar ainda mais a codificação por cores de acordo com seus requisitos. Para obter mais informações, consulte Personalizar codificação por cores.
Usar um editor externo
Você pode especificar um editor externo para a edição de arquivos com extensões específicas. Por exemplo, você pode iniciar um editor de texto, como BBEdit, Bloco de Notas ou TextEdit, no Dreamweaver para editar arquivos JavaScript (JS).
Você pode atribuir editores externos diferentes para extensões diferentes.
Definir um editor externo para um tipo de arquivo
-
Selecione Editar > Preferências.
-
Selecione Tipos de arquivos/editores na lista Categoria à esquerda, defina as opções e clique em OK.
Abrir na Visualização de código
Especifica as extensões de nome de arquivo abertas automaticamente na Visualização de código do Dreamweaver.
Recarregar arquivos modificados
Especifica o comportamento quando o Dreamweaver detecta que alterações foram feitas externamente em um documento aberto no Dreamweaver.
Salvar ao iniciar
Especifica se o Dreamweaver sempre deve salvar o documento atual antes de iniciar o editor, nunca salvar o documento ou perguntar a você se deseja salvar cada vez que iniciar o editor externo.
Fireworks
Você pode conectar o Fireworks ao Dreamweaver fornecendo aqui o caminho para o aplicativo.