Guia do Usuário Cancelar

Uso de arquivos do Photoshop no Dreamweaver

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

 

 

Saiba como o Photoshop é integrado com o Dreamweaver. Trabalhe com Objetos inteligentes em fluxos de trabalho do Photoshop - Dreamweaver.

Sobre a integração do Photoshop

Observação:

Os fluxos de trabalho de integração do Photoshop foram descontinuados no Dreamweaver 21.0 e versões posteriores.

Você pode inserir arquivos de imagem do Photoshop (formato PSD) em páginas da Web no Dreamweaver e permitir que o Dreamweaver otimize-as como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ação, o Dreamweaver insere a imagem como um Objeto Inteligente e mantém uma conexão ativa com o arquivo PSD original.

Também é possível colar toda ou parte de uma imagem do Photoshop de várias camadas ou fatias em uma página da Web no Dreamweaver. Entretanto, quando você copia e cola do Photoshop, a conexão ativa com o arquivo original não é mantida. Para atualizar a imagem, faça as alterações no Photoshop e copie e cole novamente.

Observação:

Se esse recurso de integração for usado com frequência, você poderá armazenar seus arquivos do Photoshop no site do Dreamweaver para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposição dos ativos originais, assim como as transferências desnecessárias entre o site local e o servidor remoto.

Para acessar um tutorial sobre a integração do Photoshop com o Dreamweaver, consulte Integração do Dreamweaver com o Photoshop.

Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver

Há dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de trabalho dos Objetos Inteligentes.

Fluxo de trabalho copiar/colar

O fluxo de trabalho copiar/colar permite que você selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver para inseri-las como imagens prontas para a Web. Se quiser atualizar o conteúdo posteriormente, entretanto, você deverá abrir o arquivo Photoshop original, executar as alterações, copiar sua fatia ou camada para a área de Transferência novamente e, em seguida, colar a fatia ou a camada atualizada no Dreamweaver. Esse fluxo de trabalho só é recomendado quando você deseja inserir parte de um arquivo do Photoshop (por exemplo, uma seção de um componente de design) como uma imagem em uma página da Web.

Fluxo de trabalho dos Objetos Inteligentes

Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos Inteligentes. Um Objeto inteligente no Dreamweaver é uma imagem colocada em um página da Web que tenha uma conexão instantânea com um arquivo original do Photoshop (PSD). Na Visualização de design do Dreamweaver, um Objeto Inteligente é indicado por um ícone no canto superior esquerdo da imagem.

Objeto inteligente

Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto inteligente em vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop.

Ao usar o fluxo de trabalho de Objetos Inteligentes, você não precisa abrir o Photoshop para atualizar uma imagem da Web. Além disso, quaisquer atualizações feitas em um Objeto inteligente no Dreamweaver são não destrutivas. Ou seja, você pode alterar a versão da Web da imagem em sua página enquanto mantém a imagem original do Photoshop intacta.

Você também pode atualizar um Objeto Inteligente sem selecionar a imagem da Web na visualização de Design. O painel Recursos permite que você atualize todos os Objetos Inteligentes, incluindo as imagens que podem não ser selecionáveis na janela Documento (por exemplo, imagens de segundo plano CSS).

Configurações de otimização de imagens

Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos Inteligentes, você pode especificar configurações de otimização na caixa de diálogo Otimização da imagem. Esta caixa de diálogo permite especificar o formato de arquivo e a qualidade da imagem. Se você estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto Inteligente pela primeira vez, o Dreamweaver exibirá essa caixa de diálogo de modo que você possa criar facilmente a imagem da Web.

Se você copiar e colar uma atualização em uma determinada fatia ou camada, o Dreamweaver manterá as configurações originais e recriará a imagem da Web com essas configurações. Da mesma maneira, ao atualizar um Objeto inteligente usando o Inspetor de propriedades, o Dreamweaver usará as mesmas configurações usadas quando você inseriu a imagem pela primeira vez. Você pode alterar as configurações de imagem a qualquer momento selecionando a imagem da Web na Visualização de design e, em seguida, clicar no botão Editar configurações da imagem no Inspetor de propriedades.

