Utilização do Fireworks com o Dreamweaver

O Adobe Dreamweaver® e o Fireworks reconhecem e compartilham muitas das mesmas edições de arquivo, incluindo alterações em links, mapas de imagem e fatias de tabela. Além disso, o Dreamweaver e o Fireworks oferecem um fluxo de trabalho dinamizado para edição, otimização e inserção de arquivos de gráficos da Web em páginas HTML.

Inserir imagens do Fireworks em arquivos do Dreamweaver

Quando você insere arquivos JPEG do Fireworks no Dreamweaver, a qualidade do arquivo é automaticamente calculada. O valor pode ser 79 para alguns dos arquivos.

Observação:

Antes de usar qualquer um destes procedimentos, verifique se o Dreamweaver está selecionado como o tipo de HTML na caixa de diálogo Configurar HTML.

Inserir imagens do Fireworks no Dreamweaver usando o painel Arquivos

  1. Exporte sua imagem do Fireworks para a pasta de site local definida no Dreamweaver.

  2. Abra o documento do Dreamweaver e verifique se você está na exibição Design.

  3. Arraste a imagem do painel Arquivos até o documento do Dreamweaver.

Inserir imagens do Fireworks no Dreamweaver usando o menu Inserir

  1. Posicione o ponto de inserção no local em que você deseja exibir a imagem na janela do documento do Dreamweaver.

  2. Siga um destes procedimentos:

    • Selecione Inserir > Imagem.

    • Clique no botão Imagens: Imagem, na categoria Comum da barra Inserir.

  3. Navegue até a imagem exportada do Fireworks e clique em OK.

Criar novos arquivos do Fireworks a partir de espaços reservados do Dreamweaver

Espaços reservados de imagens permitem testar vários layouts de páginas da Web antes da criação da arte final para a sua página. Use espaços reservados de imagens para especificar o tamanho e a posição de imagens do Fireworks a serem inseridas no Dreamweaver no futuro.

Quando você cria uma imagem do Fireworks a partir de um espaço reservado de imagem do Dreamweaver, um novo documento do Fireworks é criado com uma tela de desenho contendo as mesmas dimensões do espaço reservado selecionado.

Observação:

Todos os comportamentos aplicados no Fireworks são preservados após a exportação de volta ao Dreamweaver. Da mesma forma, a maioria dos comportamentos do Dreamweaver aplicados a espaços reservados de imagens também é preservada durante a inicialização e a edição com o Fireworks. Entretanto, existe uma exceção: sobreposições de disjunção aplicadas a espaços reservados de imagens no Dreamweaver não são preservadas quando abertas e editadas no Fireworks.

Quando a sessão do Fireworks terminar e você retornar ao Dreamweaver, o novo gráfico do Fireworks criado assumirá o local do espaço reservado de imagem originalmente selecionado.

  1. No Dreamweaver, salve o documento HTML desejado em um local dentro da pasta do site do Dreamweaver.

  2. Posicione o ponto de inserção no local desejado do documento e siga um destes procedimentos:

    • Selecione Inserir > Objetos de imagem > Alocador de espaço de imagem.

    • Clique no menu pop-up Imagens: Imagem, na categoria Comum da barra Inserir, e escolha Alocador de espaço de imagem.

  3. Insira o nome, as dimensões, a cor e o texto alternativo para o espaço reservado de imagem.

    Um espaço reservado de imagem é inserido no documento do Dreamweaver.

    Espaço reservado para imagem
    Espaço reservado para imagem

  4. Siga um destes procedimentos:

    • Selecione o espaço reservado de imagem e clique em Criar no Inspetor de propriedades.

    • Clique duas vezes no espaço reservado de imagem com a tecla Control (Windows), ou com a tecla Command (Mac OS), pressionada.

    • Clique com o botão direito (Windows), ou com a tecla Control (Mac OS) pressionada, e escolha Criar imagem no Fireworks.

      O Fireworks é aberto com uma tela de desenho vazia que possui exatamente o mesmo tamanho do espaço reservado de imagem. A parte superior da janela do documento indica que você está editando uma imagem do Dreamweaver.

  5. Crie uma imagem no Fireworks e clique em Concluído.

  6. Especifique um nome e um local para o arquivo PNG de origem.

  7. Especifique um nome para os arquivos de imagem exportados.

    Esses são os arquivos de imagem que serão exibidos no Dreamweaver.

  8. Especifique um local na pasta do site do Dreamweaver para um ou mais dos arquivos de imagem exportados e clique em Salvar.

    Quando você retornar ao Dreamweaver, o espaço reservado de imagem originalmente selecionado será substituído pela nova imagem ou tabela do Fireworks.

    Espaço reservado para imagem substituído pela nova imagem do Fireworks
    Espaço reservado para imagem substituído pela nova imagem do Fireworks

