iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 28/07/2003 - 01:59 - Por Felipe Macena
Seções relacionadas:

• Fireworks

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 1 comentários

Salve Comunidade. Veremos esta semana um assunto muito solicitado pelos leitores: a integração Fireworks + Dreamweaver. Vamos exportar um trabalho do Fireworks para o Dreamweaver.

Primeiramente baixe aqui o nosso exemplo em PNG.

Vamos dividir o nosso layout em quatro fatias antes de exportá-lo para o Dreamweaver. As fatias estão dispostas na imagem abaixo.

Utilizando a ferramenta fatiar (K) , desmarque conforme a imagem ao lado para que possamos editá-la no Dreamweaver.

No topo do lado direito da janela ativa que você está trabalhando, você encontrará um botão de exportação rápida. Clique nele (imagem abaixo) e aparecerá outra janela de opções.

Escolha Dreamweaver e logo após Exportar HTML...

Na janela de opções Exportar você deve dar um nome ao seu documento. Na opção Save as type, escolha HTML e imagens, onde tem HTML escolha Exportar arquivo HTML e em Fatias, escolha Exportar fatias.

Abra o Dreamweaver e vamos montar o nosso layout para que possamos trabalhar com ele.

Primeiramente vamos inserir uma tabela mãe para que a nossa página fique sempre alinhada no centro da página do usuário indenpendente do tipo de resolução que ele está usando.

Na aba inserir, ou no menu Inserir, clique em inserir tabela ou diretamente no atalho (CTRL+ALT+T). Utilize os parâmetros da imagem abaixo na janela da tabels que abriu apos o comando acima.

Alinhe sua tabela ao centro. Agora vamos inserir o nosso arquivo do Fireworks para que possamos editá-lo. Na aba inserir, clique no ícone do Fireworks

Vá até onde voce salvou sua imagem expostada do Fireworks. Salve o documento.

Clique na parte da imagem onde vai conter o seu conteudo, e vamos ajustar nossa imagem para que ao deletar as partes fatiadas, o nosso trabalho não fique com falhas.

Após clicar na opção <table>, converteremos nossa tabela em pixel

Uma vez transformado em pixel, vamos deletar as fatias do conteudo e dos links.

Aplique uma cor de fundo (#CCCCCC) em ambos os espaços que ficaram na cor branca

.Selecione a fatia de número 1, delete e escolha inserir imagem de fundo atalho (CTRL+ALT+I). Na janela que abriu, vá até a imagem de fundo, que no nosso caso foi trabalho_r2_c1.gif.

Clique em Ok. Pronto agora repita o mesmo procedimento nas fatias 3 e 4. Com isso chegamos ao final da nossa décima coluna. Um forte abraço e até semana que vem.

Todos os artigos de Felipe Macena

20/02/2004 - Fireworks x Director 02/02/2004 - Efeitos luminosos 16/01/2004 - Efeito Plástico 06/01/2004 - Integração Fireworks x Director 17/12/2003 - Integração Fireworks e Photoshop 11/12/2003 - Desmistificando Exportação 03/12/2003 - Eye Candy 4000 27/11/2003 - Otimização de Imagens 20/11/2003 - Integração - Fireworks e Flash 13/11/2003 - Album com Thumbs - Parte 02 05/11/2003 - Álbum de fotos com thumbs 30/10/2003 - Camuflando JavaScript 23/10/2003 - Efeito Reflexo 14/10/2003 - Mp3 Player - Parte 03 08/10/2003 - Mp3 Player - Parte 02 01/10/2003 - Mp3 Player - Parte 01 24/09/2003 - Curvas 16/09/2003 - Pixel Art 08/09/2003 - Ambiente 3D 04/09/2003 - Tradução do Firewoks MX 27/08/2003 - Fireworks 2004 e combinando traçados 19/08/2003 - Novas texturas 13/08/2003 - Processo em lote - 02 05/08/2003 - Processo em lote 28/07/2003 - Integração Fireworks + Dreamweaver 22/07/2003 - Site completo pelo Fireworks - Trabalhando com frames 15/07/2003 - Site completo pelo Fireworks - Banner animado 07/07/2003 - Site completo pelo Fireworks - Parte 02 30/06/2003 - Site completo pelo Fireworks 25/06/2003 - Tracejados 17/06/2003 - Menu drop down 09/06/2003 - Botões rollovers 02/06/2003 - Mini botões 27/05/2003 - Um novo botão

1 comentários publicados

• 1. Duvidas

  Quinta-feira, 22/04/2004, por Caio Mancini

  Não entendi o porque de retirarmos uma imagem e colocarmos a mesma imagem em seu lugar, como foi feito no ultimo passo deste tutorial.
  Pode me explicar!¿

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Felipe Macena é professor e trabalha com Macromedia Fireworks desde 1998.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

internet celular microsoft ti youtube apple windows iphone crescimento mobile publicidade 3g gerência php lançamento yahoo design linux seguranca desenvolvimento tecnologia google brasil mercado photoshop web

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!