Armazenamento de arquivos do Photoshop

Se você tiver inserido uma imagem da Web e não tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o Dreamweaver reconhecerá o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso é verdadeiro tanto para o fluxo de trabalho de copiar/colar quanto para o de Objetos inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:\Sites\meuSite e seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver não reconhecerá o ativo original como parte do site chamado meuSite. Isso causará problemas se você quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o Dreamweaver reconhecerá o arquivo somente como disponível em um determinado disco rígido local.

Se você armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definirá um caminho entre o site o arquivo. Qualquer usuário com acesso ao site será capaz de definir o caminho correto até o arquivo, desde que você tenha fornecido o arquivo original para download.

Para assistir a um tutorial em vídeo sobre a edição integrada com o Photoshop, consulte Edição integrada com o Photoshop.

Criação de um Objeto inteligente

Quando você insere uma imagem do Photoshop (arquivo PSD) em uma página, o Dreamweaver cria um Objeto inteligente. Um Objeto inteligente é uma imagem habilitada para a Web que mantém uma conexão ativa com a imagem original do Photoshop. Sempre que você atualiza a imagem original no Photoshop, o Dreamweaver oferece a opção de atualizar a imagem no Dreamweaver com o clique de um botão.

  1. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem.

  2. Selecione Inserir > Imagem.

    Observação:

    Você também pode arrastar o arquivo PSD para a página a partir do painel Arquivos, caso esteja armazenando os arquivos do Photoshop em seu site. Se essa for a sua opção, ignore a próxima etapa.

  3. Localize o arquivo de imagem PSD do Photoshop na caixa de diálogo Selecionar origem da imagem clicando no botão Procurar e navegando até o arquivo.

  4. Ajuste as configurações de otimização conforme necessário na caixa de diálogo Otimização da imagem e clique em OK.

  5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.

O Dreamweaver cria os Objetos inteligentes com base nas configurações de otimização selecionadas e coloca em sua página a versão ativada para a Web da imagem. O Objeto inteligente mantém uma conexão ativa com a imagem original e permite que você saiba quando ambas estão fora de sincronia.

Observação:

se você decidir alterar posteriormente as configurações de otimização para uma imagem colocada em suas páginas, pode selecionar a imagem, clicar no botão Editar Configurações de imagem, no Inspetor de propriedades da imagem, e fazer as alterações na caixa de diálogo Otimização de imagem. As alterações feitas na caixa de diálogo Otimização de imagem são aplicadas de forma não destrutiva. O Dreamweaver nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais.

Para assistir a um tutorial em vídeo sobre a edição integrada com o Photoshop, consulte Edição integrada com o Photoshop.

Atualização de um Objeto inteligente

Se você alterar o arquivo do Photoshop ao qual seu Objeto inteligente é vinculado, o Dreamweaver notifica que a imagem habilitada para a web está fora de sincronia com o original. No Dreamweaver, os Objetos inteligentes são indicados por um ícone no canto superior esquerdo da imagem. Quando a imagem habilitada para a Web no Dreamweaver está fora de sincronia com o arquivo original do Photoshop, ambas as setas do ícone ficam verdes. Quando a imagem habilitada para a Web está fora de sincroniza com o arquivo original do Photoshop, uma das setas do ícone fica vermelha.

  1. Para atualizar um objeto inteligente com o conteúdo atual do arquivo original do Photoshop, selecione Objeto Inteligente na janela Documento e clique no botão Atualizar do original, no Inspetor de propriedades.

Observação:

Você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver.

Atualizar vários Objetos inteligentes