Inserir código HTML do Fireworks no Dreamweaver

A exportação de arquivos do Fireworks para o Dreamweaver é um processo de duas etapas. Do Fireworks, exporte arquivos diretamente para uma pasta de site do Dreamweaver. Isso gera um arquivo HTML e os arquivos de imagem associados no local que você especificar. Em seguida, insira o código HTML no Dreamweaver, usando o recurso Inserir HTML do Fireworks.

  1. Exporte o documento HTML do Fireworks para o formato HTML.

  2. No Dreamweaver, salve o documento em um site definido.

  3. Posicione o ponto de inserção no documento em que você deseja que o código HTML inserido comece.

  4. Siga um destes procedimentos:

    • Selecione Inserir > Objetos de imagem > HTML do Fireworks.

    • Clique no menu pop-up Imagens: Imagem, na categoria Comum da barra Inserir, e escolha HTML do Fireworks.

  5. Na caixa de diálogo exibida, clique em Procurar para escolher o arquivo HTML do Fireworks desejado.

  6. (Opcional) Selecione Excluir arquivo após inserção, para mover o arquivo HTML até a Lixeira (Windows) ou para excluí-lo permanentemente (Mac OS) quando a operação estiver concluída.

    Essa opção não afeta o arquivo PNG de origem associado ao arquivo HTML.

  7. Clique em OK para inserir o código HTML, juntamente com suas imagens associadas, fatias e JavaScript, no documento do Dreamweaver.

Copiar código HTML do Fireworks para uso no Dreamweaver

Quando você copia um código HTML do Fireworks na área de transferência, todo o código HTML e JavaScript associado ao documento do Fireworks é copiado no documento do Dreamweaver, as imagens são exportadas para um local especificado e o Dreamweaver atualiza esse HTML com links relativos ao documento para essas imagens.

Observação:

Esse método funciona apenas com o Dreamweaver. Ele não funciona com outros editores de HTML.

  1. Copie o HTML para a área de transferência no Fireworks e, em seguida, cole-o em um documento do Dreamweaver.

Observação:

Você também pode abrir no Dreamweaver um arquivo HTML do Fireworks exportado e então copiar e colar as seções desejadas em outro documento do Dreamweaver.

Atualizar o HTML do Fireworks exportado para o Dreamweaver

Observação:

O HTML circular oferece muitos benefícios ao se trabalhar com um HTML exportado para o Dreamweaver. (Consulte Sobre o HTML circular.)

  1. Faça alterações no documento PNG no Fireworks.

  2. Selecione Arquivo > Atualizar HTML.

  3. Navegue até o arquivo do Dreamweaver que contém o HTML que você deseja atualizar e clique em Abrir.

  4. Navegue até a pasta na qual você deseja inserir os arquivos de imagem atualizados e clique em Abrir.

    O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. O Fireworks também exporta imagens atualizadas associadas ao HTML e insere essas imagens na pasta de destino especificada.

    Observação:

    Se o Fireworks não conseguir localizar um código HTML correspondente para atualizar, você terá a opção de inserir um novo código HTML no documento do Dreamweaver. O Fireworks insere a seção JavaScript do novo código no início do documento e insere o link ou a tabela HTML na imagem, no final.

Exportar arquivos do Fireworks para bibliotecas do Dreamweaver

Um item de biblioteca é uma parte de um arquivo HTML localizada em uma pasta denominada Biblioteca, na pasta raiz do seu site. Esse tipo de item aparece como uma categoria no painel Ativos do Dreamweaver. No Dreamweaver, itens de biblioteca simplificam a edição e a atualização de componentes de sites usados com frequência. Você pode arrastar um item de biblioteca (um arquivo com a extensão .lbi) a partir do painel Ativos até qualquer página no seu site.

Não é possível editar um item de biblioteca diretamente no documento do Dreamweaver. Apenas o item de biblioteca mestre pode ser editado. Dessa forma, o Dreamweaver pode atualizar todas as cópias desse item à medida que elas forem inseridas no seu site. Itens de biblioteca do Dreamweaver são semelhantes a símbolos do Fireworks; alterações no documento de biblioteca mestre (LBI) se refletem em todas as ocorrências da biblioteca no seu site.

Observação:

