Guia do Usuário Cancelar

Trabalho com o Fireworks e o Dreamweaver

 

 

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.

Observação:

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.

  1. No documento do Dreamweaver, coloque o ponto de inserção onde deseja que a imagem seja exibida e siga um destes procedimentos:
    • Selecione Inserir > Imagem.

    • Na categoria Comum do painel Inserir, clique no botão Imagem ou arraste-o até o documento.

  2. Navegue até o arquivo exportado desejado do Fireworks e clique em OK (Windows) ou em Abrir (Macintosh).
    Observação:

    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.

Observação:

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, você pode abrir a tabela inteira do Fireworks para edição contanto 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.

  1. No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades), se ainda não estiver aberto.
  2. 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.

  3. 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.

    Observação:

    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.  

  4. 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.

  1. 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.

  2. 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.

  3. 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.

  1. Verifique se o Fireworks já está definido como o editor de imagens para arquivos PNG.
  2. Na janela Documento, clique no alocador de espaço de imagem para selecioná-lo.
  3. 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.

  4. 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.

    Observação:

    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.

  5. Quando terminar, clique em Concluído para exibir a solicitação para salvar.
  6. 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.

  7. 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.

  8. 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.

  9. Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e imagens.
  10. 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.

  1. 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.

  2. 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

  1. No Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-up.
  2. No painel Comportamentos (Shift + F3), clique duas vezes em Mostrar menu pop-up na lista Ações.
  3. 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.

Observação:

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.

  1. 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).
  2. 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.

  1. No documento do Dreamweaver, coloque o ponto de inserção onde você deseja inserir o código HTML do Fireworks.
  2. 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.

  3. Clique em Procurar para selecionar um arquivo HTML do Fireworks.
  4. 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.
    Observação:

    Se o arquivo HTML estiver em uma unidade de rede, ele será excluído permanentemente, não será movido para a Lixeira.

  5. 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

  1. No Fireworks, selecione Editar > Copiar código HTML.
  2. 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.

  3. 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

  1. No Fireworks, selecione Arquivo > Exportar.
  2. Especifique a pasta do site do Dreamweaver como o destino das imagens exportadas.
  3. No menu pop-up Exportar, selecione HTML e imagens.
  4. No menu pop-up HTML, selecione Copiar para área de transferência e, em seguida, clique em Exportar.
  5. 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.

  1. No Fireworks, abra o arquivo PNG de origem e faça suas edições.
  2. Selecione Arquivo > Salvar.
  3. No Fireworks, selecione Arquivo > Atualizar HTML.
  4. Navegue até o arquivo do Dreamweaver que contém o HTML que você deseja atualizar e clique em Abrir.
  5. 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.

Receba ajuda com mais rapidez e facilidade

Novo usuário?