03/03/2008 - 14:43 > 20.688 Visualizações > 60 comentários

Slice tool – Fatiando um layout pelo Fireworks e importando pelo Dreamweaver

Olá.
Enfim, saiu o que muitos ansiosamente queriam e precisavam…
Eis a importantíssima vídeo aula ensinando como fatiar um layout pelo Fireworks e importa-lo pelo Dreamweaver.

Como falei na vídeo aula, essa não é a maneira mais correta para se desenvoler uma página usando Fireworks e Dreamweaver. Claro que o processo de criação pelo do layout é correto e a utilização do slice tool também, mas existem outras maneiras de optimizar esse processo, deixando a página final mais leve e com menos imagens pesadas, usando a aplicação de CSS+Backgrounds+imagens mais leves, etc…

Mas vamos deixar isso para as próximas vídeo aulas!
Espero que gostem e que o material preparado possa ser de grande valia para vocês.

Assista à vídeo aula

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

60 respostas para 'Slice tool – Fatiando um layout pelo Fireworks e importando pelo Dreamweaver'

Regis Diz:
5/03/08 às 18:08
boa tarde…
seria legal se vocês fizessem uma video aula ensinando a fazer um menu animado…ou no fireworks ou no dreamweaver!!
vlw…
Felipe Cardozo Diz:
5/03/08 às 19:24
Olá Régis.
Nas próximas vídeo aulas, iremos ensinar a fazer menus com efeitos com o Fireworks e o Dreamweaver…

Obrigado por visitar o mx.

Abçs
Israel C. Castiel Diz:
6/03/08 às 19:02
O vcs do mxmasters.com estão de parabéns, são muito legais os vídeos de vcs vale a pena mesmo até pagar por um dvd exclusivo ensinado dicas legais como essas, valeu até mais.
Felipe Cardozo Diz:
6/03/08 às 19:19
Olá Israel.
Obrigado pelo elogio e sua visita ao mx.
Nós estamos nos preparando com as ferramentas de edição de vídeos e quem sabe, poderemos fazer materiais mais especiais e principalmente, gratuitos.

Abraços!
Parabens Pelo Slice Tool Diz:
18/03/08 às 20:59
Muito bem explicado a video aulo
porém fiquei curioso, pois vc diz que não é ou seria a maneira mais correta

qual Seria, Já existe este videoAula

Araços, Harley Guimaraes
Felipe Cardozo Diz:
18/03/08 às 22:32
Harley, obrigado pelos elogios!

Estou preparando a vídeo aula tirando esta dúvida e mostrando como se utiliza corretamente as fatias do Fireworks.

Mas antes, é necessário aprender CSS+Tableless e essas vídeo aulas estão no ar já.

Abçs
Robson Diz:
20/03/08 às 11:26
Muito Bom, todas as videos aulas são ótimas, com uma didática perfeita!!!!..Parabéns rapiziada do mxmaster..e Obrigado!!!..um abraço!!!
Felipe Cardozo Diz:
20/03/08 às 13:41
Robson, seja bem vindo ao MX e volte sempre!

Obrigado pelos elogios!

Forte abraço.
leo bianchi Diz:
21/03/08 às 4:46
tenho um portal de anuncios aqui no RIO DE JANEIRO E ESTOU APRENDENDO MUITO COM AS SUAS VIDEO AULAS TEM COMO TU MANDAR PRA MIM OS ARQUIVOS PNG . PRO MEU EMAIL
DESDE AGRADEÇO E PARABENS PELO SEU TRABALHO SHOW DE BOLA VALEU
Felipe Cardozo Diz:
21/03/08 às 5:33
Olá Leo.
Obrigado pela visita ao MX. Volte sempre!

A maioria dos arquivos PNG trabalhados é colocado nos posts para downloads.

No caso deste layout que você quer, você pode fazer o download no link abaixo:

http://www.mxmasters.com.br/download/10/
WILLIAM Diz:
31/03/08 às 13:55
OPA VAMOS CONFERIR E É MUITO IMPOTNATE MESMO ESSA VIDEO AULA VALEU
felipe felix Diz:
19/04/08 às 20:21
fala meu chara felipe cardoso!eu estou com um probleminhacara, não sei se posso postar ele aqui.É sobre a resolução do site que vc deu no video (779×900)eu faço o site nesta proporção e ficar um monte de tela branca emvolta do site quando eu vou prever no browse,num fica certinho…oque sera isso?
desde ja agrdadeço!
Felipe Cardozo Diz:
19/04/08 às 22:43
Felipe, tenho que ver isso!
Manda um print para contato@mxmasters,com.br