Você pode atualizar vários Objetos inteligentes de uma só vez usando o painel Ativos. O painel Ativos possibilita visualizar os Objetos Inteligentes que talvez não possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS).

  1. No painel Arquivos, clique na aba Ativos para visualizar os ativos do site.

  2. Certifique-se de que a visualização Imagens foi selecionada. Caso contrário, clique no botão Imagens.

  3. Selecione cada ativo de imagem no painel Ativos. Quando você seleciona um Objeto inteligente, é possível ver um ícone de Objeto inteligente no canto superior esquerdo da imagem. Imagens normais não possuem esse ícone.
  4. Em cada Objeto inteligente que você quiser atualizar, clique com o botão direito do mouse sobre o nome do arquivo e selecione Atualizar do original. Você também pode clicar mantendo a tecla Control pressionada para selecionar vários nomes de arquivos e atualizar todos de uma vez.
Observação:

Você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver.

Redimensionamento de um Objeto inteligente

Você pode redimensionar um Objeto Inteligente na janela Documento como faria com qualquer outra imagem.

  1. Selecione o Objeto Inteligente na janela Documento e arraste as alças de redimensionamento para redimensionar a imagem. Você pode manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.

  2. Clique no botão Atualizar do original no Inspetor de propriedades.

    Quando você atualiza o Objeto Inteligente, a imagem da web reprocessa o novo tamanho de forma não destrutiva com base no conteúdo atual do arquivo original e das configurações originais de otimização.

Edição do arquivo original do Photoshop de um Objeto inteligente

Após criar o Objeto inteligente na sua página do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Após fazer as alterações no Photoshop, você pode atualizar facilmente a imagem da Web no Dreamweaver.

Observação:

Certifique-se de configurar o Photoshop como editor principal de imagens externas.

  1. Selecione o Objeto Inteligente na janela Documento.

  2. Clique no botão Editar no Inspetor de propriedades.

  3. Faça as alterações no Photoshop e salve o novo arquivo PSD.

  4. No Dreamweaver, selecione novamente o Objeto inteligente e clique no botão Atualizar do original.

Observação:

se você tiver alterado o tamanho da imagem no Photoshop, precisará redimensionar o tamanho da imagem da Web no Dreamweaver. O Dreamweaver atualiza um Objeto inteligente somente com base no conteúdo do arquivo original do Photoshop e não em seu tamanho. Para sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o botão direito do mouse na imagem e selecione Redefinir tamanho para original.

Estados de Objetos inteligentes

A tabela a seguir lista os vários estados de Objetos Inteligentes.

Estado de Objeto Inteligente

Descrição

Ação recomendada

Imagens sincronizadas

A imagem da Web está em sincronia com o conteúdo atual do arquivo original do Photoshop. Os atributos de largura e altura do código HTML combinam com as dimensões da imagem da Web.

Nenhum

Ativo original modificado

O arquivo original do Photoshop foi modificado após a criação da imagem da Web no Dreamweaver.

Use o botão Atualizar do original no Inspetor de propriedades para sincronizar as duas imagens.

As dimensões da imagem da Web são diferentes da largura e altura do HTML selecionado.

Os atributos de largura e altura do código HTML são diferentes das dimensões de largura e altura da imagem da Web que o Dreamweaver criou na inserção. Se as dimensões da imagem da Web forem menores que os valores selecionados de largura e altura no HTML, a imagem da Web pode aparecer como pixels.

Use o botão Atualizar do original no Inspetor de propriedades para recriar a imagem da Web a partir do arquivo original do Photoshop. O Dreamweaver usa dimensões de altura e largura de HTML atualmente especificadas ao recriar a imagem.

As dimensões do ativo original são muito pequenas para a largura e a altura do HTML selecionado.

Os atributos de largura e altura do código HTML são diferentes das dimensões de largura e altura do arquivo original do Photoshop. A imagem da Web pode aparecer como pixels.

Não crie imagens da Web com dimensões maiores que as dimensões do arquivo original do Photoshop.

Ativo original não encontrado

O Dreamweaver não pôde localizar o arquivo original do Photoshop especificado na caixa de texto Original do Inspetor de propriedades.

Corrija o caminho do arquivo na caixa de texto Original do Inspetor de propriedades ou mova o arquivo do Photoshop para o local atualmente especificado.