Os itens de biblioteca do Dreamweaver não oferecem suporte a menus pop-up.

  1. Selecione Arquivo > Exportar.

  2. Selecione Biblioteca do Dreamweaver no menu pop-up Exportar.

    Selecione ou crie uma pasta denominada Biblioteca no seu site do Dreamweaver como o local para os arquivos. O nome faz distinção entre maiúsculas e minúsculas.

    Observação:

    O Dreamweaver não reconhece o arquivo exportado como item de biblioteca, a não ser que ele seja salvo na pasta Biblioteca.

  3. Digite um nome de arquivo.

  4. (Opcional) Se a imagem contiver fatias, escolha opções de fatiamento.

  5. Selecione Colocar imagens em subpasta, para escolher uma pasta separada na qual salvar imagens.

  6. Clique em Salvar.

Editar arquivos do Fireworks no Dreamweaver

O recurso HTML circular integra firmemente o Fireworks e o Dreamweaver. Como ele, é possível efetuar alterações em um aplicativo e fazer com que elas sejam uniformemente refletidas no outro aplicativo.

Sobre o HTML circular

O Fireworks reconhece e preserva a maioria dos tipos de edições feita em um documento no Dreamweaver, incluindo links alterados, mapas de imagem editados, texto editado e HTML em fatias HTML, bem como comportamentos compartilhados entre o Fireworks e o Dreamweaver. O Inspetor de propriedades no Dreamweaver o ajuda a identificar imagens geradas pelo Fireworks, fatias de tabelas e tabelas em um documento.

O Fireworks oferece suporte para a maioria dos tipos de edições do Dreamweaver. Entretanto, alterações de grande porte na estrutura de uma tabela do Dreamweaver podem criar diferenças irreconciliáveis entre os dois aplicativos. Ao efetuar alterações consideráveis em um layout de tabela, use o recurso Iniciar e editar do Dreamweaver para editar a tabela no Fireworks.

Observação:

Usando a tecnologia do Fireworks, o Dreamweaver fornece recursos básicos de edição de imagens, para a modificação de imagens sem um aplicativo externo de edição de imagens. Esses recursos do Dreamweaver aplicam-se somente a formatos de arquivo de imagem JPEG e GIF.

Editar uma imagem do Fireworks inserida no Dreamweaver

Observação:

Antes de editar gráficos do Fireworks a partir do Dreamweaver, realize algumas tarefas preliminares. Para obter mais informações, consulte Definir opções de inicialização e edição.

  1. No Dreamweaver, escolha Janela > Propriedades, para abrir o Inspetor de propriedades.

  2. Siga um destes procedimentos:

    • Selecione a imagem desejada. (O Inspetor de propriedades identifica a seleção como uma imagem do Fireworks e exibe o nome do arquivo de origem PNG conhecido para a imagem.) Em seguida, clique em Editar no Inspetor de propriedades.

    • Clique duas vezes na imagem que você deseja editar com a tecla Control (Windows), ou com a tecla Command (Mac OS), pressionada.

    • Clique na imagem desejada com o botão direito (Windows), ou com a tecla Control (Mac OS) pressionada, e escolha Editar com o Fireworks no menu de contexto.

  3. Se solicitado, especifique se deseja localizar um arquivo de origem do Fireworks para a imagem inserida.

  4. No Fireworks, edite a imagem.

    As edições aplicadas são preservadas no Dreamweaver.

  5. Clique em Concluído para exportar a imagem usando as configurações de otimização atuais, atualize o arquivo GIF ou JPEG usado pelo Dreamweaver e salve o arquivo de origem PNG, se um arquivo de origem tiver sido selecionado.

    Observação:

    Quando você abrir uma imagem no painel do Site do Dreamweaver, o editor padrão desse tipo de imagem, que é definido nas Preferências do Dreamweaver, abrirá o arquivo. Quando as imagens são abertas a partir desse local, o Fireworks não abre o arquivo PNG original. Para usar os recursos de integração do Fireworks, abra as imagens a partir da janela do documento do Dreamweaver.

Editar uma tabela do Fireworks inserida no Dreamweaver

Observação:

Antes de editar tabelas do Fireworks a partir do Dreamweaver, realize algumas tarefas preliminares de inicialização e edição. Para obter mais informações, consulte Definir opções de inicialização e edição.

  1. No Dreamweaver, escolha Janela > Propriedades, para abrir o Inspetor de propriedades.

  2. Siga um destes procedimentos para abrir o arquivo PNG de origem na janela do documento:

    • Clique dentro da tabela e clique na marca TABLE , na barra de status, para selecionar a tabela inteira. (O Inspetor de propriedades identifica a seleção como uma tabela do Fireworks e exibe o nome do arquivo de origem PNG conhecido para a tabela.) Em seguida, clique em Editar no Inspetor de propriedades.

    • Selecione uma imagem na tabela e clique em Editar no Inspetor de propriedades.

    • Clique na imagem com o botão direito (Windows), ou com a tecla Control (Mac OS) pressionada, e escolha Editar com o Fireworks no menu de contexto.

  3. No Fireworks, faça as edições.

    O Dreamweaver reconhece e preserva todas as edições aplicadas à tabela no Fireworks.

  4. Quando terminar de editar a tabela, clique em Concluído na janela do documento.

    O arquivo HTML e os arquivos de fatias de imagem referentes à tabela são exportados com o uso das configurações atuais de otimização, a tabela inserida no Dreamweaver é atualizada e o arquivo de origem PNG é salvo.

    Observação:

    Você poderá receber um erro do Dreamweaver se aninhar outra tabela dentro da tabela original gerada pelo Fireworks e tentar editar essa tabela usando a edição Circular no Dreamweaver. Para obter mais informações, consulte a Nota técnica 19232 no site da Adobe.

Sobre comportamentos suportados e não suportados do Dreamweaver

Se um único gráfico não fatiado do Fireworks for inserido em um documento do Dreamweaver, e um comportamento do Dreamweaver for aplicado, esse gráfico terá uma fatia sobre ele quando for aberto e editado no Fireworks. Essa fatia não é inicialmente visível, já que fatias são automaticamente desativadas quando você abre e edita gráficos únicos e não fatiados aos quais são aplicados comportamentos do Dreamweaver. É possível exibir a fatia ativando sua visibilidade a partir da Camada da Web do painel Camadas.

Quando você exibe as propriedades de uma fatia no Fireworks que possui um comportamento do Dreamweaver anexado, a caixa de texto Link no Inspetor de propriedades pode indicar javascript:;. A exclusão desse texto não causa problemas. É possível digitar sobre ele para inserir um URL, se desejado, e o comportamento permanecerá intacto quando você retornar ao Dreamweaver.

Quando você trabalha com HTML circular a partir do Dreamweaver, o Fireworks oferece suporte para formatos de arquivo no lado do servidor, como CFM e PHP.

O Dreamweaver aceita todos os comportamentos aplicados ao Fireworks, incluindo os comportamentos necessários para sobreposições e botões.

Observação:

Os itens de biblioteca do Dreamweaver não oferecem suporte a menus pop-up.

O Fireworks aceita os seguintes comportamentos do Dreamweaver durante uma sessão de inicialização e edição:

  • Sobreposição simples

  • Trocar imagem

  • Restaurar imagem trocada

  • Definir texto da barra de status

  • Definir imagem da barra de navegação

  • Menus pop-up

Observação:

O Fireworks não oferece suporte para comportamentos não nativos, incluindo comportamentos no lado do servidor.

Otimizar imagens e animações do Fireworks inseridas no Dreamweaver

Alterar configurações de otimização para uma imagem do Fireworks inserida no Dreamweaver

  1. No Dreamweaver, selecione a imagem e siga um destes procedimentos:

    • Selecione Comandos > Otimizar imagem.

    • Clique no botão Otimizar no Inspetor de propriedades.

    • Clique com o botão direito (Windows), ou com a tecla Control (Mac OS) pressionada, e escolha Otimizar no Fireworks, no menu pop-up.

  2. Se solicitado, especifique se deseja abrir um arquivo de origem do Fireworks para a imagem inserida.

  3. Faça edições na caixa de diálogo Visualização da exportação:

    • Para editar configurações de otimização, clique na guia Opções.

    • Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo. Se você alterar as dimensões da imagem no Fireworks, deverá redefinir o tamanho dessa imagem no Inspetor de propriedades quando retornar ao Dreamweaver.

    • Para editar configurações de animação para a imagem, clique na guia Animação.

  4. Quando terminar de editar a imagem, clique em OK para exportá-la, atualizá-la no Dreamweaver e salvar o PNG.

    Se você tiver alterado o formato da imagem, o verificador de links do Dreamweaver solicitará a atualização das referências a essa imagem.

Alterar configurações de animação

Se estiver abrindo e otimizando um arquivo GIF animado, você também poderá editar as configurações de animação. As opções de animação na caixa de diálogo Visualização da exportação são semelhantes às disponíveis no painel Estados do Fireworks.

Observação:

Para editar elementos gráficos individuais em uma animação do Fireworks, é necessário abrir e editar a animação do Fireworks.

Definir opções de inicialização e edição

Para usar o recurso de HTML circular eficazmente, é necessário realizar algumas tarefas preliminares, como definir o Fireworks como principal editor de imagens no Dreamweaver, especificar preferências de inicialização e edição no Fireworks e definir um site local no Dreamweaver.

