Conceitos Visuais

Hoje muitas pessoas que desenvolvem conceitos visuais (layouts) no Fireworks tem
dificuldade de montá-las depois em um editor html e integrar códigos/imagens. No
Fireworks é possível definir Slices (fatias) que podem ser configuradas para que, depois
da exportação, essas fatias se tornem regiões editáveis dentro de um editor html como,
por exemplo, o Dreamweaver.

Esta maneira de exportação é a mais utilizada para quem conhece apenas o Fireworks e
não sabe trabalhar com tabelas e camadas em um editor html.

Podemos criar uma slice(fatia) de três maneiras. A primeira é clicando com o botão
direito do mouse em cima de um objeto no palco e depois clicando em "Insert Slice"
(Inserir Fatia). A segunda seria usar as teclas de atalho "Alt + Shift + U" quando o
objeto estiver selecionado. E a terceira é utilizando as ferramentas na "Tool Bar" (Barra
de Ferramentas) veja:

Com a "Slice Tool" podemos criar slices no formato quadrangular é só clicar e arrastar
em cima do local onde desejar. E com a "Polygon Slice Tool" podemos criar slices de
forma livre, clicando ao redor do local onde deseja a slice. Essa forma é bem útil para
definir links em regiões de mapas.

Quando criamos uma Slice, nossa barra de ferramentas fica da seguinte forma:

Nomes das imagens:

Por padrão, as imagens das Fatias exportadas pelo Fireworks vem com nomes do tipo
“index_r1_c1”. Esse tipo de nome pode atrapalhar sua organização fazendo com que
você se atrapalhe depois. A solução é renomear cada slice (fatia), veja:

Antes
 Depois

Type (Tipo da Fatia)

Podemos escolher dois tipos de slice: Image ou HTML. Se escolher Image estaremos
exportando esta fatia como uma imagem e logo abaixo podemos escolher com qual o
tipo de imagem aquela slice sera exportada. Veja:

Recomendo que use formatos Gifs WebSnap 128 para objetos vetoriais criados com as
próprias ferramentas do Fireworks, ecxeto degrade. E JPEG Better Quality para
imagens Bitmaps e Degrade. Você sabendo definir bem os tipos terá uma melhora muito
grande em relação aos tamanhos de arquivos.

Se desejar escolher HTML, criará uma região editável para que, ao exportarmos para
um editor HTML, poderemos digitar ou inserir códigos naquela área. Logo abaixo
aparecerá um botão chamado "Edit". Clicando nele poderemos digitar códigos e digitar
algum texto dentro da fatia. Os códigos só irão aparecer quando exportarmos como
HTML e Images, que iremos ver mais adiante, mas em todo caso eu não recomendo
utilizar este editor.

Cor das Slices (Fatias)

Ao lado do type temos uma caixa para escolher individualmente as cores de cada fatia.
É bastante útil utilizar cores difirentes da cor do objeto para uma melhor organização.
Por padrão o Fireworks define essa cor como verde.

Link

Na opção link podemos definir um link para uma determinada fatia. Ele só irá funcionar
quando exportarmos como HTML e images.

Alt

Na opção Alt podemos digitar uma descrição que vai aparecer quando a pessoa passar o
mouse por cima da fatia.

Target
Na opção target iremos selecionar um alvo para o link, ou seja, o local onde ele irá abrir.
Exemplo: _blank fará com que o link abra em uma nova janela. None fará com que o
link abra na mesma janela.

Veja um exemplo de um layout fatiado:

Perceba que ele possui algumas colunas em branco, isso é por que não foi definida
nenhuma fatia nessas colunas. Isso fará com que ele, ao ser exportado, gere imagens
desnecessárias no local dessas colunas fazendo com que o site fique mais pesado.
Recomendo que, no local dessas colunas, vocês insiram uma fatia do tipo HTML. Veja
como ira ficar:

Depois de todo layout devidamente fatiado, vamos agora realizar o trabalho de

exportação, para isso clique no menu "File>Export" ou pressione "Ctrl + Shift + R".
Vocês verão o painel Export e deverão configurar as opções como mostra a imagem
abaixo:
Em "Nome do arquivo" você digita um nome qualquer para seu projeto. Em "Salvar
com o tipo" selecione "Html and Images" para que o Fireworks exporte todas as
imagens e todos os códigos caso se houver. Por exemplo, algum menu rollover que são
gerados scripts ou algum código introduzido no editor da fatia html. Em "Html"
selecione "Export HTML File" para que seja gerado o arquivo html do projeto. Em
"Slices" selecione "Export Slices" para que todas as fatias sejam exportadas. Selecione a
opção "Put images in subfolder" para que as imagens continuem salvas em uma
subpasta e defina esta pasta clicando no botão Browser. Isso serve para organizar
melhor seus arquivos.

Agora basta você escolher uma pasta e clicar no botão "Salvar". Você acaba de exportar
seu layout para montar o site. Agora vá até o Dreamweaver e clique no menu "File >
Open" e abra o arquivo .html que foi gerado pelo Fireworks. Todas as Slices (Fatias) do
tipo Html que você definiu no Fireworks serão definidas como células vazias e editáveis
no Dreamweaver. Dentro delas você poderá por todo seu conteúdo de textos, códigos,
imagens, animações, etc. Todas slices (fatias) do tipo Image que você definiu no
Fireworks ficarão como imagens dentro de células no Dreamweaver.

Vejam a imagem de um arquivo html exportado do Fireworks e aberto no Dreamweaver

como falado acima:
As células são classificadas com as bordas na cor azul e a tabela com a cor verde. Caso
seja necessário, vocês poderão selecionar as células e excluí-las, criando no local delas
várias outras células.