MX Masters

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

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

3 votos

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'

  1. RegisNo Gravatar Diz:

    boa tarde…
    seria legal se vocês fizessem uma video aula ensinando a fazer um menu animado…ou no fireworks ou no dreamweaver!!
    vlw…

  2. Felipe CardozoNo Gravatar Diz:

    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

  3. Israel C. CastielNo Gravatar Diz:

    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.

  4. Felipe CardozoNo Gravatar Diz:

    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!

  5. Parabens Pelo Slice ToolNo Gravatar Diz:

    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

  6. Felipe CardozoNo Gravatar Diz:

    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

  7. RobsonNo Gravatar Diz:

    Muito Bom, todas as videos aulas são ótimas, com uma didática perfeita!!!!..Parabéns rapiziada do mxmaster..e Obrigado!!!..um abraço!!!

  8. Felipe CardozoNo Gravatar Diz:

    Robson, seja bem vindo ao MX e volte sempre!

    Obrigado pelos elogios!

    Forte abraço.

  9. leo bianchiNo Gravatar Diz:

    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

  10. Felipe CardozoNo Gravatar Diz:

    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/

  11. WILLIAMNo Gravatar Diz:

    OPA VAMOS CONFERIR E É MUITO IMPOTNATE MESMO ESSA VIDEO AULA VALEU

  12. felipe felixNo Gravatar Diz:

    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!

  13. Felipe CardozoNo Gravatar Diz:

    Felipe, tenho que ver isso!
    Manda um print para contato@mxmasters,com.br

    Fico no aguardo!

  14. felipe felixNo Gravatar Diz:

    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 é?

  15. Felipe CardozoNo Gravatar Diz:

    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

  16. FelipeNo Gravatar Diz:

    Felipe Cardozo
    Parabens pela sua video aula
    mais fui assistir ela já era tarde!
    O Youtube esta fora do Ar

    :(

    Mais Valeu!

  17. MárioNo Gravatar Diz:

    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.

  18. Wagner FernandesNo Gravatar Diz:

    Simplesmente uma iniciativa excelente. Parabéns e que continuem assim.

  19. JoacirNo Gravatar Diz:

    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

  20. José CarlosNo Gravatar Diz:

    não tem mais o link para download. porque.

  21. Felipe CardozoNo Gravatar Diz:

    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

  22. diogoNo Gravatar Diz:

    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

  23. Jb RiosNo Gravatar Diz:

    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.. ;)

  24. Felipe CardozoNo Gravatar Diz:

    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

  25. andreiNo Gravatar Diz:

    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

  26. marcioNo Gravatar Diz:

    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???

  27. César AugsustoNo Gravatar Diz:

    Legal a Video-Aula Ajuda Muito quem tá começando como eu

  28. Sérgio Aqueri - São PauloNo Gravatar Diz:

    Muito interessante esta aula, nota 10, já estou praticando esta ferramenta, parabéns mais uma vez Felipe :)

    Abs

  29. Giuliano PelaquinNo Gravatar Diz:

    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!

  30. Sidnei FernandoNo Gravatar Diz:

    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

  31. caio rodriguesNo Gravatar Diz:

    cada vez com aulas mais interessantes
    continue assim felipe cardozo

  32. JobesNo Gravatar Diz:

    gostaria de saber qual é a melhor forma de exportar do fireworks para o DW?
    Grato,
    Jobes

  33. Alan QueirozNo Gravatar Diz:

    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

  34. Felipe CardozoNo Gravatar Diz:

    Alan. É o caminho das imagens. Dá uma conferida!

    []´s

  35. Alan QueirozNo Gravatar Diz:

    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

  36. MichaelNo Gravatar Diz:

    Cara sera que vc poderia me passar o ink para Dawnloand deste video valeu

  37. Alan QueirozNo Gravatar Diz:

    Felipe, entendeu?

  38. sandroNo Gravatar Diz:

    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.

  39. AndersonNo Gravatar Diz:

    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

  40. RodrigoNo Gravatar Diz:

    muito bom,
    está de parabéns felipe

  41. CLayton PrebelliNo Gravatar Diz:

    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

  42. Wemerson RamosNo Gravatar Diz:

    Bixu valeu pela dica com ela ganhei 900,00 criando um site aqui na minha cidade pra uma loja… valeu.

  43. Luis Carlos Belém do ParáNo Gravatar Diz:

    muito boa a aula mas comoe que eu faço pra lincar de uma página para outra falew galera

  44. SLNo Gravatar Diz:

    Otimo tutorial
    =)
    uma pergunta, como centraliza o site na pagina?

  45. michelNo Gravatar Diz:

    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/

  46. HenriqueNo Gravatar Diz:

    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.

  47. Dister Nunes / 23 anos / Rio de JaneiroNo Gravatar Diz:

    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!

  48. Caio MenegaleNo Gravatar Diz:

    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!

  49. andersonNo Gravatar Diz:

    cara essa foi a video aula parabens essa me foi muito utillllllll

  50. Carol BugulinNo Gravatar Diz:

    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

  51. David CHCNo Gravatar Diz:

    @Carol, existe um mini-curso do Fireworks CS4 no Vídeo Aulas Brasil: http://www.videoaulasbrasil.com.br/categoria/fireworks/

  52. danielNo Gravatar Diz:

    ola! gostaria de saber como se faz aqueles zoom de imagem?

  53. Augusto GabrielNo Gravatar Diz:

    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!!

  54. EduardoNo Gravatar Diz:

    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.

  55. Gustavo SimõesNo Gravatar Diz:

    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.

  56. David CHCNo Gravatar Diz:

    @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.

  57. RenanNo Gravatar Diz:

    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

  58. Regis V SantosNo Gravatar Diz:

    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

  59. sabrinaNo Gravatar Diz:

    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.

  60. sabrinaNo Gravatar Diz:

    OLha Felipe seus videos me ajudaram muito !

Deixe seu Comentário

Publicidade

www.mxmasters.com.br - todos os Direitos Reservados : Desenvolvido com Wordpress

Desenvolvido por David CHC e Felipe Cardozo