Cópia e colagem de uma seleção do Photoshop

Você pode copiar todas ou algumas imagens do Photoshop e colar a seleção na página do Dreamweaver como uma imagem habilitada para a Web. É possível copiar uma única camada ou um conjunto de camadas de uma área selecionada da imagem ou copiar uma fatia da imagem. Entretanto, quando se faz isso, o Dreamweaver não cria um Objeto inteligente.

Observação:

Embora a função Atualizar do original não esteja disponível para imagens coladas, você ainda pode abrir e editar o arquivo original do Photoshop selecionando a imagem colada e clicando no botão Editar do Inspetor de propriedades.

  1. No Photoshop, execute um dos procedimentos a seguir:
    • Copie toda ou parte de uma única camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar > Copiar. Somente a camada ativa da área selecionada é copiada na área de transferência. Se houver efeitos baseados em camadas, eles não serão copiados.
    • Copie e mescle várias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte mesclada. Isso nivela e copia todas as camadas ativas e inferiores da área selecionada na área de transferência. Se houver efeitos baseados em camadas associados, eles não serão copiados.
    • Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia todas as camadas ativas e inferiores da fatia na área de transferência.
    Observação:

    Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.

  2. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem.

  3. Selecione Editar > Colar.

  4. Na caixa de diálogo Visualização da imagem, ajuste as configurações de otimização como necessário e clique em OK.

  5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.

O Dreamweaver define a imagem de acordo com as configurações de otimização e coloca uma versão habilitada para a Web da imagem na sua página. As informações sobre a imagem, como o local do arquivo PSD original, são salvas em uma Design Note, independentemente de as Design Notes estarem ativadas para seu site. A Design Note permite que você volte para editar o arquivo de origem do Photoshop diretamente do Dreamweaver.

Editar imagens coladas

Após colar as imagens do Photoshop nas suas páginas do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Ao utilizar o fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edições no arquivo original PSD, e não na imagem habilitada para a Web, e a colar novamente para manter uma única origem.

Observação:

Verifique se o Photoshop está definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar.

  1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos procedimentos a seguir:
    • Clique no botão Editar no Inspetor de propriedades da imagem.
    • Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo.
    • Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar original com no menu de contexto e, em seguida, escolha Photoshop.
    Observação:

    Esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem PSD. Você também pode definir o Photoshop como o editor padrão para os tipos de arquivo JPEG, GIF e PNG.

  2. Editar o arquivo no Photoshop.
  3. Retorne ao Dreamweaver e cole a imagem ou seleção atualizada em sua página.

Para reotimizar a imagem a qualquer momento, selecione-a e clique no botão Editar configurações de imagem no Inspetor de propriedades.

Configuração das opções da caixa de diálogo Visualização da imagem

Ao criar um Objeto inteligente ou colar uma seleção do Photoshop, o Dreamweaver exibe a caixa de diálogo Visualização da imagem . (O Dreamweaver também exibe esta caixa de diálogo para qualquer outro tipo de imagem, se você selecionar a imagem e clicar no botão Editar configurações de imagem no Inspetor de propriedades.) Esta caixa de diálogo possibilita definir e visualizar as configurações para imagens habilitadas para a Web usando a combinação correta de cor, compactação e qualidade.

Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparência, independentemente do sistema ou do navegador usado pelo visualizador. Em geral, as configurações afetam a qualidade e o tamanho do arquivo.

Observação:

apenas a versão importada do arquivo de imagem é afetada, independentemente das configurações selecionadas. Os arquivos originais PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados.

Predefinição

Escolha a Predefinição mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinição escolhida. Uma visualização instantânea da imagem com a configuração aplicada é exibida em segundo plano.

Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes nítidos).  Selecione GIF para imagens de fundo (padrões) se você estiver inserindo o padrão que será a imagem do fundo da página.


Quando uma predefinição é selecionada, suas opções configuráveis são exibidas.  Para personalizar ainda mais suas configurações de otimização, modifique os valores dessas opções.

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais    |    Política de privacidade online