Fico no aguardo!
felipe felix Diz:
21/04/08 às 18:22
Felipe acho que resolvi o problema de um jeito meio estranho.Bom eu fui almentando a resolução do site até achar uma config boa dai cheguei a 1000X768 que preenchei toda atela e naõ apareceu barra de rolabem la em baixo.acho que por hora ta bom não é?
Felipe Cardozo Diz:
21/04/08 às 18:38
Se você aumentar o tamanho da largura do seu site em pixels, se você diminuir a resolução da tela do seu pc: 800×600, por exemplo, a barra de rolagem irá aparecer.

Ela só não aparece se você fizer a dimensão com 100%, conforme falei anteriormente..

Abçs
Felipe Diz:
2/05/08 às 17:25
Felipe Cardozo
Parabens pela sua video aula
mais fui assistir ela já era tarde!
O Youtube esta fora do Ar

Mais Valeu!
Mário Diz:
24/05/08 às 13:14
velho blz?
ótima vídeo ;]
eu uso mais o photoshop.. será que tem como você fazer uma vídeo aula fatiando um lay com ele?
grato,
falows.
Wagner Fernandes Diz:
15/06/08 às 14:42
Simplesmente uma iniciativa excelente. Parabéns e que continuem assim.
Joacir Diz:
17/06/08 às 21:07
Veiu muito obrigadoooo era issu memo que eu estava precizando Cara eu n so gey mas eu te amoooooooo
nota 10000000000000000000000000 para equipe do MXMASTER
José Carlos Diz:
18/06/08 às 13:57
não tem mais o link para download. porque.
Felipe Cardozo Diz:
19/06/08 às 2:06
José, como melhoramos a qualidade das vídeo aulas colocando na vídeolog, entendemos que não há a necessidade de disponibiliza-las para download. Até porque isso era um fator mais trabalhoso para nós e como outros integrantes do mxmasters estão chegando, isso poderia se tornar algo difícil de se controlar.

[]´s
diogo Diz:
2/07/08 às 8:47
Bom dia Felipe Cardozo.
Cara estou com uma duvida cruel.
Quando estou desenvolvendo um layout em fireworks , quando utilizo gradiente, e vou visualizar o mesmo no IE. fica tipo distorcida a imagem , fica tipo varios quadrados , vc sabe o q é , gostaria q me ajudasse …ate mais e parabens pelas aulas
Jb Rios Diz:
3/07/08 às 10:26
Cara… Muito Boa a video aula, é reforço a mais no curso que estou fazendo de web design, parabéns!!! Sempre estarei aqui tirando dúvidas. Abraçooo..
Felipe Cardozo Diz:
4/07/08 às 2:15
Olá Diogo, tudo bem?

Isso acontece porque você está visualizando como gif. Para poder visualizar como jpg, você deve selecionar a opção: JPEG – Better Quality no picklist abaixo das opções de palco na parte inferior central do seu Fireworks.

Depois, basta apertar F12 e pronto.

[]´s
andrei Diz:
2/09/08 às 14:20
salve grande felipe cardozo!!! brother eu assisto suas video aulas e nessa eu fiquei curioso pra saber qual é a forma mais correta de fatiar e colocar no dreamweaver,sou novo no ramo de webdesign e tenho essa duvida…desde já eu agradeço, e vcs estão de parabéns abçs
marcio Diz:
14/09/08 às 11:28
Mto bom o post!!!Eu fatiei o layout pelo fireworks e mandei pro dreamweaver,mas qdo abri no dreamweaver os menus pop up q havia feito no fireworks nw estavam funcionando!!!Tem como eu importar os efeitos pro dreamweaver???
César Augsusto Diz:
19/09/08 às 15:43
Legal a Video-Aula Ajuda Muito quem tá começando como eu
Sérgio Aqueri - São Paulo Diz:
25/09/08 às 10:08
Muito interessante esta aula, nota 10, já estou praticando esta ferramenta, parabéns mais uma vez Felipe

Abs
Giuliano Pelaquin Diz:
27/10/08 às 9:17
Fala Felipe. Não sei se este é o tópico mais indicado para essa dúvida mas tem tudo a ver com slice tools. Aliás este site (www.midiaemcinema.com.br) eu fiz totalmente com a ajuda de vocês também. Estudei praticamente todas as vídeo aulas relativas a fireworks para desenvolvê-lo. Enfim, fiz o recorte dos slices, importei no dreamweaver, ficou perfeito. Na internet explorer 6, 7, google chrome funcionam normalmente. Mas no Mozila Firefox (versão 3.0.3) eles saem do lugar. O que pode ser isso? Obrigado e forte abraço a toda equipe do MX Masters e parabéns pelo terceiro lugar do peixe grande!
Sidnei Fernando Diz:
2/12/08 às 1:20
Muito legal ter encontrado o site de vcs, eu ja estava desanimado em querer aprender a fazer websites, mas assim que encontrei o site na primeira semana ja comecei a desenvolver layouts no fireworks e de forma ate diria arrojada com as aulas do Felipe, coisa que sei la, mas acho que a forma que o MXMASTER passa o aprendizado de uma forma que todos que querem conseguem.

