Quem nunca se deparou com aquela situação contundente, com um site praticamente pronto, desenvolvido em HTML, com as imagens todas recortadas em tabelas, muito bem divididas e nomeadas, e de repente, seu cliente faz aquela declaração: “Eu gostei do azul… mas não dava para ser um pouco mais clarinho? … e se fosse verde?!”, e dá-lhe você passando 2 dias alterando todos os blocos de imagens criados, caçando nome de imagens em tabelas, aquele trabalhão já conhecido por muitos.

Neste novo artigo da série Fireworking, exemplifico a utilização lógica da ferramenta de multidesenvolvimento Fireworks com o Dreamweaver ou Ultradev, com destaque à criação de imagens e inserção delas em tabelas diretamente dentro do Fireworks, posteriormente com a exportação do arquivo para HTML e pós-editado no Dreamweaver e implementado com behaviors e componentes Javascript não existentes no Fireworks.

Logo será feita a alteração de todo conteúdo bitmap do site, mantendo as tabelas e HTML já alterados intactos após a troca de todas as imagens de uma forma muito simples e rápida, mãos à obra!

Vamos seguir os passos:

1. Slices

Com a arte já construída no Fireworks, o procedimento agora é a criação das tabelas, que são representadas por “slices”, e que vão automaticamente “repicando e otimizando” a criação das tabelas, cada slice (fatia) tem um nome próprio, nas próximas matérias acompanhe como ele pode ser configurado para exportar determinada facção do arquivo em JPG, outra parte em GIF, outra em PNG, isso, num só procedimento de exportação.

2. Exportar ou publicar

Com os slices configurados, a exportação é feita pelo comando “File/Export preview”, nessa tela agora demonstrada, o principal comando é o formato de saída do arquivo (JPG, GIF…), configure o documento de acordo com a necessidade de cores, dê sempre preferência ao formato GIF com a média de 64 cores para não sobrecarregar o arquivo, em seguida clique no botão “Export”.

Nessa última tela, temos as referências de salvamento, escolha um local de fácil acesso para o salvamento e selecione os seguintes parâmetros:

a. Nome do arquivo: teste.html;
b. Salvar como: HTML and images;
c. HTML: export HTML files;
d. Slices: export slices;
e. Include areas without slices;
f. Put images in subfolder.

O diretório padrão de salvamento das imagens é “images”.

Importante: Caso nunca tenha clicado no botão “options” ao lado direito dessa janela e configurado as opções, deve fazê-lo agora para gravar algumas configurações avançadas permanentemente e extremamente necessárias, são elas:

GENERAL
extension = .html
TABLE
Space with = Nested Tables - no spacers
Cell color = nada
Contents = Non-breaking spacer
DOCUMENT ESPECIFIC
Botão “SET DEFAULTS” (para gravar permanentemente as configurações)

Essas configurações, modificam completamente a forma de que o documento será exportado e gerado em HTML, no modo original do Fireworks, ele cria pequenas imagens de 1px de espaçamento, utilizadas para controlar o tamanho das tabelas geradas, mas que tem um resultado terrível na reedição do HTML no Dreamweaver.

Com as novas configurações, o problema é eliminado, são geradas tabelas puras, sem impecílios para reedição e manipulação de objetos no HTML.

Clique no botão “salvar” para finalizar a exportação e não feche o Fireworks.

3. No Dreamweaver

Abra o arquivo “teste.html” gerado anteriormente…

… atribua na imagem “fireworking”, um behavior (comportamento) de “open browser window”, configure-o para abrir “teste2.html, 200px de largura e altura, nome da janela “teste2″”…

O evento do behavior deve ser no “onMouseUp” (quando o mouse subir).

Salve o documento e teste o arquivo no navegador pressionando F12.

4. Trocar a cor

Mantenha seu Browser de Internet aberto, e feche o Dreamweaver.

Retorne ao Fireworks, e troque a cor do fundo do trabalho à seu gosto “Modify/canvas color”.

5. Exportar novamente

Novamente vamos Exportar o arquivo, “File/Export Preview”, configure o tipo de saída de imagens, clique no botão “Export” novamente, e na última tela, onde configura-se o local da exportação, vamos alterar os seguintes itens:

a. Salvar: selecione a pasta “images” desta vez;
b. Nome do arquivo: teste;
c. Salvar como: images;
d. Slices: export slices;
e. Include areas without slices.

O que foi feito acima, é dizer ao Fireworks exportar somente as imagens recortadas nos slices diretamente dentro da pasta “images”, substituindo com absoluta exatidão de nomes um número ilimitado de imagens simultaneamente.

6. O navegador

Na tela de seu navegador ainda aberto:

Simplesmente atualize a tela (Ctrl+R) e veja o resultado.

Uma ação que demoraria horas, não foi suficiente nem para ocupar mais do que 5 minutos de seu dia, isso foi possível graças aos recursos disponíveis no Fireworks.

Caso queira tirar a prova, abra o arquivo novamente no Dreamweaver e constate, o botão “fireworking” ainda contém o behavior intacto.

Dicas:

a. Você pode facilmente inserir um slice sobre uma figura ou um bloco de texto qualquer, basta clicar com o botão direito sobre o item, e ir até a opção “insert slice”, pronto… rapidinho e sem sofrimento;

b. Você pode fazer o procedimento acima (inset slices) em várias imagens ao mesmo tempo, o Fireworks ira lhe dar uma caixa de diálogo com a questão: “Multiples slices or single slice?”, responda que é MULTIPLE que o fireworks dá conta do recado;

c. Um slice pode ser perfeitamente duplicado, basta arrastá-lo apertando o ALT;

d. O slice possui uma camada ou layer especial, é chamada de” Web Layer” e pode ser visualizada no painel Layers (window/layers), é sempre a primeira de todas, e pode também ser travada e ocultada;

e. Uma página toda dividida em slices, permite um melhor carregamento e a simulação de mais rápido, e ainda altera a seqüência de carregamento habitual “de cima para baixo” para facções do arquivo, vale a pena testar!

Autor/fonte: Eduardo Carrega