Definir o Fireworks como principal editor de imagens externas para o Dreamweaver

O Dreamweaver oferece preferências para a inicialização automática de aplicativos específicos para editar determinados tipos de arquivo. Para usar os recursos de inicialização e edição do Fireworks, verifique se o Fireworks está definido como principal editor de arquivos GIF, JPEG e PNG no Dreamweaver.

Observação:

Apenas será necessário definir essa preferência se você tiver problemas ao iniciar o Fireworks a partir do Dreamweaver.

  1. No Dreamweaver, escolha Editar > Preferências e selecione Tipos de arquivos/Editores.

  2. Na lista Extensões, selecione uma extensão de arquivo de imagem da Web (.gif, .jpg ou .png).

  3. Na lista Editores, selecione Fireworks. Se o Fireworks não estiver na lista, clique no botão de adição (+), localize o aplicativo Fireworks no disco rígido e clique em Abrir.

    Preferências do Dreamweaver
    Preferências do Dreamweaver

  4. Clique em Tornar primário.

  5. Repita as etapas de 2 a 4 para definir o Fireworks como principal editor para outros tipos de arquivos de imagem da Web.

Definir preferências de inicialização e edição para arquivos de origem do Fireworks

As preferências de inicialização e edição do Fireworks permitem especificar como manipular arquivos PNG de origem ao abrir arquivos do Fireworks a partir de outro aplicativo.

O Dreamweaver reconhece as preferências de inicialização e edição do Fireworks somente quando você abre e otimiza uma imagem que não faz parte de uma tabela do Fireworks e que não contém um caminho correto de Design Note para um arquivo PNG de origem. Em todos os outros casos, incluindo todos os casos de inicialização e edição de imagens do Fireworks, o Dreamweaver abre automaticamente o arquivo PNG de origem, solicitando a localização desse arquivo se não conseguir encontrá-lo.

  1. No Fireworks, escolha Editar > Preferências (Windows) ou Fireworks > Preferências (Mac OS).

  2. Clique na categoria Iniciar e editar e defina opções conforme desejar.

    Para obter mais informações, consulte Preferências de Iniciar e editar.

Sobre Design Notes e arquivos de origem

Sempre que um arquivo do Fireworks é exportado a partir de um arquivo PNG de origem salvo para um site do Dreamweaver, o Fireworks cria uma Design Note que contém informações sobre esse arquivo PNG. Quando você abre e edita uma imagem do Fireworks a partir do Dreamweaver, este utiliza a Design Note para localizar o PNG de origem para esse arquivo. Para obter os melhores resultados, sempre salve o seu arquivo PNG de origem, bem como os arquivos exportados, em um site do Dreamweaver. Isso garante que qualquer usuário que esteja compartilhando o site possa localizar o PNG de origem ao iniciar o Fireworks a partir do Dreamweaver.

Transferir arquivos do site com o botão Gerenciamento de arquivos

O botão de gerenciamento de arquivos , localizado no topo da janela do documento, fornece rápido acesso a comandos de transferência de arquivos. Use esse botão se o documento residir em uma pasta de site do Dreamweaver e o site tiver acesso a um servidor remoto. Para que o Fireworks reconheça a pasta como um site, use a caixa de diálogo Gerenciar sites no Dreamweaver para definir a pasta de destino (ou uma pasta contida) como a pasta raiz local de um site.

Observação:

Antes de usar as opções de check-in e check-out no Fireworks, selecione a opção Ativar devolução e retirada de arquivos para o site do Dreamweaver no qual o documento reside.

Obter

Copia a versão remota do arquivo no site local, substituindo o arquivo local pela cópia remota.

Retirar

Faz o check-out do arquivo, substituindo o arquivo local pela cópia remota.

Colocar

Copia a versão local do arquivo no site remoto, substituindo o arquivo remoto pela cópia local.

Devolver

Faz o check-in do arquivo local, substituindo o arquivo remoto pela cópia local.

Desfazer retirada

Desfaz o check-out do arquivo local e faz o seu check-in, substituindo o arquivo local pela cópia remota.

Observação:

Os comandos de Gerenciamento de arquivos apenas estarão ativados no Fireworks se o documento residir em uma pasta de site do Dreamweaver com um servidor remoto definido. Os comandos de Gerenciamento de arquivos do Fireworks apenas podem ser usados para arquivos que residem em sites que utilizam os métodos de transporte Local/rede e FTP. Os arquivos em sites que usam métodos de transporte SFTP ou de terceiros, como SourceSafe, WebDAV e RDS, não podem ser transportados entre o servidor remoto a partir do Fireworks.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online