Parabens
MXMASTER
caio rodrigues Diz:
12/12/08 às 2:06
cada vez com aulas mais interessantes
continue assim felipe cardozo
Jobes Diz:
5/03/09 às 0:16
gostaria de saber qual é a melhor forma de exportar do fireworks para o DW?
Grato,
Jobes
Alan Queiroz Diz:
26/03/09 às 10:33
Eu fiz todo o fatiamento como vc ensinou, quando coloco o caminho do link na imagem e mando um F12, não acontece nada, apenas fica sublinhada a imagem quando clico em cima del,o que estou fazendo de errado?
abraço
Felipe Cardozo Diz:
26/03/09 às 12:12
Alan. É o caminho das imagens. Dá uma conferida!

[]´s
Alan Queiroz Diz:
27/03/09 às 8:53
Eu fatio, e exporto como html e imagens.
daí abro dentro do dreamweaver sem colocar em tabelas, simplismente abro o que exportei do Fire, o arquivo vem inteiro, quando coloco o link e dou F12, o mesmo não funciona.
Por outro lado, quando insiro as tabelas e coloco o caminho do link, o mesmo caminho do outro, aí vai direitinho.
eu tenho que fazer a tabela obrigatoriamente, ou posso fazer os links direto da exportação do Fire?
Abraço
Michael Diz:
31/03/09 às 9:51
Cara sera que vc poderia me passar o ink para Dawnloand deste video valeu
Alan Queiroz Diz:
1/04/09 às 20:52
Felipe, entendeu?
sandro Diz:
6/05/09 às 12:34
Aí felipão vc é o cara, quero parabenizá-lo pelas suas videos aulas, tiro muito proveito delas, gostaria se possível que vc mostrasse como podemos fazer menus e botão no firewors, obrigado desde já.
abraços e continui com seu progresso.
Anderson Diz:
22/05/09 às 0:01
Ola gostaria de saber como posso coloca um iframe ne um sitt e hospeda esse inframe ja tentei muitas vezes eu gostaria que podece me informa numa video aula obrigado
Rodrigo Diz:
22/05/09 às 11:37
muito bom,
está de parabéns felipe
CLayton Prebelli Diz:
30/05/09 às 2:59
Kra valeu a aula, ajudou muito mas o seguinte, como faço para o conteúdo ser o frame que será mudado a cada link? tipo clicar no menu e só mudar o conteúdo. Vl
Wemerson Ramos Diz:
21/06/09 às 14:46
Bixu valeu pela dica com ela ganhei 900,00 criando um site aqui na minha cidade pra uma loja… valeu.
Luis Carlos Belém do Pará Diz:
7/07/09 às 11:52
muito boa a aula mas comoe que eu faço pra lincar de uma página para outra falew galera
SL Diz:
1/08/09 às 15:01
Otimo tutorial
=)
uma pergunta, como centraliza o site na pagina?
michel Diz:
25/08/09 às 20:53
fala Felipe… cara fui abaixar esse link mais nao deu certo… joga pra tela principal ele… pois qeria abaixar.

http://www.mxmasters.com.br/download/10/
Henrique Diz:
29/08/09 às 22:58
Olá Ricardo,

Muito bacana esta aula!
so gostaria q vc me desce uma luz.
no meu menu eu coloquei aquela opção de
rolover image e quando fui vizualizar ta dando um espaço na borda da tabela e ja esta como 0 e mesmo assim não some o espaço oq faço?
veja no site.

Obrigado.
Dister Nunes / 23 anos / Rio de Janeiro Diz:
26/09/09 às 22:25
E aí felipe, tudo beleza?

Parabéns pelas vídeo aulas, parabéns por dedicar esse tempo à gente ^^ vocês viraram um tipo de “tipo” de sites, do mesmo jeito que existem sites de pesquisa, entreteinimento e comunicação, vocês viraram um tipo de exemplo! ^^ Parabéns!
Caio Menegale Diz:
23/10/09 às 13:09
Muito bom felipe! Eu estava até com um pouco de duvida de como tirar a borda da tabela do layout. Brigadão ae, continue assim!
anderson Diz:
28/10/09 às 15:47
cara essa foi a video aula parabens essa me foi muito utillllllll
Carol Bugulin Diz:
5/11/09 às 11:53
Excelente aula Felipe! Tô começando a mexer com essa parte de design agora, e vendo ferramentas de css. Você tem uma previsão de qndo vai colocar a aula de slice pra isso?
Obrigada
David CHC Diz:
5/11/09 às 11:56
@Carol, existe um mini-curso do Fireworks CS4 no Vídeo Aulas Brasil: http://www.videoaulasbrasil.com.br/categoria/fireworks/
daniel Diz:
5/11/09 às 22:03
ola! gostaria de saber como se faz aqueles zoom de imagem?
Augusto Gabriel Diz:
23/11/09 às 17:55
Felipe,

