Guia do Usuário Cancelar

Criar e abrir arquivos

Pesquisar
Dreamweaver

Dreamweaver

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

 

 

Crie, abra, edite, salve e reverta arquivos no Dreamweaver. Crie modelos e abra arquivos relacionados.

O Dreamweaver oferece um ambiente flexível para trabalhar com uma variedade de documentos da Web. Além dos documentos em HTML, você pode criar e abrir vários documentos baseados em texto, como JavaScript, PHP e Folhas de estilos em cascata (CSS).

O Dreamweaver fornece diversas opções para criação de um novo documento. Você pode criar qualquer um dos seguintes:

  • Um novo documento em branco ou modelo

  • Um documento baseado em um dos layouts de página predefinida que é fornecido com o Dreamweaver, incluindo mais de 30 layouts de página baseados em CSS

  • Um documento baseado em um dos modelos existentes

    Você também pode definir as preferências do documento. Por exemplo, caso normalmente trabalhe com um tipo de documento, você pode defini-lo como sendo o tipo de documento padrão para novas páginas criadas.

    Você pode definir facilmente propriedades de documento como, por exemplo, marcas meta, títulos de documento e cores de fundo, além de várias outras propriedades de página na Visualização de design ou na Visualização de código.

Tipos de arquivo do Dreamweaver

Você pode trabalhar com diversos tipos de arquivos no Dreamweaver. O tipo de arquivo primário com o qual você trabalhará é o arquivo HTML. Os arquivos HTML, ou Linguagem de markup de hipertexto, contêm a linguagem baseada na tag responsável pela exibição de uma página da Web em um navegador. Você pode salvar arquivos HTML usando a extensão .html ou .htm. O Dreamweaver salva arquivos usando por padrão a extensão .html.

O Dreamweaver permite que você crie e edite páginas da Web baseadas em HTML5. Layouts iniciais também estão disponíveis para a criação de páginas HTML5 do zero.

A seguir, veja outros tipos comuns de arquivos que talvez você use ao trabalhar com o Dreamweaver:

CSS

Os arquivos em folha de estilos em cascata têm uma extensão .css. Eles são usados para formatar conteúdo em HTML e controlar o posicionamento de vários elementos de página.

GIF

Os arquivos Graphics Interchange Format têm uma extensão .gif. GIF é um formato gráfico para Web conhecido para desenhos, logotipos, gráficos com áreas transparentes e animações. Os GIFs contêm 256 cores no máximo.

JPEG

Os arquivos Joint Photographic Experts Group (receberam o nome da organização que criou o formato) têm uma extensão .jpg e costumam ser fotografias ou imagens coloridas de alta resolução. O formato JPEG é mais conhecido por conta de fotografias digitais ou digitalizadas, imagens que usam texturas, imagens com transições de gradientes de cores e todas as imagens que exijam mais de 256 cores.

XML

Os arquivos em Linguagem de markup extensível têm uma extensão .xml. Eles contêm dados em uma forma não processada que pode ser formatada usando a XSL (Linguagem de folha de estilos extensível).

Nova caixa de diálogo Documento

A nova caixa de diálogo Documento exibe todos os tipos de arquivo de documento suportados, incluindo PHP, XML e SVG.

Você também pode acessar os layouts predefinidos, modelos e estruturas nesta caixa de diálogo.

Observação:

Todos os layouts em destaque inicial são criados para suportar sites responsivos além de serem compatíveis com HTML-5.

Criar um layout HTML usando uma página em branco

