No documento do Dreamweaver, coloque o ponto de inserção onde deseja que a imagem seja exibida e siga um destes procedimentos:
Última atualização em
25/04/2024
Use o Fireworks e o Dreamweaver de um fluxo de trabalho dinamizado para edição, otimização e inserção de arquivos de gráficos da Web em páginas HTML.
Nota
Esse recurso não é compatível com as versões do Adobe Dreamweaver.
Inserir uma imagem do Fireworks
O Dreamweaver e o Fireworks reconhecem e compartilham muitos dos mesmos procedimentos de edição de arquivos, incluindo alterações em links, mapas de imagem, fatias de tabela e muito mais. Juntos, esses dois aplicativos fornecem um fluxo de trabalho dinamizado para edição, otimização e colocação de arquivos gráficos em páginas HTML da Web.
Você pode colocar um gráfico exportado do Fireworks diretamente em um documento do Dreamweaver usando o comando Inserir imagem ou criar um novo gráfico do Fireworks com base em um alocador de espaço de imagem do Dreamweaver.
Selecione Inserir > Imagem.
Na categoria Comum do painel Inserir, clique no botão Imagem ou arraste-o até o documento.
Navegue até o arquivo exportado desejado do Fireworks e clique em OK (Windows) ou em Abrir (Macintosh).
Nota
Se o arquivo do Fireworks não estiver no site atual do Dreamweaver, uma mensagem será exibida perguntando se você deseja copiar o arquivo na pasta raiz. Clique em Sim.
Editar uma imagem ou tabela do Fireworks no Dreamweaver
Ao abrir e editar uma imagem ou uma fatia da imagem que faz parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks, que abre o arquivo PNG do qual a imagem ou a tabela foi exportada.
Nota
Esse processo presume que o Fireworks tenha sido definido como o principal editor de imagens externas para arquivos PNG. Normalmente, o Fireworks também é definido como o editor padrão de arquivos JPEG e GIF, embora o Photoshop possa ser definido como o editor padrão desses tipos de arquivo.
Quando a imagem faz parte de uma tabela do Fireworks, é possível abrir toda a tabela do Fireworks para edição, desde que o comentário <!--fw table--> exista no código HTML.Se o arquivo PNG de origem tiver sido exportado a partir do Fireworks para um site do Dreamweaver com a configuração Estilo HTML e imagens do Dreamweaver, o comentário da tabela do Fireworks será automaticamente inserido no código HTML.
No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades), se ainda não estiver aberto.
Clique na imagem ou na fatia da imagem para selecioná-la.
Ao selecionar uma imagem que foi exportada do Fireworks, o Inspetor de propriedades identifica a seleção como uma imagem ou tabela do Fireworks e exibe o nome do arquivo PNG de origem.
Para iniciar o Fireworks para edição, siga um destes procedimentos:
No Inspetor de propriedades, clique em Editar.
Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes na imagem selecionada.
Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na imagem selecionada e escolha Editar com Fireworks no menu de contexto.
Nota
se o Fireworks não conseguir localizar o arquivo de origem, você deverá localizar o arquivo PNG de origem. Ao trabalhar com o arquivo de origem do Fireworks, as alterações são salvas tanto no arquivo de origem quanto no arquivo exportado; caso contrário, somente o arquivo exportado será atualizado.
No Fireworks, edite o arquivo PNG de origem e clique em Concluído.
O Fireworks salva as alterações no arquivo PNG, exporta a imagem atualizada (ou o HTML e as imagens) e volta ao Dreamweaver. No Dreamweaver, a imagem ou tabela atualizada é exibida.
Para assistir a um tutorial sobre a integração do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188_br.
Otimizar uma imagem do Fireworks a partir do Dreamweaver
Você pode usar o Dreamweaver para fazer rápidas alterações nas imagens e animações do Fireworks. No Dreamweaver, você pode alterar configurações de otimização, configurações de animação e o tamanho e a área da imagem exportada.
No Dreamweaver, selecione a imagem desejada e siga um destes procedimentos:
Selecione Comando > Otimizar imagem
Clique no botão Editar configurações de imagem no Inspetor de propriedades.
Faça suas edições na caixa de diálogo Visualização da imagem:
Para editar as configurações de otimização, clique na guia Opções.
Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo.
Ao terminar, clique em OK.
Usar o Fireworks para modificar os alocadores de espaço de imagem do Dreamweaver
Você pode criar uma imagem de alocador de espaço em um documento do Dreamweaver e, em seguida, iniciar o Fireworks para projetar uma imagem gráfica ou uma tabela do Fireworks para substituí-la.
Para criar uma nova imagem com base em um alocador de espaço, é necessário instalar o Dreamweaver e o Fireworks em seu sistema.
Verifique se o Fireworks já está definido como o editor de imagens para arquivos PNG.
Na janela Documento, clique no alocador de espaço de imagem para selecioná-lo.
Inicie o Fireworks no modo Edição do Dreamweaver seguindo um destes procedimentos:
No Inspetor de propriedades, clique em Criar.
Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no alocador de espaço de imagem.
Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no alocador de espaço de imagem e, em seguida, selecione Criar imagem no Fireworks.
Use as opções do Fireworks para criar a imagem.
O Fireworks reconhece as seguintes configurações de alocador de espaço de imagem, que podem ser definidas enquanto você trabalha com o alocador no Dreamweaver: tamanho da imagem (relacionado ao tamanho de tela de desenho do Fireworks), ID da imagem (usada pelo Fireworks como o nome de documento padrão para o arquivo de origem e o arquivo de exportação criados) e o alinhamento do texto. O Fireworks também reconhece links e determinados comportamentos (como imagem trocada, menu pop-up e texto definido) que você anexou ao alocador de espaço de imagem ao trabalhar no Dreamweaver.
Nota
Embora o Fireworks não mostre os links adicionados a um alocador de espaço de imagem, eles são preservados. Se você desenhar um ponto ativo e adicionar um link no Fireworks, o link adicionado ao alocador de imagem no Dreamweaver não será excluído; no entanto, se uma fatia da nova imagem for cortada no Fireworks, o link no documento do Dreamweaver será excluído quando o alocador de espaço de imagem for substituído.
O Fireworks não reconhece as seguintes configurações de alocador de espaço de imagem: alinhamento da imagem, cor, Vspace e Hspace e mapas. Essas configurações estão desativadas no Inspetor de propriedades do alocador de espaço de imagem.
Quando terminar, clique em Concluído para exibir a solicitação para salvar.
Na caixa de texto Salvar em, selecione a pasta definida como a pasta do site local do Dreamweaver.
Se o alocador de espaço de imagem tiver sido nomeado quando foi inserido no documento do Dreamweaver, o Fireworks preencherá a caixa Nome do arquivo com esse nome. Você pode alterar o nome.
Clique em Salvar para salvar o arquivo PNG.
A caixa de diálogo Exportar é exibida. Use essa caixa de diálogo para exportar a imagem como um arquivo GIF ou JPEG ou, no caso de imagens segmentadas, como HTML e imagens.
Em Salvar em, selecione a pasta do site local do Dreamweaver.
A caixa Nome é exibida automaticamente com o nome usado para o arquivo PNG. Você pode alterar o nome.
Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e imagens.
Clique em Salvar para salvar o arquivo exportado.
O arquivo é salvo e o foco volta para o Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou a tabela do Fireworks substitui o alocador de espaço de imagem.
Sobre os menus pop-up do Fireworks
O Fireworks permite criar de modo rápido e fácil menus pop-up baseados em CSS.
Além de serem extensíveis e rápidos de baixar, os menus pop-up criados com o Fireworks oferecem as seguintes vantagens:
Os itens de menu podem ser indexados por mecanismos de pesquisa.
Os itens de menu podem ser lidos por leitores de tela, deixando as páginas mais acessíveis.
O código gerado pelo Fireworks está em conformidade com os padrões e pode ser validado.
Você pode editar os menus pop-up do Fireworks com o Dreamweaver ou o Fireworks, mas não com ambos. As alterações feitas no Dreamweaver não são preservadas no Fireworks.
Editar os menus pop-up do Fireworks no Dreamweaver
Você pode criar um menu pop‑up no Fireworks 8 ou posterior e, em seguida, editá-lo com o Dreamweaver ou o Fireworks (usando a edição completa), mas não com ambos. Se você editar os menus no Dreamweaver e, em seguida, editá-los no Fireworks, todas as edições anteriores serão perdidas, exceto as do conteúdo do texto.
Se preferir editar os menus com o Dreamweaver, use o Fireworks para criar o menu pop-up e use o Dreamweaver exclusivamente para editar e personalizar o menu.
Se preferir editar os menus no Fireworks, use o recurso de edição completa no Dreamweaver, mas não edite os menus diretamente no Dreamweaver.
No Dreamweaver, selecione a tabela do Fireworks que contém o menu pop-up e, em seguida, clique em Editar no Inspetor de propriedades.
O arquivo PNG de origem é aberto no Fireworks.
No Fireworks, edite o menu com o Editor de menu pop-up e clique em Concluído na barra de ferramentas do Fireworks.
O Fireworks envia o menu pop-up editado novamente para o Dreamweaver.
Se você tiver criado um menu pop-up no Fireworks MX 2004 ou anterior, poderá editá-lo no Dreamweaver usando a caixa de diálogo Mostrar menu pop-up, disponível no painel Comportamentos.
Editar um menu pop-up criado no Fireworks MX 2004 ou anterior
No Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-up.
No painel Comportamentos (Shift + F3), clique duas vezes em Mostrar menu pop-up na lista Ações.
Faça as alterações na caixa de diálogo Menu pop-up e clique em OK.
Especificar as preferências de início e edição dos arquivos de origem do Fireworks
Ao usar o Fireworks para editar imagens, as imagens de suas páginas da Web normalmente são exportadas pelo Fireworks a partir de um arquivo PNG de origem. Ao abrir um arquivo de imagem no Dreamweaver para editá-lo, o Fireworks abre automaticamente o arquivo PNG de origem, solicitando sua localização, caso não o encontre. Se preferir, você pode definir preferências no Fireworks para que o Dreamweaver abra a imagem inserida, que o Fireworks permita o uso do arquivo de imagem inserido ou o arquivo de origem do Fireworks sempre que uma imagem for aberta no Dreamweaver.
Nota
O Dreamweaver reconhece as preferências de início e edição do Fireworks somente em alguns casos. Especificamente, você deve abrir e otimizar uma imagem que não faça parte de uma tabela do Fireworks e contenha um caminho correto de Design Notes até um arquivo PNG de origem.
No Fireworks, selecione Editar > Preferências (Windows) ou Fireworks > Preferências (Macintosh) e clique na guia Iniciar e editar (Windows) ou selecione Iniciar e editar no menu pop-up (Macintosh).
Especifique as opções de preferência a serem usadas ao editar ou otimizar as imagens do Fireworks colocadas em um aplicativo externo:
Sempre usar o PNG de origem
Abre automaticamente o arquivo PNG do Fireworks definido na Design Note como a origem da imagem colocada. As atualizações são feitas no arquivo PNG de origem e na imagem colocada correspondente.
Nunca usar o PNG de origem
Abre automaticamente a imagem inserida do Fireworks, independentemente da existência de um arquivo PNG de origem. As atualizações são feitas somente na imagem colocada.
Perguntar ao iniciar
Uma mensagem é exibida perguntando se o arquivo PNG de origem deve ser aberto. Você também pode especificar preferências globais de início e edição nessa mensagem.
Inserir código HTML do Fireworks em um documento do Dreamweaver
No Fireworks, você pode usar o comando Exportar para exportar e salvar arquivos otimizados de imagem e HTML em um local dentro de uma pasta do site do Dreamweaver. Depois, você pode inserir o arquivo no Dreamweaver. O Dreamweaver permite inserir o código HTML gerado pelo Fireworks, completo com as imagens associadas, as fatias e o JavaScript, em um documento.
No documento do Dreamweaver, coloque o ponto de inserção onde você deseja inserir o código HTML do Fireworks.
Siga um destes procedimentos:
Selecione Inserir > Objetos de imagem > HTML do Fireworks.
Na categoria Comum do painel Inserir, clique no botão Imagens e escolha Inserir HTML do Fireworks no menu pop-up.
Clique em Procurar para selecionar um arquivo HTML do Fireworks.
Se não for necessário usar mais o arquivo, selecione Excluir arquivo após inserção. A seleção dessa opção não afeta o arquivo PNG de origem associado ao arquivo HTML.
Nota
Se o arquivo HTML estiver em uma unidade de rede, ele será excluído permanentemente, não será movido para a Lixeira.
Clique em OK para inserir o código HTML, juntamente com suas imagens associadas, fatias e JavaScript, no documento do Dreamweaver.
Colar o código HTML do Fireworks no Dreamweaver
Uma maneira rápida de colocar as imagens e as tabelas geradas pelo Fireworks no Dreamweaver é copiar e colar o código HTML do Fireworks diretamente em um documento do Dreamweaver.
Copiar e colar o código HTML do Fireworks no Dreamweaver
No Fireworks, selecione Editar > Copiar código HTML.
Siga o assistente que o orientará a escolher as configurações de exportação do HTML e das imagens. Quando solicitado, especifique a pasta do site do Dreamweaver como o destino das imagens exportadas.
O assistente exporta as imagens para o destino especificado e copia o código HTML na Área de transferência.
No documento do Dreamweaver, coloque o ponto de inserção onde você deseja colar o código HTML e selecione Editar > Colar HTML do Fireworks.
Todo o código HTML e JavaScript associado aos arquivos de Fireworks exportados é copiado no documento do Dreamweaver e todos os links de imagens são atualizados.
Exportar e colar o código HTML do Fireworks no Dreamweaver
No Fireworks, selecione Arquivo > Exportar.
Especifique a pasta do site do Dreamweaver como o destino das imagens exportadas.
No menu pop-up Exportar, selecione HTML e imagens.
No menu pop-up HTML, selecione Copiar para área de transferência e, em seguida, clique em Exportar.
No documento do Dreamweaver, coloque o ponto de inserção onde você deseja colar o código HTML exportado e selecione Editar > Colar HTML do Fireworks.
Todo o código HTML e JavaScript associado aos arquivos de Fireworks exportados é copiado no documento do Dreamweaver e todos os links de imagens são atualizados.
Atualizar o código HTML do Fireworks colocado no Dreamweaver
No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa à técnica de início e edição de atualização dos arquivos do Fireworks colocados no Dreamweaver. Com o recurso Atualizar HTML, é possível editar uma imagem PNG de origem no Fireworks e atualizar automaticamente o código HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite atualizar os arquivos do Dreamweaver mesmo quando o aplicativo não estiver em execução.
No Fireworks, abra o arquivo PNG de origem e faça suas edições.
Selecione Arquivo > Salvar.
No Fireworks, selecione Arquivo > Atualizar HTML.
Navegue até o arquivo do Dreamweaver que contém o HTML que você deseja atualizar e clique em Abrir.
Navegue até a pasta de destino onde deseja colocar os arquivos de imagem atualizados e clique em Selecionar (Windows) ou Escolher (Macintosh).
O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. O Fireworks também exporta as imagens atualizadas associadas ao HTML e coloca essas imagens na pasta de destino especificada.
Se o Fireworks não conseguir encontrar o código HTML correspondente a ser atualizado, você poderá inserir o novo código HTML no documento do Dreamweaver. O Fireworks coloca a seção JavaScript do novo código no começo do documento e coloca a tabela ou link HTML da imagem no final.
Criar um álbum de fotos na Web
O recurso Criar álbum de fotografias na Web está obsoleto no Dreamweaver CS5.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