Tudo que eu consegui, até hoje, foi neste Site e suas Aulas, estava procurando isso e agora ja consegui fazer o que queria…

Muito obrigado Mesmo!!
Eduardo Diz:
1/01/10 às 9:27
Muito boa a Video aula, me ajudou muito….mas ta acontecendo uma coisa que me deixa em duvida…é o seguinte: depois que eu fatio e passo para o DeamWeaver tudo bem, mas quando eu salvo apertando F12 e vou visualizar como ficou a pagina no browser, ela aparece no canto e não no meio, como mostrou na video aula, queria saber se isso interfere na hora de publicar o meu site ou não tem nada a ver!? ah utilizo o Mozilla (nao sei se isso tem alguma diferença)
Minha unica duvida XD, no mais otima video aula e parabens.
Gustavo Simões Diz:
1/03/10 às 23:27
Felipe Cardozo, venho assistindo as suas vídeos aula e que me ajudando muito. Mas venho trabalhando na construção de uma Web Radio a tempo, e tenho algumas duvidas que você como bom entender de Fireworks e Dreamweaver talvez poderá me ajudar.

O que seria um streaming ? e pra que serviria ? Seria necessário por um streaming na minha web radio ?

Como Fatiar um arquivo pelo fireworks sendo que os link, que crie no fireworks na hora que eu fosse passar para o dreamwever os link permanecessem ?

E Como criar um botão de Play, Stop e botão de aumentar e diminuir o volume na minha pagina, exemplo : Criar os botões no meu site e quando o visitante abrir a radio já tocar e que esse botões estejam funcionando, pra que ele controle a radio por ali ?.

Desde Já Agradeço.
David CHC Diz:
2/03/10 às 8:30
@Gustavo Simões, Vou tentar te ajudar:

O streaming é uma forma de distribuir conteudo (video e audio) em pacotes. Caso não tenha, o usuário tem que baixar todo o conteudo, e dpois assistir/escutar, com streaming são enviado os dados e vai guardando no buffer, quando “enche” um pouco o buffer, o usuário começa assistir/escutar. (mais sobre streaming – http://www.criarweb.com/artigos/214.php)

Se precisa de um servidor com streaming seria o ideal pra vc poder fazer esse tipo trabalho de trabalho. Em hospedagem com streaming existe tutoriais como vc pode criar um rádio online. (aqui tem ensinando a fazer winamp , pode te dá uma ideia – http://www.babooforum.com.br/forum/index.php?showtopic=141574)

Sobre fatiar, vc tem q exportar como html, se for só como imagem, irá perder o link mesmo.

Isso vc vai criar em flash, existe video aulas sobre play em flash aqui no MxMasters, q poderão te ajudar. No final vc vai apenas colocar a url q eles vão disponibilizar para o serviço no play.
Renan Diz:
4/03/10 às 21:27
Muito bom me ajudo mesmo, só tenho uma duvida!! há necessidade de criar um botão (F8) no Fireworks para o menu , ou apenas fatiar o menu????? vlw
Regis V Santos Diz:
19/03/10 às 10:44
Ola Felipe. Parabens pela video aula. Me esclareceu mta coisa. Agora eu gostaria de saber qual eh o proximo passo? Como faco para linkar as fatias no dreamweaver.
Eu gostaria de saber qual eh o processo usando templates? Pq pra mim eh mais facil, ja que faço somente o modelo e depois vou usando as copias.

Ve isso pra gente. Bom, se vc ja postou essa video aula, me manda o link pq eu nao consegui encontra-la aqui no site ok?

Um abraço,

Régis
sabrina Diz:
9/08/10 às 10:50
Oi Felipe , estou precisando muito de sua ajuda , estou apredendo a criar links , fatiar layout,
So que na sala de aula tudo se torna mais fácil , pois eu tenho o prof para me ajudar em qualquer duvida que eu tiver , pois então quando cheguei em casa fui tentar refazer oque fiz na sala de aula que foi fatiar o layout ,para se transformar em site, quando finalizei e apertei para abrir o site na internet para ver se dava certo , so abriu a pagina inicial e os topicos quando eu clicava ao invés de aparecer os conteúdos , não apareceram , to muito confusa , não acho tutoriais explicando , mais então tem como me ajudar a dizer oque eu fiz de errado e oque eu tenho que fazer e se vc solber de um site que tenha conteúdos legais ,me passa , ja agradeço desde ja , Beijos.
sabrina Diz:
9/08/10 às 10:53
OLha Felipe seus videos me ajudaram muito !