Você pode criar uma página que contenha um layout de CSS previamente elaborado ou criar uma página totalmente em branco e criar um layout próprio.

  1. Selecione Arquivo > Novo.

  2. Na categoria Novo documento selecione o tipo de página que você deseja criar da coluna Tipo de documento. Por exemplo, selecione HTML para criar uma página HTML simples.

  3. Selecione um tipo de documento no menu pop-up TipoDoc. Na maioria dos casos, você pode usar a seleção padrão HTML5.

  4. Selecione opções adicionais de acordo com o tipo de página que você deseja criar.

    • Nenhuma: selecione essa opção se você deseja criar uma página da Web simples sem usar nenhuma estrutura.
    • Bootstrap: os modelos de Bootstrap são layouts predefinidos usando a estrutura do Bootstrap. Selecione essa opção se você deseja criar páginas da Web responsivas usando a estrutura do Bootstrap. Por padrão, um documento Bootstrap 4.0.0 é criado.
    Observação:

    Se você tem intenção de criar páginas da Web responsivas, selecione a estrutura do Bootstrap.

  5. Se você não estiver usando uma estrutura:

    • Título do documento: insira o título do documento neste campo, e o Dreamweaver o adicionará automaticamente à seção <head> do documento.
    • Tipo do documento: selecione um tipo de documento no menu pop-up TipoDoc. Na maioria dos casos, é possível usar a seleção padrão HTML5.

    A seleção de uma das definições do tipo do documento XHTML, no menu TipoDoc, torna a página compatível com XHTML. Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu. A XHTML (Linguagem de markup de hipertexto extensível) é uma reformulação do HTML como um aplicativo XML. Em geral, o uso de XHTML oferece a você os benefícios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da Web.

    Observação:

    Para obter mais informações sobre a XHTML, consulte o site do World Wide Web Consortium (WC), que contém a especificação de XHTML - XHTML baseada em módulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).

    • Anexar CSS: anexe um layout CSS existente à página. Para isso, clique no ícone Anexar folha de estilos  ao lado do painel Anexar arquivo CSS e selecione uma folha de estilo CSS.
    Criar uma nova página HTML sem usar uma estrutura
    Criar uma nova página HTML sem usar uma estrutura

    Se você deseja criar uma nova página com base na composição do Photoshop, selecione Use o Extract para criar sua página com as composições do Photoshop. 

    Ao selecionar essa opção, o painel Extract abrirá no local no qual você poderá fazer upload de um arquivo PSD e começar a criar sua página HTML.

  6. Se você deseja criar uma página da Web responsiva usando a estrutura do Bootstrap:

    • Bootstrap CSS: escolha criar um novo Bootstrap CSS ou usar um arquivo CSS existente. Se você estiver usando um arquivo CSS existente, forneça o caminho para o arquivo. Verifique se o arquivo CSS está na pasta raiz do site.
    • Anexar CSS: anexe um layout CSS existente à página. Para isso, clique no ícone Anexar folha de estilos  ao lado do painel Anexar arquivo CSS e selecione uma folha de estilo CSS.
    • Incluir um layout previamente criado: selecione essa opção se você já tiver um layout. Clique em Personalizar para editar os valores de grade e de pontos de interrupção.
    Criar uma página HTML usando a estrutura do Bootstrap
    Criar uma página HTML usando a estrutura do Bootstrap

    Se você deseja criar uma nova página com base na composição do Photoshop, selecione Use o Extract para criar sua página com as composições do Photoshop. 

    Ao selecionar essa opção, o painel Extract abrirá no local no qual você poderá fazer upload de um arquivo PSD e começar a criar sua página HTML.

  7. Clique em Preferências se você deseja configurar as preferências padrão do documento, como um tipo de documento, codificação e uma extensão de arquivo.

  8. Clique no botão Criar.

  9. Salve o novo documento (Arquivo > Salvar).

  10. Na caixa de diálogo exibida, vá até a pasta em que deseja salvar o arquivo.
    Observação:

    Recomendamos salvar seu arquivo em um site do Dreamweaver.

  11. Na caixa Nome do arquivo, digite um nome para o arquivo.

    Evite o uso de espaços e de caracteres especiais em nomes de arquivo e pasta e não comece um nome de arquivo com um numeral. Em particular, não use caracteres especiais (como, por exemplo, é, ç ou ¥) ou pontuações (como, por exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que você pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que fará com que todos os links para o arquivo sejam desfeitos.

Criar um modelo em branco

Você pode usar a caixa de diálogo Novo documento para criar os modelos do Dreamweaver. Por padrão, os modelos são salvos na pasta Modelos do seu site.

Observação:

Não é possível criar um modelo sem antes criar um site. Para obter mais informações sobre sites e como criá-los, consulte Sobre sites do Dreamweaver.

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, selecione a categoria Modelo de sites.

  3. Selecione um tipo de documento no menu pop-up TipoDoc. Na maioria dos casos, esta seleção padrão ficará selecionada, XHTML 1.0 Transitional.

    A seleção de uma das definições do tipo de documento em XHTML no menu TipoDoc (DTD) torna a página compatível com XHTML. Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu. A XHTML (Linguagem de markup de hipertexto extensível) é uma reformulação do HTML como um aplicativo XML. Em geral, o uso de XHTML oferece a você os benefícios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da Web.

    Observação:

    Para obter mais informações sobre a XHTML, consulte o site do World Wide Web Consortium (WC), que contém a especificação de XHTML - XHTML baseada em módulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).

  4. Selecione Atualizar a página quando o modelo for alterado se você deseja que a página atualize automaticamente quando você editar o modelo.

  5. Clique no botão Criar.

  6. Salve o novo documento (Arquivo > Salvar). Caso você ainda não tenha adicionado regiões editáveis ao modelo, uma caixa de diálogo é exibida informando você de que não há regiões editáveis no documento. Clique em OK para fechar a caixa de diálogo.

  7. Na caixa de diálogo Salvar como, selecione um local para salvar o modelo.

  8. Na caixa Nome de arquivo, digite um nome para o novo modelo. Você não precisa acrescentar uma extensão de arquivo ao nome do modelo. Ao clicar em Salvar, a extensão .dwt é adicionada ao novo modelo, que será salvo na pasta Modelos do seu site.

    Evite o uso de espaços e de caracteres especiais em nomes de arquivo e pasta e não comece um nome de arquivo com um numeral. Em particular, não use caracteres especiais (como, por exemplo, é, ç ou ¥) ou pontuações (como, por exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que você pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que fará com que todos os links para o arquivo sejam desfeitos.

Criar uma página baseada em um modelo

É possível selecionar, visualizar e criar um novo documento usando um dos modelos existentes ou modelos iniciais do Dreamweaver. Você pode usar a caixa de diálogo Novo documento para selecionar um modelo de qualquer um dos seus sites definidos do Dreamweaver ou usar o painel Ativos para criar um novo documento de um modelo existente.

Criação de um documento com base em um modelo

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, selecione a categoria Página de modelo.

  3. Na coluna Site, selecione o site do Dreamweaver que contém o modelo que você deseja usar e, em seguida, selecione um modelo da lista à direita.

  4. Desmarque Atualizar a página quando o modelo for alterado caso você queira atualizar a página sempre que fizer alterações no modelo no qual a página se baseie.

  5. Clique em Preferências se você deseja configurar as preferências padrão do documento, como um tipo de documento, codificação e uma extensão de arquivo.

  6. Clique em Obter mais conteúdo se deseja abrir o Dreamweaver Exchange onde você poderá baixar mais conteúdo de design de página.

  7. Clique em Criar e salve o documento (Arquivo > Salvar).

Criação de um documento de um modelo no painel Ativos

  1. Abra o painel Ativos (Janela > Ativos), caso ele ainda não esteja aberto.

  2. No painel Ativos, clique no ícone Modelos  à esquerda para exibir a lista dos modelos no site atual.

    Observação:

    Caso tenha acabado de criar o modelo que você deseja aplicar, você talvez precise clicar no botão Atualizar para vê-lo.

  3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no modelo que você deseja aplicar e, em seguida, selecione Novo a partir de modelo.

    O documento é aberto na janela Documento.

  4. Salve o documento.

Criar uma página com base em um modelo inicial do Dreamweaver

O Dreamweaver é acompanhado de vários arquivos de partida profissionalmente para aplicativos móveis. Você pode usar esses arquivos de amostra como ponto de partida para o design de páginas nos sites.

Quando você cria um documento com base em um modelo de inicial, o Dreamweaver criará uma cópia do arquivo. Portanto, os arquivos iniciais não são substituídos.

Você pode visualizar um arquivo de amostra e ler uma breve descrição dos elementos de design de um documento na caixa de diálogo Novo documento.

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, selecione a categoria Modelos iniciais.

    Modelos iniciais no Dreamweaver
    Modelos iniciais no Dreamweaver

    Os detalhes e a visualização da página de amostra são exibidos à direita do painel enquanto você seleciona as diferentes opções.

  3. Clique no botão Criar.

    O novo documento e todos os arquivos relacionados a ele são abertos na janela Documento.

  4. Salve o documento (Arquivo > Salvar).

Criar novos arquivos de código para diferentes idiomas de codificação

É possível criar arquivos de código para uma certa quantidade de idiomas de codificação no Dreamweaver.

Para obter mais informações sobre como obter suporte durante a codificação no Dreamweaver, consulte Sobre a codificação no Dreamweaver.

Para criar um novo arquivo de código no Dreamweaver, siga estas instruções:

  1. Selecione Arquivo > Novo documento.

  2. Em Tipo de documento, selecione o arquivo de código que você deseja criar.

  3. Selecione o tipo de documento que você deseja criar da coluna Tipo do documento (como um arquivo PHP).

    Criar uma página PHP
    Criar uma página PHP

  4. Com base no tipo de arquivo selecionado, opções adicionais ficarão disponíveis ao criar um documento. 

    Por exemplo, se você estiver criando um arquivo PHP, pode selecionar opções de TipoDoc e algumas opções de CSS.

  5. Clique no botão Criar. Em seguida, salve o documento (Arquivo > Salvar).

Gravação e reversão de documentos

Você pode salvar um documento usando seu nome e local atual, ou salvar uma cópia de um documento usando outro nome e local.

Observação:

Ao nomear arquivos, evite usar espaços e caracteres especiais nos nomes de arquivo e pasta. Em particular, não use caracteres especiais (é, ç ou ¥) ou pontuação (como dois-pontos, barras ou pontos) nos nomes de arquivos que você pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que fará com que quaisquer links para o arquivo sejam quebrados. Além disso, não comece um nome de arquivo com números.

Salvar um documento

  1. Siga um destes procedimentos:
    • Para substituir a versão atual no disco e salvar todas as alterações feitas, selecione Arquivo > Salvar.
    • Para salvar o arquivo em uma pasta diferente ou com outro nome, selecione Arquivo > Salvar como.
  2. Na caixa de diálogo Salvar como exibida, vá até a pasta em que deseja salvar o arquivo.

  3. Na caixa de texto Nome do arquivo, digite um nome para o arquivo.

  4. Clique em Salvar para salvar o arquivo.

Salvar todos os documentos abertos

  1. Selecione Arquivo > Salvar tudo.

  2. Se houver documentos não salvos abertos, a caixa de diálogo Salvar como é exibida para cada documento não salvo.

    Na caixa de diálogo exibida, vá até a pasta em que deseja salvar o arquivo.

  3. Na caixa Nome do arquivo, digite um nome para o arquivo e clique em Salvar.

Reversão para a última versão salva de um documento

  1. Selecione Arquivo > Reverter.

    Uma caixa de diálogo pergunta se você deseja descartar as alterações e reverter para a versão salva anteriormente.

  2. Clique em Sim para reverter para a versão anterior. Clique em Não para manter as alterações.

    Observação:

    Se você salvar um documento e, em seguida, sair do Dreamweaver, não será possível reverter para a versão anterior do documento quando reiniciar o Dreamweaver.

Definir tipo e preferências de codificação de documento padrão

Caso a maioria das páginas do seu site seja de um tipo de arquivo específico (como HTML, PHP ou JavaScript), você poderá definir as preferências de documento que criam automaticamente novos documentos do tipo de arquivo especificado.

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

    Observação:

    Você também pode clicar no botão Preferências da caixa de diálogo Novo documento para definir as preferências de novo documento quando você cria um novo documento.

  2. Clique em Novo documento na lista de categorias à esquerda.

  3. Defina ou altere as preferências conforme necessário e clique em OK para salvá-las.

    Documento padrão

    Selecione um tipo de documento a ser usado nas páginas que você criar.

    Extensão padrão

    Especifique a extensão de arquivo que você prefere (.htm ou .html) para novas páginas em HTML criadas.

    Observação: essa opção está desativada para outros tipos de arquivo.

    Tipo padrão de documento (DDT)

    Selecione uma das definições do tipo padrão de documento (DTD) em XHTML para tornar novas páginas compatíveis com XHTML. Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu.

    Codificação padrão

    Especifique a codificação a ser usada quando uma nova página é criada, bem como quando um documento é aberto sem especificar nenhuma codificação.

    Se você selecionar Unicode (UTF‑8) como a codificação de documento, a codificação da entidade não será necessária, pois o UTF‑8 poderá representar com segurança todos os caracteres. Se você selecionar outra codificação de documento, a codificação de entidade provavelmente será necessária para representar determinados caracteres. Para obter mais informações sobre entidades de caractere, consulte www.w3.org/TR/REC-html40/sgml/entities.html.

    Se você selecionar Unicode (UTF‑8) como a codificação padrão, será possível incluir uma marca BOM (marca de ordem de byte) no documento selecionando a opção Incluir assinatura Unicode (BOM).

    Uma BOM consiste em 2 a 4 bytes no início de um arquivo de texto que identifica um arquivo como Unicode, bem como a ordem dos bytes a seguir. Como a codificação UTF-8 não tem ordem de bytes, a adição de um BOM UTF-8 é opcional. Na UTF‑16 e UTF‑32, ela é obrigatória.

    Formulário de normalização unicode

    Selecione uma destas opções caso você escolha Unicode (UTF-8) como codificação padrão.

    Há quatro formulários de normalização unicode. O mais importante deles é o formulário de normalização C, pois é o formulário mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros três para ser mais completa.

    Mostrar caixa de diálogo Novo documento ao pressionar Control+N

    Desmarque essa opção (“on Command+N” para Macintosh) a fim de criar automaticamente um documento do tipo padrão quando você usa o comando principal.

    No Unicode, há caracteres que são visualmente semelhantes, mas que podem ser armazenados no documento de diferentes maneiras. Por exemplo, “ë” (e‑umlaut) pode ser representado como um caractere único, “e com trema” ou como dois caracteres, “e latino regular” + “trema”. O caractere de combinação Unicode é aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do “e latino”. Os dois formulários têm como resultado a mesma tipografia visual, mas o que é salvo no arquivo é diferente em cada formulário.

    A normalização é o processo que garante que todos os caracteres que podem ser salvos de formas diferentes serão salvos da mesma forma. Ou seja, todos os caracteres “ë” de um documento serão salvos como um único “e com trema” ou como “e” + “trema” e não de duas formas em um documento.

    Para obter mais informações sobre normalização Unicode e os formulários específicos que podem ser usados, consulte o site do Unicode em www.unicode.org/reports/tr15.

Abertura e edição de documentos existentes

Você pode abrir uma página da Web ou um documento baseado em texto que tenha sido criado ou não no Dreamweaver e editá-lo na Visualização de design ou código.

Se o documento aberto for um arquivo do Microsoft Word salvo como um documento em HTML, selecione Ferramentas > Limpar HTML do Word para remover as tags de markup divergentes que o Word insere nos arquivos HTML.

Para limpar HTML ou XHTML que não foi gerado pelo Microsoft Word, selecione Ferramentas > Limpar HTML. Para obter mais informações, consulte Limpeza de arquivos em HTML do Microsoft Word.

Você também pode abrir arquivos de texto que não são em HTML como, por exemplo, arquivos do JavaScript, arquivos em XML, folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de texto.

  1. Selecione Arquivo > Abrir.

    Observação:

    Você também pode usar o painel Arquivos para abrir arquivos.

  2. Navegue até e selecione o arquivo que você deseja abrir.
    Observação:

    Se ainda não tiver feito isso, recomendamos organizar os arquivos que você planeja abrir e editar em um site do Dreamweaver, em vez de abri-los a partir de outro local. Para obter mais informações sobre sites do Dreamweaver, consulte Sobre sites do Dreamweaver.

  3. Clique em Abrir.

    O documento é aberto na janela Documento. JavaScript, texto e folhas de estilo CSS são abertos na Visualização de código por padrão. É possível atualizar o documento enquanto você trabalha no Dreamweaver e salvar as alterações no arquivo.

O Dreamweaver permite exibir arquivos relacionados ao documento principal, sem perder o foco do documento principal. Por exemplo, se você tem arquivos CSS e JavaScript anexados a um documento principal, o Dreamweaver permite exibir e editar esses arquivos relacionados na janela Documento, ao mesmo tempo que mantém o documento principal visível.

Para obter informações sobre os arquivos relacionados dinamicamente, consulte Abrir arquivos relacionados dinamicamente.

Observação:

Ao trabalhar com arquivos HTML, use a Edição rápida se você deseja fazer alterações rápidas nos arquivos CSS, JavaScript ou PHP relacionados sem precisar navegar até esse arquivo. Para obter mais informações, consulte Edição rápida.

Por padrão, o Dreamweaver mostra os nomes de todos arquivos relacionados a um documento principal na barra de ferramentas Arquivos relacionados abaixo do título de documento principal. A ordem dos botões na barra de ferramentas segue a ordem dos links de arquivos relacionados existentes no documento principal.

Observação:

Se estiver faltando um arquivo relacionado, o Dreamweaver ainda exibirá o botão correspondente na barra de ferramentas Arquivos relacionados. Se você clicar no botão, no entanto, o Dreamweaver não exibe nada.

O Dreamweaver oferece suporte aos seguintes tipos de arquivos relacionados:

  • Arquivos de script do cliente
  • Inclusões do servidor
  • Folhas de estilos CSS externas (incluindo folhas de estilos aninhadas)

Siga um destes procedimentos:

  • Na barra de ferramentas Arquivos relacionados, na parte superior do documento, clique no nome do arquivo relacionado que deseja abrir.

  • Na barra de ferramentas Arquivos relacionados, clique com o botão direito do mouse no nome do arquivo relacionado que deseja abrir e selecione Abrir como arquivo separado, no menu de contexto. Ao abrir um arquivo relacionado por este método, o documento principal não permanecerá visível simultaneamente.

  1. Coloque o ponto de inserção em uma linha ou uma área que você sabe ser afetada por um arquivo relacionado.

  2. Espere até que o indicador do Navegador de código seja exibido e, em seguida, clique nele para abrir o Navegador de código.

  3. Passe o mouse sobre os itens no Navegador de código para ver mais informações sobre eles. Por exemplo, se você deseja alterar uma propriedade de cor CSS específica mas não sabe em que regra ela está, é possível localizar a propriedade focalizando as regras disponíveis no Navegador de código.

  4. Clique no item desejado para abrir o arquivo relacionado correspondente.

Retornar ao código-fonte do documento principal

  1. Clique no botão Código-fonte na barra de ferramentas Arquivos relacionados.

Ao abrir um arquivo relacionado na Visualização de design ou nas Visualizações de código e de design (visualização dividida), o arquivo relacionado é exibido na visualização dividida.

Você pode selecionar Exibir > Dividir e escolher as diferentes opções da Visualização dividida se preferir personalizá-la.

Se você deseja ver os arquivos relacionados somente na Visualização de código, selecione Código na parte superior da barra de ferramentas.

Observação:

Com a Visualização de código padrão, não é possível exibir Documentos relacionados ao mesmo tempo que o código-fonte do documento principal.

Observação:

A Visualização de código na opção de exibição se refere ao código-fonte do documento principal. Por exemplo, se você selecionar Exibir > Visualização de código na parte superior, o Dreamweaver mostrará o código-fonte do documento principal na metade da parte superior da janela Documento. Se você selecionar Exibir > Visualização de código à esquerda, o Dreamweaver mostrará o código-fonte do documento principal à esquerda da janela Documento.

Por padrão, quando você abre um arquivo HTML, o Dreamweaver exibe os arquivos relacionados em guias separadas. Se você deseja desativar essa funcionalidade, use o painel Preferências.

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

  2. Na categoria Geral, desmarque Ativar arquivos relacionados.

O recurso de Arquivos relacionados dinamicamente estende a funcionalidade do recurso de Arquivos relacionados permitindo que você veja os arquivos relacionados das páginas dinâmicas na barra de ferramentas Arquivos relacionados. Especificamente, o recurso Arquivos relacionados dinamicamente permite a visualização das numerosas inclusões dinâmicas necessárias para gerar o código de tempo de execução para as conhecidas estruturas de fonte aberta do Sistema de gerenciamento de conteúdo PHP, tais como WordPress, Drupal e Joomla!

Para usar o recurso Arquivos relacionados dinamicamente, é necessário que você tenha acesso a um servidor de aplicativo PHP remoto ou local que execute WordPress, Drupal ou Joomla! Uma abordagem comum para páginas de teste é definir um servidor de aplicativo PHP de host local e testar as páginas localmente.

Antes de testar as páginas, é necessário que você execute as seguintes etapas:

  • Defina um site Dreamweaver e certifique-se de ter preenchido a caixa de texto URL da Web na caixa de diálogo Configuração de site.

  • Configure um servidor de aplicativo PHP.

    Observação: o servidor deve estar sendo executado antes de você tentar trabalhar com os Arquivos relacionados dinamicamente no Dreamweaver.

  • Instale WordPress, Drupal ou Joomla! no servidor de aplicativo. Para obter mais informações, consulte:

  • No Dreamweaver, defina uma pasta local em que você irá fazer o download e editar os arquivos CMS.

  • Defina o local de instalação dos arquivos WordPress, Drupal ou Joomla como sua pasta de teste remota.

  • Faça o download dos arquivos CMS da pasta remota.

Quando você abrir uma página associada aos Arquivos relacionados dinamicamente, o Dreamweaver pode identificar os arquivos automaticamente ou permitir a identificação dos arquivos manualmente (o que é possível clicando em um link na barra Informações acima da página). A configuração padrão é identificação manual.

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

  2. Na categoria Geral, verifique se a opção Ativar arquivos relacionados está selecionado.

  3. Selecione Manualmente ou Automaticamente no menu pop-up Arquivos rel. dinamicamente. Também é possível desativar a identificação inteiramente selecionando Desativado.

  1. Abra uma página que tenha Arquivos relacionados dinamicamente associados a ela, por exemplo, página raiz do site index.php de um site WordPress, Drupal ou Joomla!.

  2. Se a identificação de Arquivos relacionados dinamicamente estiver definida como manual (padrão), clique no link Identificar na barra de Informações que aparece acima da página na janela Documento.

    Se a identificação de Arquivos relacionados dinamicamente estiver ativada automaticamente, uma lista de Arquivos relacionados dinamicamente será exibida na barra de ferramentas Arquivos relacionados.

A ordem dos Arquivos relacionados e Arquivos relacionados dinamicamente na barra de ferramentas Arquivos relacionados é a seguinte:

  • Arquivos relacionados estáticos (arquivos relacionados que não exigem qualquer tipo de processamento dinâmico)
  • Arquivos relacionados externos (arquivos .css e .js) que estão anexados aos arquivos de inclusão no servidor de caminho dinâmico
  • Arquivos de inclusão no servidor de caminho dinâmico (arquivos .php, .inc e .module)

Como Arquivos relacionados e Arquivos relacionados dinamicamente podem ser com frequência numerosos, o Dreamweaver permite o filtro de Arquivos relacionados para que seja possível localizar os arquivos com os quais você deseja trabalhar.

  1. Abra uma página que tenha Arquivos relacionados a ela.

  2. Identifique os Arquivos relacionados dinamicamente caso seja necessário.

  3. Clique no ícone de Filtrar arquivos relacionados no lado direito da barra de ferramentas Arquivos relacionados.

  4. Selecione os tipos de arquivos que você deseja visualizar na barra de ferramentas Arquivos relacionados. Por padrão, o Dreamweaver seleciona todos os Arquivos relacionados.

  5. Para criar um filtro personalizado, clique no ícone de Filtrar arquivos relacionados e selecione Filtro personalizado.

    A caixa de diálogo Filtro personalizado permite somente filtrar os nomes exatos de arquivos (estilo.css), extensões de arquivos (.php) e expressões curingas usando asteriscos (*menu*). É possível filtrar expressões curingas múltiplas pela separação de cada expressão com um ponto-e-vírgula (por exemplo, estilo.css; *.js; *tpl.php).

Observação:

As configurações de filtro não se mantêm após o fechamento do arquivo.

Limpeza de arquivos em HTML do Microsoft Word

É possível abrir documentos salvos pelo Microsoft Word (Microsoft Word 97 ou mais recente) como arquivos HTML e usar o comando Ferramentas > Limpar HTML do Word para remover o código HTML divergente gerado pelo Word.

O código que o Dreamweaver remove é usado principalmente pelo Word para formatar e exibir documentos no Word e não é realmente necessário para exibir o arquivo em HTML.

Mantenha uma cópia do arquivo do Word (.doc) original como backup, pois talvez não seja possível reabrir o documento HTML no Word após limpar o arquivo HTML.

Observação:

Para limpar o HTML ou XHTML que não foi gerado pelo Microsoft Word, use o comando Ferramentas > Limpar HTML.

  1. Salve o documento do Microsoft Word como um arquivo em HTML.
    Observação:

    No Windows, feche o arquivo do Word para evitar uma violação no compartilhamento.

  2. Abra o arquivo em HTML no Dreamweaver.

    Para exibir o código em HTML gerado pelo Word, alterne para a Visualização de código (Exibir > Código).

  3. Selecione Ferramentas > Limpar HTML do Word.

    Observação:

    se não for possível que o Dreamweaver determine a versão do Word usado para salvar o arquivo, selecione a versão correta no menu pop-up.

  4. Marque (ou desmarque) as opções de limpeza. As preferências que você digita são salvas como configurações de limpeza padrão.

    O Dreamweaver aplica as configurações de limpeza ao documento em HTML e um registro de alterações é exibido (a menos que você desmarque essa opção na caixa de diálogo).

    Opções de limpeza de HTML do Microsoft Word
    Opções de limpeza de HTML do Microsoft Word

    Remover todos os markups específicos do Word

    Remove todo o HTML específico do Microsoft Word, incluindo XML das tags HTML, metadados personalizados do Word e tags de link do cabeçalho do documento, markups XML do Word, tags condicionais e seu conteúdo, além de parágrafos vazios e margens de estilos. Você pode selecionar cada uma dessas opções individualmente usando a guia Detalhado.

    Limpar CSS

    Remove todas as CSS específicas do Word, inclusive estilos de CSS inline quando possível (onde o estilo pai tem as mesmas propriedades de estilo), atributos de estilo que começam com “mso”, declarações de estilo não cSS, atributos de estilo de CSS de tabelas e todas as definições de estilo não usadas do cabeçalho. Você pode personalizar ainda mais essa opção usando a guia Detalhado.

    Limpar tags <font>

    Remove tags HTML, convertendo o texto do corpo padrão em texto HTML tamanho 2.

    Corrigir tags aninhadas de forma inválida

    Remove as tags de markup de fonte inseridas pelo Word fora das tags de parágrafo e cabeçalho (nível do bloco).

    Aplicar formatação de origem

    Aplica as opções de formatação de origem que você especifica nas preferências de formato HTML e SourceFormat.txt ao documento.

    Mostrar registro na conclusão

    Exibe uma caixa de alerta com detalhes sobre as alterações feitas no documento assim que a limpeza é concluída.

  5. Clique em OK ou clique na guia Detalhado se você deseja personalizar ainda mais as opções Remover todo o markup específico do Word e Limpar CSS e, em seguida, clique em OK.

Veja também

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Ver todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos
Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora
Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Avisos legais | Política de privacidade online