Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Fala pessoal!

Mostraremos aqui como exportar arquivos HTML no Fireworks com layers ao invés de Tabelas. Este recurso é conhecido como Camadas CSS.

O que são Camadas?

Uma camada é um recipiente HTML que pode ser posicionado em um lugar exato na janela do navegador. Camadas podem conter texto, imagens, plug-ins e até mesmo outras camadas. Enfim, tudo o que você pode colocar em um documento HTML você pode colocar em uma camada.
Layers(Camadas) são um recurso de HTML dinâmico suportados por browsers 4.0 ou posteriores. Browsers antigos exibem conteúdo de camadas sem posicionamento. O Microsoft Internet Explorer e o Nestcape Navigator suportam a especificação de Cascading Style Sheet (CSS) para layers.

Para que usar camadas?

Camadas são úteis para colocar ilustrações uma em cima da outra, fazê-los sobrepor ou usar recursos de animação com DHTML, que podem ser feitos facilmente na Timeline do Dreamweaver.


Após as explicações, siga os passos abaixo para usar o recurso CSS Layers. Vamos lá!

1-) Abra um arquivo do fireworks (*.png)
2-) Nossas CSS LAYERS, serão as layers do fireworks, separe seus objetos do jeito que quiser. Não se esqueça de colocar um nome sem caracters especiais e espaços. Pois este nome é o mesmo usado nas Camadas CSS.
3-) Feito isso, vá até File>Export, e em Save as, selecione CSS Layers (.htm). Veja a figura:


Clique aqui para ver a imagem no tamanho original

Nota: Repare que em Source você tem outras opções como Fireworks Frame, Fireworks Slices, você poderia no lugar de separar os objetos em Camadas, separá-los em Slices ou até mesmo Frames.

Pronto! Nossas Camadas CSS estão prontas, agora, vocÊ pode abrir este arquivo no Dreamweaver, e utilizar suas behaviors nesses layers.

Obrigado pelo apoio de todos, e continuem visitando, mandando e-mails, postando mensagens no fórum!

Abraços!